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

cleanup and error handling

This commit is contained in:
Orion Reed 2024-12-02 00:04:54 -05:00
parent 3c591e3d65
commit 2d4996a4de
1 changed files with 15 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/distance-field.ts
View File

@ -34,32 +34,12 @@ export class DistanceField extends HTMLElement {
} }
connectedCallback() { connectedCallback() {
// Collect all geometry elements to process
this.shapes = document.querySelectorAll('fc-geometry'); this.shapes = document.querySelectorAll('fc-geometry');
this.initWebGL();
// Initialize WebGL context and canvas
const { gl, canvas } = WebGLUtils.createWebGLCanvas(this.clientWidth, this.clientHeight, this);
if (!gl || !canvas) {
console.error('Failed to initialize WebGL context.');
return;
}
this.canvas = canvas;
this.glContext = gl;
// Initialize shader programs
this.initShaders(); this.initShaders();
// Initialize textures and framebuffer for ping-pong rendering
this.initPingPongTextures(); this.initPingPongTextures();
// Render seed points (shapes) into the texture
this.initSeedPointRendering(); this.initSeedPointRendering();
// Start the Jump Flooding Algorithm
this.runJFA();
window.addEventListener('resize', this.handleResize); window.addEventListener('resize', this.handleResize);
this.shapes.forEach((geometry) => { this.shapes.forEach((geometry) => {
geometry.addEventListener('move', this.handleGeometryUpdate); geometry.addEventListener('move', this.handleGeometryUpdate);
@ -76,12 +56,23 @@ export class DistanceField extends HTMLElement {
this.cleanupWebGLResources(); this.cleanupWebGLResources();
} }
private initWebGL() {
const { gl, canvas } = WebGLUtils.createWebGLCanvas(this.clientWidth, this.clientHeight, this);
if (!gl || !canvas) {
throw new Error('Failed to initialize WebGL context.');
}
this.canvas = canvas;
this.glContext = gl;
}
/** /**
* Handles updates to geometry elements by re-initializing seed points and rerunning the JFA. * Handles updates to geometry elements by re-initializing seed points and rerunning the JFA.
*/ */
private handleGeometryUpdate = () => { private handleGeometryUpdate = () => {
this.initSeedPointRendering(); this.initSeedPointRendering();
this.runJFA(); this.runJumpFloodingAlgorithm();
}; };
/** /**
@ -249,7 +240,7 @@ export class DistanceField extends HTMLElement {
* Executes the Jump Flooding Algorithm (JFA) to compute the distance field. * Executes the Jump Flooding Algorithm (JFA) to compute the distance field.
* It progressively reduces step sizes to refine the distance calculations. * It progressively reduces step sizes to refine the distance calculations.
*/ */
private runJFA() { private runJumpFloodingAlgorithm() {
let stepSize = 1 << Math.floor(Math.log2(Math.max(this.canvas.width, this.canvas.height))); let stepSize = 1 << Math.floor(Math.log2(Math.max(this.canvas.width, this.canvas.height)));
// Perform passes with decreasing step sizes // Perform passes with decreasing step sizes
@ -388,7 +379,7 @@ export class DistanceField extends HTMLElement {
this.initSeedPointRendering(); this.initSeedPointRendering();
// Rerun the Jump Flooding Algorithm with the new sizes // Rerun the Jump Flooding Algorithm with the new sizes
this.runJFA(); this.runJumpFloodingAlgorithm();
}; };
/** /**