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.

revisualizer.buck.co

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!

Best experienced with headphones.
Up loud. Full screen. In the dark.
Credits

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)