feat: change default template

app/package.json

@@ -33,6 +33,7 @@
     "@unocss/preset-icons": "^0.59.4",
     "svelte": "^4.2.15",
     "svelte-check": "^3.7.0",
+    "three-inspect": "^0.4.5",
     "tslib": "^2.6.2",
     "typescript": "^5.4.5",
     "unocss": "^0.59.4",

app/src/lib/graph-templates/default.json

@@ -0,0 +1 @@
+{"settings":{"resolution.circle":26,"resolution.curve":39},"nodes":[{"id":9,"position":[220,80],"type":"max/plantarium/output","props":{}},{"id":10,"position":[95,80],"type":"max/plantarium/stem","props":{"amount":5,"length":11,"thickness":0.1}},{"id":14,"position":[195,80],"type":"max/plantarium/gravity","props":{"strength":0.38,"scale":39,"fixBottom":0,"directionalStrength":[1,1,1],"depth":1,"curviness":1}},{"id":15,"position":[120,80],"type":"max/plantarium/noise","props":{"strength":4.9,"scale":2.2,"fixBottom":1,"directionalStrength":[1,1,1],"depth":1,"octaves":1}},{"id":16,"position":[70,80],"type":"max/plantarium/vec3","props":{"0":0,"1":0,"2":0}},{"id":17,"position":[45,80],"type":"max/plantarium/random","props":{"min":-2,"max":2}},{"id":18,"position":[170,80],"type":"max/plantarium/branch","props":{"length":1.6,"thickness":0.69,"amount":36,"offsetSingle":0.5,"lowestBranch":0.46,"highestBranch":1,"depth":1,"rotation":180}},{"id":19,"position":[145,80],"type":"max/plantarium/gravity","props":{"strength":0.38,"scale":39,"fixBottom":0,"directionalStrength":[1,1,1],"depth":1,"curviness":1}},{"id":20,"position":[70,120],"type":"max/plantarium/random","props":{"min":0.073,"max":0.15}}],"edges":[[14,0,9,"input"],[10,0,15,"plant"],[16,0,10,"origin"],[17,0,16,"0"],[17,0,16,"2"],[18,0,14,"plant"],[15,0,19,"plant"],[19,0,18,"plant"],[20,0,10,"thickness"]]}

app/src/lib/graph-templates/index.ts

@@ -3,5 +3,6 @@ export { tree } from "./tree";
 export { plant } from "./plant";
 export { default as lottaFaces } from "./lotta-faces.json";
 export { default as lottaNodes } from "./lotta-nodes.json";
+export { default as defaultPlant } from "./default.json"
 export { default as lottaNodesAndFaces } from "./lotta-nodes-and-faces.json";
 

app/src/lib/helpers/index.ts

