HPERIGO

In 2022 I was tasked with the challenge to create a WebGL landing page for Sonos' new product, the Sub Mini.

Together with the team we decided to use the parametric line elements from their promo video as our main visual of the intro.

Technical Write Up

Three.js has a function to generate a torus but since we would need a really high number of objects to represent the lines. Add animation and a custom shading effect and it would be costly both memory and cpu wise, especially for low end phone devices.

Another way to approach this would be single cylinder geometry with all the data we needed to create a torus; then we would draw each instance and modulate the torus properties like radius and noise in the vertex shader.

The base data is simply a cylinder where we encode a value from 0 to 1. that would later be used to modulate the angle of transformation to bend the geometry into a torus.