feat: add benchmark settings panel
All checks were successful
Deploy to GitHub Pages / build_site (push) Successful in 1m59s
All checks were successful
Deploy to GitHub Pages / build_site (push) Successful in 1m59s
This commit is contained in:
parent
8bf2958e1d
commit
d9afec5bf6
@ -18,6 +18,7 @@
|
||||
"@types/three": "^0.164.0",
|
||||
"@unocss/reset": "^0.59.4",
|
||||
"comlink": "^4.4.1",
|
||||
"file-saver": "^2.0.5",
|
||||
"jsondiffpatch": "^0.6.0",
|
||||
"three": "^0.164.1"
|
||||
},
|
||||
@ -27,6 +28,7 @@
|
||||
"@sveltejs/adapter-static": "^3.0.1",
|
||||
"@sveltejs/vite-plugin-svelte": "next",
|
||||
"@tsconfig/svelte": "^5.0.4",
|
||||
"@types/file-saver": "^2.0.7",
|
||||
"@unocss/preset-icons": "^0.59.4",
|
||||
"svelte": "5.0.0-next.118",
|
||||
"svelte-check": "^3.7.0",
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
import Camera from "../Camera.svelte";
|
||||
import GraphView from "./GraphView.svelte";
|
||||
import type { Node, NodeId, Node as NodeType, Socket } from "@nodes/types";
|
||||
import { NodeDefinitionSchema } from "@nodes/types";
|
||||
import { GraphSchema, NodeDefinitionSchema } from "@nodes/types";
|
||||
import FloatingEdge from "../edges/FloatingEdge.svelte";
|
||||
import {
|
||||
activeNodeId,
|
||||
@ -28,6 +28,7 @@
|
||||
import { createWasmWrapper } from "@nodes/utils";
|
||||
|
||||
import HelpView from "../HelpView.svelte";
|
||||
import FileSaver from "file-saver";
|
||||
|
||||
export let manager: GraphManager;
|
||||
|
||||
@ -612,6 +613,7 @@
|
||||
keymap.addShortcut({
|
||||
key: "a",
|
||||
ctrl: true,
|
||||
preventDefault: true,
|
||||
description: "Select all nodes",
|
||||
callback: () => {
|
||||
if (!isBodyFocused()) return;
|
||||
@ -637,7 +639,6 @@
|
||||
ctrl: true,
|
||||
description: "Redo",
|
||||
callback: () => {
|
||||
if (!isBodyFocused()) return;
|
||||
manager.redo();
|
||||
for (const node of $nodes.values()) {
|
||||
updateNodePosition(node);
|
||||
@ -645,6 +646,20 @@
|
||||
},
|
||||
});
|
||||
|
||||
keymap.addShortcut({
|
||||
key: "s",
|
||||
ctrl: true,
|
||||
description: "Save",
|
||||
preventDefault: true,
|
||||
callback: () => {
|
||||
const state = manager.serialize();
|
||||
const blob = new Blob([JSON.stringify(state)], {
|
||||
type: "application/json;charset=utf-8",
|
||||
});
|
||||
FileSaver.saveAs(blob, "nodarium-graph.json");
|
||||
},
|
||||
});
|
||||
|
||||
keymap.addShortcut({
|
||||
key: ["Delete", "Backspace", "x"],
|
||||
description: "Delete selected nodes",
|
||||
@ -833,17 +848,31 @@
|
||||
});
|
||||
});
|
||||
} else if (event.dataTransfer.files.length) {
|
||||
const files = event.dataTransfer.files;
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const buffer = e.target?.result as Buffer;
|
||||
if (buffer) {
|
||||
const wrapper = createWasmWrapper(buffer);
|
||||
const definition = wrapper.get_definition();
|
||||
const res = NodeDefinitionSchema.parse(definition);
|
||||
}
|
||||
};
|
||||
reader.readAsArrayBuffer(files[0]);
|
||||
const file = event.dataTransfer.files[0];
|
||||
|
||||
if (file.type === "application/wasm") {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const buffer = e.target?.result as Buffer;
|
||||
if (buffer) {
|
||||
const wrapper = createWasmWrapper(buffer);
|
||||
const definition = wrapper.get_definition();
|
||||
const res = NodeDefinitionSchema.parse(definition);
|
||||
console.log(res);
|
||||
}
|
||||
};
|
||||
reader.readAsArrayBuffer(file);
|
||||
} else if (file.type === "application/json") {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const buffer = e.target?.result as Buffer;
|
||||
if (buffer) {
|
||||
const state = GraphSchema.parse(JSON.parse(buffer.toString()));
|
||||
manager.load(state);
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -893,13 +922,13 @@
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
accept="application/wasm"
|
||||
accept="application/wasm,application/json"
|
||||
id="drop-zone"
|
||||
disabled={!isDragging}
|
||||
on:dragend={handleDragEnd}
|
||||
on:dragleave={handleDragEnd}
|
||||
/>
|
||||
<label for="drop-zone" />
|
||||
<label for="drop-zone"></label>
|
||||
|
||||
{#if showHelp}
|
||||
<HelpView registry={manager.registry} />
|
||||
|
||||
@ -20,7 +20,7 @@ export function grid(width: number, height: number) {
|
||||
visible: false,
|
||||
},
|
||||
position: [x * 30, y * 40],
|
||||
props: i == 0 ? { value: 0 } : { op_type: 2, a: 2, b: 2 },
|
||||
props: i == 0 ? { value: 0 } : { op_type: 0, a: 1, b: 0.05 },
|
||||
type: i == 0 ? "max/plantarium/float" : "max/plantarium/math",
|
||||
});
|
||||
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
export { grid } from "./grid";
|
||||
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 lottaNodesAndFaces } from "./lotta-nodes-and-faces.json";
|
||||
|
||||
|
||||
1
app/src/lib/graph-templates/lotta-faces.json
Normal file
1
app/src/lib/graph-templates/lotta-faces.json
Normal file
@ -0,0 +1 @@
|
||||
{"settings":{"resolution.circle":64,"resolution.curve":64,"randomSeed":false},"nodes":[{"id":9,"position":[260,0],"type":"max/plantarium/output","props":{}},{"id":18,"position":[185,0],"type":"max/plantarium/stem","props":{"amount":64,"length":12,"thickness":0.15}},{"id":19,"position":[210,0],"type":"max/plantarium/noise","props":{"scale":1.3,"strength":5.4}},{"id":20,"position":[235,0],"type":"max/plantarium/branch","props":{"length":0.8,"thickness":0.8,"amount":3}},{"id":21,"position":[160,0],"type":"max/plantarium/vec3","props":{"0":0.39,"1":0,"2":0.41}},{"id":22,"position":[130,0],"type":"max/plantarium/random","props":{"min":-2,"max":2}}],"edges":[[18,0,19,"plant"],[19,0,20,"plant"],[20,0,9,"input"],[21,0,18,"origin"],[22,0,21,"0"],[22,0,21,"2"]]}
|
||||
1
app/src/lib/graph-templates/lotta-nodes-and-faces.json
Normal file
1
app/src/lib/graph-templates/lotta-nodes-and-faces.json
Normal file
File diff suppressed because one or more lines are too long
1
app/src/lib/graph-templates/lotta-nodes.json
Normal file
1
app/src/lib/graph-templates/lotta-nodes.json
Normal file
File diff suppressed because one or more lines are too long
@ -5,6 +5,7 @@ type Shortcut = {
|
||||
shift?: boolean,
|
||||
ctrl?: boolean,
|
||||
alt?: boolean,
|
||||
preventDefault?: boolean,
|
||||
description?: string,
|
||||
callback: (event: KeyboardEvent) => void
|
||||
}
|
||||
@ -17,8 +18,11 @@ export function createKeyMap(keys: Shortcut[]) {
|
||||
|
||||
const store = writable(new Map(keys.map(k => [getShortcutId(k), k])));
|
||||
|
||||
|
||||
return {
|
||||
handleKeyboardEvent: (event: KeyboardEvent) => {
|
||||
const activeElement = document.activeElement as HTMLElement;
|
||||
if (activeElement?.tagName === "INPUT" || activeElement?.tagName === "TEXTAREA") return;
|
||||
const key = [...get(store).values()].find(k => {
|
||||
if (Array.isArray(k.key) ? !k.key.includes(event.key) : k.key !== event.key) return false;
|
||||
if ("shift" in k && k.shift !== event.shiftKey) return false;
|
||||
@ -26,6 +30,7 @@ export function createKeyMap(keys: Shortcut[]) {
|
||||
if ("alt" in k && k.alt !== event.altKey) return false;
|
||||
return true;
|
||||
});
|
||||
if (key && key.preventDefault) event.preventDefault();
|
||||
key?.callback(event);
|
||||
},
|
||||
addShortcut: (shortcut: Shortcut) => {
|
||||
|
||||
48
app/src/lib/performance/BarSplit.svelte
Normal file
48
app/src/lib/performance/BarSplit.svelte
Normal file
@ -0,0 +1,48 @@
|
||||
<script lang="ts">
|
||||
export let labels: string[] = [];
|
||||
export let values: number[] = [];
|
||||
|
||||
$: total = values.reduce((acc, v) => acc + v, 0);
|
||||
|
||||
let colors = ["red", "green", "blue"];
|
||||
</script>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="bars">
|
||||
{#each values as value, i}
|
||||
<div class="bar bg-{colors[i]}" style="width: {(value / total) * 100}%;">
|
||||
{Math.round(value)}ms
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="labels mt-2">
|
||||
{#each values as _label, i}
|
||||
<div class="text-{colors[i]}">{labels[i]}</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<span
|
||||
class="bg-red bg-green bg-yellow bg-blue text-red text-green text-yellow text-blue"
|
||||
></span>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.wrapper {
|
||||
margin-block: 1em;
|
||||
}
|
||||
|
||||
.bars {
|
||||
height: 20px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bar {
|
||||
height: 100%;
|
||||
color: black;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.8em;
|
||||
padding-left: 0.4em;
|
||||
}
|
||||
</style>
|
||||
@ -4,6 +4,7 @@
|
||||
import { Checkbox } from "@nodes/ui";
|
||||
import localStore from "$lib/helpers/localStore";
|
||||
import { type PerformanceData } from "./store";
|
||||
import BarSplit from "./BarSplit.svelte";
|
||||
|
||||
export let data: PerformanceData;
|
||||
|
||||
@ -42,7 +43,7 @@
|
||||
}
|
||||
|
||||
function getLast(key: string) {
|
||||
return data.at(-1)?.[key][0] || 0;
|
||||
return data.at(-1)?.[key]?.[0] || 0;
|
||||
}
|
||||
|
||||
function getLasts() {
|
||||
@ -53,13 +54,13 @@
|
||||
if (onlyLast) {
|
||||
return (
|
||||
getLast("runtime") +
|
||||
getLast("create-geometries") +
|
||||
getLast("update-geometries") +
|
||||
getLast("worker-transfer")
|
||||
);
|
||||
}
|
||||
return (
|
||||
getAverage("runtime") +
|
||||
getAverage("create-geometries") +
|
||||
getAverage("update-geometries") +
|
||||
getAverage("worker-transfer")
|
||||
);
|
||||
}
|
||||
@ -73,7 +74,7 @@
|
||||
const viewerKeys = [
|
||||
"total-vertices",
|
||||
"total-faces",
|
||||
"create-geometries",
|
||||
"update-geometries",
|
||||
"split-result",
|
||||
];
|
||||
|
||||
@ -116,8 +117,8 @@
|
||||
return data.map((run) => {
|
||||
return (
|
||||
run["runtime"].reduce((acc, v) => acc + v, 0) +
|
||||
run["create-geometries"].reduce((acc, v) => acc + v, 0) +
|
||||
run["worker-transfer"].reduce((acc, v) => acc + v, 0)
|
||||
run["update-geometries"].reduce((acc, v) => acc + v, 0) +
|
||||
(run["worker-transfer"]?.reduce((acc, v) => acc + v, 0) || 0)
|
||||
);
|
||||
});
|
||||
}
|
||||
@ -125,8 +126,8 @@
|
||||
return data.map((run) => {
|
||||
return (
|
||||
run["runtime"][0] +
|
||||
run["create-geometries"][0] +
|
||||
run["worker-transfer"][0]
|
||||
run["update-geometries"][0] +
|
||||
(run["worker-transfer"]?.[0] || 0)
|
||||
);
|
||||
});
|
||||
}
|
||||
@ -147,6 +148,22 @@
|
||||
});
|
||||
}
|
||||
|
||||
function getSplitValues(): number[] {
|
||||
if (showAverage) {
|
||||
return [
|
||||
getAverage("worker-transfer"),
|
||||
getAverage("runtime"),
|
||||
getAverage("update-geometries"),
|
||||
];
|
||||
}
|
||||
|
||||
return [
|
||||
getLast("worker-transfer"),
|
||||
getLast("runtime"),
|
||||
getLast("update-geometries"),
|
||||
];
|
||||
}
|
||||
|
||||
function getTitle(t: string) {
|
||||
if (t.includes("/")) {
|
||||
return `Node ${t.split("/").slice(-1).join("/")}`;
|
||||
@ -159,7 +176,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
{#key $activeType && data}
|
||||
{#key $activeType}
|
||||
{#if $activeType === "cache-hit"}
|
||||
<Monitor
|
||||
title="Cache Hits"
|
||||
@ -174,117 +191,122 @@
|
||||
points={constructPoints($activeType)}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<div class="p-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox id="show-total" bind:value={showAverage} />
|
||||
<label for="show-total">Show Average</label>
|
||||
</div>
|
||||
{#if data.length !== 0}
|
||||
<h3>General</h3>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
{round(getTotalPerformance(!showAverage))}<span>ms</span>
|
||||
</td>
|
||||
<td
|
||||
class:active={$activeType === "total"}
|
||||
on:click={() => ($activeType = "total")}
|
||||
>
|
||||
total<span
|
||||
>({Math.floor(
|
||||
1000 / getTotalPerformance(showAverage),
|
||||
)}fps)</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
{#each getPerformanceData(!showAverage) as [key, value]}
|
||||
<tr>
|
||||
<td>
|
||||
{round(value)}<span>ms</span>
|
||||
</td>
|
||||
<td
|
||||
class:active={$activeType === key}
|
||||
on:click={() => ($activeType = key)}
|
||||
>
|
||||
{key}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
|
||||
<tr>
|
||||
<td>{data.length}</td>
|
||||
<td>Samples</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h3>Nodes</h3>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td> {getCacheRatio(!showAverage)}<span>%</span> </td>
|
||||
<td
|
||||
class:active={$activeType === "cache-hit"}
|
||||
on:click={() => ($activeType = "cache-hit")}>cache hits</td
|
||||
>
|
||||
</tr>
|
||||
{#each getNodePerformanceData(!showAverage) as [key, value]}
|
||||
<tr>
|
||||
<td>
|
||||
{round(value)}<span>ms</span>
|
||||
</td>
|
||||
|
||||
<td
|
||||
class:active={$activeType === key}
|
||||
on:click={() => ($activeType = key)}
|
||||
>
|
||||
{key.split("/").slice(-1).join("/")}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h3>Viewer</h3>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{humanizeNumber(getLast("total-vertices"))}</td>
|
||||
<td>Vertices</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{humanizeNumber(getLast("total-faces"))}</td>
|
||||
<td>Faces</td>
|
||||
</tr>
|
||||
{#each getViewerPerformanceData(!showAverage) as [key, value]}
|
||||
<tr>
|
||||
<td>
|
||||
{round(value)}<span>ms</span>
|
||||
</td>
|
||||
<td
|
||||
class:active={$activeType === key}
|
||||
on:click={() => ($activeType = key)}
|
||||
>
|
||||
{key.split("/").slice(-1).join("/")}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{:else}
|
||||
<p>No runs available</p>
|
||||
{/if}
|
||||
</div>
|
||||
{/key}
|
||||
|
||||
<div class="p-4 performance-tabler">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox id="show-total" bind:value={showAverage} />
|
||||
<label for="show-total">Show Average</label>
|
||||
</div>
|
||||
|
||||
{#if data.length !== 0}
|
||||
<BarSplit
|
||||
labels={["worker-transfer", "runtime", "update-geometries"]}
|
||||
values={getSplitValues()}
|
||||
/>
|
||||
|
||||
<h3>General</h3>
|
||||
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
{round(getTotalPerformance(!showAverage))}<span>ms</span>
|
||||
</td>
|
||||
<td
|
||||
class:active={$activeType === "total"}
|
||||
on:click={() => ($activeType = "total")}
|
||||
>
|
||||
total<span
|
||||
>({Math.floor(1000 / getTotalPerformance(showAverage))}fps)</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
{#each getPerformanceData(!showAverage) as [key, value]}
|
||||
<tr>
|
||||
<td>
|
||||
{round(value)}<span>ms</span>
|
||||
</td>
|
||||
<td
|
||||
class:active={$activeType === key}
|
||||
on:click={() => ($activeType = key)}
|
||||
>
|
||||
{key}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
|
||||
<tr>
|
||||
<td>{data.length}</td>
|
||||
<td>Samples</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h3>Nodes</h3>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td> {getCacheRatio(!showAverage)}<span>%</span> </td>
|
||||
<td
|
||||
class:active={$activeType === "cache-hit"}
|
||||
on:click={() => ($activeType = "cache-hit")}>cache hits</td
|
||||
>
|
||||
</tr>
|
||||
{#each getNodePerformanceData(!showAverage) as [key, value]}
|
||||
<tr>
|
||||
<td>
|
||||
{round(value)}<span>ms</span>
|
||||
</td>
|
||||
|
||||
<td
|
||||
class:active={$activeType === key}
|
||||
on:click={() => ($activeType = key)}
|
||||
>
|
||||
{key.split("/").slice(-1).join("/")}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h3>Viewer</h3>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{humanizeNumber(getLast("total-vertices"))}</td>
|
||||
<td>Vertices</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{humanizeNumber(getLast("total-faces"))}</td>
|
||||
<td>Faces</td>
|
||||
</tr>
|
||||
{#each getViewerPerformanceData(!showAverage) as [key, value]}
|
||||
<tr>
|
||||
<td>
|
||||
{round(value)}<span>ms</span>
|
||||
</td>
|
||||
<td
|
||||
class:active={$activeType === key}
|
||||
on:click={() => ($activeType = key)}
|
||||
>
|
||||
{key.split("/").slice(-1).join("/")}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{:else}
|
||||
<p>No runs available</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
h3 {
|
||||
margin: 0;
|
||||
@ -296,6 +318,9 @@
|
||||
opacity: 0.3;
|
||||
margin-left: 4px;
|
||||
}
|
||||
table {
|
||||
margin-bottom: 70px;
|
||||
}
|
||||
td {
|
||||
padding-right: 10px;
|
||||
padding-block: 5px;
|
||||
|
||||
@ -6,15 +6,18 @@ export interface PerformanceStore extends Readable<PerformanceData> {
|
||||
startRun(): void;
|
||||
stopRun(): void;
|
||||
addPoint(name: string, value?: number): void;
|
||||
endPoint(name?: string): void;
|
||||
mergeData(data: PerformanceData[number]): void;
|
||||
get: () => PerformanceData;
|
||||
}
|
||||
|
||||
export function createPerformanceStore(): PerformanceStore {
|
||||
export function createPerformanceStore(id?: string): PerformanceStore {
|
||||
|
||||
let data: PerformanceData = [];
|
||||
|
||||
let currentRun: Record<string, number[]> | undefined;
|
||||
let temp: Record<string, number> | undefined;
|
||||
let lastPoint: string | undefined;
|
||||
|
||||
let set: (v: PerformanceData) => void;
|
||||
|
||||
@ -23,22 +26,36 @@ export function createPerformanceStore(): PerformanceStore {
|
||||
});
|
||||
|
||||
function startRun() {
|
||||
if (currentRun) return;
|
||||
currentRun = {};
|
||||
lastPoint = undefined;
|
||||
temp = {
|
||||
start: performance.now()
|
||||
}
|
||||
}
|
||||
|
||||
function stopRun() {
|
||||
if (currentRun) {
|
||||
if (currentRun && temp) {
|
||||
currentRun["total"] = [performance.now() - temp.start];
|
||||
data.push(currentRun);
|
||||
data = data.slice(-100);
|
||||
currentRun = undefined;
|
||||
temp = undefined;
|
||||
if (set) set(data);
|
||||
}
|
||||
}
|
||||
|
||||
function addPoint(name: string, value: number) {
|
||||
function addPoint(name: string, value?: number) {
|
||||
if (!currentRun) return;
|
||||
currentRun[name] = currentRun[name] || [];
|
||||
currentRun[name].push(value);
|
||||
if (value === undefined) {
|
||||
if (temp) {
|
||||
lastPoint = name;
|
||||
temp[name] = performance.now();
|
||||
}
|
||||
} else {
|
||||
currentRun[name] = currentRun[name] || [];
|
||||
currentRun[name].push(value);
|
||||
}
|
||||
}
|
||||
|
||||
function get() {
|
||||
@ -59,11 +76,21 @@ export function createPerformanceStore(): PerformanceStore {
|
||||
});
|
||||
}
|
||||
|
||||
function endPoint(name = lastPoint) {
|
||||
if (name === lastPoint) lastPoint = undefined;
|
||||
if (name && currentRun && temp && name in temp) {
|
||||
currentRun[name] = currentRun[name] || [];
|
||||
currentRun[name].push(performance.now() - temp[name]);
|
||||
delete temp[name];
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
subscribe,
|
||||
startRun,
|
||||
stopRun,
|
||||
addPoint,
|
||||
endPoint,
|
||||
mergeData,
|
||||
get
|
||||
}
|
||||
|
||||
@ -1,11 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { T } from "@threlte/core";
|
||||
import {
|
||||
MeshLineGeometry,
|
||||
MeshLineMaterial,
|
||||
Text,
|
||||
useTexture,
|
||||
} from "@threlte/extras";
|
||||
import { T, useThrelte } from "@threlte/core";
|
||||
import { MeshLineGeometry, MeshLineMaterial, Text } from "@threlte/extras";
|
||||
import {
|
||||
type Group,
|
||||
type BufferGeometry,
|
||||
@ -16,15 +11,20 @@
|
||||
import { AppSettings } from "../settings/app-settings";
|
||||
import Camera from "./Camera.svelte";
|
||||
|
||||
const d = useThrelte();
|
||||
|
||||
export const invalidate = d.invalidate;
|
||||
|
||||
export let geometries: BufferGeometry[];
|
||||
export let lines: Vector3[][];
|
||||
export let scene;
|
||||
let geos: Group;
|
||||
$: scene = geos;
|
||||
export let geoGroup: Group;
|
||||
|
||||
export let centerCamera: boolean = true;
|
||||
let center = new Vector3(0, 4, 0);
|
||||
|
||||
const matcap = useTexture("/matcap_green.jpg");
|
||||
|
||||
function getPosition(geo: BufferGeometry, i: number) {
|
||||
return [
|
||||
geo.attributes.position.array[i],
|
||||
@ -48,9 +48,6 @@
|
||||
<T.GridHelper args={[20, 20]} />
|
||||
{/if}
|
||||
|
||||
<T.DirectionalLight position={[0, 10, 10]} />
|
||||
<T.AmbientLight intensity={2} />
|
||||
|
||||
<T.Group bind:ref={geos}>
|
||||
{#each geometries as geo}
|
||||
{#if $AppSettings.showIndices}
|
||||
@ -67,15 +64,9 @@
|
||||
<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 bind:ref={geoGroup}></T.Group>
|
||||
</T.Group>
|
||||
|
||||
{#if $AppSettings.showStemLines && lines}
|
||||
|
||||
@ -1,155 +1,23 @@
|
||||
<script lang="ts">
|
||||
import { Canvas } from "@threlte/core";
|
||||
import Scene from "./Scene.svelte";
|
||||
import {
|
||||
BufferAttribute,
|
||||
BufferGeometry,
|
||||
Float32BufferAttribute,
|
||||
Vector3,
|
||||
} from "three";
|
||||
import { decodeFloat, fastHashArrayBuffer } from "@nodes/utils";
|
||||
import { BufferGeometry, Group, Vector3 } from "three";
|
||||
|
||||
import { updateGeometries } from "./updateGeometries";
|
||||
import { decodeFloat, splitNestedArray } from "@nodes/utils";
|
||||
import type { PerformanceStore } from "$lib/performance";
|
||||
import { AppSettings } from "$lib/settings/app-settings";
|
||||
|
||||
export let centerCamera: boolean = true;
|
||||
export let perf: PerformanceStore;
|
||||
export let scene: Group;
|
||||
|
||||
let geoGroup: Group;
|
||||
|
||||
let geometries: BufferGeometry[] = [];
|
||||
let lines: Vector3[][] = [];
|
||||
|
||||
function fastArrayHash(arr: ArrayBuffer) {
|
||||
let ints = new Uint8Array(arr);
|
||||
|
||||
const sampleDistance = Math.max(Math.floor(ints.length / 100), 1);
|
||||
const sampleCount = Math.floor(ints.length / sampleDistance);
|
||||
|
||||
let hash = new Uint8Array(sampleCount);
|
||||
|
||||
for (let i = 0; i < sampleCount; i++) {
|
||||
const index = i * sampleDistance;
|
||||
hash[i] = ints[index];
|
||||
}
|
||||
|
||||
return fastHashArrayBuffer(hash.buffer);
|
||||
}
|
||||
|
||||
function createGeometryFromEncodedData(
|
||||
encodedData: Int32Array,
|
||||
geometry = new BufferGeometry(),
|
||||
): BufferGeometry {
|
||||
// Extract data from the encoded array
|
||||
let index = 1;
|
||||
// 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;
|
||||
let hash = fastArrayHash(vertices);
|
||||
let posAttribute = geometry.getAttribute(
|
||||
"position",
|
||||
) as BufferAttribute | null;
|
||||
|
||||
if (geometry.userData?.hash === hash) {
|
||||
return geometry;
|
||||
}
|
||||
|
||||
if (posAttribute && posAttribute.count === vertexCount) {
|
||||
posAttribute.set(vertices, 0);
|
||||
posAttribute.needsUpdate = true;
|
||||
} else {
|
||||
geometry.setAttribute(
|
||||
"position",
|
||||
new Float32BufferAttribute(vertices, 3),
|
||||
);
|
||||
}
|
||||
|
||||
const normals = new Float32Array(
|
||||
encodedData.buffer,
|
||||
index * 4,
|
||||
vertexCount * 3,
|
||||
);
|
||||
index = index + vertexCount * 3;
|
||||
|
||||
if (
|
||||
geometry.userData?.faceCount !== faceCount ||
|
||||
geometry.userData?.vertexCount !== vertexCount
|
||||
) {
|
||||
// Add data to geometry
|
||||
geometry.setIndex([...indices]);
|
||||
}
|
||||
|
||||
const normalsAttribute = geometry.getAttribute(
|
||||
"normal",
|
||||
) as BufferAttribute | null;
|
||||
if (normalsAttribute && normalsAttribute.count === vertexCount) {
|
||||
normalsAttribute.set(normals, 0);
|
||||
normalsAttribute.needsUpdate = true;
|
||||
} else {
|
||||
geometry.setAttribute("normal", new Float32BufferAttribute(normals, 3));
|
||||
}
|
||||
|
||||
geometry.userData = {
|
||||
vertexCount,
|
||||
faceCount,
|
||||
hash,
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
let invalidate: () => void;
|
||||
|
||||
function createLineGeometryFromEncodedData(encodedData: Int32Array) {
|
||||
const positions: Vector3[] = [];
|
||||
@ -166,16 +34,13 @@
|
||||
return positions;
|
||||
}
|
||||
|
||||
export let result: Int32Array;
|
||||
$: result && updateGeometries();
|
||||
function updateGeometries() {
|
||||
let a = performance.now();
|
||||
const inputs = parse_args(result);
|
||||
let b = performance.now();
|
||||
perf?.addPoint("split-result", b - a);
|
||||
export const update = function update(result: Int32Array) {
|
||||
perf?.addPoint("split-result");
|
||||
const inputs = splitNestedArray(result);
|
||||
perf?.endPoint();
|
||||
|
||||
if ($AppSettings.showStemLines) {
|
||||
a = performance.now();
|
||||
perf?.addPoint("create-lines");
|
||||
lines = inputs
|
||||
.map((input) => {
|
||||
if (input[0] === 0) {
|
||||
@ -183,31 +48,27 @@
|
||||
}
|
||||
})
|
||||
.filter(Boolean) as Vector3[][];
|
||||
b = performance.now();
|
||||
perf?.addPoint("create-lines", b - a);
|
||||
perf.endPoint();
|
||||
}
|
||||
|
||||
let totalVertices = 0;
|
||||
let totalFaces = 0;
|
||||
perf?.addPoint("update-geometries");
|
||||
|
||||
const { totalVertices, totalFaces } = updateGeometries(inputs, geoGroup);
|
||||
perf?.endPoint();
|
||||
|
||||
a = performance.now();
|
||||
geometries = inputs
|
||||
.map((input, i) => {
|
||||
if (input[0] === 1) {
|
||||
let geo = createGeometryFromEncodedData(input);
|
||||
totalVertices += geo.userData.vertexCount;
|
||||
totalFaces += geo.userData.faceCount;
|
||||
return geo;
|
||||
}
|
||||
})
|
||||
.filter(Boolean) as BufferGeometry[];
|
||||
b = performance.now();
|
||||
perf?.addPoint("create-geometries", b - a);
|
||||
perf?.addPoint("total-vertices", totalVertices);
|
||||
perf?.addPoint("total-faces", totalFaces);
|
||||
}
|
||||
invalidate();
|
||||
};
|
||||
</script>
|
||||
|
||||
<Canvas>
|
||||
<Scene {geometries} {lines} {centerCamera} />
|
||||
<Scene
|
||||
bind:scene
|
||||
bind:geoGroup
|
||||
bind:invalidate
|
||||
{geometries}
|
||||
{lines}
|
||||
{centerCamera}
|
||||
/>
|
||||
</Canvas>
|
||||
|
||||
146
app/src/lib/result-viewer/updateGeometries.ts
Normal file
146
app/src/lib/result-viewer/updateGeometries.ts
Normal file
@ -0,0 +1,146 @@
|
||||
import { fastHashArrayBuffer } from "@nodes/utils";
|
||||
import { BufferAttribute, BufferGeometry, Float32BufferAttribute, Mesh, MeshMatcapMaterial, TextureLoader, type Group } from "three";
|
||||
|
||||
function fastArrayHash(arr: ArrayBuffer) {
|
||||
let ints = new Uint8Array(arr);
|
||||
|
||||
const sampleDistance = Math.max(Math.floor(ints.length / 100), 1);
|
||||
const sampleCount = Math.floor(ints.length / sampleDistance);
|
||||
|
||||
let hash = new Uint8Array(sampleCount);
|
||||
|
||||
for (let i = 0; i < sampleCount; i++) {
|
||||
const index = i * sampleDistance;
|
||||
hash[i] = ints[index];
|
||||
}
|
||||
|
||||
return fastHashArrayBuffer(hash.buffer);
|
||||
}
|
||||
|
||||
const loader = new TextureLoader();
|
||||
const matcap = loader.load('/matcap_green.jpg');
|
||||
matcap.colorSpace = "srgb";
|
||||
const material = new MeshMatcapMaterial({
|
||||
color: 0xffffff,
|
||||
matcap
|
||||
});
|
||||
|
||||
function createGeometryFromEncodedData(
|
||||
encodedData: Int32Array,
|
||||
geometry = new BufferGeometry(),
|
||||
): BufferGeometry {
|
||||
// Extract data from the encoded array
|
||||
let index = 1;
|
||||
// const geometryType = encodedData[index++];
|
||||
const vertexCount = encodedData[index++];
|
||||
const faceCount = encodedData[index++];
|
||||
|
||||
let hash = fastArrayHash(encodedData);
|
||||
|
||||
if (geometry.userData?.hash === hash) {
|
||||
return geometry;
|
||||
}
|
||||
|
||||
// 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;
|
||||
|
||||
let posAttribute = geometry.getAttribute(
|
||||
"position",
|
||||
) as BufferAttribute | null;
|
||||
|
||||
if (posAttribute && posAttribute.count === vertexCount) {
|
||||
posAttribute.set(vertices, 0);
|
||||
posAttribute.needsUpdate = true;
|
||||
} else {
|
||||
geometry.setAttribute(
|
||||
"position",
|
||||
new Float32BufferAttribute(vertices, 3),
|
||||
);
|
||||
}
|
||||
|
||||
const normals = new Float32Array(
|
||||
encodedData.buffer,
|
||||
index * 4,
|
||||
vertexCount * 3,
|
||||
);
|
||||
index = index + vertexCount * 3;
|
||||
|
||||
if (
|
||||
geometry.userData?.faceCount !== faceCount ||
|
||||
geometry.userData?.vertexCount !== vertexCount
|
||||
) {
|
||||
// Add data to geometry
|
||||
geometry.setIndex([...indices]);
|
||||
}
|
||||
|
||||
const normalsAttribute = geometry.getAttribute(
|
||||
"normal",
|
||||
) as BufferAttribute | null;
|
||||
if (normalsAttribute && normalsAttribute.count === vertexCount) {
|
||||
normalsAttribute.set(normals, 0);
|
||||
normalsAttribute.needsUpdate = true;
|
||||
} else {
|
||||
geometry.setAttribute("normal", new Float32BufferAttribute(normals, 3));
|
||||
}
|
||||
|
||||
geometry.userData = {
|
||||
vertexCount,
|
||||
faceCount,
|
||||
hash,
|
||||
};
|
||||
|
||||
return geometry;
|
||||
}
|
||||
|
||||
let meshes: Mesh[] = [];
|
||||
|
||||
|
||||
export function updateGeometries(inputs: Int32Array[], group: Group) {
|
||||
let totalVertices = 0;
|
||||
let totalFaces = 0;
|
||||
let newGeometries = [];
|
||||
|
||||
for (let i = 0; i < Math.max(meshes.length, inputs.length); i++) {
|
||||
let existingMesh = meshes[i];
|
||||
let input = inputs[i];
|
||||
|
||||
if (input) {
|
||||
if (input[0] !== 1) {
|
||||
continue
|
||||
}
|
||||
totalVertices += input[1];
|
||||
totalFaces += input[2];
|
||||
} else {
|
||||
if (existingMesh) {
|
||||
existingMesh.visible = false;
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
if (existingMesh) {
|
||||
createGeometryFromEncodedData(input, existingMesh.geometry);
|
||||
} else {
|
||||
let geo = createGeometryFromEncodedData(input);
|
||||
const mesh = new Mesh(geo, material);
|
||||
meshes[i] = mesh;
|
||||
newGeometries.push(mesh);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
for (let i = 0; i < newGeometries.length; i++) {
|
||||
group.add(newGeometries[i]);
|
||||
}
|
||||
|
||||
return { totalFaces, totalVertices };
|
||||
}
|
||||
@ -128,9 +128,7 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
|
||||
|
||||
async execute(graph: Graph, settings: Record<string, unknown>) {
|
||||
|
||||
this.perf?.startRun();
|
||||
|
||||
let a0 = performance.now();
|
||||
this.perf?.addPoint("runtime");
|
||||
|
||||
let a = performance.now();
|
||||
|
||||
@ -250,18 +248,20 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
|
||||
// return the result of the parent of the output node
|
||||
const res = results[outputNode.id];
|
||||
|
||||
this.perf?.addPoint("runtime", performance.now() - a0);
|
||||
|
||||
this.perf?.stopRun();
|
||||
|
||||
if (this.cache) {
|
||||
this.cache.size = sortedNodes.length * 2;
|
||||
}
|
||||
|
||||
this.perf?.endPoint("runtime");
|
||||
|
||||
return res as unknown as Int32Array;
|
||||
|
||||
}
|
||||
|
||||
getPerformanceData() {
|
||||
return this.perf?.get();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export class MemoryRuntimeCache implements RuntimeCache {
|
||||
|
||||
@ -93,6 +93,8 @@
|
||||
.content {
|
||||
background: var(--layer-1);
|
||||
position: relative;
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
|
||||
@ -10,8 +10,10 @@ export const AppSettings = localStore("node-settings", {
|
||||
showIndices: false,
|
||||
showVertices: false,
|
||||
showPerformancePanel: false,
|
||||
showBenchmarkPanel: false,
|
||||
centerCamera: true,
|
||||
showStemLines: false,
|
||||
useWorker: true,
|
||||
amount: 5
|
||||
});
|
||||
|
||||
@ -69,6 +71,11 @@ export const AppSettingTypes = {
|
||||
label: "Wireframe",
|
||||
value: false,
|
||||
},
|
||||
useWorker: {
|
||||
type: "boolean",
|
||||
label: "Execute runtime in worker",
|
||||
value: true,
|
||||
},
|
||||
showIndices: {
|
||||
type: "boolean",
|
||||
label: "Show Indices",
|
||||
@ -79,6 +86,11 @@ export const AppSettingTypes = {
|
||||
label: "Show Performance Panel",
|
||||
value: false,
|
||||
},
|
||||
showBenchmarkPanel: {
|
||||
type: "boolean",
|
||||
label: "Show Benchmark Panel",
|
||||
value: false,
|
||||
},
|
||||
showVertices: {
|
||||
type: "boolean",
|
||||
label: "Show Vertices",
|
||||
@ -104,6 +116,18 @@ export const AppSettingTypes = {
|
||||
type: "button",
|
||||
label: "Load Tree"
|
||||
},
|
||||
lottaFaces: {
|
||||
type: "button",
|
||||
label: "Load 'lots of faces'"
|
||||
},
|
||||
lottaNodes: {
|
||||
type: "button",
|
||||
label: "Load 'lots of nodes'"
|
||||
},
|
||||
lottaNodesAndFaces: {
|
||||
type: "button",
|
||||
label: "Load 'lots of nodes and faces'"
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@ -43,7 +43,6 @@
|
||||
? filterInputs(node.tmp.type.inputs)
|
||||
: undefined;
|
||||
$: store = node ? createStore(node.props, nodeDefinition) : undefined;
|
||||
$: console.log(nodeDefinition, store);
|
||||
|
||||
let lastPropsHash = "";
|
||||
function updateNode() {
|
||||
|
||||
88
app/src/lib/settings/panels/BenchmarkPanel.svelte
Normal file
88
app/src/lib/settings/panels/BenchmarkPanel.svelte
Normal file
@ -0,0 +1,88 @@
|
||||
<script lang="ts">
|
||||
import localStore from "$lib/helpers/localStore";
|
||||
import { Integer } from "@nodes/ui";
|
||||
import { writable } from "svelte/store";
|
||||
|
||||
export let run: () => Promise<any>;
|
||||
|
||||
let isRunning = false;
|
||||
let amount = localStore<number>("nodes.benchmark.samples", 500);
|
||||
let samples = 0;
|
||||
let warmUp = writable(0);
|
||||
let warmUpAmount = 10;
|
||||
let state = "";
|
||||
let result = "";
|
||||
|
||||
const copyContent = async (text: string) => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
} catch (err) {
|
||||
console.error("Failed to copy: ", err);
|
||||
}
|
||||
};
|
||||
|
||||
async function benchmark() {
|
||||
if (isRunning) return;
|
||||
isRunning = true;
|
||||
|
||||
samples = 0;
|
||||
$warmUp = 0;
|
||||
|
||||
await new Promise((r) => setTimeout(r, 100));
|
||||
|
||||
// warm up
|
||||
for (let i = 0; i < warmUpAmount; i++) {
|
||||
await run();
|
||||
$warmUp = i + 1;
|
||||
}
|
||||
|
||||
let results = [];
|
||||
|
||||
// perform run
|
||||
for (let i = 0; i < $amount; i++) {
|
||||
const a = performance.now();
|
||||
await run();
|
||||
samples = i;
|
||||
const b = performance.now();
|
||||
results.push(b - a);
|
||||
console.log(b - a);
|
||||
}
|
||||
result = results.join(" ");
|
||||
}
|
||||
</script>
|
||||
|
||||
{state}
|
||||
|
||||
<div class="wrapper" class:running={isRunning}>
|
||||
{#if isRunning}
|
||||
<p>WarmUp ({$warmUp}/{warmUpAmount})</p>
|
||||
<progress value={$warmUp} max={warmUpAmount}
|
||||
>{Math.floor(($warmUp / warmUpAmount) * 100)}%</progress
|
||||
>
|
||||
<p>Progress ({samples}/{$amount})</p>
|
||||
<progress value={samples} max={$amount}
|
||||
>{Math.floor((samples / $amount) * 100)}%</progress
|
||||
>
|
||||
|
||||
{#if result}
|
||||
<textarea readonly>{result}</textarea>
|
||||
<div>
|
||||
<button on:click={() => copyContent(result)}>Copy</button>
|
||||
<button on:click={() => (isRunning = false)}>reset</button>
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<label for="bench-samples">Samples</label>
|
||||
<Integer id="bench-sample" bind:value={$amount} max={1000} />
|
||||
<button on:click={benchmark} disabled={isRunning}> start </button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.wrapper {
|
||||
padding: 1em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
}
|
||||
</style>
|
||||
53
app/src/lib/settings/panels/ExportSettings.svelte
Normal file
53
app/src/lib/settings/panels/ExportSettings.svelte
Normal file
@ -0,0 +1,53 @@
|
||||
<script lang="ts">
|
||||
import type { Scene } from "three";
|
||||
import { OBJExporter } from "three/addons/exporters/OBJExporter.js";
|
||||
import { GLTFExporter } from "three/addons/exporters/GLTFExporter.js";
|
||||
import FileSaver from "file-saver";
|
||||
|
||||
// Download
|
||||
const download = (
|
||||
data: string,
|
||||
name: string,
|
||||
mimetype: string,
|
||||
extension: string,
|
||||
) => {
|
||||
if (typeof data !== "string") data = JSON.stringify(data);
|
||||
const blob = new Blob([data], { type: mimetype + ";charset=utf-8" });
|
||||
FileSaver.saveAs(blob, name + "." + extension);
|
||||
};
|
||||
|
||||
// export const json = (data, name = 'default') => {
|
||||
// download(JSON.stringify(data), name, 'application/json', 'json');
|
||||
// };
|
||||
//
|
||||
// export const obj = (data, name = 'default') => {
|
||||
// };
|
||||
|
||||
export let scene: Scene;
|
||||
|
||||
function exportGltf() {
|
||||
const exporter = new GLTFExporter();
|
||||
exporter.parse(
|
||||
scene,
|
||||
(gltf) => {
|
||||
// download .gltf file
|
||||
download(gltf, "plant", "text/plain", "gltf");
|
||||
},
|
||||
(err) => {
|
||||
console.log(err);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
function exportObj() {
|
||||
const exporter = new OBJExporter();
|
||||
const result = exporter.parse(scene);
|
||||
// download .obj file
|
||||
download(result, "plant", "text/plain", "obj");
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="p-2">
|
||||
<button on:click={exportObj}> export obj </button>
|
||||
<button on:click={exportGltf}> export gltf </button>
|
||||
</div>
|
||||
@ -4,10 +4,11 @@
|
||||
|
||||
export let keymap: ReturnType<typeof createKeyMap>;
|
||||
const keys = keymap?.keys;
|
||||
export let title = "Keymap";
|
||||
</script>
|
||||
|
||||
<div class="wrapper">
|
||||
<h3>Editor</h3>
|
||||
<h3>{title}</h3>
|
||||
|
||||
<section>
|
||||
{#each $keys as key}
|
||||
|
||||
@ -7,12 +7,15 @@ const cache = new MemoryRuntimeCache();
|
||||
const nodeRegistry = new RemoteNodeRegistry("");
|
||||
const executor = new MemoryRuntimeExecutor(nodeRegistry, cache);
|
||||
|
||||
const performanceStore = createPerformanceStore();
|
||||
const performanceStore = createPerformanceStore("worker");
|
||||
executor.perf = performanceStore;
|
||||
|
||||
export async function executeGraph(graph: Graph, settings: Record<string, unknown>): Promise<Int32Array> {
|
||||
await nodeRegistry.load(graph.nodes.map((n) => n.type));
|
||||
return executor.execute(graph, settings);
|
||||
performanceStore.startRun();
|
||||
let res = await executor.execute(graph, settings);
|
||||
performanceStore.stopRun();
|
||||
return res;
|
||||
}
|
||||
|
||||
export function getPerformanceData() {
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
import { AppSettingTypes, AppSettings } from "$lib/settings/app-settings";
|
||||
import { writable, type Writable } from "svelte/store";
|
||||
import Keymap from "$lib/settings/panels/Keymap.svelte";
|
||||
import type { createKeyMap } from "$lib/helpers/createKeyMap";
|
||||
import { createKeyMap } from "$lib/helpers/createKeyMap";
|
||||
import NodeStore from "$lib/node-store/NodeStore.svelte";
|
||||
import type { GraphManager } from "$lib/graph-interface/graph-manager";
|
||||
import { setContext } from "svelte";
|
||||
@ -20,15 +20,28 @@
|
||||
import GraphSettings from "$lib/settings/panels/GraphSettings.svelte";
|
||||
import NestedSettings from "$lib/settings/panels/NestedSettings.svelte";
|
||||
import { createPerformanceStore } from "$lib/performance";
|
||||
import type { Scene } from "three";
|
||||
import ExportSettings from "$lib/settings/panels/ExportSettings.svelte";
|
||||
import {
|
||||
MemoryRuntimeCache,
|
||||
MemoryRuntimeExecutor,
|
||||
} from "$lib/runtime-executor";
|
||||
import { fastHashString } from "@nodes/utils";
|
||||
import BenchmarkPanel from "$lib/settings/panels/BenchmarkPanel.svelte";
|
||||
|
||||
let performanceStore = createPerformanceStore("page");
|
||||
|
||||
const nodeRegistry = new RemoteNodeRegistry("");
|
||||
const workerRuntime = new WorkerRuntimeExecutor();
|
||||
const runtimeCache = new MemoryRuntimeCache();
|
||||
const memoryRuntime = new MemoryRuntimeExecutor(nodeRegistry, runtimeCache);
|
||||
memoryRuntime.perf = performanceStore;
|
||||
|
||||
let performanceStore = createPerformanceStore();
|
||||
$: runtime = $AppSettings.useWorker ? workerRuntime : memoryRuntime;
|
||||
|
||||
let activeNode: Node | undefined;
|
||||
|
||||
let graphResult: Int32Array;
|
||||
let scene: Scene;
|
||||
let updateViewerResult: (result: Int32Array) => void;
|
||||
|
||||
let graph = localStorage.getItem("graph")
|
||||
? JSON.parse(localStorage.getItem("graph")!)
|
||||
@ -36,11 +49,22 @@
|
||||
|
||||
let manager: GraphManager;
|
||||
let managerStatus: Writable<"loading" | "error" | "idle">;
|
||||
$: if (manager) {
|
||||
setContext("graphManager", manager);
|
||||
|
||||
async function randomGenerate() {
|
||||
const g = manager.serialize();
|
||||
const s = { ...$graphSettings, randomSeed: true };
|
||||
const res = await handleResult(g, s);
|
||||
return res;
|
||||
}
|
||||
|
||||
let keymap: ReturnType<typeof createKeyMap>;
|
||||
let applicationKeymap = createKeyMap([
|
||||
{
|
||||
key: "r",
|
||||
description: "Regenerate the plant model",
|
||||
callback: randomGenerate,
|
||||
},
|
||||
]);
|
||||
let graphSettings = writable<Record<string, any>>({});
|
||||
let graphSettingTypes = {};
|
||||
|
||||
@ -50,42 +74,59 @@
|
||||
| {
|
||||
graph: Graph;
|
||||
settings: Record<string, any>;
|
||||
hash: number;
|
||||
}
|
||||
| undefined;
|
||||
|
||||
async function handleResult(_graph: Graph, _settings: Record<string, any>) {
|
||||
if (!_settings) return;
|
||||
const inputHash = fastHashString(
|
||||
JSON.stringify(_graph) + JSON.stringify(_settings),
|
||||
);
|
||||
if (isWorking) {
|
||||
unfinished = {
|
||||
graph: _graph,
|
||||
settings: _settings,
|
||||
hash: inputHash,
|
||||
};
|
||||
return;
|
||||
return false;
|
||||
}
|
||||
isWorking = true;
|
||||
performanceStore.startRun();
|
||||
try {
|
||||
let a = performance.now();
|
||||
graphResult = await workerRuntime.execute(_graph, _settings);
|
||||
const graphResult = await runtime.execute(_graph, _settings);
|
||||
let b = performance.now();
|
||||
let perfData = await workerRuntime.getPerformanceData();
|
||||
let lastRun = perfData.at(-1);
|
||||
if (lastRun) {
|
||||
lastRun["worker-transfer"] = [b - a - lastRun.runtime[0]];
|
||||
performanceStore.mergeData(lastRun);
|
||||
|
||||
if ($AppSettings.useWorker) {
|
||||
let perfData = await runtime.getPerformanceData();
|
||||
let lastRun = perfData?.at(-1);
|
||||
if (lastRun?.total) {
|
||||
lastRun.runtime = lastRun.total;
|
||||
delete lastRun.total;
|
||||
performanceStore.mergeData(lastRun);
|
||||
performanceStore.addPoint(
|
||||
"worker-transfer",
|
||||
b - a - lastRun.runtime[0],
|
||||
);
|
||||
}
|
||||
}
|
||||
isWorking = false;
|
||||
|
||||
updateViewerResult(graphResult);
|
||||
} catch (error) {
|
||||
console.log("errors", error);
|
||||
} finally {
|
||||
performanceStore.stopRun();
|
||||
isWorking = false;
|
||||
}
|
||||
|
||||
performanceStore.stopRun();
|
||||
performanceStore.startRun();
|
||||
|
||||
if (unfinished) {
|
||||
if (unfinished && unfinished.hash === inputHash) {
|
||||
let d = unfinished;
|
||||
unfinished = undefined;
|
||||
handleResult(d.graph, d.settings);
|
||||
await handleResult(d.graph, d.settings);
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
$: if (AppSettings) {
|
||||
@ -97,6 +138,18 @@
|
||||
AppSettingTypes.debug.stressTest.loadTree.callback = () => {
|
||||
graph = templates.tree($AppSettings.amount);
|
||||
};
|
||||
//@ts-ignore
|
||||
AppSettingTypes.debug.stressTest.lottaFaces.callback = () => {
|
||||
graph = templates.lottaFaces;
|
||||
};
|
||||
//@ts-ignore
|
||||
AppSettingTypes.debug.stressTest.lottaNodes.callback = () => {
|
||||
graph = templates.lottaNodes;
|
||||
};
|
||||
//@ts-ignore
|
||||
AppSettingTypes.debug.stressTest.lottaNodesAndFaces.callback = () => {
|
||||
graph = templates.lottaNodesAndFaces;
|
||||
};
|
||||
}
|
||||
|
||||
function handleSave(event: CustomEvent<Graph>) {
|
||||
@ -104,13 +157,15 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:document on:keydown={applicationKeymap.handleKeyboardEvent} />
|
||||
<div class="wrapper manager-{$managerStatus}">
|
||||
<header></header>
|
||||
<Grid.Row>
|
||||
<Grid.Cell>
|
||||
<Viewer
|
||||
result={graphResult}
|
||||
perf={performanceStore}
|
||||
bind:scene
|
||||
bind:update={updateViewerResult}
|
||||
centerCamera={$AppSettings.centerCamera}
|
||||
/>
|
||||
</Grid.Cell>
|
||||
@ -143,10 +198,14 @@
|
||||
title="Keyboard Shortcuts"
|
||||
icon="i-tabler-keyboard"
|
||||
>
|
||||
<Keymap title="Application" keymap={applicationKeymap} />
|
||||
{#if keymap}
|
||||
<Keymap {keymap} />
|
||||
<Keymap title="Node-Editor" {keymap} />
|
||||
{/if}
|
||||
</Panel>
|
||||
<Panel id="exports" title="Exporter" icon="i-tabler-package-export">
|
||||
<ExportSettings {scene} />
|
||||
</Panel>
|
||||
<Panel
|
||||
id="node-store"
|
||||
classes="text-green-400"
|
||||
@ -166,6 +225,15 @@
|
||||
<PerformanceViewer data={$performanceStore} />
|
||||
{/if}
|
||||
</Panel>
|
||||
<Panel
|
||||
id="benchmark"
|
||||
title="Benchmark"
|
||||
classes="text-red-400"
|
||||
hidden={!$AppSettings.showBenchmarkPanel}
|
||||
icon="i-tabler-graph"
|
||||
>
|
||||
<BenchmarkPanel run={randomGenerate} />
|
||||
</Panel>
|
||||
<Panel
|
||||
id="graph-settings"
|
||||
title="Graph Settings"
|
||||
@ -190,8 +258,6 @@
|
||||
</Grid.Row>
|
||||
</div>
|
||||
|
||||
<span class="font-red" />
|
||||
|
||||
<style>
|
||||
header {
|
||||
/* border-bottom: solid thin var(--outline); */
|
||||
|
||||
@ -9,13 +9,13 @@
|
||||
},
|
||||
"strength": {
|
||||
"type": "float",
|
||||
"min": 0.1,
|
||||
"min": 0,
|
||||
"max": 1
|
||||
},
|
||||
"curviness": {
|
||||
"type": "float",
|
||||
"hidden": true,
|
||||
"min": 0.1,
|
||||
"min": 0,
|
||||
"max": 1
|
||||
},
|
||||
"depth": {
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
use glam::Vec3;
|
||||
use macros::include_definition_file;
|
||||
use utils::{
|
||||
concat_args, evaluate_float, evaluate_int, geometry::wrap_path_mut, log, reset_call_count,
|
||||
set_panic_hook, split_args,
|
||||
concat_args, evaluate_float, evaluate_int,
|
||||
geometry::{wrap_path, wrap_path_mut},
|
||||
log, reset_call_count, set_panic_hook, split_args,
|
||||
};
|
||||
use wasm_bindgen::prelude::*;
|
||||
|
||||
@ -34,58 +35,64 @@ pub fn execute(input: &[i32]) -> Vec<i32> {
|
||||
let output: Vec<Vec<i32>> = plants
|
||||
.iter()
|
||||
.map(|_path_data| {
|
||||
let mut path_data = _path_data.to_vec();
|
||||
let path_data = _path_data.to_vec();
|
||||
if path_data[2] != 0 || path_data[3] < (max_depth - depth + 1) {
|
||||
return path_data;
|
||||
}
|
||||
|
||||
let path = wrap_path_mut(&mut path_data);
|
||||
let path = wrap_path(&path_data);
|
||||
let mut output_data = path_data.clone();
|
||||
let output = wrap_path_mut(&mut output_data);
|
||||
|
||||
let mut offset_vec = Vec3::ZERO;
|
||||
|
||||
for i in 1..path.length {
|
||||
// let alpha = i as f32 / (path.length - 1) as f32;
|
||||
let start_index = (i - 1) * 4;
|
||||
let end_index = start_index + 4;
|
||||
let original_length = path.get_length();
|
||||
|
||||
for i in 0..path.length - 1 {
|
||||
let alpha = i as f32 / (path.length - 1) as f32;
|
||||
let start_index = i * 4;
|
||||
|
||||
let start_point = Vec3::from_slice(&path.points[start_index..start_index + 3]);
|
||||
let end_point = Vec3::from_slice(&path.points[end_index..end_index + 3]);
|
||||
let end_point = Vec3::from_slice(&path.points[start_index + 4..start_index + 7]);
|
||||
|
||||
let length = (end_point - start_point).length();
|
||||
let direction = end_point - start_point;
|
||||
|
||||
let normalised = (end_point - start_point).normalize();
|
||||
|
||||
let strength = evaluate_float(args[1]);
|
||||
let down_point = Vec3::new(0.0, -length * strength, 0.0);
|
||||
let length = direction.length();
|
||||
|
||||
let curviness = evaluate_float(args[2]);
|
||||
let strength =
|
||||
evaluate_float(args[1]) / curviness.max(0.0001) * evaluate_float(args[1]);
|
||||
|
||||
let mut mid_point = lerp_vec3(
|
||||
normalised,
|
||||
down_point,
|
||||
curviness * (i as f32 / path.length as f32).sqrt(),
|
||||
log!(
|
||||
"length: {}, curviness: {}, strength: {}",
|
||||
length,
|
||||
curviness,
|
||||
strength
|
||||
);
|
||||
|
||||
let down_point = Vec3::new(0.0, -length * strength, 0.0);
|
||||
|
||||
let mut mid_point = lerp_vec3(direction, down_point, curviness * alpha.sqrt());
|
||||
|
||||
if mid_point[0] == 0.0 && mid_point[2] == 0.0 {
|
||||
mid_point[0] += 0.0001;
|
||||
mid_point[2] += 0.0001;
|
||||
}
|
||||
|
||||
mid_point = mid_point.normalize();
|
||||
|
||||
mid_point *= length;
|
||||
// Correct midpoint length
|
||||
mid_point *= mid_point.length() / length;
|
||||
|
||||
let final_end_point = start_point + mid_point;
|
||||
let offset_end_point = end_point + offset_vec;
|
||||
|
||||
path.points[end_index] = offset_end_point[0];
|
||||
path.points[end_index + 1] = offset_end_point[1];
|
||||
path.points[end_index + 2] = offset_end_point[2];
|
||||
output.points[start_index + 4] = offset_end_point[0];
|
||||
output.points[start_index + 5] = offset_end_point[1];
|
||||
output.points[start_index + 6] = offset_end_point[2];
|
||||
|
||||
let offset = final_end_point - end_point;
|
||||
offset_vec += offset;
|
||||
offset_vec += final_end_point - end_point;
|
||||
}
|
||||
path_data
|
||||
log!("length: {} final: {}", original_length, output.get_length());
|
||||
output_data
|
||||
})
|
||||
.collect();
|
||||
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
use glam::Vec3;
|
||||
use macros::include_definition_file;
|
||||
use noise::{HybridMulti, MultiFractal, NoiseFn, OpenSimplex};
|
||||
use utils::{
|
||||
@ -66,15 +65,7 @@ pub fn execute(input: &[i32]) -> Vec<i32> {
|
||||
|
||||
let path = wrap_path_mut(&mut path_data);
|
||||
|
||||
let p0 = Vec3::new(path.points[0], path.points[1], path.points[2]);
|
||||
|
||||
let p2 = Vec3::new(
|
||||
path.points[path.length * 4 - 3],
|
||||
path.points[path.length * 4 - 2],
|
||||
path.points[path.length * 4 - 1],
|
||||
);
|
||||
|
||||
let length = (p2 - p0).length() as f64;
|
||||
let length = path.get_length() as f64;
|
||||
|
||||
for i in 0..path.length {
|
||||
let a = i as f64 / (path.length - 1) as f64;
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
export type { NodeInput } from "./inputs";
|
||||
export type { NodeRegistry, RuntimeExecutor, RuntimeCache } from "./components";
|
||||
export type { Node, NodeDefinition, Socket, NodeId, Edge, Graph } from "./types";
|
||||
export { NodeSchema, GraphSchema } from "./types";
|
||||
export { NodeDefinitionSchema } from "./types";
|
||||
|
||||
|
||||
@ -3,10 +3,18 @@ import { NodeInputSchema } from "./inputs";
|
||||
|
||||
export type NodeId = `${string}/${string}/${string}`;
|
||||
|
||||
export const NodeSchema = z.object({
|
||||
id: z.number(),
|
||||
type: z.string(),
|
||||
props: z.record(z.union([z.number(), z.array(z.number())])).optional(),
|
||||
meta: z.object({
|
||||
title: z.string().optional(),
|
||||
lastModified: z.string().optional(),
|
||||
}).optional(),
|
||||
position: z.tuple([z.number(), z.number()])
|
||||
});
|
||||
|
||||
export type Node = {
|
||||
id: number;
|
||||
type: NodeId;
|
||||
props?: Record<string, number | number[]>,
|
||||
tmp?: {
|
||||
depth?: number;
|
||||
mesh?: any;
|
||||
@ -22,13 +30,8 @@ export type Node = {
|
||||
ref?: HTMLElement;
|
||||
visible?: boolean;
|
||||
isMoving?: boolean;
|
||||
},
|
||||
meta?: {
|
||||
title?: string;
|
||||
lastModified?: string;
|
||||
},
|
||||
position: [x: number, y: number]
|
||||
}
|
||||
}
|
||||
} & z.infer<typeof NodeSchema>;
|
||||
|
||||
export const NodeDefinitionSchema = z.object({
|
||||
id: z.string(),
|
||||
@ -50,16 +53,17 @@ export type Socket = {
|
||||
position: [number, number];
|
||||
};
|
||||
|
||||
|
||||
export type Edge = [Node, number, Node, string];
|
||||
|
||||
export type Graph = {
|
||||
id: number;
|
||||
meta?: {
|
||||
title?: string;
|
||||
lastModified?: string;
|
||||
},
|
||||
settings?: Record<string, any>,
|
||||
nodes: Node[];
|
||||
edges: [number, number, number, string][];
|
||||
}
|
||||
export const GraphSchema = z.object({
|
||||
id: z.number().optional(),
|
||||
meta: z.object({
|
||||
title: z.string().optional(),
|
||||
lastModified: z.string().optional(),
|
||||
}).optional(),
|
||||
settings: z.record(z.any()).optional(),
|
||||
nodes: z.array(NodeSchema),
|
||||
edges: z.array(z.tuple([z.number(), z.number(), z.number(), z.string()])),
|
||||
});
|
||||
|
||||
export type Graph = z.infer<typeof GraphSchema> & { nodes: Node[] };
|
||||
|
||||
@ -1,25 +1,25 @@
|
||||
<script lang="ts">
|
||||
import Checkbox from "./elements/Checkbox.svelte";
|
||||
import Float from "./elements/Float.svelte";
|
||||
import Integer from "./elements/Integer.svelte";
|
||||
import Select from "./elements/Select.svelte";
|
||||
import Checkbox from './elements/Checkbox.svelte';
|
||||
import Float from './elements/Float.svelte';
|
||||
import Integer from './elements/Integer.svelte';
|
||||
import Select from './elements/Select.svelte';
|
||||
|
||||
import type { NodeInput } from "@nodes/types";
|
||||
import Vec3 from "./elements/Vec3.svelte";
|
||||
import type { NodeInput } from '@nodes/types';
|
||||
import Vec3 from './elements/Vec3.svelte';
|
||||
|
||||
export let input: NodeInput;
|
||||
export let value: any;
|
||||
export let id: string;
|
||||
export let input: NodeInput;
|
||||
export let value: any;
|
||||
export let id: string;
|
||||
</script>
|
||||
|
||||
{#if input.type === "float"}
|
||||
<Float {id} bind:value min={input?.min} max={input?.max} />
|
||||
{:else if input.type === "integer"}
|
||||
<Integer {id} bind:value min={input?.min} max={input?.max} />
|
||||
{:else if input.type === "boolean"}
|
||||
<Checkbox {id} bind:value />
|
||||
{:else if input.type === "select"}
|
||||
<Select {id} bind:value options={input.options} />
|
||||
{:else if input.type === "vec3"}
|
||||
<Vec3 {id} bind:value />
|
||||
{#if input.type === 'float'}
|
||||
<Float {id} bind:value min={input?.min} max={input?.max} />
|
||||
{:else if input.type === 'integer'}
|
||||
<Integer {id} bind:value min={input?.min} max={input?.max} />
|
||||
{:else if input.type === 'boolean'}
|
||||
<Checkbox {id} bind:value />
|
||||
{:else if input.type === 'select'}
|
||||
<Select {id} bind:value options={input?.options || []} />
|
||||
{:else if input.type === 'vec3'}
|
||||
<Vec3 {id} bind:value />
|
||||
{/if}
|
||||
|
||||
@ -1,96 +1,96 @@
|
||||
<script lang="ts">
|
||||
export let value: boolean;
|
||||
export let value: boolean;
|
||||
|
||||
$: if (typeof value === "string") {
|
||||
value = value === "true";
|
||||
} else if (typeof value === "number") {
|
||||
value = value === 1;
|
||||
}
|
||||
$: if (typeof value === 'string') {
|
||||
value = value === 'true';
|
||||
} else if (typeof value === 'number') {
|
||||
value = value === 1;
|
||||
}
|
||||
|
||||
export let id = "";
|
||||
export let id = '';
|
||||
</script>
|
||||
|
||||
<input {id} type="checkbox" bind:checked={value} />
|
||||
<label for={id}>
|
||||
<svg viewBox="0 0 19 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M2 7L7 12L17 2"
|
||||
stroke="currentColor"
|
||||
stroke-width="3"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<svg viewBox="0 0 19 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M2 7L7 12L17 2"
|
||||
stroke="currentColor"
|
||||
stroke-width="3"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</label>
|
||||
|
||||
<style>
|
||||
input[type="checkbox"] {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
#inputPreview {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
justify-content: center;
|
||||
}
|
||||
input + label {
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 22px;
|
||||
color: rgb(0, 0, 0);
|
||||
}
|
||||
input + label::before {
|
||||
content: " ";
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
margin-right: 3px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-color: var(--layer-2);
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
input:checked + label::after {
|
||||
content: " ";
|
||||
background-repeat: no-repeat;
|
||||
background-size: 12px 12px;
|
||||
background-position: center center;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 0px;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
text-align: center;
|
||||
background-color: transparent;
|
||||
color: red;
|
||||
font-size: 10px;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
}
|
||||
input[type='checkbox'] {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
#inputPreview {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
justify-content: center;
|
||||
}
|
||||
input + label {
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 22px;
|
||||
color: rgb(0, 0, 0);
|
||||
}
|
||||
input + label::before {
|
||||
content: ' ';
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
margin-right: 3px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-color: var(--layer-2);
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
input:checked + label::after {
|
||||
content: ' ';
|
||||
background-repeat: no-repeat;
|
||||
background-size: 12px 12px;
|
||||
background-position: center center;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 0px;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
text-align: center;
|
||||
background-color: transparent;
|
||||
color: red;
|
||||
font-size: 10px;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
input + label > svg {
|
||||
position: absolute;
|
||||
display: none;
|
||||
width: 12px;
|
||||
height: 10px;
|
||||
left: 5px;
|
||||
color: var(--text-color);
|
||||
top: 5.9px;
|
||||
}
|
||||
input + label > svg {
|
||||
position: absolute;
|
||||
display: none;
|
||||
width: 12px;
|
||||
height: 10px;
|
||||
left: 5px;
|
||||
color: var(--text-color);
|
||||
top: 5.9px;
|
||||
}
|
||||
|
||||
input:checked + label > svg {
|
||||
display: block;
|
||||
}
|
||||
input:checked + label > svg {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,11 +1,19 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
export let value = 0.5;
|
||||
export let step = 0.01;
|
||||
export let min = 0;
|
||||
export let max = 1;
|
||||
export let id = '';
|
||||
let {
|
||||
onchange,
|
||||
value = $bindable(),
|
||||
id,
|
||||
step = 0.01,
|
||||
min = 0,
|
||||
max = 1
|
||||
}: {
|
||||
onchange?: (num: number) => void;
|
||||
value?: number;
|
||||
id?: string;
|
||||
step?: number;
|
||||
min?: number;
|
||||
max?: number;
|
||||
} = $props();
|
||||
|
||||
if (min > max) {
|
||||
[min, max] = [max, min];
|
||||
@ -18,31 +26,32 @@
|
||||
return +parseFloat(input + '').toPrecision(2);
|
||||
}
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let inputEl: HTMLInputElement;
|
||||
|
||||
$: if ((value || 0).toString().length > 5) {
|
||||
value = strip(value || 0);
|
||||
}
|
||||
$: value !== undefined && handleChange();
|
||||
$effect(() => {
|
||||
if ((value || 0).toString().length > 5) {
|
||||
value = strip(value || 0);
|
||||
}
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
if (value !== undefined) handleChange();
|
||||
});
|
||||
|
||||
let oldValue: number;
|
||||
function handleChange() {
|
||||
if (value === oldValue) return;
|
||||
oldValue = value;
|
||||
dispatch('change', parseFloat(value + ''));
|
||||
onchange?.(value);
|
||||
}
|
||||
|
||||
$: width = Number.isFinite(value)
|
||||
? Math.max((value?.toString().length ?? 1) * 8, 50) + 'px'
|
||||
: '20px';
|
||||
let width = $derived(
|
||||
Number.isFinite(value) ? Math.max((value?.toString().length ?? 1) * 8, 50) + 'px' : '20px'
|
||||
);
|
||||
|
||||
let isMouseDown = false;
|
||||
/* let downX = 0; */
|
||||
/* let downY = 0; */
|
||||
let isMouseDown = $state(false);
|
||||
let downV = 0;
|
||||
let vx = 0;
|
||||
/* let vy = 0; */
|
||||
let rect: DOMRect;
|
||||
|
||||
function handleMouseDown(ev: MouseEvent) {
|
||||
@ -53,8 +62,6 @@
|
||||
isMouseDown = true;
|
||||
|
||||
downV = value;
|
||||
/* downX = ev.clientX; */
|
||||
/* downY = ev.clientY; */
|
||||
rect = inputEl.getBoundingClientRect();
|
||||
|
||||
window.removeEventListener('mousemove', handleMouseMove);
|
||||
@ -78,16 +85,6 @@
|
||||
min = value;
|
||||
}
|
||||
|
||||
// setTimeout(() => {
|
||||
// if (value >= 0) {
|
||||
// max = getBoundingValue(value);
|
||||
// min = 0;
|
||||
// } else {
|
||||
// min = getBoundingValue(value);
|
||||
// max = 0;
|
||||
// }
|
||||
// }, 500);
|
||||
|
||||
document.body.style.cursor = 'unset';
|
||||
window.removeEventListener('mouseup', handleMouseUp);
|
||||
window.removeEventListener('mousemove', handleMouseMove);
|
||||
@ -122,9 +119,9 @@
|
||||
{step}
|
||||
{max}
|
||||
{min}
|
||||
on:keydown={handleKeyDown}
|
||||
on:mousedown={handleMouseDown}
|
||||
on:mouseup={handleMouseUp}
|
||||
onkeydown={handleKeyDown}
|
||||
onmousedown={handleMouseDown}
|
||||
onmouseup={handleMouseUp}
|
||||
type="number"
|
||||
style={`width:${width};`}
|
||||
/>
|
||||
|
||||
@ -1,169 +1,172 @@
|
||||
<svelte:options accessors />
|
||||
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from "svelte";
|
||||
const dispatch = createEventDispatcher();
|
||||
let {
|
||||
min = 0,
|
||||
max = 10,
|
||||
step = 1,
|
||||
value = $bindable(),
|
||||
id,
|
||||
onchange
|
||||
}: {
|
||||
min?: number;
|
||||
max?: number;
|
||||
step?: number;
|
||||
value?: number;
|
||||
id?: string;
|
||||
onchange?: (num: number) => void;
|
||||
} = $props();
|
||||
|
||||
// Styling
|
||||
export let min: number | undefined = undefined;
|
||||
export let max: number | undefined = undefined;
|
||||
export let step = 1;
|
||||
export let value = 0;
|
||||
export let id = "";
|
||||
if (!value) {
|
||||
value = 0;
|
||||
}
|
||||
|
||||
if (!value) {
|
||||
value = 0;
|
||||
}
|
||||
let inputEl: HTMLInputElement;
|
||||
let wrapper: HTMLDivElement;
|
||||
$effect(() => {
|
||||
if (value !== undefined) {
|
||||
update();
|
||||
}
|
||||
});
|
||||
|
||||
let inputEl: HTMLInputElement;
|
||||
let wrapper: HTMLDivElement;
|
||||
$: value !== undefined && update();
|
||||
let prev = -1;
|
||||
function update() {
|
||||
if (prev === value) return;
|
||||
prev = value;
|
||||
onchange?.(value);
|
||||
}
|
||||
|
||||
let prev = -1;
|
||||
function update() {
|
||||
if (prev === value) return;
|
||||
prev = value;
|
||||
dispatch("change", parseFloat(value + ""));
|
||||
}
|
||||
let width = $derived(
|
||||
Number.isFinite(value) ? Math.max((value?.toString().length ?? 1) * 8, 30) + 'px' : '20px'
|
||||
);
|
||||
|
||||
$: width = Number.isFinite(value)
|
||||
? Math.max((value?.toString().length ?? 1) * 8, 30) + "px"
|
||||
: "20px";
|
||||
function handleChange(change: number) {
|
||||
value = Math.max(min ?? -Infinity, Math.min(+value + change, max ?? Infinity));
|
||||
}
|
||||
|
||||
function handleChange(change: number) {
|
||||
value = Math.max(
|
||||
min ?? -Infinity,
|
||||
Math.min(+value + change, max ?? Infinity),
|
||||
);
|
||||
}
|
||||
let downX = 0;
|
||||
let downV = 0;
|
||||
let rect: DOMRect;
|
||||
|
||||
let downX = 0;
|
||||
let downV = 0;
|
||||
let rect: DOMRect;
|
||||
function handleMouseDown(ev: MouseEvent) {
|
||||
ev.preventDefault();
|
||||
|
||||
function handleMouseDown(ev: MouseEvent) {
|
||||
ev.preventDefault();
|
||||
downV = value;
|
||||
downX = ev.clientX;
|
||||
rect = wrapper.getBoundingClientRect();
|
||||
|
||||
downV = value;
|
||||
downX = ev.clientX;
|
||||
rect = wrapper.getBoundingClientRect();
|
||||
window.removeEventListener('mousemove', handleMouseMove);
|
||||
window.addEventListener('mousemove', handleMouseMove);
|
||||
window.addEventListener('mouseup', handleMouseUp);
|
||||
document.body.style.cursor = 'ew-resize';
|
||||
}
|
||||
|
||||
window.removeEventListener("mousemove", handleMouseMove);
|
||||
window.addEventListener("mousemove", handleMouseMove);
|
||||
window.addEventListener("mouseup", handleMouseUp);
|
||||
document.body.style.cursor = "ew-resize";
|
||||
}
|
||||
function handleMouseUp() {
|
||||
if (downV === value) {
|
||||
inputEl.focus();
|
||||
} else {
|
||||
inputEl.blur();
|
||||
}
|
||||
|
||||
function handleMouseUp() {
|
||||
if (downV === value) {
|
||||
inputEl.focus();
|
||||
} else {
|
||||
inputEl.blur();
|
||||
}
|
||||
document.body.style.cursor = 'unset';
|
||||
window.removeEventListener('mouseup', handleMouseUp);
|
||||
window.removeEventListener('mousemove', handleMouseMove);
|
||||
}
|
||||
|
||||
document.body.style.cursor = "unset";
|
||||
window.removeEventListener("mouseup", handleMouseUp);
|
||||
window.removeEventListener("mousemove", handleMouseMove);
|
||||
}
|
||||
|
||||
function handleMouseMove(ev: MouseEvent) {
|
||||
if (!ev.ctrlKey && typeof min === "number" && typeof max === "number") {
|
||||
const vx = (ev.clientX - rect.left) / rect.width;
|
||||
value = Math.max(Math.min(Math.round(min + (max - min) * vx), max), min);
|
||||
} else {
|
||||
const vx = ev.clientX - downX;
|
||||
value = downV + Math.round(vx / 10);
|
||||
}
|
||||
}
|
||||
function handleMouseMove(ev: MouseEvent) {
|
||||
if (!ev.ctrlKey && typeof min === 'number' && typeof max === 'number') {
|
||||
const vx = (ev.clientX - rect.left) / rect.width;
|
||||
value = Math.max(Math.min(Math.round(min + (max - min) * vx), max), min);
|
||||
} else {
|
||||
const vx = ev.clientX - downX;
|
||||
value = downV + Math.round(vx / 10);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="component-wrapper"
|
||||
bind:this={wrapper}
|
||||
role="slider"
|
||||
tabindex="0"
|
||||
aria-valuenow={value}
|
||||
on:mousedown={handleMouseDown}
|
||||
on:mouseup={handleMouseUp}
|
||||
class="component-wrapper"
|
||||
bind:this={wrapper}
|
||||
role="slider"
|
||||
tabindex="0"
|
||||
aria-valuenow={value}
|
||||
onmousedown={handleMouseDown}
|
||||
onmouseup={handleMouseUp}
|
||||
>
|
||||
{#if typeof min !== "undefined" && typeof max !== "undefined"}
|
||||
<span
|
||||
class="overlay"
|
||||
style={`width: ${Math.min((value - min) / (max - min), 1) * 100}%`}
|
||||
/>
|
||||
{/if}
|
||||
<button on:click={() => handleChange(-step)}>-</button>
|
||||
<input
|
||||
bind:value
|
||||
bind:this={inputEl}
|
||||
{id}
|
||||
{step}
|
||||
{max}
|
||||
{min}
|
||||
type="number"
|
||||
style={`width:${width};`}
|
||||
/>
|
||||
{#if typeof min !== 'undefined' && typeof max !== 'undefined'}
|
||||
<span class="overlay" style={`width: ${Math.min((value - min) / (max - min), 1) * 100}%`}
|
||||
></span>
|
||||
{/if}
|
||||
<button onclick={() => handleChange(-step)}>-</button>
|
||||
<input
|
||||
bind:value
|
||||
bind:this={inputEl}
|
||||
{id}
|
||||
{step}
|
||||
{max}
|
||||
{min}
|
||||
type="number"
|
||||
style={`width:${width};`}
|
||||
/>
|
||||
|
||||
<button on:click={() => handleChange(+step)}>+</button>
|
||||
<button onclick={() => handleChange(+step)}>+</button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.component-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
background-color: var(--layer-2, #4b4b4b);
|
||||
border-radius: 2px;
|
||||
user-select: none;
|
||||
transition: box-shadow 0.3s ease;
|
||||
outline: solid 1px var(--outline);
|
||||
overflow: hidden;
|
||||
border-radius: var(--border-radius, 2px);
|
||||
}
|
||||
.component-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
background-color: var(--layer-2, #4b4b4b);
|
||||
border-radius: 2px;
|
||||
user-select: none;
|
||||
transition: box-shadow 0.3s ease;
|
||||
outline: solid 1px var(--outline);
|
||||
overflow: hidden;
|
||||
border-radius: var(--border-radius, 2px);
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
-webkit-appearance: textfield;
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
cursor: pointer;
|
||||
font-size: 1em;
|
||||
font-family: var(--font-family);
|
||||
padding-top: 8px;
|
||||
flex: 1;
|
||||
width: 72%;
|
||||
}
|
||||
input[type='number'] {
|
||||
-webkit-appearance: textfield;
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
cursor: pointer;
|
||||
font-size: 1em;
|
||||
font-family: var(--font-family);
|
||||
padding-top: 8px;
|
||||
flex: 1;
|
||||
width: 72%;
|
||||
}
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
input[type='number']::-webkit-inner-spin-button,
|
||||
input[type='number']::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
background-color: var(--layer-3);
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
.overlay {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
background-color: var(--layer-3);
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
line-height: 0px;
|
||||
margin: 0;
|
||||
color: var(--text-color);
|
||||
margin-inline: 6px;
|
||||
}
|
||||
button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
line-height: 0px;
|
||||
margin: 0;
|
||||
color: var(--text-color);
|
||||
margin-inline: 6px;
|
||||
}
|
||||
|
||||
div input[type="number"] {
|
||||
color: var(--text-color);
|
||||
background-color: transparent;
|
||||
padding: var(--padding, 6px);
|
||||
padding-inline: 0px;
|
||||
text-align: center;
|
||||
border: none;
|
||||
border-style: none;
|
||||
}
|
||||
div input[type='number'] {
|
||||
color: var(--text-color);
|
||||
background-color: transparent;
|
||||
padding: var(--padding, 6px);
|
||||
padding-inline: 0px;
|
||||
text-align: center;
|
||||
border: none;
|
||||
border-style: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,23 +1,25 @@
|
||||
<script lang="ts">
|
||||
export let options: string[] = [];
|
||||
export let value: number = 0;
|
||||
export let id = "";
|
||||
let {
|
||||
id,
|
||||
value = $bindable(),
|
||||
options
|
||||
}: { id: string; value: number; options: string[] } = $props();
|
||||
</script>
|
||||
|
||||
<select {id} bind:value>
|
||||
{#each options as label, i}
|
||||
<option value={i}>{label}</option>
|
||||
{/each}
|
||||
{#each options as label, i}
|
||||
<option value={i}>{label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
|
||||
<style>
|
||||
select {
|
||||
background: var(--layer-2);
|
||||
color: var(--text-color);
|
||||
font-family: var(--font-family);
|
||||
outline: solid 1px var(--outline);
|
||||
padding: 0.8em 1em;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
}
|
||||
select {
|
||||
background: var(--layer-2);
|
||||
color: var(--text-color);
|
||||
font-family: var(--font-family);
|
||||
outline: solid 1px var(--outline);
|
||||
padding: 0.8em 1em;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,31 +1,29 @@
|
||||
<script lang="ts">
|
||||
import Float from "./Float.svelte";
|
||||
import Float from './Float.svelte';
|
||||
|
||||
export let value = [0, 0, 0];
|
||||
export let id = "";
|
||||
let { value = $bindable(), id }: { value: number[]; id: string } = $props();
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<Float id={`${id}-x`} bind:value={value[0]} />
|
||||
<Float id={`${id}-y`} bind:value={value[1]} />
|
||||
<Float id={`${id}-z`} bind:value={value[2]} />
|
||||
<Float id={`${id}-x`} bind:value={value[0]} />
|
||||
<Float id={`${id}-y`} bind:value={value[1]} />
|
||||
<Float id={`${id}-z`} bind:value={value[2]} />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div > :global(.component-wrapper:nth-child(1)) {
|
||||
border-radius: 4px 4px 0px 0px !important;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
div > :global(.component-wrapper:nth-child(2)) {
|
||||
border-radius: 0px !important;
|
||||
outline: none;
|
||||
border: solid thin var(--outline);
|
||||
border-top: solid thin color-mix(in srgb, var(--outline) 50%, transparent);
|
||||
border-bottom: solid thin
|
||||
color-mix(in srgb, var(--outline) 50%, transparent);
|
||||
}
|
||||
div > :global(.component-wrapper:nth-child(3)) {
|
||||
border-top: none !important;
|
||||
border-radius: 0px 0px 4px 4px !important;
|
||||
}
|
||||
div > :global(.component-wrapper:nth-child(1)) {
|
||||
border-radius: 4px 4px 0px 0px !important;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
div > :global(.component-wrapper:nth-child(2)) {
|
||||
border-radius: 0px !important;
|
||||
outline: none;
|
||||
border: solid thin var(--outline);
|
||||
border-top: solid thin color-mix(in srgb, var(--outline) 50%, transparent);
|
||||
border-bottom: solid thin color-mix(in srgb, var(--outline) 50%, transparent);
|
||||
}
|
||||
div > :global(.component-wrapper:nth-child(3)) {
|
||||
border-top: none !important;
|
||||
border-radius: 0px 0px 4px 4px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,34 @@
|
||||
<script lang="ts">
|
||||
import "$lib/app.css";
|
||||
import Slider from "$lib/elements/Float.svelte";
|
||||
import '$lib/app.css';
|
||||
import Float from '$lib/elements/Float.svelte';
|
||||
import Integer from '$lib/elements/Integer.svelte';
|
||||
import Vec3 from '$lib/elements/Vec3.svelte';
|
||||
|
||||
let intValue = $state(0);
|
||||
let floatValue = $state(0.2);
|
||||
let vecValue = $state([0.2, 0.3, 0.4]);
|
||||
</script>
|
||||
|
||||
<Slider id="asd" />
|
||||
<main>
|
||||
<section>
|
||||
<h3>Integer {intValue}</h3>
|
||||
<Integer bind:value={intValue} />
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Float {floatValue}</h3>
|
||||
<Float bind:value={floatValue} />
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Vec3 {JSON.stringify(vecValue)}</h3>
|
||||
<Vec3 bind:value={vecValue} />
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
main {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -102,3 +102,47 @@ function decode_recursive(dense: number[] | Int32Array, index = 0) {
|
||||
export function decodeNestedArray(dense: number[] | Int32Array) {
|
||||
return decode_recursive(dense, 0)[0];
|
||||
}
|
||||
|
||||
|
||||
export function splitNestedArray(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;
|
||||
}
|
||||
|
||||
@ -11,12 +11,52 @@ pub struct PathDataMut<'a> {
|
||||
pub points: &'a mut [f32],
|
||||
}
|
||||
|
||||
impl PathDataMut<'_> {
|
||||
pub fn get_length(&self) -> f32 {
|
||||
let mut l = 0.0;
|
||||
for i in 0..(self.length - 1) {
|
||||
let a = vec3(
|
||||
self.points[i * 4],
|
||||
self.points[i * 4 + 1],
|
||||
self.points[i * 4 + 2],
|
||||
);
|
||||
let b = vec3(
|
||||
self.points[(i + 1) * 4],
|
||||
self.points[(i + 1) * 4 + 1],
|
||||
self.points[(i + 1) * 4 + 2],
|
||||
);
|
||||
l += (b - a).length();
|
||||
}
|
||||
l
|
||||
}
|
||||
}
|
||||
|
||||
pub struct PathData<'a> {
|
||||
pub depth: i32,
|
||||
pub length: usize,
|
||||
pub points: &'a [f32],
|
||||
}
|
||||
|
||||
impl PathData<'_> {
|
||||
pub fn get_length(&self) -> f32 {
|
||||
let mut l = 0.0;
|
||||
for i in 0..(self.length - 1) {
|
||||
let a = vec3(
|
||||
self.points[i * 4],
|
||||
self.points[i * 4 + 1],
|
||||
self.points[i * 4 + 2],
|
||||
);
|
||||
let b = vec3(
|
||||
self.points[(i + 1) * 4],
|
||||
self.points[(i + 1) * 4 + 1],
|
||||
self.points[(i + 1) * 4 + 2],
|
||||
);
|
||||
l += (b - a).length();
|
||||
}
|
||||
l
|
||||
}
|
||||
}
|
||||
|
||||
pub fn create_multiple_paths(amount: usize, point_amount: usize, depth: i32) -> Vec<i32> {
|
||||
let output_size = amount * (point_amount * 4 + PATH_HEADER_SIZE + 4) + 4;
|
||||
|
||||
|
||||
@ -162,7 +162,12 @@ pub fn evaluate_vec3(input_args: &[i32]) -> Vec<f32> {
|
||||
}
|
||||
|
||||
pub fn evaluate_float(arg: &[i32]) -> f32 {
|
||||
decode_float(evaluate_int(arg))
|
||||
let res = decode_float(evaluate_int(arg));
|
||||
if res.is_nan() {
|
||||
0.0
|
||||
} else {
|
||||
res
|
||||
}
|
||||
}
|
||||
|
||||
pub fn evaluate_int(input_args: &[i32]) -> i32 {
|
||||
|
||||
@ -34,6 +34,9 @@ importers:
|
||||
comlink:
|
||||
specifier: ^4.4.1
|
||||
version: 4.4.1
|
||||
file-saver:
|
||||
specifier: ^2.0.5
|
||||
version: 2.0.5
|
||||
jsondiffpatch:
|
||||
specifier: ^0.6.0
|
||||
version: 0.6.0
|
||||
@ -56,6 +59,9 @@ importers:
|
||||
'@tsconfig/svelte':
|
||||
specifier: ^5.0.4
|
||||
version: 5.0.4
|
||||
'@types/file-saver':
|
||||
specifier: ^2.0.7
|
||||
version: 2.0.7
|
||||
'@unocss/preset-icons':
|
||||
specifier: ^0.59.4
|
||||
version: 0.59.4
|
||||
@ -747,6 +753,9 @@ packages:
|
||||
'@types/estree@1.0.5':
|
||||
resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
|
||||
|
||||
'@types/file-saver@2.0.7':
|
||||
resolution: {integrity: sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A==}
|
||||
|
||||
'@types/json-schema@7.0.15':
|
||||
resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
|
||||
|
||||
@ -1314,6 +1323,9 @@ packages:
|
||||
resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
|
||||
engines: {node: ^10.12.0 || >=12.0.0}
|
||||
|
||||
file-saver@2.0.5:
|
||||
resolution: {integrity: sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==}
|
||||
|
||||
fill-range@7.0.1:
|
||||
resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
|
||||
engines: {node: '>=8'}
|
||||
@ -3006,6 +3018,8 @@ snapshots:
|
||||
|
||||
'@types/estree@1.0.5': {}
|
||||
|
||||
'@types/file-saver@2.0.7': {}
|
||||
|
||||
'@types/json-schema@7.0.15': {}
|
||||
|
||||
'@types/node@20.12.7':
|
||||
@ -3735,6 +3749,8 @@ snapshots:
|
||||
dependencies:
|
||||
flat-cache: 3.2.0
|
||||
|
||||
file-saver@2.0.5: {}
|
||||
|
||||
fill-range@7.0.1:
|
||||
dependencies:
|
||||
to-regex-range: 5.0.1
|
||||
|
||||
Loading…
Reference in New Issue
Block a user