feat: make the texture loaders synchronous and re-render when loaded

jsulpis · Jan 17, 2025 · 04be689 · 04be689
1 parent 5d18c72
commit 04be689
Show file tree

Hide file tree

Showing 8 changed files with 234 additions and 166 deletions.
diff --git a/lib/playground/src/pages/post-processing/sepia.astro b/lib/playground/src/pages/post-processing/sepia.astro
@@ -3,11 +3,11 @@ import Layout from "../../layouts/Layout.astro";
 ---
 
 <script>
-	import { useEffectPass, useWebGLCanvas, loadTexture } from "usegl";
-	import { incrementRenderCount } from "../../components/renderCount";
+  import { useEffectPass, useWebGLCanvas, loadTexture } from "usegl";
+  import { incrementRenderCount } from "../../components/renderCount";
 
-	const vignetteEffect = useEffectPass({
-		fragment: /* glsl */ `
+  const vignetteEffect = useEffectPass({
+    fragment: /* glsl */ `
 			uniform sampler2D uTexture;
 			varying vec2 vUv;
 
@@ -30,10 +30,10 @@ import Layout from "../../layouts/Layout.astro";
 				gl_FragColor = vec4(color, 1.);
 			}
 		`,
-	});
+  });
 
-	const sepiaEffect = useEffectPass({
-		fragment: /* glsl */ `
+  const sepiaEffect = useEffectPass({
+    fragment: /* glsl */ `
 			uniform sampler2D uTexture;
 			varying vec2 vUv;
 
@@ -51,11 +51,11 @@ import Layout from "../../layouts/Layout.astro";
 				gl_FragColor = vec4(color, 1.);
 			}
 		`,
-	});
+  });
 
-	const { onAfterRender } = useWebGLCanvas({
-		canvas: "#glCanvas",
-		fragment: /* glsl */ `
+  const { onAfterRender } = useWebGLCanvas({
+    canvas: "#glCanvas",
+    fragment: /* glsl */ `
 				in vec2 vUv;
 				uniform sampler2D uTexture;
 				uniform vec2 uResolution;
@@ -77,21 +77,21 @@ import Layout from "../../layouts/Layout.astro";
 					fragColor = vec4(color, 1.);
 				}
 				`,
-		uniforms: {
-			uTexture: await loadTexture("/images/lion.jpg"),
-		},
-		postEffects: [sepiaEffect, vignetteEffect],
-	});
+    uniforms: {
+      uTexture: loadTexture("/images/lion.jpg"),
+    },
+    postEffects: [sepiaEffect, vignetteEffect],
+  });
 
-	onAfterRender(incrementRenderCount);
+  onAfterRender(incrementRenderCount);
 </script>
 
 <Layout title="Post-processing">
-	<canvas id="glCanvas"></canvas>
+  <canvas id="glCanvas"></canvas>
 </Layout>
 
 <style>
-	canvas {
-		aspect-ratio: 3 / 2;
-	}
+  canvas {
+    aspect-ratio: 3 / 2;
+  }
 </style>
diff --git a/lib/playground/src/pages/textures/dataTexture.astro b/lib/playground/src/pages/textures/dataTexture.astro
@@ -3,16 +3,12 @@ import Layout from "../../layouts/Layout.astro";
 ---
 
 <script>
-	import { useWebGLCanvas } from "usegl";
-	import { incrementRenderCount } from "../../components/renderCount";
+  import { useWebGLCanvas } from "usegl";
+  import { incrementRenderCount } from "../../components/renderCount";
 
-	function flatten<T>(arr: T[][]): T[] {
-		return arr.reduce((acc, val) => acc.concat(val), []);
-	}
-
-	const { onAfterRender } = useWebGLCanvas({
-		canvas: "#glCanvas",
-		fragment: /* glsl */ `
+  const { onAfterRender } = useWebGLCanvas({
+    canvas: "#glCanvas",
+    fragment: /* glsl */ `
 			in vec2 vUv;
 			uniform sampler2D uDataTexture;
 			out vec4 fragColor;
@@ -21,31 +17,31 @@ import Layout from "../../layouts/Layout.astro";
 				fragColor = texture(uDataTexture, vUv);
 			}
 		`,
-		uniforms: {
-			uDataTexture: {
-				data: new Uint8Array(
-					flatten([
-						[255, 0, 0, 255], // red
-						[0, 255, 0, 255], // green
-						[0, 0, 255, 255], // blue
-						[255, 255, 0, 255], // yellow
-						[255, 0, 255, 255], // magenta
-						[0, 255, 255, 255], // cyan
-						[255, 255, 255, 255], // white
-						[128, 128, 128, 255], // gray
-						[0, 0, 0, 255], // black
-					])
-				),
-				width: 3,
-				height: 3,
-				magFilter: "nearest",
-			},
-		},
-	});
+    uniforms: {
+      uDataTexture: {
+        data: new Uint8Array(
+          [
+            [255, 0, 0, 255], // red
+            [0, 255, 0, 255], // green
+            [0, 0, 255, 255], // blue
+            [255, 255, 0, 255], // yellow
+            [255, 0, 255, 255], // magenta
+            [0, 255, 255, 255], // cyan
+            [255, 255, 255, 255], // white
+            [128, 128, 128, 255], // gray
+            [0, 0, 0, 255], // black
+          ].flat()
+        ),
+        width: 3,
+        height: 3,
+        magFilter: "nearest",
+      },
+    },
+  });
 
