diff --git a/src/helper/get-insights-from-renderer.ts b/src/helper/get-insights-from-renderer.ts new file mode 100644 index 0000000..3f09c5c --- /dev/null +++ b/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, +}); diff --git a/src/helper/handle-insights.ts b/src/helper/handle-insights.ts new file mode 100644 index 0000000..7f54cf0 --- /dev/null +++ b/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 => { + const response = await sendPostRequest(`${baseUri}/${type}/sessions/`, data); + const { sessionId } = await response.json(); + return sessionId; +}; + +const createFrame = async (sessionId: string, data: any): Promise => + await sendPostRequest(`${baseUri}/${type}/sessions/${sessionId}`, data); + +const sendPostRequest = async (uri: string, data: any): Promise => + await fetch(uri, { + method: 'POST', + mode: 'cors', + redirect: 'follow', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(data), + }); diff --git a/src/index.ts b/src/index.ts index c2ff4ce..e33703d 100644 --- a/src/index.ts +++ b/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); diff --git a/src/scenes/blob/blob-scene.ts b/src/scenes/blob/blob-scene.ts index 453cde1..9656e12 100644 --- a/src/scenes/blob/blob-scene.ts +++ b/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 { 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]); diff --git a/src/scenes/metaball/metaball-scene.ts b/src/scenes/metaball/metaball-scene.ts index 9892663..9ae43a6 100644 --- a/src/scenes/metaball/metaball-scene.ts +++ b/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 { 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); diff --git a/src/scenes/rain/rain-scene.ts b/src/scenes/rain/rain-scene.ts index bf6bcc9..3fb19cd 100644 --- a/src/scenes/rain/rain-scene.ts +++ b/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 { 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); diff --git a/src/scenes/scene.ts b/src/scenes/scene.ts index 43093d5..4d8d69d 100644 --- a/src/scenes/scene.ts +++ b/src/scenes/scene.ts @@ -1,3 +1,6 @@ +import { Renderer } from 'sdf-2d'; + export interface Scene { run(canvas: HTMLCanvasElement, overlay: HTMLDivElement): Promise; + readonly renderer?: Renderer; } diff --git a/src/scenes/tunnel-scene.ts b/src/scenes/tunnel-scene.ts index c18c595..0959a6f 100644 --- a/src/scenes/tunnel-scene.ts +++ b/src/scenes/tunnel-scene.ts @@ -24,6 +24,7 @@ export class TunnelScene implements Scene { private tunnels: Array> = []; private lights: Array = []; + 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;