Merge pull request #95 from ux3d/fix/removeUIFromGltfView

removed canvas from GltfView (GSVN-199)
KhronosGroup · Jan 25, 2021 · 6431a18 · 6431a18
2 parents 2a78fb7 + 08caa8b
commit 6431a18
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 38 deletions.
diff --git a/app_headless/index.js b/app_headless/index.js
@@ -42,8 +42,7 @@ async function main()
     state.userCamera.fitViewToScene(state.gltf, state.sceneIndex);
     state.userCamera.updatePosition();
 
-    view.animate(state);
-    view.renderFrame(state);
+    view.renderFrame(state, width, height);
 
     let pixels = new Uint8Array(width * height * 4);
     gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

diff --git a/app_web/src/main.js b/app_web/src/main.js
@@ -13,7 +13,7 @@ async function main()
     const canvas = document.getElementById("canvas");
     const context = canvas.getContext("webgl2", { alpha: false, antialias: true });
     const ui = document.getElementById("app");
-    const view = new GltfView(context, ui);
+    const view = new GltfView(context);
     const state = view.createState();
 
     initDracoLib();
@@ -196,7 +196,18 @@ async function main()
         }
     };
 
-    await view.startRendering(state, canvas);
+    // configure the animation loop
+    const update = () =>
+    {
+        canvas.width = window.innerWidth - ui.getBoundingClientRect().width;
+        canvas.height = canvas.clientHeight;
+
+        view.renderFrame(state, canvas.width, canvas.height);
+        window.requestAnimationFrame(update);
+    };
+
+    // After this start executing animation loop.
+    window.requestAnimationFrame(update);
 }
 
 export { main };
diff --git a/source/GltfView/gltf_view.js b/source/GltfView/gltf_view.js
@@ -4,9 +4,8 @@ import { GL } from '../Renderer/webgl.js';
 
 class GltfView
 {
-    constructor(context, ui)
+    constructor(context)
     {
-        this.ui = ui;
         this.context = context;
         this.renderer = new gltfRenderer(this.context);
     }
@@ -16,26 +15,11 @@ class GltfView
         return new GltfState();
     }
 
-    updateCanvas(canvas)
+    renderFrame(state, width, height)
     {
-        if(this.ui !== undefined)
-        {
-            canvas.width = window.innerWidth - this.ui.getBoundingClientRect().width;
-        }
-        else
-        {
-            canvas.width = canvas.clientWidth;
-        }
-        canvas.height = canvas.clientHeight;
-    }
+        this.animate(state);
 
-    updateViewport(width, height)
-    {
         this.renderer.resize(width, height);
-    }
-
-    renderFrame(state)
-    {
 
         this.renderer.clearFrame(state.renderingParameters.clearColor);
 
@@ -50,6 +34,7 @@ class GltfView
 
         this.renderer.drawScene(state, scene);
     }
+
     animate(state)
     {
         if(state.gltf === undefined)
@@ -129,21 +114,6 @@ class GltfView
             transparentMaterialsCount: transparentMaterials.length
         };
     }
-
-    async startRendering(state, canvas)
-    {
-        const update = () =>
-        {
-            this.animate(state);
-            this.updateCanvas(canvas);
-            this.updateViewport(canvas.width, canvas.height);
-            this.renderFrame(state);
-            window.requestAnimationFrame(update);
-        };
-
-        // After this start executing render loop.
-        window.requestAnimationFrame(update);
-    }
 }
 
 export { GltfView };