I made this using Three.js, and would like to submit it as showcase candidate.
It’s an animated aquarium, which uses a boid simulation to guide the behavior of the fish.
Also, they blink, and eventually sync colors with their flock, demonstrating the principle described in this paper about fireflies.
2 Likes
Thanks for showing your work. I played for a while with the aquarium.
When I try it with Chrome, all the fish in a boid cluster move too synchronously. I’d have expected some more variation or at least some delay between the front and the back fishes in a boid. Maybe I need to better fine-tube the parameters? Or maybe my computer is too fast?
With Firefox I get error message in painter.js:2:23 and no fish is shown:
Uncaught TypeError: The specifier “three” was a bare
specifier, but was not remapped to anything. Relative
module specifiers must start with “./”, “../” or “/”.
Hey,
I’ll definitely take a look at the firefox issue. I hadn’t really tried outside my own browser.
Regarding flocking speed, some of the parameters are in fact set a touch high, as it used to take way too long for the flocks to form, I thought it wasn’t that visually appealing… The sim speed isn’t tied to how fast your machine is running supposedly, although it can run slower due to poor performance.
1 Like
The issue with firefox should now be fixed.
1 Like
Yes, I can confirm. Now it works in Firefox. Thanks for fixing it.
1 Like
This is nice, the concept of boids is always fascinating!
I get quite low frame rates on mobile when bumping the boid count above default, are you utilizing InstanceMesh for this? I’d imagine you’d get away with a lot more fish if so as they’re pretty low poly…
this official example also uses some shader magic to draw gltf birds so that they can be interacted with
I saw the code in the example, but unfortunately I had also done some profiling earlier and found that Three isn’t the bottleneck at all.
The logic I wrote to compute visible peers is by far what consumed the most time…