Refactor and improve brush

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

@@ -0,0 +1,51 @@
+import { smartCompile } from '../../smart-compile';
+import shader from './full-screen-quad.wgsl';
+
+export const setUpFullScreenQuad = (
+  device: GPUDevice
+): {
+  buffer: GPUBuffer;
+  vertex: GPUVertexState;
+} => {
+  const buffer = device.createBuffer({
+    size: 4 * 4 * 4, // 4x vec4<f32>
+    usage: GPUBufferUsage.VERTEX,
+    mappedAtCreation: true,
+  });
+  // prettier-ignore
+  const vertexData = [
+    // posX  posY U    V
+      -1.0, -1.0, 0.0, 1.0,
+      +1.0, -1.0, 1.0, 1.0,
+      -1.0, +1.0, 0.0, 0.0,
+      +1.0, +1.0, 1.0, 0.0,
+  ];
+  new Float32Array(buffer.getMappedRange()).set(vertexData);
+  buffer.unmap();
+
+  return {
+    buffer,
+    vertex: {
+      module: smartCompile(device, shader),
+      entryPoint: 'vertex',
+      buffers: [
+        {
+          arrayStride: 4 * 4,
+          stepMode: 'vertex',
+          attributes: [
+            {
+              shaderLocation: 0,
+              offset: 0,
+              format: 'float32x2',
+            },
+            {
+              shaderLocation: 1,
+              offset: 8,
+              format: 'float32x2',
+            },
+          ],
+        },
+      ],
+    },
+  };
+};

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

@@ -0,0 +1,12 @@
+struct VertexOutput {
+  @builtin(position) position : vec4<f32>,
+  @location(0) uv : vec2<f32>,
+}
+
+@vertex
+fn vertex(
+  @location(0) position : vec2<f32>,
+  @location(1) uv : vec2<f32>
+) -> VertexOutput {
+  return VertexOutput(vec4(position, 0.0, 1.0), uv);
+}

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);
+}