Finish tunnel scene

src/helper/to-percent.ts

@@ -1 +0,0 @@
-export const toPercent = (value: number) => `${Math.round(value * 100)}%`;

src/index.ts

@@ -24,7 +24,7 @@ const handleScene = async (SceneConstructor: new () => Scene) => {
 
     scene.drawNextFrame(currentTime, deltaTime);
 
-    if ((timeSinceStart += deltaTime) > 2 * 1000) {
+    if ((timeSinceStart += deltaTime) > 8 * 1000) {
       triggerIsOver();
     } else {
       requestAnimationFrame(handleFrame);
@@ -39,7 +39,7 @@ const handleScene = async (SceneConstructor: new () => Scene) => {
 
 const main = async () => {
   try {
-    const scenes = [TunnelScene, RainScene];
+    const scenes = [RainScene, TunnelScene];
 
     let i = 0;
     for (;;) {

src/scenes/rain/rain-scene.ts

@@ -21,7 +21,7 @@ export class RainScene implements Scene {
   private overlay: HTMLDivElement;
 
   public constructor() {
-    for (let i = 0; i < 20; i++) {
+    for (let i = 0; i < 40; i++) {
       this.droplets.push(new Droplet());
     }
   }
@@ -37,7 +37,7 @@ export class RainScene implements Scene {
       [
         {
           ...Tunnel.descriptor,
-          shaderCombinationSteps: [0, 1, 2, 4, 8, 12],
+          shaderCombinationSteps: [0, 1, 2, 4, 8, 12, 16, 24],
         },
         {
           ...CircleLight.descriptor,
@@ -51,10 +51,15 @@ export class RainScene implements Scene {
       ],
       {
         enableStopwatch: false,
-        softShadowTraceCount: '128',
-        hardShadowTraceCount: '48',
+        softShadowTraceCount: '64',
+        hardShadowTraceCount: '32',
       }
     );
+
+    this.renderer.setRuntimeSettings({
+      ambientLight: vec3.fromValues(0.45, 0.25, 0.45),
+      tileMultiplier: 10,
+    });
   }
 
   public drawNextFrame(

src/scenes/tunnel-scene.ts

@@ -1,5 +1,8 @@
 import { vec2, vec3 } from 'gl-matrix';
-import { CircleLight, compile, Renderer, Tunnel } from 'sdf-2d';
+import { CircleLight, compile, InvertedTunnel, Renderer } from 'sdf-2d';
+import { clamp } from '../helper/clamp';
+import { last } from '../helper/last';
+import { Random } from '../helper/random';
 import { Scene } from './scene';
 
 export class TunnelScene implements Scene {
@@ -7,7 +10,40 @@ export class TunnelScene implements Scene {
   private canvas: HTMLCanvasElement;
   private overlay: HTMLDivElement;
 
-  public constructor() {}
+  private tunnels: Array<InvertedTunnel> = [];
+  private lights: Array<CircleLight> = [];
+
+  private generateTunnel() {
+    const canvasSize = this.canvas.getBoundingClientRect();
+
+    let previousEnd = vec2.fromValues(0, 200);
+    let previousRadius = 75;
+
+    if (this.tunnels.length > 0) {
+      previousEnd = last(this.tunnels).to;
+      previousRadius = last(this.tunnels).toRadius;
+    }
+
+    let height = previousEnd.y + Random.getRandomInRange(-400, 400);
+    height = clamp(height, 200, canvasSize.height - 200);
+
+    const currentEnd = vec2.fromValues(this.tunnels.length * 200, height);
+    const currentToRadius = Random.getRandom() * 100 + 50;
+
+    this.tunnels.push(
+      new InvertedTunnel(previousEnd, currentEnd, previousRadius, currentToRadius)
+    );
+
+    if (this.tunnels.length % 5 == 0) {
+      this.lights.push(
+        new CircleLight(
+          previousEnd,
+          [Random.getRandom(), Random.getRandom(), Random.getRandom()],
+          0.25
+        )
+      );
+    }
+  }
 
   public async initialize(
     canvas: HTMLCanvasElement,
@@ -19,12 +55,12 @@ export class TunnelScene implements Scene {
       canvas,
       [
         {
-          ...Tunnel.descriptor,
+          ...InvertedTunnel.descriptor,
           shaderCombinationSteps: [0, 1, 2, 4, 8, 12],
         },
         {
           ...CircleLight.descriptor,
-          shaderCombinationSteps: [2],
+          shaderCombinationSteps: [1, 2, 3, 4, 5, 6, 7],
         },
       ],
       [
@@ -34,18 +70,32 @@ export class TunnelScene implements Scene {
       ],
       {
         enableStopwatch: false,
-        softShadowTraceCount: '128',
-        hardShadowTraceCount: '48',
+        softShadowTraceCount: '64',
+        hardShadowTraceCount: '32',
       }
     );
+
+    this.renderer.setRuntimeSettings({
+      isWorldInverted: true,
+      ambientLight: vec3.fromValues(0.45, 0.25, 0.45),
+    });
+
+    for (let i = 0; i < 100; i++) {
+      this.generateTunnel();
+    }
   }
 
+  private deltaSinceStart = 0;
   public drawNextFrame(
     currentTime: DOMHighResTimeStamp,
     deltaTime: DOMHighResTimeStamp
   ): void {
     const { width, height } = this.canvas.getBoundingClientRect();
-    this.renderer.setViewArea(vec2.fromValues(0, height), vec2.fromValues(width, height));
+    this.deltaSinceStart += deltaTime;
+    this.renderer.setViewArea(
+      vec2.fromValues(this.deltaSinceStart / 2, height),
+      vec2.fromValues(width, height)
+    );
     this.renderer.autoscaleQuality(deltaTime);
 
     this.overlay.innerText = JSON.stringify(
@@ -54,11 +104,7 @@ export class TunnelScene implements Scene {
       '  '
     );
 
-    const viewAreaSize = this.renderer.viewAreaSize;
-
-    [
-      new Tunnel(vec2.fromValues(200, 200), vec2.fromValues(600, 600), 30, 200),
-    ].forEach((d) => this.renderer.addDrawable(d));
+    [...this.tunnels, ...this.lights].forEach((d) => this.renderer.addDrawable(d));
 
     this.renderer.renderDrawables();
   }