We start with a point cloud generated from the model which has color and normal and render each particle as a little hexagon with metallic and iridescent shading. Each particle is given a position and velocity in a texture. Each frame we do a physics step that writes to these textures with fragment shaders. We sum the forces into the velocity texture:
- mouse interaction force
- flow force from time varying curl noise
- spring force to return to original position
- air resistance
last we do a euler step to update position texture.
There’s masses of free parameters to control forces and materials, the animation is created by changing parameters per-particle over time
Tech: three.js, GLSL & TypeScript
Tip: Left click to push apart, right click to pull together!
You should be able to see the blob form models – perhaps there's some error when it runs on your system. It relies on floating-point textures which aren't supported everywhere
Yes with s=1?d=-4 the models are completely clear. I assume the semitransparent glittery look is intentional artistic choice."weird blob" weren't my words but I can imagine how someone could describe it that way considering that half of the time you see the transition animation during which it's much harder to recognize the object.
Judging from other comments, it seems I'm not the only one who didn't get to experience that - perhaps I just didn't wait long enough for that to show up?
In good hackernews style, I got downvoted into oblivion for just a simple question, but I guess that's to be expected these days.
We start with a point cloud generated from the model which has color and normal and render each particle as a little hexagon with metallic and iridescent shading. Each particle is given a position and velocity in a texture. Each frame we do a physics step that writes to these textures with fragment shaders. We sum the forces into the velocity texture:
- mouse interaction force
- flow force from time varying curl noise
- spring force to return to original position
- air resistance
last we do a euler step to update position texture. There’s masses of free parameters to control forces and materials, the animation is created by changing parameters per-particle over time
Tech: three.js, GLSL & TypeScript
Tip: Left click to push apart, right click to pull together!