jeffemmett
/
folk-canvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

sdf perf and add perf demo

This commit is contained in:
“chrisshank” 2024-12-01 20:08:11 -08:00
parent 8fc9df7b89
commit 56459fdaa3
2 changed files with 78 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
demo/distance-perf.html Normal file
View File

@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Distance Perf</title>
<style>
html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
margin: 0;
}
fc-geometry {
border: 2px solid black;
}
distance-field {
position: absolute;
inset: 0;
}
</style>
</head>
<body>
<distance-field> </distance-field>
<script type="module">
import { DistanceField } from '../src/distance-field.ts';
import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
FolkGeometry.define();
const d = document.querySelector('distance-field');
const geometries = [];
const now = performance.now();
for (let i = 0; i < 20; i++) {
for (let j = 0; j < 20; j++) {
const geo = document.createElement('fc-geometry');
geo.x = 50 * i + Math.floor(Math.random() * 45);
geo.y = 50 * j + Math.floor(Math.random() * 45);
geo.width = geo.height = 45;
geometries.push(geo);
d.append(geo);
}
}
console.log(performance.now() - now);
DistanceField.define();
// function tick() {
// window.requestAnimationFrame(tick);
// for (let i = 0; i < 10; i++) {
// const g = geometries[Math.floor(Math.random() * geometries.length)];
// const max = 15;
// g.x += Math.floor(Math.random() * max - max / 2);
// g.y += Math.floor(Math.random() * max - max / 2);
// }
// }
// tick();
</script>
</body>
</html>

16
src/distance-field.ts
View File

@ -1,5 +1,6 @@
import { frag, vert } from './utils/tags.ts'; import { frag, vert } from './utils/tags.ts';
import { WebGLUtils } from './utils/webgl.ts'; import { WebGLUtils } from './utils/webgl.ts';
import type { FolkGeometry } from './canvas/fc-geometry.ts';
/** /**
* The DistanceField class calculates a distance field using the Jump Flooding Algorithm (JFA) in WebGL. * The DistanceField class calculates a distance field using the Jump Flooding Algorithm (JFA) in WebGL.
@ -11,7 +12,7 @@ export class DistanceField extends HTMLElement {
private textures: WebGLTexture[] = []; private textures: WebGLTexture[] = [];
private shapes!: NodeListOf<Element>; private shapes!: NodeListOf<FolkGeometry>;
private canvas!: HTMLCanvasElement; private canvas!: HTMLCanvasElement;
private glContext!: WebGL2RenderingContext; private glContext!: WebGL2RenderingContext;
private framebuffer!: WebGLFramebuffer; private framebuffer!: WebGLFramebuffer;
@ -154,13 +155,14 @@ export class DistanceField extends HTMLElement {
// Collect positions and assign unique IDs to all shapes // Collect positions and assign unique IDs to all shapes
this.shapes.forEach((geometry, index) => { this.shapes.forEach((geometry, index) => {
const rect = geometry.getBoundingClientRect(); const rect = geometry.getClientRect();
const windowWidth = window.innerWidth;
// Convert DOM coordinates to Normalized Device Coordinates (NDC) // Convert DOM coordinates to Normalized Device Coordinates (NDC)
const x1 = (rect.left / window.innerWidth) * 2 - 1; const x1 = (rect.left / windowWidth) * 2 - 1;
const y1 = -((rect.top / window.innerHeight) * 2 - 1); const y1 = -((rect.top / windowWidth) * 2 - 1);
const x2 = (rect.right / window.innerWidth) * 2 - 1; const x2 = (rect.right / windowWidth) * 2 - 1;
const y2 = -((rect.bottom / window.innerHeight) * 2 - 1); const y2 = -((rect.bottom / windowWidth) * 2 - 1);
const shapeID = index + 1; // Avoid zero to prevent hash function issues const shapeID = index + 1; // Avoid zero to prevent hash function issues
@ -394,7 +396,7 @@ export class DistanceField extends HTMLElement {
* @returns A Float32Array of offsets. * @returns A Float32Array of offsets.
*/ */
private computeOffsets(stepSize: number): Float32Array { private computeOffsets(stepSize: number): Float32Array {
const offsets = []; const offsets: number[] = [];
for (let y = -1; y <= 1; y++) { for (let y = -1; y <= 1; y++) {
for (let x = -1; x <= 1; x++) { for (let x = -1; x <= 1; x++) {
offsets.push((x * stepSize) / this.canvas.width, (y * stepSize) / this.canvas.height); offsets.push((x * stepSize) / this.canvas.width, (y * stepSize) / this.canvas.height);