feat: add box node

app/src/lib/graph-interface/graph-manager.ts

@@ -8,6 +8,13 @@ import type { NodeInput } from "@nodes/types";
 
 const logger = createLogger("graph-manager");
 
+function areSocketsCompatible(output: string | undefined, inputs: string | string[] | undefined) {
+  if (Array.isArray(inputs) && output) {
+    return inputs.includes(output);
+  }
+  return inputs === output;
+}
+
 export class GraphManager extends EventEmitter<{ "save": Graph, "result": any }> {
 
   status: Writable<"loading" | "idle" | "error"> = writable("loading");
@@ -177,7 +184,6 @@ export class GraphManager extends EventEmitter<{ "save": Graph, "result": any }>
         }
       }
     }
-    console.log(settings);
 
     this.history.reset();
     this._init(this.graph);
@@ -353,7 +359,7 @@ export class GraphManager extends EventEmitter<{ "save": Graph, "result": any }>
     const fromSocketType = from.tmp?.type?.outputs?.[fromSocket];
     const toSocketType = to.tmp?.type?.inputs?.[toSocket]?.type;
 
-    if (fromSocketType !== toSocketType) {
+    if (!areSocketsCompatible(fromSocketType, toSocketType)) {
       logger.error(`Socket types do not match: ${fromSocketType} !== ${toSocketType}`);
       return;
     }
@@ -441,8 +447,8 @@ export class GraphManager extends EventEmitter<{ "save": Graph, "result": any }>
     const nodeType = node?.tmp?.type;
     if (!nodeType) return [];
 
-
     const sockets: [Node, string | number][] = []
+
     // if index is a string, we are an input looking for outputs
     if (typeof index === "string") {
 
@@ -479,7 +485,7 @@ export class GraphManager extends EventEmitter<{ "save": Graph, "result": any }>
         const inputs = node?.tmp?.type?.inputs;
         if (!inputs) continue;
         for (const key in inputs) {
-          if (inputs[key].type === ownType && edges.get(node.id) !== key) {
+          if (areSocketsCompatible(ownType, inputs[key].type) && edges.get(node.id) !== key) {
             sockets.push([node, key]);
           }
         }

app/src/lib/node-registry.ts

@@ -72,10 +72,13 @@ export class RemoteNodeRegistry implements NodeRegistry {
 
     nodeIds.push("max/plantarium/random");
     nodeIds.push("max/plantarium/float");
+    nodeIds.push("max/plantarium/triangle");
     nodeIds.push("max/plantarium/output");
     nodeIds.push("max/plantarium/array");
     nodeIds.push("max/plantarium/sum");
     nodeIds.push("max/plantarium/stem");
+    nodeIds.push("max/plantarium/box");
+    nodeIds.push("max/plantarium/math");
 
     const nodes = await Promise.all(nodeIds.map(id => this.loadNode(id)));
 

app/src/lib/viewer/Scene.svelte

@@ -1,18 +1,38 @@
 <script lang="ts">
   import { T } from "@threlte/core";
+  import { Text } from "@threlte/extras";
   import type { BufferGeometry } from "three";
   import { OrbitControls } from "@threlte/extras";
 
   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>
 
-<T.PerspectiveCamera position={[10, 10, 10]} makeDefault fov={50}>
+<T.PerspectiveCamera position={[-10, 10, 10]} makeDefault fov={50}>
   <OrbitControls />
 </T.PerspectiveCamera>
 
 <T.DirectionalLight position={[0, 10, 10]} />
 
 {#each geometry as geo}
+  {#each geo.attributes.position.array as attr, i}
+    {#if i % 3 === 0}
+      <Text text={i / 3} fontSize={1} position={getPosition(geo, i)} />
+    {/if}
+  {/each}
+
+  <T.Points visible={true}>
+    <T is={geo} />
+    <T.PointsMaterial size={0.25} />
+  </T.Points>
   <T.Mesh geometry={geo}>
     <T.MeshBasicMaterial color="red" />
   </T.Mesh>

app/src/lib/viewer/Viewer.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
   import { Canvas } from "@threlte/core";
   import Scene from "./Scene.svelte";
-  import { BufferGeometry, Float32BufferAttribute } from "three";
+  import {
+    BufferAttribute,
+    BufferGeometry,
+    Float32BufferAttribute,
+  } from "three";
   import { decodeFloat } from "$lib/helpers/encode";
 
   export let result: Int32Array;
@@ -20,33 +24,28 @@
     const faceCount = encodedData[index++];
 
     // Indices
-    const indices: number[] = [];
-    for (let i = 0; i < faceCount * 3; i++) {
-      indices.push(encodedData[index++]);
-    }
+    const indices = encodedData.subarray(index, index + faceCount * 3);
+    index = index + faceCount * 3;
 
-    // Face normals (although typically there would be one normal per vertex)
-    const normals: number[] = [];
-    for (let i = 0; i < faceCount; i++) {
-      const x = decodeFloat(encodedData[index++]);
-      const y = decodeFloat(encodedData[index++]);
-      const z = decodeFloat(encodedData[index++]);
-      normals.push(x, y, z);
-    }
+    const normals = new Float32Array(
+      encodedData.buffer,
+      index * 4,
+      faceCount * 3,
+    );
+    index = index + faceCount * 3;
 
     // Vertices
-    const vertices: number[] = [];
-    for (let i = 0; i < vertexCount; i++) {
-      const x = decodeFloat(encodedData[index++]);
-      const y = decodeFloat(encodedData[index++]);
-      const z = decodeFloat(encodedData[index++]);
-      vertices.push(x, y, z);
-    }
+    const vertices = new Float32Array(
+      encodedData.buffer,
+      index * 4,
+      vertexCount * 3,
+    );
 
     // Add data to geometry
-    geometry.setIndex(indices);
+    geometry.setIndex([...indices]);
     geometry.setAttribute("position", new Float32BufferAttribute(vertices, 3));
-    geometry.setAttribute("normal", new Float32BufferAttribute(normals, 3));
+    // geometry.setAttribute("normal", new Float32BufferAttribute(normals, 3));
+    geometry.computeVertexNormals();
 
     return geometry;
   }
@@ -97,8 +96,6 @@
   $: if (result) {
     const inputs = parse_args(result);
 
-    console.log({ inputs });
-
     for (let input of inputs) {
       if (input[0] === 1) {
         const geo = createGeometryFromEncodedData(input);