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

more sdf perf

This commit is contained in:
“chrisshank” 2024-12-01 20:28:26 -08:00
parent 5eb4f5c432
commit 48b7119e37
2 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
demo/distance-perf.html
View File

@ -41,8 +41,8 @@
for (let i = 0; i < 20; i++) { for (let i = 0; i < 20; i++) {
for (let j = 0; j < 20; j++) { for (let j = 0; j < 20; j++) {
const geo = document.createElement('fc-geometry'); const geo = document.createElement('fc-geometry');
geo.x = 50 * i + Math.floor(Math.random() * 45); geo.x = 100 * i + Math.floor(Math.random() * 45);
geo.y = 50 * j + Math.floor(Math.random() * 45); geo.y = 100 * j + Math.floor(Math.random() * 45);
geo.width = geo.height = 45; geo.width = geo.height = 45;
geometries.push(geo); geometries.push(geo);
d.append(geo); d.append(geo);
@ -52,18 +52,18 @@
DistanceField.define(); DistanceField.define();
// function tick() { function tick() {
// window.requestAnimationFrame(tick); window.requestAnimationFrame(tick);
// for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
// const g = geometries[Math.floor(Math.random() * geometries.length)]; const g = geometries[Math.floor(Math.random() * geometries.length)];
// const max = 15; const max = 50;
// g.x += Math.floor(Math.random() * max - max / 2); g.x += Math.floor(Math.random() * max - max / 2);
// g.y += Math.floor(Math.random() * max - max / 2); g.y += Math.floor(Math.random() * max - max / 2);
// } }
// } }
// tick(); tick();
</script> </script>
</body> </body>
</html> </html>

5
src/distance-field.ts
View File

@ -153,12 +153,13 @@ export class DistanceField extends HTMLElement {
const gl = this.glContext; const gl = this.glContext;
const positions: number[] = []; const positions: number[] = [];
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
// 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.getClientRect(); const rect = geometry.getClientRect();
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
// Convert DOM coordinates to Normalized Device Coordinates (NDC) // Convert DOM coordinates to Normalized Device Coordinates (NDC)
const x1 = (rect.left / windowWidth) * 2 - 1; const x1 = (rect.left / windowWidth) * 2 - 1;
const y1 = -((rect.top / windowHeight) * 2 - 1); const y1 = -((rect.top / windowHeight) * 2 - 1);