Fix insights

src/helper/extract-insights.ts

@@ -0,0 +1,17 @@
+import { RendererInfo } from 'sdf-2d/lib/src/graphics/rendering/renderer/renderer-info';
+
+export const extractInsights = (
+  insights?: RendererInfo
+): {
+  vendor?: string;
+  renderer?: string;
+  fps?: number;
+  renderScale?: number;
+  lightScale?: number;
+} => ({
+  fps: insights?.fps,
+  vendor: insights?.vendor,
+  renderer: insights?.renderer,
+  renderScale: insights?.renderPasses.distance.renderScale,
+  lightScale: insights?.renderPasses.lights.renderScale,
+});

src/helper/get-insights-from-renderer.ts

@@ -1,17 +0,0 @@
-import { Renderer } from 'sdf-2d';
-
-export const getInsightsFromRenderer = (
-  renderer?: Renderer
-): {
-  vendor?: string;
-  renderer?: string;
-  fps?: number;
-  renderScale?: number;
-  lightScale?: number;
-} => ({
-  fps: renderer?.insights?.fps,
-  vendor: renderer?.insights?.vendor,
-  renderer: renderer?.insights?.renderer,
-  renderScale: renderer?.insights?.renderPasses.distance.renderScale,
-  lightScale: renderer?.insights?.renderPasses.lights.renderScale,
-});

src/index.ts

@@ -8,7 +8,7 @@ import '../static/logo-white.svg';
 import '../static/no-change/404.html';
 import '../static/no-change/robots.txt';
 import '../static/og-image.png';
-import { getInsightsFromRenderer } from './helper/get-insights-from-renderer';
+import { extractInsights } from './helper/extract-insights';
 import { handleInsights } from './helper/handle-insights';
 import { removeUnnecessaryOutlines } from './helper/remove-unnecessary-outlines';
 import { BlobScene } from './scenes/blob/blob-scene';
@@ -43,7 +43,7 @@ toggleButton.addEventListener('click', handleTextToggle);
 handleTextToggle();
 
 const startInsightsSession = async (): Promise<(data: any) => unknown> => {
-  const { vendor, renderer } = getInsightsFromRenderer(await compile(canvas, []));
+  const { vendor, renderer } = extractInsights((await compile(canvas, [])).insights);
   return await handleInsights({
     vendor,
     renderer,
@@ -62,9 +62,7 @@ const main = async () => {
       const currentScene = new scenes[i++ % scenes.length]();
       await currentScene.run(canvas, overlay);
 
-      const { fps, renderScale, lightScale } = getInsightsFromRenderer(
+      const { fps, renderScale, lightScale } = extractInsights(currentScene.insights);
-        currentScene.renderer
-      );
       (await sendFramePromise)({
         fps,
         renderScale,

src/scenes/blob/blob-scene.ts

@@ -10,7 +10,7 @@ const Circle = CircleFactory(rgb255(119, 143, 120));
 export class BlobScene implements Scene {
   private canvas: HTMLCanvasElement;
   private overlay: HTMLDivElement;
-  public renderer?: Renderer;
+  public insights?: any;
 
   public async run(canvas: HTMLCanvasElement, overlay: HTMLDivElement): Promise<void> {
     this.canvas = canvas;
@@ -53,7 +53,7 @@ export class BlobScene implements Scene {
     currentTime: DOMHighResTimeStamp,
     deltaTime: DOMHighResTimeStamp
   ): boolean {
-    this.renderer = renderer;
+    this.insights = renderer.insights;
 
     const { width, height } = this.canvas.getBoundingClientRect();
     renderer.setViewArea([0, height], [width, height]);

src/scenes/metaball/metaball-scene.ts

@@ -11,7 +11,7 @@ export class MetaballScene implements Scene {
 
   private canvas: HTMLCanvasElement;
   private overlay: HTMLDivElement;
-  public renderer?: Renderer;
+  public insights?: any;
 
   public async run(canvas: HTMLCanvasElement, overlay: HTMLDivElement): Promise<void> {
     this.canvas = canvas;
@@ -58,7 +58,7 @@ export class MetaballScene implements Scene {
     currentTime: DOMHighResTimeStamp,
     deltaTime: DOMHighResTimeStamp
   ): boolean {
-    this.renderer = renderer;
+    this.insights = renderer.insights;
 
     const { width, height } = this.canvas.getBoundingClientRect();
     const viewAreaWidth = width / Math.max(width, height);

src/scenes/rain/rain-scene.ts

@@ -12,7 +12,7 @@ export class RainScene implements Scene {
 
   private canvas: HTMLCanvasElement;
   private overlay: HTMLDivElement;
-  public renderer?: Renderer;
+  public insights?: any;
 
   public async run(canvas: HTMLCanvasElement, overlay: HTMLDivElement): Promise<void> {
     this.canvas = canvas;
@@ -47,7 +47,7 @@ export class RainScene implements Scene {
     currentTime: DOMHighResTimeStamp,
     deltaTime: DOMHighResTimeStamp
   ): boolean {
-    this.renderer = renderer;
+    this.insights = renderer.insights;
 
     const { width, height } = this.canvas.getBoundingClientRect();
     renderer.setViewArea(vec2.fromValues(0, height), vec2.fromValues(width, height));

src/scenes/scene.ts

@@ -1,6 +1,4 @@
-import { Renderer } from 'sdf-2d';
-
 export interface Scene {
   run(canvas: HTMLCanvasElement, overlay: HTMLDivElement): Promise<void>;
-  readonly renderer?: Renderer;
+  readonly insights?: any;
 }

src/scenes/tunnel-scene.ts

@@ -24,7 +24,7 @@ export class TunnelScene implements Scene {
 
   private tunnels: Array<InstanceType<typeof InvertedTunnel>> = [];
   private lights: Array<CircleLight> = [];
-  public renderer?: Renderer;
+  public insights?: any;
 
   private generateTunnel() {
     const canvasSize = this.canvas.getBoundingClientRect();
@@ -117,7 +117,7 @@ export class TunnelScene implements Scene {
     currentTime: DOMHighResTimeStamp,
     deltaTime: DOMHighResTimeStamp
   ): boolean {
-    this.renderer = renderer;
+    this.insights = renderer.insights;
 
     const { width, height } = this.canvas.getBoundingClientRect();
     this.deltaSinceStart += deltaTime;