noise

apps/examples/src/examples/Example04Noise.ts

@@ -0,0 +1,20 @@
+import { WGSLCanvas } from "@wgsl-canvas/core";
+import shaderFragment from "./Example04Noise.wgsl?raw";
+
+export const Example04Noise = async (canvas: HTMLCanvasElement) => {
+  const wgslCanvas = new WGSLCanvas({ canvas });
+  await wgslCanvas.init();
+  wgslCanvas.shaderFragment = shaderFragment;
+  wgslCanvas.uniformsKeys = ["time"];
+  wgslCanvas.uniforms.time = 0.0;
+
+  const frame: FrameRequestCallback = (timeElapsedMilliseconds) => {
+    const timeElapsed = timeElapsedMilliseconds * 0.001;
+    wgslCanvas.uniforms.time = timeElapsed;
+    wgslCanvas.render();
+
+    requestAnimationFrame(frame);
+  };
+
+  requestAnimationFrame(frame);
+};

apps/examples/src/examples/Example04Noise.wgsl

@@ -0,0 +1,26 @@
+@group(0) @binding(0) var<uniform> uniforms: Uniforms;
+
+struct Uniforms {
+  time: f32,
+}
+
+struct FragmentInput {
+  @location(0) coord: vec2<f32>,
+}
+
+struct FragmentOutput {
+  @location(0) color: vec4<f32>,
+}
+
+@fragment
+fn fragment_main(input: FragmentInput) -> FragmentOutput {
+  var output: FragmentOutput;
+  var xy: vec2<f32> = input.coord.xy * 0.5 + 0.5;
+  var blend: f32 = noise(xy);
+  output.color = vec4<f32>(vec3<f32>(blend), 1.0);
+  return output;
+}
+
+fn noise(xy: vec2<f32>) -> f32 {
+  return fract(sin(dot(xy, vec2<f32>(12.9898, 78.233))) * 1567.5453 * uniforms.time);
+}

apps/examples/src/main.ts

@@ -3,6 +3,15 @@ import { Example00Default } from "./examples/Example00Default";
 import { Example01Color } from "./examples/Example01Color";
 import { Example02Uniforms } from "./examples/Example02Uniforms";
 import { Example03Texture } from "./examples/Example03Texture";
+import { Example04Noise } from "./examples/Example04Noise";
+
+const examples = [
+  Example00Default,
+  Example01Color,
+  Example02Uniforms,
+  Example03Texture,
+  Example04Noise,
+];
 
 const main = async () => {
   if (!WGSLCanvas.isSupported()) {
@@ -13,12 +22,6 @@ const main = async () => {
   const container = document.getElementById("examples");
   if (!container) return;
 
-  const examples = [
-    Example00Default,
-    Example01Color,
-    Example02Uniforms,
-    Example03Texture,
-  ];
   for (const example of examples) {
     const canvas = document.createElement("canvas");
     canvas.width = 250;