feat: implement performance view

app/src/lib/result-viewer/Scene.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { T } from "@threlte/core";
+  import { T, useTask } from "@threlte/core";
   import {
     MeshLineGeometry,
     MeshLineMaterial,
@@ -7,9 +7,12 @@
     useTexture,
   } from "@threlte/extras";
   import {
+    type Group,
     type BufferGeometry,
     type PerspectiveCamera,
-    type Vector3,
+    Vector3,
+    type Vector3Tuple,
+    Box3,
   } from "three";
   import type { OrbitControls as OrbitControlsType } from "three/addons/controls/OrbitControls.js";
   import { OrbitControls } from "@threlte/extras";
@@ -18,19 +21,21 @@
 
   export let geometries: BufferGeometry[];
   export let lines: Vector3[][];
+  let geos: Group;
 
-  export let camera: PerspectiveCamera;
-  export let controls: OrbitControlsType;
+  let camera: PerspectiveCamera;
+  let controls: OrbitControlsType;
+  export let centerCamera: boolean = true;
 
   const matcap = useTexture("/matcap_green.jpg");
 
-  const cameraTransform = localStore<{ camera: number[]; target: number[] }>(
-    "nodes.camera.transform",
-    {
-      camera: [0, 0, 10],
-      target: [0, 0, 0],
-    },
-  );
+  const cameraTransform = localStore<{
+    camera: Vector3Tuple;
+    target: Vector3Tuple;
+  }>("nodes.camera.transform", {
+    camera: [0, 0, 10],
+    target: [0, 0, 0],
+  });
 
   function saveCameraState() {
     if (!camera) return;
@@ -41,12 +46,49 @@
   }
 
   function getPosition(geo: BufferGeometry, i: number) {
-    const pos = [
+    return [
       geo.attributes.position.array[i],
       geo.attributes.position.array[i + 1],
       geo.attributes.position.array[i + 2],
-    ];
-    return pos;
+    ] as Vector3Tuple;
+  }
+
+  let cameraTarget: Vector3;
+  let duration = 0;
+  let totalDuration = 5;
+  const { start, stop, started } = useTask((delta) => {
+    duration += delta;
+    if (!cameraTarget) {
+      stop();
+      return;
+    }
+    // This function will be executed on every frame
+    if (duration >= totalDuration) {
+      controls.target.copy(cameraTarget);
+      stop();
+      controls.update();
+    } else {
+      const t = duration / totalDuration;
+      controls.target.lerp(cameraTarget, t);
+      controls.update();
+    }
+  });
+  stop();
+
+  $: if (geometries && geos && centerCamera) {
+    const aabb = new Box3();
+    aabb.setFromObject(geos);
+    const newCenter = aabb.getCenter(new Vector3());
+    if (
+      newCenter &&
+      newCenter.x !== 0 &&
+      newCenter.y !== 0 &&
+      newCenter.z !== 0
+    ) {
+      cameraTarget = newCenter;
+      duration = 0;
+      start();
+    }
   }
 </script>
 
@@ -70,30 +112,32 @@
 <T.DirectionalLight position={[0, 10, 10]} />
 <T.AmbientLight intensity={2} />
 
