Revisualizer (submission)

Hey hey! I’m writing on behalf of BUCK, where I work. We created a fun threejs project called Revisualizer, and I wanted to humbly submit it for inclusion on the homepage. Thanks in advance for your time!

Project link
https://revisualizer.buck.co/

What is it?
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.

Because BUCK has a lot of traditional 3D artists in-house, 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.

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.

More process and imagery can be found here:
https://buck.co/research/revisualizer

6 Likes

Very cool :star_struck:

Can you explain why you used both Cinema4D and Maya? It seems like this is quite common, is there a reason why you don’t just stick with one or the other?

Two minor technical issues:

  1. I tested it in Firefox first. When I press a key it opens a text search box for that letter:

Perhaps if you add a prevenDefault to the key event listeners it would fix this?

I think this is something FF added recently, it’s quite annoying and can be disabled:
https://support.mozilla.org/en-US/questions/1042093

  1. Once I’ve pressed all the keys and it goes into the cool trippy animation there’s quite a pause - maybe one or two seconds of jank.
2 Likes

I got the same 2-second delay. It looks like the trippy shader should be pre-compiled so it doesn’t have to load to GPU for the first time in the middle of the experience.

Other than that, great job! Are you creating a new point light for each object?

1 Like

Can you explain why you used both Cinema4D and Maya? It seems like this is quite common, is there a reason why you don’t just stick with one or the other?

The short answer is that we were still figuring out our pipeline, and our artists use both programs. Some people can optimize files in Maya easier than C4D.

  • we started design with what was more comfortable (C4D)
  • we switched to what our CG lead knew how to use (Maya) to optimize everything to go from 3D → Substance painter.
1 Like

really cool work!

1 Like

Thank you!

This is so cool and smooth, amazing work! Really loving it