Refactor and improve brush

src/utils/graphics/full-screen-quad/full-screen-quad.ts

@@ -1,3 +1,4 @@
+import { smartCompile } from '../../smart-compile';
 import shader from './full-screen-quad.wgsl';
 
 export const setUpFullScreenQuad = (
@@ -25,9 +26,7 @@ export const setUpFullScreenQuad = (
   return {
     buffer,
     vertex: {
-      module: device.createShaderModule({
-        code: shader,
-      }),
+      module: smartCompile(device, shader),
       entryPoint: 'vertex',
       buffers: [
         {

src/utils/graphics/noise/noise.ts

@@ -0,0 +1,85 @@
+import { Random } from '../../random';
+import { smartCompile } from '../../smart-compile';
+import { setUpFullScreenQuad } from '../full-screen-quad/full-screen-quad';
+import noise from './noise.wgsl';
+
+export const generateNoise = ({
+  device,
+  width = 1024,
+  height = 1024,
+  octaves = 8,
+  lacunarity = 2,
+  amplitude = 0.5,
+  gain = 0.5,
+}: {
+  device: GPUDevice;
+  width?: number;
+  height?: number;
+  octaves?: number;
+  lacunarity?: number;
+  amplitude?: number;
+  gain?: number;
+}) => {
+  const { buffer, vertex } = setUpFullScreenQuad(device);
+  const quadVertexBuffer = buffer;
+
+  const pipeline = device.createRenderPipeline({
+    layout: 'auto',
+    vertex,
+    fragment: {
+      module: smartCompile(device, noise),
+      entryPoint: 'fragment',
+      constants: {
+        octaves,
+        lacunarity,
+        amplitude,
+        gain,
+        seedR: Random.getRandom(),
+        seedG: Random.getRandom(),
+        seedB: Random.getRandom(),
+        seedA: Random.getRandom(),
+      },
+      targets: [
+        {
+          format: 'rgba16float',
+        },
+      ],
+    },
+    primitive: {
+      topology: 'triangle-strip',
+    },
+  });
+
+  const colorTexture = device.createTexture({
+    size: {
+      width,
+      height,
+      depthOrArrayLayers: 1,
+    },
+    format: 'rgba16float',
+    usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT,
+  });
+
+  const renderPassDescriptor: GPURenderPassDescriptor = {
+    colorAttachments: [
+      {
+        view: colorTexture.createView(),
+        clearValue: { r: 1.0, g: 1.0, b: 1.0, a: 1.0 },
+        loadOp: 'clear',
+        storeOp: 'store',
+      },
+    ],
+  };
+
+  const commandEncoder = device.createCommandEncoder();
+
+  const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
+  passEncoder.setPipeline(pipeline);
+  passEncoder.setVertexBuffer(0, quadVertexBuffer);
+  passEncoder.draw(4, 1);
+  passEncoder.end();
+
+  device.queue.submit([commandEncoder.finish()]);
+
+  return colorTexture;
+};

src/utils/graphics/noise/noise.wgsl

@@ -0,0 +1,57 @@
+override octaves: i32;
+override amplitude: f32;
+override gain: f32;
+override lacunarity: f32;
+
+override seedR: f32;
+override seedG: f32;
+override seedB: f32;
+override seedA: f32;
+
+@fragment
+fn fragment(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {
+  return vec4(
+    fbm(uv, seedR),
+    fbm(uv, seedG),
+    fbm(uv, seedB),
+    fbm(uv, seedA),
+  );
+}
+
+fn fbm(uv: vec2<f32>, seed: f32) -> f32 {
+  var st = uv;
+  var v = 0.0;
+  var a = amplitude;
+
+  let shift = vec2(100.0);
+  let rot = mat2x2(cos(0.5), sin(0.5),
+                  -sin(0.5), cos(0.50));
+
+  for (var i = 0; i < octaves; i++) {
+    v += a * noise(st, seed);
+    st = rot * st * lacunarity + shift;
+    a *= gain;
+  }
+
+  return v;
+}
+
+fn noise (st: vec2<f32>, seed: f32) -> f32 {
+  let i = floor(st);
+  let f = fract(st);
+
+  let a = random(i, seed);
+  let b = random(i + vec2(1.0, 0.0), seed);
+  let c = random(i + vec2(0.0, 1.0), seed);
+  let d = random(i + vec2(1.0, 1.0), seed);
+
+  let u = f * f * (3.0 - 2.0 * f);
+
+  return mix(a, b, u.x) +
+          (c - a)* u.y * (1.0 - u.x) +
+          (d - b) * u.x * u.y;
+}
+
+fn random(st: vec2<f32>, seed: f32) -> f32 {
+  return fract(sin(dot(st.xy, vec2(12.9898 + seed, 78.233 + seed)))* 43758.5453123 + seed);
+}

src/utils/random.ts

@@ -7,11 +7,15 @@ export abstract class Random {
     Random._seed = value;
   }
 
-  public static getRandom(): number {
+  public static getRandomInt(): number {
     let t = (Random._seed += 0x6d2b79f5);
     t = Math.imul(t ^ (t >>> 15), t | 1);
     t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
-    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    return (t ^ (t >>> 14)) >>> 0;
+  }
+
+  public static getRandom(): number {
+    return Random.getRandomInt() / 4294967296;
   }
 
   public static randomBetween(from: number, to: number): number {

src/utils/smart-compile.ts

@@ -0,0 +1,15 @@
+export const smartCompile = (device: GPUDevice, code: string) => {
+  const module = device.createShaderModule({
+    code,
+  });
+
+  module
+    .getCompilationInfo()
+    .then((info) =>
+      info.messages.forEach((message) =>
+        console.warn(message.type, message.message, code.split('\n')[message.lineNum - 1])
+      )
+    );
+
+  return module;
+};