-{#each geometries as geo}
-  {#if $AppSettings.showIndices}
-    {#each geo.attributes.position.array as _, i}
-      {#if i % 3 === 0}
-        <Text text={i / 3} fontSize={0.25} position={getPosition(geo, i)} />
-      {/if}
-    {/each}
-  {/if}
+<T.Group bind:ref={geos}>
+  {#each geometries as geo}
+    {#if $AppSettings.showIndices}
+      {#each geo.attributes.position.array as _, i}
+        {#if i % 3 === 0}
+          <Text fontSize={0.25} position={getPosition(geo, i)} />
+        {/if}
+      {/each}
+    {/if}
 
-  {#if $AppSettings.showVertices}
-    <T.Points visible={true}>
-      <T is={geo} />
-      <T.PointsMaterial size={0.25} />
-    </T.Points>
-  {/if}
-  {#await matcap then value}
-    <T.Mesh geometry={geo}>
-      <T.MeshMatcapMaterial matcap={value} wireframe={$AppSettings.wireframe} />
-      {#if false}
-        <T.MeshStandardMaterial color="green" depthTest={true} />
-      {/if}
-    </T.Mesh>
-  {/await}
-{/each}
+    {#if $AppSettings.showVertices}
+      <T.Points visible={true}>
+        <T is={geo} />
+        <T.PointsMaterial size={0.25} />
+      </T.Points>
+    {/if}
+    {#await matcap then value}
+      <T.Mesh geometry={geo}>
+        <T.MeshMatcapMaterial
+          matcap={value}
+          wireframe={$AppSettings.wireframe}
+        />
+      </T.Mesh>
+    {/await}
+  {/each}
+</T.Group>
 
 {#if $AppSettings.showStemLines && lines}
   {#each lines as line}

app/src/lib/result-viewer/Viewer.svelte

@@ -1,36 +1,34 @@
 <script lang="ts">
   import { Canvas } from "@threlte/core";
   import Scene from "./Scene.svelte";
-  import {
-    BufferGeometry,
-    Float32BufferAttribute,
-    PerspectiveCamera,
-    Vector3,
-  } from "three";
+  import { BufferGeometry, Float32BufferAttribute, Vector3 } from "three";
   import { decodeFloat } from "@nodes/utils";
-  import type { OrbitControls } from "three/examples/jsm/Addons.js";
+  import type { PerformanceStore } from "$lib/performance";
 
   export let result: Int32Array;
 
-  let camera: PerspectiveCamera;
-  let controls: OrbitControls;
-  let center: Vector3;
   export let centerCamera: boolean = true;
+  export let perf: PerformanceStore;
 
   let geometries: BufferGeometry[] = [];
   let lines: Vector3[][] = [];
 
+  let totalVertices = 0;
+  let totalFaces = 0;
+
   function createGeometryFromEncodedData(
     encodedData: Int32Array,
+    geometry = new BufferGeometry(),
   ): BufferGeometry {
-    const geometry = new BufferGeometry();
-
     // Extract data from the encoded array
     let index = 0;
     const geometryType = encodedData[index++];
     const vertexCount = encodedData[index++];
     const faceCount = encodedData[index++];
 
+    totalVertices += vertexCount;
+    totalFaces += faceCount;
+
     // Indices
     const indicesEnd = index + faceCount * 3;
     const indices = encodedData.subarray(index, indicesEnd);
@@ -119,8 +117,17 @@
   }
 
   $: if (result) {
-    const inputs = parse_args(result);
+    perf?.startRun();
 
+    let a = performance.now();
+    const inputs = parse_args(result);
+    let b = performance.now();
+    perf?.addPoint("parse-args", b - a);
+
+    totalVertices = 0;
+    totalFaces = 0;
+
+    a = performance.now();
     lines = inputs
       .map((input) => {
         if (input[0] === 0) {
@@ -128,26 +135,27 @@
         }
       })
       .filter(Boolean) as Vector3[][];
+    b = performance.now();
+    perf?.addPoint("create-lines", b - a);
 
-    center = new Vector3();
-
+    a = performance.now();
     geometries = inputs
-      .map((input) => {
+      .map((input, i) => {
         if (input[0] === 1) {
-          const geo = createGeometryFromEncodedData(input);
-          geo?.computeBoundingSphere();
-          if (geo.boundingSphere) {
-            center.add(geo.boundingSphere.center);
-          }
-          return geo;
+          return createGeometryFromEncodedData(input, geometries[i]);
         }
       })
       .filter(Boolean) as BufferGeometry[];
+    b = performance.now();
+    perf?.addPoint("create-geometries", b - a);
 
-    center = center.divideScalar(geometries.length);
+    perf?.addPoint("total-vertices", totalVertices);
+    perf?.addPoint("total-faces", totalFaces);
+
+    perf?.stopRun();
   }
 </script>
 
 <Canvas>
-  <Scene bind:camera bind:controls {geometries} {lines} />
+  <Scene {geometries} {lines} {centerCamera} />
 </Canvas>