Improve rendering

src/utils/array.ts

@@ -1,4 +1,3 @@
-/** @internal */
 const setIndexAlias = (name: string, index: number, type: any) => {
   if (!Object.prototype.hasOwnProperty.call(type.prototype, name)) {
     Object.defineProperty(type.prototype, name, {

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

src/utils/webgpu/smart-compile.ts

@@ -1,15 +0,0 @@
-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;
-};