-	onAfterRender(incrementRenderCount);
+  onAfterRender(incrementRenderCount);
 </script>
 
 <Layout title="Data Texture">
-	<canvas id="glCanvas"></canvas>
+  <canvas id="glCanvas"></canvas>
 </Layout>
diff --git a/lib/playground/src/pages/textures/mipmap.astro b/lib/playground/src/pages/textures/mipmap.astro
@@ -4,15 +4,15 @@ import Layout from "../../layouts/Layout.astro";
 ---
 
 <script>
-	import { useWebGLCanvas, loadTexture } from "usegl";
-	import { incrementRenderCount } from "../../components/renderCount";
+  import { useWebGLCanvas, loadTexture } from "usegl";
+  import { incrementRenderCount } from "../../components/renderCount";
 
-	const earthNight = await loadTexture("/images/2k_earth_night.jpeg");
-	const earthColor = await loadTexture("/images/2k_earth_color.jpeg");
+  const earthNight = loadTexture("/images/2k_earth_night.jpeg");
+  const earthColor = loadTexture("/images/2k_earth_color.jpeg");
 
-	const { onAfterRender } = useWebGLCanvas({
-		canvas: "#glCanvas",
-		fragment: /* glsl */ `
+  const { onAfterRender } = useWebGLCanvas({
+    canvas: "#glCanvas",
+    fragment: /* glsl */ `
 				uniform vec2 u_resolution;
 				uniform sampler2D uNight;
 				uniform sampler2D uColor;
@@ -103,17 +103,17 @@ import Layout from "../../layouts/Layout.astro";
 					fragColor = vec4(finalColor, 1.0);
 				}
 				`,
-		uniforms: {
-			uColor: earthColor,
-			uNight: earthNight,
-		},
-		immediate: false,
-	});
-
-	onAfterRender(incrementRenderCount);
+    uniforms: {
+      uColor: earthColor,
+      uNight: earthNight,
+    },
+    immediate: false,
+  });
+
+  onAfterRender(incrementRenderCount);
 </script>
 
 <Layout title="Texture">
-	<GlobalPlayPause />
-	<canvas id="glCanvas"></canvas>
+  <GlobalPlayPause />
+  <canvas id="glCanvas"></canvas>
 </Layout>
diff --git a/lib/playground/src/pages/textures/texture.astro b/lib/playground/src/pages/textures/texture.astro
@@ -6,7 +6,23 @@ import Layout from "../../layouts/Layout.astro";
   import { useWebGLCanvas, loadTexture } from "usegl";
   import { incrementRenderCount } from "../../components/renderCount";
 
-  const texture = await loadTexture("https://picsum.photos/id/669/600/400");
+  const texture = loadTexture("https://picsum.photos/id/669/600/400", {
+    placeholder: {
+      magFilter: "nearest",
+      data: new Uint8Array(
+        [
+          [255, 255, 255, 255],
+          [255, 255, 255, 255],
+          [255, 255, 255, 255],
+          [255, 255, 255, 255],
+          [99, 46, 22, 255],
+          [255, 255, 255, 255],
+        ].flat()
+      ),
+      width: 3,
+      height: 2,
+    },
+  });
 
   const { onAfterRender } = useWebGLCanvas({
     canvas: "#glCanvas",

diff --git a/lib/playground/src/pages/textures/video.astro b/lib/playground/src/pages/textures/video.astro
@@ -6,11 +6,9 @@ import Layout from "../../layouts/Layout.astro";
   import { useWebGLCanvas, loadVideoTexture } from "usegl";
   import { incrementRenderCount } from "../../components/renderCount";
 
-  const texture = await loadVideoTexture(
+  const texture = loadVideoTexture(
     "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",
-    {
-      startTime: 3,
-    }
+    { startTime: 3 }
   );
 
   const { onAfterRender, render } = useWebGLCanvas({
@@ -49,17 +47,19 @@ import Layout from "../../layouts/Layout.astro";
 
   onAfterRender(incrementRenderCount);
 
-  const video = texture.src as HTMLVideoElement;
+  const video = texture.src;
 
-  render();
+  video.addEventListener(
+    "seeked",
+    () => {
+      render();
 
-  // check that the frames are updated when the video is playing
-  video.currentTime = 5;
-  video.addEventListener("seeked", render, { once: true });
-
-  // useLoop(() => {
-  //   render();
-  // });
+      // check that the frames are updated when the video is playing
+      video.currentTime = 5;
+      video.addEventListener("seeked", render, { once: true });
+    },
+    { once: true }
+  );
 </script>
 
 <Layout title="Texture">