Which frameworks for best performance rendering edge points for images?

Question

Hello dear Sololearners.

I'm actually working on a project that should display edge points for an image and already tried different approaches.

I actually tried working with openCV.js (and older frameworks) for better performance, but with an eye on mobile performance too, it was just too slow, so I stayed with jquery.

The grayscale filter actually helped out a lot and I also changed the other variables like scale, brightnessThreshhold, etc. for better performance (and also the variables of the typewriterEffect, which is also involved), but the performance is still not very ideal.

Anyone could help?

Answer 1

After some researches, in my opinion, for optimal performance when rendering edge points for images, especially with a focus on mobile devices, I recommend consider the frameworks below:

1. WebGL (via Three.js or PixiJS):

>> Reason: everages GPU for high performance rendering

I would recomment to use Three.js for flexibility or PixiJS for 2D rendering

>> WASM (via OpenCV + Emscripten):

Reason: Runs openCV efficiently in the browser

To do that, precompile performance critical parts to WebAssembly for speed

>> GPU.js:

Reason: Executes parallelized image processing tasks on the GPU

For example, convert edge detection into GPU compatible kernels

I also find some cool tips that might help (for GPU.js):

>> Use lower resolutions or image scaling before processing

>> Optimize parameters, dynamically

>> Cache grayscale and processed data for reuse

Those things I've described approaches combine speed and compatibility for both mobile and desktop

Hope this might help, have fun :<|}

Answer 2

I did some research and found a quiet good solution for the moment, while still working with jquery.

It evaluated fast that setAnimationFrame is the way better choice to work with, than working with setTimeout for animations and I found a solid way to adjust the fps-rate:

````javascript

function animate() {
draw();
let lastTime = 0;
const fps = 80; // set framerate
const fpsInterval = 200 / fps; //set the interval between the frames

function animate(currentTime) {
requestAnimationFrame(animate);

const elapsed = currentTime - lastTime;

if (elapsed > fpsInterval) {
lastTime = currentTime - (elapsed % fpsInterval);

// animation logic check
console.log("Frame drawn at:", currentTime);
}
}

requestAnimationFrame(animate);

````

Also the elapsed variable helped a lot to get a better procession rate.

So this works way better now, also with some other little adjustments, but I'm still thankful for valuable tips and new ideas or techniques. :<|}

Answer 3

☕︎︎AstroParrot✦
Thank you for sharing buddy! ✌️✨️

>> Use lower resolutions or image scaling before processing -> ✅️

>> Optimize parameters, dynamically -> ✅️

>> Cache grayscale and processed data for reuse -> ✅️

Those, I already discovered without using GPU.js, but I'll check it out (was still on my list anyway ;<|》).

I also started using ImageData, that additionally helped with better performance.

I'm actually stuck a little bit with the harmonization between image and typewriter rendering, which I hoped to get better focus on with this project:

https://sololearn.com/compiler-playground/WM1QRrTOsDR3/?ref=app

But I'm still working it out... 🖖