@@ -137,6 +137,7 @@ export function humanizeDuration(durationInMilliseconds: number) {
   let hours = Math.floor((durationInMilliseconds % millisecondsPerDay) / millisecondsPerHour);
   let minutes = Math.floor((durationInMilliseconds % millisecondsPerHour) / millisecondsPerMinute);
   let seconds = Math.floor((durationInMilliseconds % millisecondsPerMinute) / millisecondsPerSecond);
+  let millis = durationInMilliseconds % millisecondsPerSecond;
 
   let durationString = '';
 
@@ -149,10 +150,14 @@ export function humanizeDuration(durationInMilliseconds: number) {
   if (minutes > 0) {
     durationString += minutes + 'm ';
   }
-  if (seconds > 0 || durationString === '') {
+  if (seconds > 0) {
     durationString += seconds + 's';
   }
 
+  if (millis > 0 || durationString === '') {
+    durationString += millis + 'ms';
+  }
+
   return durationString.trim();
 }
 export function debounceAsyncFunction<T extends any[], R>(func: (...args: T) => Promise<R>): (...args: T) => Promise<R> {

app/src/lib/performance/SmallGraph.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  export let points: number[];
+
+  function constructPath() {
+    const max = Math.max(...points);
+    const min = Math.min(...points);
+    return points
+      .map((point, i) => {
+        const x = (i / (points.length - 1)) * 100;
+        const y = 100 - ((point - min) / (max - min)) * 100;
+        return `${x},${y}`;
+      })
+      .join(" ");
+  }
+</script>
+
+<svg preserveAspectRatio="none" viewBox="0 0 100 100">
+  {#key points}
+    <polyline vector-effect="non-scaling-stroke" points={constructPath()} />
+  {/key}
+</svg>
+
+<style>
+  svg {
+    height: 40px;
+    width: 100%;
+  }
+  polyline {
+    fill: none;
+    stroke: var(--layer-3);
+    opacity: 1;
+    stroke-width: 1;
+  }
+</style>

app/src/lib/performance/SmallPerformanceViewer.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+  import { humanizeDuration, humanizeNumber } from "$lib/helpers";
+  import localStore from "$lib/helpers/localStore";
+  import SmallGraph from "./SmallGraph.svelte";
+  import type { PerformanceData, PerformanceStore } from "./store";
+
+  export let store: PerformanceStore;
+
+  const open = localStore("node.performance.small.open", {
+    runtime: false,
+    fps: false,
+    vertices: false,
+    faces: false,
+  });
+
+  $: vertices = $store?.at(-1)?.["total-vertices"][0] || 0;
+  $: faces = $store?.at(-1)?.["total-faces"][0] || 0;
+  $: runtime = $store?.at(-1)?.["runtime"][0] || 0;
+
+  function getPoints(data: PerformanceData, key: string) {
+    return data?.map((run) => run[key]?.[0] || 0) || [];
+  }
+
+  export let fps: number[] = [];
+</script>
+
+<div class="wrapper">
+  <table>
+    <tr on:click={() => ($open.runtime = !$open.runtime)}>
+      <td>{$open.runtime ? "-" : "+"} runtime </td>
+      <td>{humanizeDuration(runtime || 1000)}</td>
+    </tr>
+    {#if $open.runtime}
+      <tr>
+        <td colspan="2">
+          <SmallGraph points={getPoints($store, "runtime")} />
+        </td>
+      </tr>
+    {/if}
+
+    <tr on:click={() => ($open.fps = !$open.fps)}>
+      <td>{$open.fps ? "-" : "+"} fps </td>
+      <td>
+        {#if fps[fps.length - 1] > 5}
+          {Math.floor(1000 / fps[fps.length - 1])}fps
+        {/if}
+      </td>
+    </tr>
+    {#if $open.fps}
+      <tr>
+        <td colspan="2">
+          <SmallGraph points={fps} />
+        </td>
+      </tr>
+    {/if}
+
+    <tr on:click={() => ($open.vertices = !$open.vertices)}>
+      <td>{$open.vertices ? "-" : "+"} vertices </td>
+      <td>{humanizeNumber(vertices || 0)}</td>
+    </tr>
+    {#if $open.vertices}
+      <tr>
+        <td colspan="2">
+          <SmallGraph points={getPoints($store, "total-vertices")} />
+        </td>
+      </tr>
+    {/if}
+
+    <tr on:click={() => ($open.faces = !$open.faces)}>
+      <td>{$open.faces ? "-" : "+"} faces </td>
+      <td>{humanizeNumber(faces || 0)}</td>
+    </tr>
+    {#if $open.faces}
+      <tr>
+        <td colspan="2">
+          <SmallGraph points={getPoints($store, "total-faces")} />
+        </td>
+      </tr>
+    {/if}
+  </table>
+</div>
+
+<style>
+  table {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    background: var(--layer-0);
+    border: solid thin var(--outline);
+    border-collapse: collapse;
+  }
+  tr {
+    cursor: pointer;
+  }
+  td {
+    padding: 4px;
+    padding-inline: 8px;
+    font-size: 0.8em;
+    border: solid thin var(--outline);
+  }
+</style>

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

@@ -13,6 +13,16 @@
 
   const threlte = useThrelte();
 
+  export let fps: number[] = [];
+  let renderer = threlte.renderer;
+  let rendererRender = renderer.render;
+  renderer.render = function (scene, camera) {
+    const a = performance.now();
+    rendererRender.call(renderer, scene, camera);
+    fps.push(performance.now() - a);
+    fps = fps.slice(-100);
+  };
+
   export const invalidate = function () {
     if (scene) {
       geometries = scene.children

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

@@ -7,10 +7,12 @@
   import { decodeFloat, splitNestedArray } from "@nodes/utils";
   import type { PerformanceStore } from "$lib/performance";
   import { AppSettings } from "$lib/settings/app-settings";
+  import SmallPerformanceViewer from "$lib/performance/SmallPerformanceViewer.svelte";
 
   export let centerCamera: boolean = true;
   export let perf: PerformanceStore;
   export let scene: Group;
+  let fps: number[] = [];
 
   let lines: Vector3[][] = [];
 
@@ -59,6 +61,10 @@
   };
 </script>
 
+{#if $AppSettings.showPerformancePanel}
+  <SmallPerformanceViewer {fps} store={perf} />
+{/if}
+
 <Canvas>
-  <Scene bind:scene bind:invalidate {lines} {centerCamera} />
+  <Scene bind:scene bind:invalidate {lines} {centerCamera} bind:fps />
 </Canvas>

app/src/routes/+page.svelte

@@ -59,7 +59,7 @@
 
   let graph = localStorage.getItem("graph")
     ? JSON.parse(localStorage.getItem("graph")!)
-    : templates.plant;
+    : templates.defaultPlant;
 
   let manager: GraphManager;
   let managerStatus: Writable<"loading" | "error" | "idle">;