feat: remove the need to use onCanvasReady

Author: jsulpis

lib/playground/src/pages/gpgpu/boids (static).astro

@@ -76,15 +76,19 @@ import Layout from "../../layouts/Layout.astro";
     positions.render();
     renderPass.render();
 
-    velocities.uniforms.uDeltaTime = 0.8;
-    velocities.render();
-    positions.uniforms.uDeltaTime = 0.8;
-    positions.render();
-    renderPass.render();
+    requestAnimationFrame(() => {
+      velocities.uniforms.uDeltaTime = 0.8;
+      velocities.render();
+      positions.uniforms.uDeltaTime = 0.8;
+      positions.render();
+      renderPass.render();
 
-    velocities.render();
-    positions.render();
-    renderPass.render();
+      requestAnimationFrame(() => {
+        velocities.render();
+        positions.render();
+        renderPass.render();
+      });
+    });
   });
 </script>
 

lib/playground/src/pages/gpgpu/boids.astro

@@ -72,16 +72,14 @@ import Layout from "../../layouts/Layout.astro";
 
   renderPass.onAfterRender(incrementRenderCount);
 
-  renderPass.onCanvasReady(() => {
-    useLoop(({ deltaTime }) => {
-      velocities.uniforms.uDeltaTime = deltaTime / 500;
-      velocities.render();
+  useLoop(({ deltaTime }) => {
+    velocities.uniforms.uDeltaTime = deltaTime / 500;
+    velocities.render();
 
-      positions.uniforms.uDeltaTime = deltaTime / 500;
-      positions.render();
+    positions.uniforms.uDeltaTime = deltaTime / 500;
+    positions.render();
 
-      renderPass.render();
-    });
+    renderPass.render();
   });
 </script>
 

lib/playground/src/pages/gpgpu/particles - FBO (static).astro

@@ -90,9 +90,11 @@ import Layout from "../../layouts/Layout.astro";
     positions.render();
     renderPass.render();
 
-    positions.uniforms.uDeltaTime = 1;
-    positions.render();
-    renderPass.render();
+    requestAnimationFrame(() => {
+      positions.uniforms.uDeltaTime = 1;
+      positions.render();
+      renderPass.render();
+    });
   });
 </script>
 

lib/playground/src/pages/gpgpu/particles - FBO.astro

@@ -93,12 +93,10 @@ import Layout from "../../layouts/Layout.astro";
 
   renderPass.onAfterRender(incrementRenderCount);
 
-  renderPass.onCanvasReady(() => {
-    useLoop(({ deltaTime }) => {
-      positions.uniforms.uDeltaTime = deltaTime / 500;
-      positions.render();
-      renderPass.render();
-    });
+  useLoop(({ deltaTime }) => {
+    positions.uniforms.uDeltaTime = deltaTime / 500;
+    positions.render();
+    renderPass.render();
   });
 </script>
 

lib/src/hooks/useWebGLCanvas.ts

@@ -41,8 +41,13 @@ export const useWebGLCanvas = <U extends Uniforms>(props: Props<U>) => {
   const renderPass = useQuadRenderPass(gl, props);
   const compositor = useCompositor(gl, renderPass, postEffects);
 
+  // don't render before the first resize of the canvas to avoid a glitch
+  let isCanvasResized = false;
+
   function render() {
-    compositor.render();
+    if (isCanvasResized) {
+      compositor.render();
+    }
   }
 
   let requestedRender = false;
@@ -107,13 +112,12 @@ export const useWebGLCanvas = <U extends Uniforms>(props: Props<U>) => {
   let resizeObserver: ReturnType<typeof useResizeObserver> | null = null;
 
   const [canvasReadyCallbacks, onCanvasReady] = useLifeCycleCallback();
-  let isFirstResize = true;
 
   function resizeCanvas(width: number, height: number) {
     setSize({ width: width * dpr, height: height * dpr });
-    if (isFirstResize) {
+    if (!isCanvasResized) {
       for (const callback of canvasReadyCallbacks) callback();
-      isFirstResize = false;
+      isCanvasResized = true;
     }
   }
 

lib/tests/screenshots.spec.ts

@@ -9,8 +9,8 @@ const routesToTest = routes.filter(({ route }) => !ignoreRoutes.has(route));
 const expectedRendersByDemo = {
   scissor: "2",
   video: "2",
-  "particles - FBO (static)": "3",
-  "boids (static)": "4",
+  "particles - FBO (static)": "2",
+  "boids (static)": "3",
   mipmap: /[1-3]/,
   texture: /1|2/,
   sepia: /1|2/,