web worker

This commit is contained in:
2024-03-04 00:02:01 +01:00
parent c83695281b
commit 369df93204
9 changed files with 446 additions and 275 deletions

View File

@@ -1,10 +1,12 @@
<script lang="ts">
import { Canvas } from '@threlte/core';
import Scene from './Scene.svelte';
import type { Writable } from 'svelte/store';
import { fly } from 'svelte/transition';
let progress = 1;
let progress: Writable<number | undefined>;
let showSlices = 1;
let progressLayer = 0;
let progressLayer: Writable<number>;
</script>
<Canvas>
@@ -12,19 +14,65 @@
</Canvas>
<div class="controls">
<input type="range" min="0" max="1" step="0.01" bind:value={showSlices} />
<label>Layer {progressLayer} <progress value={progress} /></label>
<input type="range" min="0" max="1" step="0.01" bind:value={showSlices} orient="vertical" />
</div>
<style>
{#if $progress !== undefined}
<div class="progress" transition:fly={{ y: 10 }}>
<div class="progress-card">
Layer {$progressLayer ?? 0}
<progress value={$progress ?? 0} />
</div>
</div>
{/if}
<style lang="scss">
input[type='range'] {
}
.controls {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: 10px;
}
label {
.progress {
display: flex;
flex-direction: column;
position: absolute;
bottom: 0;
justify-content: center;
align-items: center;
}
progress {
width: 100%;
background: transparent;
border: 1px solid white;
color: white;
border-radius: 4px;
&::-webkit-progress-bar {
background: transparent;
}
}
.progress-card {
margin: 14px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2px;
background: #22aaee;
color: white;
padding: 10px;
border-radius: 14px;
}
</style>

View File

@@ -1,7 +1,7 @@
<script lang="ts">
import { T } from '@threlte/core';
import { T, type AsyncWritable } from '@threlte/core';
import { Gizmo, Grid, OrbitControls } from '@threlte/extras';
import { STLLoader } from 'three/examples/jsm/loaders/STLLoader';
import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js';
import { useLoader } from '@threlte/core';
import {
BufferGeometry,
@@ -10,258 +10,75 @@
Mesh,
DoubleSide,
Color,
Plane,
Line3,
Float32BufferAttribute,
Box3,
Matrix4
BufferGeometryLoader
} from 'three';
import { ExtendedTriangle, MeshBVH, type HitPointInfo } from 'three-mesh-bvh';
import type { Readable } from 'svelte/store';
import { writable } from 'svelte/store';
import { onDestroy, onMount } from 'svelte';
import SliceWorker from '$lib/slicer/worker.js?worker';
import {
LayerType,
type WorkerMessage,
type Layer,
type SliceEvent
} from '$lib/slicer/worker-data';
let sliceWorker: Worker;
onMount(() => {
const geometryLoader = new BufferGeometryLoader();
sliceWorker = new SliceWorker();
sliceWorker.addEventListener('message', (event: MessageEvent<WorkerMessage>) => {
switch (event.data.type) {
case 'progress': {
progress.set(event.data.percent);
progressLayer.set(event.data.layer);
break;
}
case 'layer': {
const layer = event.data.data;
layers.update((layers) => {
layers.push({
type: layer.type,
geometry: geometryLoader.parse(layer.geometry)
});
return layers;
});
break;
}
}
});
});
onDestroy(() => {
sliceWorker?.terminate();
});
export let buildSurface = [300, 300, 300];
export let layerHeight = 0.2;
export let nozzleSize = 0.4;
export let tolerance = 0.005;
export let progress = 1;
export let progressLayer = 0;
export let progress = writable<number | undefined>(undefined);
export let progressLayer = writable(0);
export let showSlices = 1;
export let maxNonPlanarAngle = MathUtils.degToRad(20);
export let bedNormal = new Vector3(0, 0, 1);
export let extruderNormal = new Vector3(0, 0, -1);
export let origin = new Vector3(150, 150, 0);
const stl: Readable<BufferGeometry> = useLoader(STLLoader).load('/benchy.stl');
const enum LayerType {
Line,
Surface
}
let mesh: Mesh;
let layers: { type: LayerType; geometry: BufferGeometry }[] = [];
let layers = writable<Layer[]>([]);
const stl: AsyncWritable<BufferGeometry> = useLoader(STLLoader).load('/benchy.stl');
$: if ($stl) {
(async () => {
progress = 0;
progressLayer = 0;
await new Promise((resolve) => requestAnimationFrame(resolve));
const generator = slice();
while (!generator.next().done) {
await new Promise((resolve) => requestAnimationFrame(resolve));
sliceWorker.postMessage({
type: 'slice',
data: {
stl: $stl.toJSON(),
layerHeight,
tolerance,
maxNonPlanarAngle,
bedNormal: bedNormal.toArray()
}
})();
}
function* slice() {
const bvh = new MeshBVH($stl);
const positions = $stl.getAttribute('position');
const normals = $stl.getAttribute('normal');
const index = $stl.index!;
const qualifyingTriangles = Array.from({ length: index.count / 3 }, () => false);
let qualifyingTrianglesCount = 0;
const triangle = new ExtendedTriangle();
const normal = new Vector3();
for (let i = 0; i < index.count / 3; i++) {
triangle.setFromAttributeAndIndices(
positions,
index.array[i * 3],
index.array[i * 3 + 1],
index.array[i * 3 + 2]
);
triangle.getNormal(normal);
const angle = normal.angleTo(bedNormal);
// TODO: bottom layers
if (angle < maxNonPlanarAngle) {
qualifyingTriangles[i] = true;
qualifyingTrianglesCount++;
}
}
const includedTriangles = [...qualifyingTriangles];
const includedTrianglesCount = qualifyingTrianglesCount;
const surfaces: number[][] = [];
while (qualifyingTrianglesCount > 0) {
const faceIndex = qualifyingTriangles.findIndex((it) => it);
qualifyingTriangles[faceIndex] = false;
qualifyingTrianglesCount--;
const surface = [faceIndex];
let cursor = 0;
while (cursor < surface.length) {
triangle.setFromAttributeAndIndices(
positions,
index.array[surface[cursor] * 3],
index.array[surface[cursor] * 3 + 1],
index.array[surface[cursor] * 3 + 2]
);
bvh.shapecast({
intersectsBounds(box, _isLeaf, _score, _depth, _nodeIndex) {
return triangle.intersectsBox(box);
},
intersectsTriangle(target, triangleIndex, _contained, _depth) {
if (
qualifyingTriangles[triangleIndex] &&
target.distanceToTriangle(triangle) < tolerance
) {
qualifyingTriangles[triangleIndex] = false;
qualifyingTrianglesCount--;
surface.push(triangleIndex);
}
}
});
cursor++;
}
surfaces.push(surface);
}
const nonPlanarSurfaces = surfaces.map((surface) => {
const geometry = new BufferGeometry();
geometry.setAttribute('position', positions);
geometry.setAttribute('normal', normals);
const indices: number[] = Array.from({ length: surface.length * 3 });
for (let i = 0; i < surface.length; i++) {
const pos = surface[i] * 3;
indices[i * 3] = $stl.index!.array[pos];
indices[i * 3 + 1] = $stl.index!.array[pos + 1];
indices[i * 3 + 2] = $stl.index!.array[pos + 2];
}
geometry.setIndex(indices);
const bvh = new MeshBVH(geometry);
geometry.boundsTree = bvh;
return bvh;
});
const activeNonPlanarSurfaces: [number, MeshBVH][] = [];
const consumedNonPlanarSurfaces = nonPlanarSurfaces.map(() => false);
const withheld: Array<
| { type: LayerType.Line; geometry: number[] }
| { type: LayerType.Surface; id: [number, MeshBVH] }
>[] = nonPlanarSurfaces.map(() => [{ type: LayerType.Line, geometry: [] }]);
const blacklist = Array.from({ length: index.count / 3 }).map(() => false);
const line = new Line3();
const targetVector1 = new Vector3();
const targetVector2 = new Vector3();
const targetVector3 = new Vector3();
const hit1: HitPointInfo = { point: new Vector3(), distance: 0, faceIndex: 0 };
const hit2: HitPointInfo = { point: new Vector3(), distance: 0, faceIndex: 0 };
const layerPlane = new Plane();
function deactivateSurface(surface: MeshBVH, index: number) {
layers.push({ type: LayerType.Surface, geometry: surface.geometry });
for (const thing of withheld[index]) {
if (thing.type === LayerType.Line) {
if (thing.geometry.length === 0) continue;
const additionalGeometry = new BufferGeometry();
additionalGeometry.setAttribute(
'position',
new Float32BufferAttribute(thing.geometry, 3)
);
layers.push({ type: LayerType.Line, geometry: additionalGeometry });
} else if (thing.type === LayerType.Surface) {
deactivateSurface(thing.id[1], thing.id[0]);
}
}
delete withheld[index];
}
for (let layer = 0; layer < $stl.boundingBox!.max.z; layer += layerHeight) {
layerPlane.set(bedNormal, -layer);
const layerGeometry = new BufferGeometry();
const positions: number[] = [];
for (let i = 0; i < nonPlanarSurfaces.length; i++) {
if (consumedNonPlanarSurfaces[i]) continue;
if (nonPlanarSurfaces[i].geometry.boundingBox!.min.z > layer) {
consumedNonPlanarSurfaces[i] = true;
activeNonPlanarSurfaces.push([i, nonPlanarSurfaces[i]]);
}
}
deactivate: for (let i = 0; i < activeNonPlanarSurfaces.length; i++) {
const [index, surface] = activeNonPlanarSurfaces[i];
if (surface.geometry.boundingBox!.max.z <= layer) {
activeNonPlanarSurfaces.splice(i, 1);
i--;
for (const [activeIndex, active] of activeNonPlanarSurfaces) {
if (activeIndex === index) continue;
const hit = active.closestPointToGeometry(surface.geometry, new Matrix4(), hit1, hit2);
if (
hit &&
hit1.point.z < hit2.point.z &&
hit1.point.clone().sub(hit2.point).angleTo(bedNormal) > maxNonPlanarAngle
) {
withheld[activeIndex].push({ type: LayerType.Surface, id: [index, surface] });
withheld[activeIndex].push({ type: LayerType.Line, geometry: [] });
continue deactivate;
}
}
deactivateSurface(surface, index);
}
withheld[index]?.push({ type: LayerType.Line, geometry: [] });
}
bvh.shapecast({
intersectsBounds(box, _isLeaf, _score, _depth, _nodeIndex) {
return layerPlane.intersectsBox(box);
},
intersectsTriangle(target, triangleIndex, _contained, _depth) {
if (includedTriangles[triangleIndex] || blacklist[triangleIndex]) return;
function intersect(a: Vector3, b: Vector3, targetVector: Vector3) {
line.set(a, b);
return layerPlane.intersectLine(line, targetVector);
}
const a = intersect(target.a, target.b, targetVector1);
const b = intersect(target.b, target.c, targetVector2);
const c = intersect(target.c, target.a, targetVector3);
function add(a: Vector3, b: Vector3) {
for (let i = 0; i < activeNonPlanarSurfaces.length; i++) {
const [index, surface] = activeNonPlanarSurfaces[i];
const withheldLayer = withheld[index].at(-1)!;
if (withheldLayer.type === LayerType.Surface) throw new Error('Unexpected surface');
const h1 = surface.closestPointToPoint(a);
if (
h1 &&
h1.point.z < a.z &&
h1.point.clone().sub(a).angleTo(bedNormal) > maxNonPlanarAngle
) {
withheldLayer.geometry.push(a.x, a.y, a.z, b.x, b.y, b.z);
return;
}
const h2 = surface.closestPointToPoint(b);
if (
h2 &&
h2.point.z < b.z &&
h2.point.clone().sub(b).angleTo(bedNormal) > maxNonPlanarAngle
) {
withheldLayer.geometry.push(a.x, a.y, a.z, b.x, b.y, b.z);
return;
}
}
positions.push(a.x, a.y, a.z, b.x, b.y, b.z);
}
if (a && b) {
add(a, b);
} else if (b && c) {
add(b, c);
} else if (c && a) {
add(c, a);
}
}
});
layerGeometry.setAttribute('position', new Float32BufferAttribute(positions, 3));
layers.push({ type: LayerType.Line, geometry: layerGeometry });
layers = layers;
progress = layer / $stl.boundingBox!.max.z;
progressLayer = Math.round(layer / layerHeight);
yield;
}
for (const [index, surface] of activeNonPlanarSurfaces) {
deactivateSurface(surface, index);
}
progress = 1;
layers = layers;
} satisfies SliceEvent);
}
</script>
@@ -282,9 +99,9 @@
gridSize={[buildSurface[0], buildSurface[1]]}
/>
{#each layers as { geometry, type }, i}
{@const visible = showSlices >= i / layers.length}
{@const color = new Color(0, i / layers.length, 0.2)}
{#each $layers as { geometry, type }, i}
{@const visible = showSlices >= i / $layers.length}
{@const color = new Color(0, i / $layers.length, 0.2)}
{#if type === LayerType.Line}
<T.LineSegments {geometry} {visible}>
<T.LineBasicMaterial {color} />

View File

View File

@@ -0,0 +1,39 @@
import type { Vector3Tuple } from 'three';
export interface SliceArguments {
stl: object;
bedNormal: Vector3Tuple;
maxNonPlanarAngle: number;
tolerance: number;
layerHeight: number;
}
export interface SliceEvent {
type: 'slice';
data: SliceArguments;
}
export type WorkerEvent = SliceEvent;
export type WorkerMessage = LayerMessage | ProgressMessage;
export interface LayerMessage {
type: 'layer';
data: Layer;
}
export interface ProgressMessage {
type: 'progress';
percent?: number;
layer: number;
}
export interface Layer {
type: LayerType;
geometry: object;
}
export const enum LayerType {
Line,
Surface
}

253
src/lib/slicer/worker.ts Normal file
View File

@@ -0,0 +1,253 @@
import {
BufferGeometry,
BufferGeometryLoader,
Float32BufferAttribute,
Line3,
Matrix4,
Plane,
Vector3
} from 'three';
import { ExtendedTriangle, MeshBVH, type HitPointInfo } from 'three-mesh-bvh';
import {
LayerType,
type LayerMessage,
type SliceArguments,
type ProgressMessage,
type WorkerEvent
} from './worker-data';
addEventListener('message', (event: MessageEvent<WorkerEvent>) => {
if (event.data.type === 'slice') {
console.log(event.data.data);
slice(event.data.data);
}
});
function slice({
stl,
bedNormal: bedNormalArray,
maxNonPlanarAngle,
tolerance,
layerHeight
}: SliceArguments) {
self.postMessage({ type: 'progress', percent: 0, layer: 0 } satisfies ProgressMessage);
const bedNormal = new Vector3(...bedNormalArray);
const geometry = new BufferGeometryLoader().parse(stl);
const bvh = new MeshBVH(geometry);
const positions = geometry.getAttribute('position');
const normals = geometry.getAttribute('normal');
const index = geometry.index!;
const qualifyingTriangles = Array.from({ length: index.count / 3 }, () => false);
let qualifyingTrianglesCount = 0;
const triangle = new ExtendedTriangle();
const normal = new Vector3();
for (let i = 0; i < index.count / 3; i++) {
triangle.setFromAttributeAndIndices(
positions,
index.array[i * 3],
index.array[i * 3 + 1],
index.array[i * 3 + 2]
);
triangle.getNormal(normal);
const angle = normal.angleTo(bedNormal);
// TODO: bottom layers
if (angle < maxNonPlanarAngle) {
qualifyingTriangles[i] = true;
qualifyingTrianglesCount++;
}
}
const includedTriangles = [...qualifyingTriangles];
const includedTrianglesCount = qualifyingTrianglesCount;
const surfaces: number[][] = [];
while (qualifyingTrianglesCount > 0) {
const faceIndex = qualifyingTriangles.findIndex((it) => it);
qualifyingTriangles[faceIndex] = false;
qualifyingTrianglesCount--;
const surface = [faceIndex];
let cursor = 0;
while (cursor < surface.length) {
triangle.setFromAttributeAndIndices(
positions,
index.array[surface[cursor] * 3],
index.array[surface[cursor] * 3 + 1],
index.array[surface[cursor] * 3 + 2]
);
bvh.shapecast({
intersectsBounds(box, _isLeaf, _score, _depth, _nodeIndex) {
return triangle.intersectsBox(box);
},
intersectsTriangle(target, triangleIndex, _contained, _depth) {
if (
qualifyingTriangles[triangleIndex] &&
target.distanceToTriangle(triangle) < tolerance
) {
qualifyingTriangles[triangleIndex] = false;
qualifyingTrianglesCount--;
surface.push(triangleIndex);
}
}
});
cursor++;
}
surfaces.push(surface);
}
const nonPlanarSurfaces = surfaces.map((surface) => {
const geometry = new BufferGeometry();
geometry.setAttribute('position', positions);
geometry.setAttribute('normal', normals);
const indices: number[] = Array.from({ length: surface.length * 3 });
for (let i = 0; i < surface.length; i++) {
const pos = surface[i] * 3;
indices[i * 3] = index.array[pos];
indices[i * 3 + 1] = index.array[pos + 1];
indices[i * 3 + 2] = index.array[pos + 2];
}
geometry.setIndex(indices);
const bvh = new MeshBVH(geometry);
geometry.boundsTree = bvh;
return bvh;
});
const activeNonPlanarSurfaces: [number, MeshBVH][] = [];
const consumedNonPlanarSurfaces = nonPlanarSurfaces.map(() => false);
const withheld: Array<
| { type: LayerType.Line; geometry: number[] }
| { type: LayerType.Surface; id: [number, MeshBVH] }
>[] = nonPlanarSurfaces.map(() => [{ type: LayerType.Line, geometry: [] }]);
const blacklist = Array.from({ length: index.count / 3 }).map(() => false);
const line = new Line3();
const targetVector1 = new Vector3();
const targetVector2 = new Vector3();
const targetVector3 = new Vector3();
const hit1: HitPointInfo = { point: new Vector3(), distance: 0, faceIndex: 0 };
const hit2: HitPointInfo = { point: new Vector3(), distance: 0, faceIndex: 0 };
const layerPlane = new Plane();
function deactivateSurface(surface: MeshBVH, index: number) {
self.postMessage({
type: 'layer',
data: { type: LayerType.Surface, geometry: surface.geometry.toJSON() }
} satisfies LayerMessage);
for (const thing of withheld[index]) {
if (thing.type === LayerType.Line) {
if (thing.geometry.length === 0) continue;
const additionalGeometry = new BufferGeometry();
additionalGeometry.setAttribute('position', new Float32BufferAttribute(thing.geometry, 3));
self.postMessage({
type: 'layer',
data: { type: LayerType.Line, geometry: additionalGeometry.toJSON() }
});
} else if (thing.type === LayerType.Surface) {
deactivateSurface(thing.id[1], thing.id[0]);
}
}
delete withheld[index];
}
for (let layer = 0; layer < geometry.boundingBox!.max.z; layer += layerHeight) {
layerPlane.set(bedNormal, -layer);
const layerGeometry = new BufferGeometry();
const positions: number[] = [];
for (let i = 0; i < nonPlanarSurfaces.length; i++) {
if (consumedNonPlanarSurfaces[i]) continue;
if (nonPlanarSurfaces[i].geometry.boundingBox!.min.z > layer) {
consumedNonPlanarSurfaces[i] = true;
activeNonPlanarSurfaces.push([i, nonPlanarSurfaces[i]]);
}
}
deactivate: for (let i = 0; i < activeNonPlanarSurfaces.length; i++) {
const [index, surface] = activeNonPlanarSurfaces[i];
if (surface.geometry.boundingBox!.max.z <= layer) {
activeNonPlanarSurfaces.splice(i, 1);
i--;
for (const [activeIndex, active] of activeNonPlanarSurfaces) {
if (activeIndex === index) continue;
const hit = active.closestPointToGeometry(surface.geometry, new Matrix4(), hit1, hit2);
if (
hit &&
hit1.point.z < hit2.point.z &&
hit1.point.clone().sub(hit2.point).angleTo(bedNormal) > maxNonPlanarAngle
) {
withheld[activeIndex].push({ type: LayerType.Surface, id: [index, surface] });
withheld[activeIndex].push({ type: LayerType.Line, geometry: [] });
continue deactivate;
}
}
deactivateSurface(surface, index);
}
withheld[index]?.push({ type: LayerType.Line, geometry: [] });
}
bvh.shapecast({
intersectsBounds(box, _isLeaf, _score, _depth, _nodeIndex) {
return layerPlane.intersectsBox(box);
},
intersectsTriangle(target, triangleIndex, _contained, _depth) {
if (includedTriangles[triangleIndex] || blacklist[triangleIndex]) return;
function intersect(a: Vector3, b: Vector3, targetVector: Vector3) {
line.set(a, b);
return layerPlane.intersectLine(line, targetVector);
}
const a = intersect(target.a, target.b, targetVector1);
const b = intersect(target.b, target.c, targetVector2);
const c = intersect(target.c, target.a, targetVector3);
function add(a: Vector3, b: Vector3) {
for (let i = 0; i < activeNonPlanarSurfaces.length; i++) {
const [index, surface] = activeNonPlanarSurfaces[i];
const withheldLayer = withheld[index].at(-1)!;
if (withheldLayer.type === LayerType.Surface) throw new Error('Unexpected surface');
const h1 = surface.closestPointToPoint(a);
if (
h1 &&
h1.point.z < a.z &&
h1.point.clone().sub(a).angleTo(bedNormal) > maxNonPlanarAngle
) {
withheldLayer.geometry.push(a.x, a.y, a.z, b.x, b.y, b.z);
return;
}
const h2 = surface.closestPointToPoint(b);
if (
h2 &&
h2.point.z < b.z &&
h2.point.clone().sub(b).angleTo(bedNormal) > maxNonPlanarAngle
) {
withheldLayer.geometry.push(a.x, a.y, a.z, b.x, b.y, b.z);
return;
}
}
positions.push(a.x, a.y, a.z, b.x, b.y, b.z);
}
if (a && b) {
add(a, b);
} else if (b && c) {
add(b, c);
} else if (c && a) {
add(c, a);
}
}
});
layerGeometry.setAttribute('position', new Float32BufferAttribute(positions, 3));
self.postMessage({
type: 'layer',
data: { type: LayerType.Line, geometry: layerGeometry.toJSON() }
} satisfies LayerMessage);
self.postMessage({
type: 'progress',
percent: layer / geometry.boundingBox!.max.z,
layer: Math.round(layer / layerHeight)
} satisfies ProgressMessage);
}
for (const [index, surface] of activeNonPlanarSurfaces) {
deactivateSurface(surface, index);
}
self.postMessage({
type: 'progress',
layer: Math.round(geometry.boundingBox!.max.z / layerHeight)
} satisfies ProgressMessage);
}

View File

@@ -0,0 +1,5 @@
* {
box-sizing: border-box;
appearance: none;
font-family: sans-serif;
}

View File

@@ -0,0 +1,5 @@
<script lang="ts">
import '$lib/style/global.scss';
</script>
<slot />