examples: use a single page

examples/Inspector.ts

@@ -1,28 +1,36 @@
 import { Context } from 'hammerhead.gl/core';
 import { BufferStore, TextureStore } from 'hammerhead.gl/renderer';
-import { Pane } from 'tweakpane';
+import { FolderApi, Pane } from 'tweakpane';
 
 export default class Inspector {
     private readonly bufferStore: BufferStore;
     private readonly textureStore: TextureStore;
     private readonly context: Context;
+    readonly pane: Pane;
+    readonly exampleFolder: FolderApi;
 
     constructor(context: Context) {
         this.context = context;
         const container = context.container;
         this.bufferStore = container.get<BufferStore>('BufferStore');
         this.textureStore = container.get<TextureStore>('TextureStore');
 
-        const pane = new Pane();
+        this.pane = new Pane();
 
-        this.addGeneralFolder(pane);
-        this.addBufferFolder(pane);
-        this.addTextureFolder(pane);
+        this.addGeneralFolder(this.pane);
+        this.addBufferFolder(this.pane);
+        this.addTextureFolder(this.pane);
+
+        this.exampleFolder = this.pane.addFolder({
+            title: 'example',
+            expanded: true
+        });
     }
 
     addGeneralFolder(pane: Pane) {
         const folder = pane.addFolder({
-            title: 'device'
+            title: 'device',
+            expanded: false,
         });
 
         const limits = this.context.device.limits;
@@ -32,13 +40,19 @@ export default class Inspector {
                 format: n => n.toFixed(0),
             });
         }
