Overfishing is one of the major environmental problems that humans face today.

To set a focus on this global issue we developed an interactive online experience for the ocean environmentalist organisation, Oceana.

We wanted to achieve a recognisable behaviour of fish within a swarm. Additionally, we wanted the swarm to be reactive through user-input like a mouse movement. Therefore, we used a mix of basic boid and flocking algorithms in JavaScript to handle the three common dependencies in a swarm behaviour like alignment, cohesion and separation which are also influenced by mouse interaction.

We decided to go with WebGL/Three.js. We spent some time to find a good workflow for porting animated 3D Models from Cinema4D to Three.js and switched to Blender and moved on. Due to the freedom and faster implementation of skinned animated Collada models in Three.js, we chose Collada over JSON. To keep the memory low and the FPS up implemented render pauses where possible, custom shaders for materials and textures, minimised draw calls to keep a low memory footprint.