Render all gl scenes in one call

resources/gl_logo.js

@@ -1,7 +1,3 @@
-;(function(){
-"use strict"
-window.addEventListener("load", setupWebGL, false);
-
 var gl, program;
 var time_loc;
 var buffer;
@@ -11,7 +7,7 @@ var restart_anim = true;
 var last_started = 0;
 var loaded = false;
 
-var vert_src = `
+var logo_vert_src = `
 
 #version 100
 attribute vec2 in_Position;
@@ -24,7 +20,7 @@ void main() {
 
 `;
 
-var frag_src = `
+var logo_frag_src = `
 
 #version 100
 precision highp float;
@@ -210,12 +206,12 @@ void main()
 
 `;
 
-function reset_time() {
+function logo_reset_time() {
   restart_anim = true;
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL
-function loadTexture(gl, url) {
+function logo_loadTexture(gl, url) {
   const texture = gl.createTexture();
   gl.bindTexture(gl.TEXTURE_2D, texture);
   const level = 0;
@@ -260,13 +256,23 @@ function isPowerOf2(value) {
   return (value & (value - 1)) == 0;
 }
 
-function setupWebGL (evt) {
-  window.removeEventListener(evt.type, setupWebGL, false);
-  if (!(gl = getRenderingContext()))
+function logo_getRenderingContext() {
+  var canvas = document.querySelector("#logo-canvas");
+  canvas.width = 512;
+  canvas.height = 512;
+  var gl = canvas.getContext("webgl");
+  if (!gl) {
+    return null;
+  }
+  return gl;
+}
+
+function logo_setupWebGL() {
+  if (!(gl = logo_getRenderingContext()))
     return;
 
   var vertexShader = gl.createShader(gl.VERTEX_SHADER);
-  gl.shaderSource(vertexShader, vert_src);
+  gl.shaderSource(vertexShader, logo_vert_src);
   gl.compileShader(vertexShader);
   if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
     var err_str = gl.getShaderInfoLog(vertexShader);
@@ -275,7 +281,7 @@ function setupWebGL (evt) {
   }
 
   var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
-  gl.shaderSource(fragmentShader, frag_src);
+  gl.shaderSource(fragmentShader, logo_frag_src);
   gl.compileShader(fragmentShader);
   if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
     var err_str = gl.getShaderInfoLog(fragmentShader);
@@ -308,27 +314,27 @@ function setupWebGL (evt) {
   var pos_attr_loc = gl.getAttribLocation(program, "in_Position");
   gl.vertexAttribPointer(pos_attr_loc, 2, gl.FLOAT, false, 2*4, 0);
   gl.enableVertexAttribArray(pos_attr_loc);
-  var tex = loadTexture(gl, "logo_sdf.png")
+  var tex = logo_loadTexture(gl, "logo_sdf.png")
   var tex_loc = gl.getUniformLocation(program, "tex");
   time_loc = gl.getUniformLocation(program, "iTime");
   gl.useProgram(program);
   gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
-  gl.finish();
-
-  requestAnimationFrame(render);
 }
 
-function render(ts) {
-  if (!loaded) {
-    requestAnimationFrame(render);
+var initialized = false;
+
+function logo_render(ts) {
+  if (!initialized) {
+    logo_setupWebGL();
+    initialized = true;
+  }
+  if (!(gl = logo_getRenderingContext())) {
     return;
   }
-  if (!(gl = getRenderingContext()))
-    return;
   if (pending_disable_fallback) {
     document.getElementById("logo-canvas").style.visibility = "visible";
     document.getElementById("logo-fallback").style.visibility = "hidden";
-    document.getElementById("logo-canvas").onclick = reset_time;
+    document.getElementById("logo-canvas").onclick = logo_reset_time;
     pending_disable_fallback = false;
   }
   gl.clearColor(0, 0, 0, 0);
@@ -337,19 +343,7 @@ function render(ts) {
     last_started = ts;
     restart_anim = false;
   }
-  gl.uniform1f(time_loc, (ts-last_started)/1000.0);
+  gl.uniform1f(time_loc, (ts-last_started));
   gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_BYTE, 0);
-  requestAnimationFrame(render);
+  gl.finish();
 }
-
-function getRenderingContext() {
-  var canvas = document.querySelector("#logo-canvas");
-  canvas.width = 512;
-  canvas.height = 512;
-  var gl = canvas.getContext("webgl");
-  if (!gl) {
-    return null;
-  }
-  return gl;
-}
-})();

templates/template_index.html

@@ -369,6 +369,8 @@ if (platform != undefined) {
   }
 </script>
 
+<script type="text/javascript" src="gl_logo.js"></script>
+
 <script type="module">
 import * as THREE from 'three';
 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
@@ -407,14 +409,12 @@ camera.position.z = 0.65;
 camera.position.x = 0.12;
 
 var clock = new THREE.Clock();
-var render = function () {
-  requestAnimationFrame( render );
+var sphere_render = function () {
   var t = clock.getElapsedTime();
   var s = Math.sin(t * Math.PI / 50);
   sphere.rotation.y = (Math.PI/10) * s;
   renderer.render(scene, camera);
 };
-render();
 window.addEventListener('resize', function(){
     camera.aspect = canvas.offsetWidth/canvas.offsetHeight;
     camera.updateProjectionMatrix();
@@ -502,9 +502,7 @@ xbox_scene.add(point_light);
 
 xbox_camera.position.z = 0.65;
 
-var clock = new THREE.Clock();
 var xbox_render = function () {
-  requestAnimationFrame( xbox_render );
   var t = clock.getElapsedTime();
   var s = Math.sin(t * Math.PI / 50);
   if (xbox != null) {
@@ -515,7 +513,14 @@ var xbox_render = function () {
   }
   xbox_renderer.render(xbox_scene, xbox_camera);
 };
-xbox_render();
+
+var render = function () {
+  requestAnimationFrame( render );
+  sphere_render();
+  xbox_render();
+  logo_render(clock.getElapsedTime());
+};
+render();
 
 const controls = new ArcballControls( xbox_camera, xbox_renderer.domElement, xbox_scene );
 
@@ -532,7 +537,6 @@ window.addEventListener('resize', function(){
   }, false);
 </script>
 
-<script type="text/javascript" src="gl_logo.js"></script>
 <script type="text/javascript">
 function updateNavbarTransparency() {
   var nav = $(".navbar");