Revisualizer
2021
An in-browser audio/visual experience that uses custom sound design and gamified interactions to reveal a trippy surprise in the end. Users play with a visual audioscape by using their keyboard like an instrument.
A real-time meditative escape.
A digital toy.
We brought BUCK’s playful ethos to the interactive space by creating a next-level WebGL experience that uses the latest and greatest rendering capabilities of the web.
Real-Time Rendering
We wanted to push C4D / Redshift style rendering in the browser to bring BUCK's style to life with the latest and greatest of WebGL.
The Process (How we did it)
It’s all about the textures
We recreated all textures in Substance Painter for a real-time rendering environment. We baked in shadows, ambient occlusion, and used shaders to do the heavy lifting of complex lighting & shadows.
Tech Pipeline
Our goal with this process was to achieve a smooth in-browser interactive experience with the highest fidelity rendering possible.
The process allows creative control over each step of development, consequently pushing the WebGL experience further.
We started with design and previz in C4D and Maya, testing animation, lighting, shaders and optimizing the 3D models to be as lightweight as possible.
After that, we moved to Substance Painter for texture creation, since it gives you much more control and allows you to export all the correct textures necessary for development.
User Experience
We wanted to push real-time rendering, but we also wanted to create an experience that was fun, and satisfying to play with — while simple, it should allow you to totally zone out in your dark bedroom and get trippy with it.
-> It needs to be fun.
-> it needs to be trippy.
-> It needs to be super simple & easy to use,
without complex tutorials or on-boarding/training.
Spatial Audio
The sound pans/moves from L—R depending on the object cluster’s position in space. Sound also responds to the user clicking and rotating the cluster.
Try it yourself!
Up loud. Full screen. In the dark.
BUCK
Executive Producer
Ryan McGrath
Creative Director
Jodi Terwilliger
ACD/AD
Vinicius Naldi
ACD/UX/UI Design
Philip Sierzega
Producer
Max Lauter
Chief Innovation Officer
Fredrik Frizell
Creative Technologist
Adam Ferriss
Anthony Enns
Ryan Nelson
Modeling and Shading
Filipe Machado
Joy Tien
Design
Yker Moreno
Sound
Music & Sound Design
Roger Lima (White Noise Lab)