simplified uniformity example + validation of seed functions presence

Author: cieplypolar

apps/typegpu-docs/src/examples/tests/uniformity/constants.ts

@@ -1,6 +1,6 @@
 import { PRNG } from './prngs.ts';
 
-export const gridSizes = [10, 25, 50, 100, 200, 500, 700, 1000];
-export const initialGridSize = gridSizes[3];
+export const gridSizes = [8, 16, 32, 64, 128, 256, 512, 1024];
+export const initialGridSize = gridSizes[4];
 export const initialPRNG = PRNG.BPETER;
 export const prngs: PRNG[] = Object.values(PRNG);

apps/typegpu-docs/src/examples/tests/uniformity/fragment.ts

@@ -1 +1 @@
-<canvas data-fit-to-container></canvas>
+<canvas></canvas>

apps/typegpu-docs/src/examples/tests/uniformity/helpers.ts

@@ -1,9 +1,11 @@
 import tgpu, { type TgpuRenderPipeline } from 'typegpu';
 import * as d from 'typegpu/data';
+import * as std from 'typegpu/std';
+import { fullScreenTriangle } from 'typegpu/common';
+import { randf, randomGeneratorSlot } from '@typegpu/noise';
 
 import * as c from './constants.ts';
-import { executePipeline, preparePipeline } from './helpers.ts';
-import type { PRNG } from './prngs.ts';
+import { getPRNG, type PRNG } from './prngs.ts';
 
 const root = await tgpu.init();
 
@@ -21,23 +23,43 @@ const canvasRatioUniform = root.createUniform(
   d.f32,
   canvas.width / canvas.height,
 );
+
+const fragmentShader = tgpu['~unstable'].fragmentFn({
+  in: { uv: d.vec2f },
+  out: d.vec4f,
+})((input) => {
+  const uv = input.uv.add(1).div(2).mul(d.vec2f(canvasRatioUniform.$, 1));
+  const gridedUV = std.floor(uv.mul(gridSizeUniform.$));
+
+  randf.seed2(gridedUV);
+
+  return d.vec4f(d.vec3f(randf.sample()), 1.0);
+});
+
 const pipelineCache = new Map<PRNG, TgpuRenderPipeline>();
 let prng: PRNG = c.initialPRNG;
 
-const redraw = (value: PRNG) => {
-  let pipeline = pipelineCache.get(value);
+const redraw = () => {
+  let pipeline = pipelineCache.get(prng);
   if (!pipeline) {
-    pipeline = preparePipeline(
-      root,
-      presentationFormat,
-      value,
-      gridSizeUniform,
-      canvasRatioUniform,
-    );
-    pipelineCache.set(value, pipeline);
+    pipeline = root['~unstable']
+      .with(randomGeneratorSlot, getPRNG(prng))
+      .withVertex(fullScreenTriangle)
+      .withFragment(
+        fragmentShader,
+        { format: presentationFormat },
+      )
+      .createPipeline();
+    pipelineCache.set(prng, pipeline);
   }
 
-  executePipeline(pipeline as TgpuRenderPipeline, context);
+  pipeline
+    .withColorAttachment({
+      view: context.getCurrentTexture().createView(),
+      loadOp: 'clear',
+      storeOp: 'store',
+    })
+    .draw(3);
 };
 
 // #region Example controls & Cleanup
@@ -47,41 +69,43 @@ export const controls = {
     options: c.prngs,
     onSelectChange: (value: PRNG) => {
       prng = value;
-      redraw(value);
+      redraw();
     },
   },
   'Grid Size': {
     initial: c.initialGridSize,
     options: c.gridSizes,
     onSelectChange: (value: number) => {
       gridSizeUniform.write(value);
-      redraw(prng);
+      redraw();
     },
   },
   'Test Resolution': import.meta.env.DEV && {
     onButtonClick: () => {
+      const namespace = tgpu['~unstable'].namespace();
       c.prngs
         .map((prng) =>
-          tgpu.resolve(
-            [
-              preparePipeline(
-                root,
-                presentationFormat,
-                prng,
-                gridSizeUniform,
-                canvasRatioUniform,
-              ),
-            ],
-          )
+          tgpu.resolve([
+            root['~unstable']
+              .with(randomGeneratorSlot, getPRNG(prng))
+              .withVertex(fullScreenTriangle)
+              .withFragment(
+                fragmentShader,
+                { format: presentationFormat },
+              )
+              .createPipeline(),
+          ], { names: namespace })
         )
-        .map((r) => root.device.createShaderModule({ code: r }));
+        .map((r) => {
+          root.device.createShaderModule({ code: r });
+        });
     },
   },
 };
 
 const resizeObserver = new ResizeObserver(() => {
   canvasRatioUniform.write(canvas.width / canvas.height);
-  redraw(prng);
+  redraw();
 });
 resizeObserver.observe(canvas);
 

