Refactor scene

src/index.ts

@@ -1,9 +1,9 @@
-import { glMatrix, vec2, vec3 } from 'gl-matrix';
-import { compile, Renderer } from 'sdf-2d';
+import { glMatrix } from 'gl-matrix';
 import { DeltaTimeCalculator } from './helper/delta-time-calculator';
 import './index.scss';
-import { RainScene } from './scenes/rain-scene';
+import { RainScene } from './scenes/rain/rain-scene';
 import { Scene } from './scenes/scene';
+import { TunnelScene } from './scenes/tunnel-scene';
 
 glMatrix.setMatrixArrayType(Array);
 
@@ -11,51 +11,20 @@ const deltaTimeCalculator = new DeltaTimeCalculator();
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 const overlay = document.querySelector('#overlay') as HTMLDivElement;
 
-const drawFrame = (
-  renderer: Renderer,
-  scene: Scene,
-  deltaTime: DOMHighResTimeStamp,
-  currentTime: DOMHighResTimeStamp
-) => {
-  const { width, height } = canvas.getBoundingClientRect();
-  renderer.setViewArea(vec2.fromValues(0, height), vec2.fromValues(width, height));
-  renderer.autoscaleQuality(deltaTime);
-
-  overlay.innerText = JSON.stringify(
-    renderer.insights,
-    (_, v) => (v.toFixed ? Number(v.toFixed(2)) : v),
-    '  '
-  );
-
-  scene.animate(currentTime, { width, height });
-
-  scene.drawables.forEach((d) => renderer.addDrawable(d));
-  renderer.renderDrawables();
-};
-
-const handleScene = async (scene: Scene) => {
-  const renderer = compile(
-    canvas,
-    scene.descriptors,
-    [vec3.fromValues(0.4, 1, 0.6), vec3.fromValues(1, 1, 0), vec3.fromValues(0.3, 1, 1)],
-    {
-      tileMultiplier: 10,
-      enableStopwatch: false,
-      shaderMacros: { softShadowTraceCount: '128', hardShadowTraceCount: '48' },
-    }
-  );
+const handleScene = async (SceneConstructor: new () => Scene) => {
+  const scene = new SceneConstructor();
+  await scene.initialize(canvas, overlay);
 
   let triggerIsOver: () => void;
   const isOver = new Promise((resolve) => (triggerIsOver = resolve));
-
   let timeSinceStart = 0;
 
   const handleFrame = (currentTime: DOMHighResTimeStamp) => {
     const deltaTime = deltaTimeCalculator.getNextDeltaTime(currentTime);
 
-    drawFrame(renderer, scene, deltaTime, currentTime);
+    scene.drawNextFrame(currentTime, deltaTime);
 
-    if ((timeSinceStart += deltaTime) > 200000 * 1000) {
+    if ((timeSinceStart += deltaTime) > 2 * 1000) {
       triggerIsOver();
     } else {
       requestAnimationFrame(handleFrame);
@@ -65,15 +34,20 @@ const handleScene = async (scene: Scene) => {
   requestAnimationFrame(handleFrame);
   await isOver;
 
-  renderer.destroy();
+  scene.destroy();
 };
 
-const scenes = [new RainScene()];
-
 const main = async () => {
-  let i = 0;
-  for (;;) {
-    await handleScene(scenes[i++ % scenes.length]);
+  try {
+    const scenes = [TunnelScene, RainScene];
+
+    let i = 0;
+    for (;;) {
+      await handleScene(scenes[i++ % scenes.length]);
+    }
+  } catch (e) {
+    console.error(e);
+    alert(e);
   }
 };