First of all, thanks to the three.js community for enabling projects like this.
I’ve developed an interactive 3D visualization that demonstrates image evolution under partial differential equations (PDEs), powered by this incredible library.
This web lets you upload your own images and apply various PDEs such as the heat or wave equation, while adjusting boundary conditions, discretization schemes and color maps in real time, among others.
The simulation aims to help in understanding the behavior of these equations from a physical perspective, applied to my field of expertise, image processing.
I’d love to get some feedback on anything; this is a work in progress, and it would help me to improve my undestanding about this framework too.
I can sense some R/ggplot or Python/matplotlib influence in the color maps.
I’m not sure how hard it would be to readjust the mesh dynamically. Currently the granularity of the mesh geometry introduces edges along curved shapes. Maybe this also causes some strange patterns, like this:
You’re right, I’ve noticed those visual artifacts in the wireframe connectivity, especially when the image flattens or values approach zero. It’s an effect I’m actively looking to mitigate. I suspect it’s related to how I’m downscaling the original image resolution to reduce the domain size. Possibly switching to bilinear interpolation or a similar method could help smooth out those patterns.
Three.js might also offer some post-processing tools like antialiasing or smoothing filters that could improve the visual quality of the material and standard mesh.
I hadn’t seriously considered moving the numerical computation to the GPU, and it’s a great idea. It could definitely speed up the current JavaScript CPU implementation, which is the main bottleneck affecting the simulation’s FPS. Running solver steps on a shader it’s still an unknown for me, but definitely interesting.
Instead, I did think about launching a Web Worker to run the solver separately, but I haven’t had much success yet, mostly due to my limited familiarity with some of the ES module system quirks. Still, I’m working on it; if you have any related resources or tips, I’d really appreciate it.
I’ve definitely been inspired by your FDM simulation, amazing work! I absolutely need to take a closer look at your GPU implementation. Thank you for sharing it, those FPS numbers look very promising. As soon as I make progress with the GPU implementation, I’ll be sure to share my results.
Please share any updates! Your version is a quite an improvement over mine. The GPU PDE is written in shader code, once you get the hang of that, it’s mostly working with Three.js buffers.
Here’s a shader GPU example I wrote a while ago. (I was learning as I wrote it, so take it with a grain of salt)
I’ve used ping-pong buffers for GPU version, which minimizes the CPU/GPU data transfer bottleneck. I think that is the major drawback in my original simulation.
Would love to hear different workarounds to tackle it .
.