docs: update the examples with the new synchronous loaders api

Author: jsulpis

docs/.vitepress/theme/styles.scss

@@ -108,7 +108,8 @@
   }
 
   html.dark & {
-    .cm-scroller {
+    .cm-scroller,
+    .sp-tabs-scrollable-container {
       color-scheme: dark;
     }
   }

docs/examples/post-processing/single-pass/index.md

@@ -2,10 +2,10 @@
 title: Single pass (sepia)
 ---
 
-::: example-editor
+::: example-editor {deps=tweakpane@^4.0.5}
 
 <<< ./index.ts
 <<< ./styles.css
-<<< @/snippets/default/index.html
+<<< @/snippets/render-count/index.html
 
 :::

docs/examples/post-processing/single-pass/index.ts

@@ -1,43 +1,56 @@
 import { useEffectPass, useWebGLCanvas, loadTexture } from "usegl";
+import { Pane } from "tweakpane";
 import "./styles.css";
 
-(async () => {
-  const sepiaEffect = useEffectPass({
-    fragment: /* glsl */ `
-      uniform sampler2D uTexture; // output of the render pass
-      in vec2 vUv;
-      out vec4 fragColor;
-
-      #define SEPIA_COLOR vec3(1.2, 1.0, 0.7)
-      #define STRENGTH .75
-
-      vec3 sepia(vec3 color) {
-        float grayScale = dot(color, vec3(0.299, 0.587, 0.114));
-        return grayScale * SEPIA_COLOR;
-      }
-
-      void main() {
-        vec3 color = texture(uTexture, vUv).rgb;
-        color = mix(color, sepia(color), STRENGTH);
-        fragColor = vec4(color, 1.);
-      }
-    `,
-  });
-
-  useWebGLCanvas({
-    canvas: "#glCanvas",
-    fragment: /* glsl */ `
-      in vec2 vUv;
-      uniform sampler2D uPicture;
-      out vec4 fragColor;
-
-      void main() {
-        fragColor = texture(uPicture, vUv);
-      }
-    `,
-    uniforms: {
-      uPicture: await loadTexture("https://picsum.photos/id/323/600/400"),
-    },
-    postEffects: [sepiaEffect],
-  });
-})();
+const image = loadTexture("https://picsum.photos/id/323/600/400");
+
+const sepiaEffect = useEffectPass({
+  fragment: /* glsl */ `
+    uniform sampler2D uTexture; // output of the render pass
+    uniform float uStrength;
+    in vec2 vUv;
+    out vec4 fragColor;
+
+    #define SEPIA_COLOR vec3(1.2, 1.0, 0.7)
+
+    vec3 sepia(vec3 color) {
+      float grayScale = dot(color, vec3(0.299, 0.587, 0.114));
+      return grayScale * SEPIA_COLOR;
+    }
+
+    void main() {
+      vec3 color = texture(uTexture, vUv).rgb;
+      color = mix(color, sepia(color), uStrength);
+      fragColor = vec4(color, 1.);
+    }
+  `,
+  uniforms: {
+    uStrength: 0.75,
+  },
+});
+
+const { onAfterRender } = useWebGLCanvas({
+  canvas: "#glCanvas",
+  fragment: /* glsl */ `
+    in vec2 vUv;
+    uniform sampler2D uPicture;
+    out vec4 fragColor;
+
+    void main() {
+      fragColor = texture(uPicture, vUv);
+    }
+  `,
+  uniforms: {
+    uPicture: image,
+  },
+  postEffects: [sepiaEffect],
+});
+
+const renderCount = document.querySelector("#renderCount");
+onAfterRender(() => {
+  renderCount.textContent = `${Number(renderCount.textContent) + 1}`;
+});
+
+// You can update the uniforms of an effect pass
+const pane = new Pane({ title: "Uniforms" });
+pane.addBinding(sepiaEffect.uniforms, "uStrength", { min: 0, max: 1 });

docs/examples/textures/image/index.md

@@ -5,8 +5,8 @@ title: "Image"
 ::: example-editor
 
 <<< ./index.ts
-<<< ./fragment.glsl
 <<< ./vertex.glsl
+<<< ./fragment.glsl
 <<< @/snippets/canvas-full/styles.css
 <<< @/snippets/default/index.html
 

docs/examples/textures/image/index.ts

@@ -3,15 +3,30 @@ import "./styles.css";
 import fragment from "./fragment.glsl?raw";
 import vertex from "./vertex.glsl?raw";
 
-(async () => {
-  const texture = await loadTexture("https://picsum.photos/id/669/600/400");
+const texture = loadTexture("https://picsum.photos/id/669/600/400", {
+  // the placeholder is optional
+  placeholder: {
+    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,
+    //magFilter: "nearest",
+  },
+});
 
-  useWebGLCanvas({
-    canvas: "#glCanvas",
-    vertex,
-    fragment,
-    uniforms: {
-      uTexture: texture,
-    },
-  });
-})();
+useWebGLCanvas({
+  canvas: "#glCanvas",
+  vertex,
+  fragment,
+  uniforms: {
+    uTexture: texture,
+  },
+});

docs/examples/textures/image/vertex.glsl

@@ -1,3 +1,8 @@
+/**
+* This is an example of implementation of the `object-fit: contain/cover` CSS property.
+* It would be much simpler to give the canvas the size of the image.
+*/
+
 attribute vec2 position;
 attribute vec2 uv;
 uniform sampler2D uTexture;

docs/examples/textures/video/index.ts

@@ -1,35 +1,26 @@
-import { loadVideoTexture, useLoop, useWebGLCanvas } from "usegl";
+import { loadVideoTexture, useWebGLCanvas } from "usegl";
 import "./styles.css";
 
-const canvas = document.querySelector("canvas");
-
-(async () => {
-  const texture = await loadVideoTexture(
-    "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
-  );
-
-  const videoElement = texture.src as HTMLVideoElement;
-  canvas.style.aspectRatio = `${videoElement.videoWidth} / ${videoElement.videoHeight}`;
-
-  const { render } = useWebGLCanvas({
-    canvas,
-    fragment: /* glsl */ `
-      varying vec2 vUv;
-      uniform sampler2D uTexture;
-
-      void main() {
-        vec3 color = texture(uTexture, vUv).rgb;
-
-        // try playing with the colors here
-        //color = color.rbg;
-
-        gl_FragColor = vec4(color, 1.);
-      }
-    `,
-    uniforms: {
-      uTexture: texture,
-    },
-  });
-
-  useLoop(render);
-})();
+const texture = loadVideoTexture(
+  "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
+);
+
+useWebGLCanvas({
+  canvas: "#glCanvas",
+  fragment: /* glsl */ `
+    varying vec2 vUv;
+    uniform sampler2D uTexture;
+
+    void main() {
+      vec3 color = texture(uTexture, vUv).rgb;
+
+      // try playing with the colors here
+      //color = color.rbg;
+
+      gl_FragColor = vec4(color, 1.);
+    }
+  `,
+  uniforms: {
+    uTexture: texture,
+  },
+});

lib/playground/src/pages/post-processing/bloom.astro

@@ -10,30 +10,30 @@ import Layout from "../../layouts/Layout.astro";
   const mipmaps = useEffectPass({
     fragment: mipmapsShader,
     uniforms: {
-      u_threshold: 0.2,
+      uThreshold: 0.2,
     },
   });
 
   const horizontalBlur = useEffectPass({
     fragment: blurShader,
     uniforms: {
-      u_direction: [1, 0],
+      uDirection: [1, 0],
     },
   });
 
   const verticalBlur = useEffectPass({
     fragment: blurShader,
     uniforms: {
-      u_direction: [0, 1],
+      uDirection: [0, 1],
     },
   });
 
   const combine = useEffectPass({
     fragment: combineShader,
     uniforms: {
-      u_image: ({ inputPass }) => inputPass.target!.texture,
-      u_bloomTexture: () => verticalBlur.target!.texture,
-      u_mix: 0,
+      uImage: ({ inputPass }) => inputPass.target!.texture,
+      uBloomTexture: () => verticalBlur.target!.texture,
+      uMix: 0,
     },
   });
 
@@ -44,7 +44,7 @@ import Layout from "../../layouts/Layout.astro";
     combine,
   });
 