+        const renderer = this.context.renderer;
+        folder.addMonitor(renderer, 'frameCount', {
+            label: 'frames',
+            format: n => n.toFixed(0)
+        });
         num('maxVertexBuffers');
         num('maxUniformBufferBindingSize');
     }
 
     addTextureFolder(pane: Pane) {
         const folder = pane.addFolder({
             title: 'textures',
+            expanded: false,
         });
 
         folder.addMonitor(this.textureStore, 'textureCount', {
@@ -47,15 +61,21 @@ export default class Inspector {
         });
     }
 
+    dispose() {
+        this.pane.dispose();
+        this.pane.element.remove();
+    }
+
     addBufferFolder(pane: Pane) {
         const bufferFolder = pane.addFolder({
             title: 'buffers',
+            expanded: false,
         });
 
         const bufferParams = this.bufferStore.getStats();
         bufferFolder.addMonitor(bufferParams, 'bufferCount', {
             format: n => n.toFixed(0),
-            label: 'GPUBuffers',
+            label: 'GPU buffers',
         });
         bufferFolder.addMonitor(bufferParams, 'bufferMemoryBytes', {
             format: n => {

examples/basic/active-inactive/index.ts

@@ -4,14 +4,10 @@ import { BasicMaterial } from 'hammerhead.gl/materials';
 import { Camera, Node } from 'hammerhead.gl/scene';
 
 import { load8bitImage } from '../../lib';
-import { Pane } from 'tweakpane';
+import Inspector from '../../Inspector';
 
-const canvas = document.getElementById('canvas') as HTMLCanvasElement;
-
-async function main() {
+export async function run(context: Context, inspector: Inspector) {
     const logo = await load8bitImage('/webgpu.png');
-
-    const context = await Context.create(canvas);
     const renderer = context.renderer;
 
     const material = new BasicMaterial().withColorTexture(logo);
@@ -30,23 +26,19 @@ async function main() {
 
     context.on('resized', render);
 
-    const pane = new Pane();
-
     const params = {
         mesh: mesh.active,
         material: material.active,
     };
 
-    pane.addInput(params, 'mesh')
+    inspector.exampleFolder.addInput(params, 'mesh')
         .on('change', ev => {
             mesh.active = ev.value;
             render();
         });
-    pane.addInput(params, 'material')
+    inspector.exampleFolder.addInput(params, 'material')
         .on('change', ev => {
             material.active = ev.value;
             render()
         });
 }
-
-main().catch(e => console.error(e));

examples/basic/alpha-blending/index.ts

@@ -8,16 +8,13 @@ import {
 import { Camera, Node } from 'hammerhead.gl/scene';
 
 import { load8bitImage } from '../../lib';
-import { Pane } from 'tweakpane';
 import { BlendFactor, BlendOp } from 'hammerhead.gl/materials/Material';
+import Inspector from '../../Inspector';
 
-const canvas = document.getElementById('canvas') as HTMLCanvasElement;
-
-async function main() {
+export async function run(context: Context, inspector: Inspector) {
     const checkerboard = await load8bitImage('/checkerboard.jpg');
     const explosion = await load8bitImage('/explosion.png');
 
-    const context = await Context.create(canvas);
     const renderer = context.renderer;
     renderer.clearColor = chroma('cyan');
 
@@ -54,15 +51,13 @@ async function main() {
 
     render();
 
-    const pane = new Pane();
-
     function createFolder(material: Material) {
-        const colorFolder = pane.addFolder({
+        const colorFolder = inspector.pane.addFolder({
             title: 'color blending',
             expanded: true,
         });
 
-        const alphaFolder = pane.addFolder({
+        const alphaFolder = inspector.pane.addFolder({
             title: 'alpha blending',
             expanded: true,
         });
@@ -90,10 +85,8 @@ async function main() {
 
     createFolder(tile.material);
 
-    pane.on('change', () => {
+    inspector.pane.on('change', () => {
         tile.material.incrementVersion();
         render();
     });
 }
-
-main().catch(e => console.error(e));

examples/basic/bounds/index.ts

@@ -5,10 +5,7 @@ import { BoundsHelper } from 'hammerhead.gl/helpers';
 import { BasicMaterial, LineMaterial } from 'hammerhead.gl/materials';
 import { frameBounds, loadPLYModel } from '../../lib';
 
-const canvas = document.getElementById('canvas') as HTMLCanvasElement;
-
-async function main() {
-    const context = await Context.create(canvas);
+export async function run(context: Context) {
     const renderer = context.renderer;
     renderer.clearColor = chroma('gray');
 
@@ -54,6 +51,10 @@ async function main() {
     let now = performance.now();
 
     function renderLoop() {
+        if (renderer.destroyed) {
+            return;
+        }
+
         const current = performance.now();
         const dt = (current - now) / 1000;
         const degrees = 40 * dt;
@@ -81,5 +82,3 @@ async function main() {
 
     context.on('resized', render);
 }
-
-main().catch(e => console.error(e));

examples/basic/clear-color/index.ts

@@ -1,35 +1,26 @@
 import chroma from 'chroma-js';
 import { Context } from 'hammerhead.gl/core';
 import { Camera } from 'hammerhead.gl/scene';
-import { Pane } from 'tweakpane';
+import Inspector from '../../Inspector';
 
-const canvas = document.getElementById('canvas') as HTMLCanvasElement;
-
-async function main() {
-    const context = await Context.create(canvas);
+export function run(context: Context, pane: Inspector) {
     const renderer = context.renderer;
 
     const camera = new Camera('perspective');
     function render() {
         renderer.render(null, camera);
     }
 
-    setInterval(render, 500);
-
     context.on('resized', render);
 
     const PARAMS = {
         clearColor: {r: 255, g: 0, b: 55},
       };
 
-    const pane = new Pane();
-
-    pane.addInput(PARAMS, 'clearColor').on('change', ev => {
+    pane.exampleFolder.addInput(PARAMS, 'clearColor').on('change', ev => {
         const rgb = ev.value;
         const c = chroma(rgb.r, rgb.g, rgb.b);
         renderer.clearColor = c;
         render();
     })
 }
-
-main().catch(e => console.error(e));

examples/basic/dynamic-geometry/index.ts

@@ -7,10 +7,7 @@ import { Camera, Node } from 'hammerhead.gl/scene';
 import { loadPLYModel } from '../../lib';
 import LineMaterial from 'hammerhead.gl/materials/LineMaterial';
 
-const canvas = document.getElementById('canvas') as HTMLCanvasElement;
-
-async function main() {
-    const context = await Context.create(canvas);
+export async function run(context: Context) {
     const renderer = context.renderer;
     renderer.clearColor = chroma('gray');
 
@@ -65,6 +62,9 @@ async function main() {
     }
 
     function renderLoop() {
+        if (renderer.destroyed) {
+            return;
+        }
         const current = performance.now();
         updateVertices(current);
         requestAnimationFrame(renderLoop);
@@ -76,5 +76,3 @@ async function main() {
 
     context.on('resized', render);
 }
-
-main().catch(e => console.error(e));