feat: add configurable uniforms to tsl gradient wave (#67)

Author: devallibus

apps/web/src/components/TslPreviewCanvas.tsx

@@ -11,6 +11,7 @@ type TslPreviewCanvasProps = {
   previewModule: string
   pipeline: string
   fallbackSvg?: string | null
+  uniformOverrides?: Record<string, number | number[] | boolean>
   onError?: (errors: string[]) => void
   onScreenshotReady?: (base64: string) => void
 }
@@ -118,6 +119,7 @@ export default function TslPreviewCanvas(props: TslPreviewCanvasProps) {
         width,
         height,
         pipeline: props.pipeline,
+        uniforms: props.uniformOverrides ?? {},
       })
 
       if (!nextPreview?.material || typeof nextPreview.material !== 'object') {
@@ -254,6 +256,18 @@ export default function TslPreviewCanvas(props: TslPreviewCanvasProps) {
     ),
   )
 
+  createEffect(
+    on(
+      () => JSON.stringify(props.uniformOverrides ?? {}),
+      async () => {
+        if (!runtime || !renderer) return
+        setLoading(true)
+        await renderPreview(props.previewModule)
+      },
+      { defer: true },
+    ),
+  )
+
   return (
     <div
       ref={containerRef}

apps/web/src/lib/server/shaders.test.ts

@@ -182,6 +182,9 @@ async function main() {
     assert.equal(detail.material, 'node-material')
     assert.deepEqual(detail.renderers, ['webgpu'])
     assert.ok(detail.tags.includes('tsl'), 'Expected "tsl" tag')
+    assert.equal(detail.uniforms.length, 5)
+    assert.ok(detail.uniforms.some((u) => u.name === 'uColorA'))
+    assert.ok(detail.uniforms.some((u) => u.name === 'uWaveSpeed'))
   })
 
   await runTest('loadShaderDetail — TSL shader loads recipes', async () => {

apps/web/src/routes/shaders.$name.tsx

@@ -99,6 +99,7 @@ function ShaderDetailPage() {
                   previewModule={s().previewModule}
                   pipeline={s().pipeline}
                   fallbackSvg={s().previewSvg}
+                  uniformOverrides={uniformOverrides()}
                 />
               ) : (
                 <ShaderPreviewCanvas
@@ -110,12 +111,14 @@ function ShaderDetailPage() {
                   fallbackSvg={s().previewSvg}
                 />
               )}
-              <SurfaceCard class="max-h-[500px] overflow-y-auto p-5">
-                <UniformControls
-                  uniforms={s().uniforms}
-                  onUniformChange={handleUniformChange}
-                />
-              </SurfaceCard>
+              <Show when={s().uniforms.length > 0}>
+                <SurfaceCard class="max-h-[500px] overflow-y-auto p-5">
+                  <UniformControls
+                    uniforms={s().uniforms}
+                    onUniformChange={handleUniformChange}
+                  />
+                </SurfaceCard>
+              </Show>
             </div>
 
             {/* Description */}

packages/schema/src/index.test.ts

@@ -153,9 +153,9 @@ await runTest("buildTslPreviewModule binds runtime imports inside createPreview"
 import { color } from 'three/tsl';
 import { NodeMaterial } from 'three/webgpu';
 
-export function createMaterial() {
+export function createMaterial(runtime) {
   const material = new NodeMaterial();
-  material.colorNode = color(0xff0000);
+  material.colorNode = color(runtime.uniforms.tint);
   return material;
 }
 `);
@@ -172,6 +172,7 @@ export function createMaterial() {
     width: 512,
     height: 512,
     pipeline: "surface",
+    uniforms: { tint: 0xff0000 },
   });
 
   assert.ok(preview.material instanceof FakeNodeMaterial);

packages/schema/src/tsl-preview-module.ts

@@ -9,6 +9,7 @@ export type TslPreviewModuleRuntime = {
   width: number
   height: number
   pipeline: string
+  uniforms: Record<string, unknown>
 }
 
 export type TslPreviewModuleResult = {
@@ -87,7 +88,7 @@ export function buildTslPreviewModule(sourceCode: string) {
     buildDestructureLine('TSL', tslBindings),
     buildDestructureLine('THREE', webgpuBindings),
     normalizedSource.trim(),
-    'const material = createMaterial();',
+    'const material = createMaterial(runtime);',
     'return { material };',
   ]
     .filter(Boolean)

shaders/tsl-gradient-wave/shader.json

@@ -24,7 +24,48 @@
     "material": "node-material",
     "environments": ["three"]
   },
-  "uniforms": [],
+  "uniforms": [
+    {
+      "name": "uColorA",
+      "type": "vec3",
+      "defaultValue": [0.1019607843, 0.1019607843, 0.1803921569],
+      "description": "Primary gradient color.",
+      "min": 0,
+      "max": 1
+    },
+    {
+      "name": "uColorB",
+      "type": "vec3",
+      "defaultValue": [0.9137254902, 0.2705882353, 0.3764705882],
+      "description": "Secondary gradient color.",
+      "min": 0,
+      "max": 1
+    },
+    {
+      "name": "uWaveSpeed",
+      "type": "float",
+      "defaultValue": 2,
+      "description": "Animation speed of the wave motion.",
+      "min": 0.1,
+      "max": 8
+    },
+    {
+      "name": "uWaveMix",
+      "type": "float",
+      "defaultValue": 0.5,
+      "description": "Blend between horizontal and vertical UV influence.",
+      "min": 0,
+      "max": 1
+    },
+    {
+      "name": "uWaveFrequency",
+      "type": "float",
+      "defaultValue": 6,
+      "description": "Frequency of the gradient wave pattern.",
+      "min": 0.5,
+      "max": 16
+    }
+  ],
   "inputs": [
     {
       "name": "uv",

shaders/tsl-gradient-wave/source.ts

@@ -1,13 +1,44 @@
-import { color, mix, uv, sin, time } from 'three/tsl';
+import { mix, uv, sin, time, vec3 } from 'three/tsl';
 import { NodeMaterial } from 'three/webgpu';
 
-export function createMaterial(): NodeMaterial {
+type PreviewRuntime = {
+  uniforms?: Record<string, unknown>
+};
+
+function readVec3(value: unknown, fallback: [number, number, number]): [number, number, number] {
+  if (
+    Array.isArray(value) &&
+    value.length === 3 &&
+    value.every((entry) => typeof entry === 'number')
+  ) {
+    return value as [number, number, number];
+  }
+
+  return fallback;
+}
+
+function readNumber(value: unknown, fallback: number): number {
+  return typeof value === 'number' ? value : fallback;
+}
+
+export function createMaterial(runtime?: PreviewRuntime): NodeMaterial {
   const material = new NodeMaterial();
-  const t = sin(time.mul(2.0)).mul(0.5).add(0.5);
+
+  const uniforms = runtime?.uniforms ?? {};
+  const colorA = readVec3(uniforms.uColorA, [0.1019607843, 0.1019607843, 0.1803921569]);
+  const colorB = readVec3(uniforms.uColorB, [0.9137254902, 0.2705882353, 0.3764705882]);
+  const waveSpeed = readNumber(uniforms.uWaveSpeed, 2.0);
+  const waveMix = readNumber(uniforms.uWaveMix, 0.5);
+  const waveFrequency = readNumber(uniforms.uWaveFrequency, 6.0);
+
+  const uvMix = mix(uv().x, uv().y, waveMix).mul(waveFrequency);
+  const t = sin(uvMix.add(time.mul(waveSpeed))).mul(0.5).add(0.5);
+
   material.colorNode = mix(
-    color(0x1a1a2e),
-    color(0xe94560),
-    mix(uv().x, uv().y, t),
+    vec3(...colorA),
+    vec3(...colorB),
+    t,
   );
+
   return material;
 }