-  bloomEffect.passes.combine.uniforms.u_mix = 1;
+  bloomEffect.passes.combine.uniforms.uMix = 1;
 
   const vignetteEffect = useEffectPass({
     fragment: /* glsl */ `

lib/playground/src/pages/textures/mipmap.astro

@@ -13,7 +13,7 @@ import Layout from "../../layouts/Layout.astro";
   const { onAfterRender } = useWebGLCanvas({
     canvas: "#glCanvas",
     fragment: /* glsl */ `
-				uniform vec2 u_resolution;
+				uniform vec2 uResolution;
 				uniform sampler2D uNight;
 				uniform sampler2D uColor;
 				uniform float uTime;
@@ -41,7 +41,7 @@ import Layout from "../../layouts/Layout.astro";
 
 				vec3 getRayDirection(vec2 uv) {
 					vec2 p = (2.0 * uv - 1.0);
-					p.x *= u_resolution.x/u_resolution.y;
+					p.x *= uResolution.x/uResolution.y;
 					return normalize(vec3(p, 1.0));
 				}
 
@@ -82,7 +82,7 @@ import Layout from "../../layouts/Layout.astro";
 				}
 
 				void main() {
-					vec2 uv = gl_FragCoord.xy/u_resolution.xy;
+					vec2 uv = gl_FragCoord.xy/uResolution.xy;
 					vec3 ro = vec3(0.0, 0.0, -2.0);
 					vec3 rd = getRayDirection(uv);