apps/typegpu-docs/src/examples/tests/uniformity/index.html

@@ -6,18 +6,14 @@ import * as std from 'typegpu/std';
 export const LCG: StatefulGenerator = (() => {
   const seed = tgpu.privateVar(d.u32);
 
-  const u32To01Float = tgpu.fn([d.u32], d.f32)`(val){
-    let exponent: u32 = 0x3f800000;
-    let mantissa: u32 = 0x007fffff & val;
-    var ufloat: u32 = (exponent | mantissa);
-    return bitcast<f32>(ufloat) - 1f;
-  }`;
+  const u32To01Float = tgpu.fn([d.u32], d.f32)((value) => {
+    const mantissa = value >> 9;
+    const bits = 0x3F800000 | mantissa;
+    const f = std.bitcastU32toF32(bits);
+    return f - 1;
+  });
 
   return {
-    seed: (value: number) => {
-      'use gpu';
-      seed.$ = d.u32(value * std.pow(32, 3));
-    },
     seed2: (value: d.v2f) => {
       'use gpu';
       seed.$ = d.u32(value.x * std.pow(32, 3) + value.y * std.pow(32, 2));

apps/typegpu-docs/src/examples/tests/uniformity/index.ts

@@ -3,11 +3,11 @@ import * as d from 'typegpu/data';
 import { add, cos, dot, fract } from 'typegpu/std';
 
 export interface StatefulGenerator {
-  seed: TgpuFn<(seed: d.F32) => d.Void> | ((seed: number) => void);
-  seed2?: TgpuFn<(seed: d.Vec2f) => d.Void> | ((seed: d.v2f) => void);
-  seed3?: TgpuFn<(seed: d.Vec3f) => d.Void> | ((seed: d.v3f) => void);
-  seed4?: TgpuFn<(seed: d.Vec4f) => d.Void> | ((seed: d.v4f) => void);
-  sample: TgpuFn<() => d.F32> | (() => number);
+  seed?: (seed: number) => void;
+  seed2?: (seed: d.v2f) => void;
+  seed3?: (seed: d.v3f) => void;
+  seed4?: (seed: d.v4f) => void;
+  sample: () => number;
 }
 
 export const randomGeneratorShell: TgpuFnShell<[], d.F32> = tgpu.fn([], d.f32);
@@ -21,28 +21,28 @@ export const BPETER: StatefulGenerator = (() => {
 
   return {
     seed: tgpu.fn([d.f32])((value) => {
-      seed.value = d.vec2f(value, 0);
+      seed.$ = d.vec2f(value, 0);
     }),
 
     seed2: tgpu.fn([d.vec2f])((value) => {
-      seed.value = d.vec2f(value);
+      seed.$ = d.vec2f(value);
     }),
 
     seed3: tgpu.fn([d.vec3f])((value) => {
-      seed.value = add(value.xy, d.vec2f(value.z));
+      seed.$ = add(value.xy, d.vec2f(value.z));
     }),
 
     seed4: tgpu.fn([d.vec4f])((value) => {
-      seed.value = add(value.xy, value.zw);
+      seed.$ = add(value.xy, value.zw);
     }),
 
     sample: randomGeneratorShell(() => {
       'use gpu';
-      const a = dot(seed.value, d.vec2f(23.14077926, 232.61690225));
-      const b = dot(seed.value, d.vec2f(54.47856553, 345.84153136));
-      seed.value.x = fract(cos(a) * 136.8168);
-      seed.value.y = fract(cos(b) * 534.7645);
-      return seed.value.y;
+      const a = dot(seed.$, d.vec2f(23.14077926, 232.61690225));
+      const b = dot(seed.$, d.vec2f(54.47856553, 345.84153136));
+      seed.$.x = fract(cos(a) * 136.8168);
+      seed.$.y = fract(cos(b) * 534.7645);
+      return seed.$.y;
     }),
   };
 })();