Add noise to tunnels

package.json

@@ -45,7 +45,7 @@
     "resolve-url-loader": "^3.1.1",
     "sass": "^1.26.3",
     "sass-loader": "^9.0.3",
-    "sdf-2d": "^0.3.6",
+    "sdf-2d": "^0.4.0",
     "source-map-loader": "^1.1.0",
     "svg-url-loader": "^6.0.0",
     "terser-webpack-plugin": "^2.3.8",

src/index.ts

@@ -64,11 +64,13 @@ const handleScene = async (
   };
 
   requestAnimationFrame(handleFrame);
-  const nextScene = new NextSceneConstructor();
-  await nextScene.initialize(canvas, overlay);
+
   await isOver;
   currentScene.destroy();
 
+  const nextScene = new NextSceneConstructor();
+  await nextScene.initialize(canvas, overlay);
+
   return nextScene;
 };
 

src/scenes/blob/blob.ts

@@ -10,7 +10,6 @@ export class Blob extends Drawable {
         uniform vec2 rightFootCenters[BLOB_COUNT];
         uniform float headRadii[BLOB_COUNT];
         uniform float footRadii[BLOB_COUNT];
-        //uniform float ks[BLOB_COUNT];
 
         float smoothMin(float a, float b)
         {

src/scenes/tunnel-scene.ts

@@ -1,5 +1,13 @@
 import { vec2, vec3 } from 'gl-matrix';
-import { CircleLight, compile, InvertedTunnel, Renderer } from 'sdf-2d';
+import {
+  CircleLight,
+  compile,
+  FilteringOptions,
+  InvertedTunnel,
+  Renderer,
+  renderNoise,
+  WrapOptions,
+} from 'sdf-2d';
 import { clamp } from '../helper/clamp';
 import { last } from '../helper/last';
 import { prettyPrint } from '../helper/pretty-print';
@@ -63,6 +71,7 @@ export class TunnelScene implements Scene {
     canvas: HTMLCanvasElement,
     overlay: HTMLDivElement
   ): Promise<void> {
+    const noiseTexture = await renderNoise([1000, 1], 60, 1 / 8, true);
     this.canvas = canvas;
     this.overlay = overlay;
     this.renderer = await compile(canvas, [
@@ -81,6 +90,15 @@ export class TunnelScene implements Scene {
       ambientLight: rgb(0.35, 0.1, 0.45),
       backgroundColor: rgba(1, 1, 1, 1),
       colorPalette: [rgb(0.4, 0.5, 0.6), rgb(0, 0, 0), rgb(0, 0, 0), rgb(0, 0, 0)],
+      textures: {
+        noiseTexture: {
+          source: noiseTexture,
+          overrides: {
+            maxFilter: FilteringOptions.LINEAR,
+            wrapS: WrapOptions.MIRRORED_REPEAT,
+          },
+        },
+      },
     });
 
     for (let i = 0; i < 200; i++) {