feat: node store interface

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

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { T } from "@threlte/core";
+  import { Text } from "@threlte/extras";
+  import type { BufferGeometry } from "three";
+  import { OrbitControls } from "@threlte/extras";
+  import { AppSettings } from "../settings/app-settings";
+
+  export let geometry: BufferGeometry[];
+
+  function getPosition(geo: BufferGeometry, i: number) {
+    const pos = [
+      geo.attributes.position.array[i],
+      geo.attributes.position.array[i + 1],
+      geo.attributes.position.array[i + 2],
+    ];
+    return pos;
+  }
+</script>
+
+{#if $AppSettings.showGrid}
+  <T.GridHelper args={[20, 20]} />
+{/if}
+
+<T.PerspectiveCamera position={[-10, 10, 10]} makeDefault fov={50}>
+  <OrbitControls />
+</T.PerspectiveCamera>
+
+<T.DirectionalLight position={[0, 10, 10]} />
+<T.AmbientLight intensity={0.5} />
+
+{#each geometry 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}
+
+    <T.Points visible={true}>
+      <T is={geo} />
+      <T.PointsMaterial size={0.25} />
+    </T.Points>
+  {/if}
+  <T.Mesh geometry={geo}>
+    <T.MeshStandardMaterial color="green" wireframe={$AppSettings.wireframe} />
+  </T.Mesh>
+{/each}

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

@@ -0,0 +1,109 @@
+<script lang="ts">
+  import { Canvas } from "@threlte/core";
+  import Scene from "./Scene.svelte";
+  import { BufferGeometry, Float32BufferAttribute } from "three";
+
+  export let result: Int32Array;
+
+  let geometries: BufferGeometry[] = [];
+
+  function createGeometryFromEncodedData(
+    encodedData: Int32Array,
+  ): 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++];
+
+    // Indices
+    const indicesEnd = index + faceCount * 3;
+    const indices = encodedData.subarray(index, indicesEnd);
+    index = indicesEnd;
+
+    // Vertices
+    const vertices = new Float32Array(
+      encodedData.buffer,
+      index * 4,
+      vertexCount * 3,
+    );
+    index = index + vertexCount * 3;
+
+    const normals = new Float32Array(
+      encodedData.buffer,
+      index * 4,
+      vertexCount * 3,
+    );
+    index = index + vertexCount * 3;
+
+    // Add data to geometry
+    geometry.setIndex([...indices]);
+    geometry.setAttribute("position", new Float32BufferAttribute(vertices, 3));
+    geometry.setAttribute("normal", new Float32BufferAttribute(normals, 3));
+    geometry.computeVertexNormals();
+
+    return geometry;
+  }
+
+  function parse_args(input: Int32Array) {
+    let index = 0;
+    const length = input.length;
+    let res: Int32Array[] = [];
+
+    let nextBracketIndex = 0;
+    let argStartIndex = 0;
+    let depth = -1;
+
+    while (index < length) {
+      const value = input[index];
+
+      if (index === nextBracketIndex) {
+        nextBracketIndex = index + input[index + 1] + 1;
+        if (value === 0) {
+          depth++;
+        } else {
+          depth--;
+        }
+
+        if (depth === 1 && value === 0) {
+          // if opening bracket
+          argStartIndex = index + 2;
+        }
+
+        if (depth === 0 && value === 1) {
+          // if closing bracket
+          res.push(input.slice(argStartIndex, index));
+          argStartIndex = index + 2;
+        }
+
+        index = nextBracketIndex;
+        continue;
+      }
+
+      // we should not be here
+
+      index++;
+    }
+
+    return res;
+  }
+
+  $: if (result) {
+    const inputs = parse_args(result);
+
+    geometries = inputs
+      .map((input) => {
+        if (input[0] === 1) {
+          const geo = createGeometryFromEncodedData(input);
+          return geo;
+        }
+      })
+      .filter(Boolean) as BufferGeometry[];
+  }
+</script>
+
+<Canvas>
+  <Scene geometry={geometries} />
+</Canvas>