Improve rendering

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

@@ -1,4 +1,4 @@
-import { smartCompile } from '../../webgpu/smart-compile';
+import { smartCompile } from '../smart-compile';
 import shader from './full-screen-quad.wgsl';
 
 export const setUpFullScreenQuad = (

src/utils/graphics/initialize-gpu.ts

@@ -0,0 +1,16 @@
+export const initializeGPU = async (): Promise<GPUDevice> => {
+  const gpu = navigator.gpu;
+  if (!gpu) {
+    throw new Error('WebGPU is not supported');
+  }
+
+  const adapter = await gpu.requestAdapter({
+    powerPreference: 'high-performance',
+  });
+
+  if (!adapter) {
+    throw new Error('Could not request adatper');
+  }
+
+  return await adapter.requestDevice(); // could request more resources
+};

src/utils/graphics/noise/noise.ts

@@ -1,6 +1,7 @@
 import { Random } from '../../random';
-import { smartCompile } from '../../webgpu/smart-compile';
 import { setUpFullScreenQuad } from '../full-screen-quad/full-screen-quad';
+import random from '../random.wgsl';
+import { smartCompile } from '../smart-compile';
 import noise from './noise.wgsl';
 
 const textureCache = new Map<string, GPUTexture>();
@@ -31,7 +32,7 @@ export const generateNoise = ({
       layout: 'auto',
       vertex,
       fragment: {
-        module: smartCompile(device, noise),
+        module: smartCompile(device, random, noise),
         entryPoint: 'fragment',
         constants: {
           octaves,

src/utils/graphics/noise/noise.wgsl

@@ -29,7 +29,8 @@ fn fbm(uv: vec2<f32>, seed: f32) -> f32 {
 
   for (var i = 0; i < octaves; i++) {
     v += a * noise(st, seed);
-    st = rot * st * lacunarity + shift;
+    st *= rot * lacunarity;
+    st += shift;
     a *= gain;
   }
 
@@ -40,10 +41,10 @@ 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 a = random_with_seed(i, seed);
+  let b = random_with_seed(i + vec2(1.0, 0.0), seed);
+  let c = random_with_seed(i + vec2(0.0, 1.0), seed);
+  let d = random_with_seed(i + vec2(1.0, 1.0), seed);
 
   let u = f * f * (3.0 - 2.0 * f);
 
@@ -51,7 +52,3 @@ fn noise (st: vec2<f32>, seed: f32) -> f32 {
           (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/graphics/random.wgsl

@@ -0,0 +1,7 @@
+fn random_with_seed(uv: vec2<f32>, seed: f32) -> f32 {
+  return fract(sin(dot(uv, vec2(12.9898 + seed, 78.233 + seed)))* 43758.5453123 + seed);
+}
+
+fn random(uv: vec2<f32>) -> f32 {
+  return fract(sin(dot(uv, vec2(12.9898, 78.233)))* 43758.5453123);
+}

src/utils/graphics/smart-compile.ts

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