Add insights

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

@@ -0,0 +1,21 @@
+import { Renderer } from 'sdf-2d';
+
+export const getInsightsFromRenderer = (
+  renderer?: Renderer
+): {
+  vendor?: string;
+  renderer?: string;
+  fps?: number;
+  renderScale?: number;
+  lightScale?: number;
+  canvasWidth?: number;
+  canvasHeight?: 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,
+  canvasWidth: renderer?.canvasSize.x,
+  canvasHeight: renderer?.canvasSize.y,
+});

src/helper/handle-insights.ts

@@ -0,0 +1,27 @@
+const baseUri = 'https://insights.decla.red';
+const type = 'sdf-2d-demo';
+
+export const handleInsights = async (initialData: any): Promise<(data: any) => void> => {
+  const sessionId = await createSession(initialData);
+  return (data) => createFrame(sessionId, data);
+};
+
+const createSession = async (data: any): Promise<string> => {
+  const response = await sendPostRequest(`${baseUri}/${type}/sessions/`, data);
+  const { sessionId } = await response.json();
+  return sessionId;
+};
+
+const createFrame = async (sessionId: string, data: any): Promise<unknown> =>
+  await sendPostRequest(`${baseUri}/${type}/sessions/${sessionId}`, data);
+
+const sendPostRequest = async (uri: string, data: any): Promise<Response> =>
+  await fetch(uri, {
+    method: 'POST',
+    mode: 'cors',
+    redirect: 'follow',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(data),
+  });

src/index.ts

@@ -1,4 +1,5 @@
 import { glMatrix } from 'gl-matrix';
+import { compile } from 'sdf-2d';
 import '../static/favicons/apple-touch-icon.png';
 import '../static/favicons/favicon-16x16.png';
 import '../static/favicons/favicon-32x32.png';
@@ -7,6 +8,8 @@ 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 { handleInsights } from './helper/handle-insights';
 import { removeUnnecessaryOutlines } from './helper/remove-unnecessary-outlines';
 import { BlobScene } from './scenes/blob/blob-scene';
 import { MetaballScene } from './scenes/metaball/metaball-scene';
@@ -39,13 +42,40 @@ const handleTextToggle = () => {
 toggleButton.addEventListener('click', handleTextToggle);
 handleTextToggle();
 
+const startInsightsSession = async (): Promise<(data: any) => unknown> => {
+  const { vendor, renderer } = getInsightsFromRenderer(await compile(canvas, []));
+  return await handleInsights({
+    vendor,
+    renderer,
+    referrer: document.referrer,
+    connection: (navigator as any)?.connection.effectiveType,
+    devicePixelRatio: window.devicePixelRatio,
+  });
+};
+
 const main = async () => {
+  const sendFramePromise = startInsightsSession();
+
   try {
     let i = 0;
     for (;;) {
       const currentScene = new scenes[i++ % scenes.length]();
-
       await currentScene.run(canvas, overlay);
+
+      const {
+        fps,
+        renderScale,
+        lightScale,
+        canvasWidth,
+        canvasHeight,
+      } = getInsightsFromRenderer(currentScene.renderer);
+      (await sendFramePromise)({
+        fps,
+        renderScale,
+        lightScale,
+        canvasWidth,
+        canvasHeight,
+      });
     }
   } catch (e) {
     console.error(e);

src/scenes/blob/blob-scene.ts

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

src/scenes/metaball/metaball-scene.ts

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

src/scenes/rain/rain-scene.ts

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

src/scenes/scene.ts

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

src/scenes/tunnel-scene.ts

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