My adventures of implementing one animation on a website.
The full animation on the website looks like this:
We’ve been working on this one together with the guys from MountianMaier.de. Animation you see is done in Cinema4D with a RedShift renderer. One of the main features for the website was that user could play animation to any place and it should look good on all the screens (i.e. retina )
Of course, as a fan of WebGL and Three.js my first thought was just to export it for the web. So i opened up my Cinema4D, saved file, and, behold: the .glb …
The website has been done by Homunculus studio from Japan, and the developer of the website is Yuichiroh Arai. I want this case study to honor his skills and ideas he implemented on this beautiful website, as well as his team. Thank you guys for creating one of the best and smoothest user experiences with WebGL out there, ありがとう. Hope they will read that :-).
Let’s see how it all works!
So your first thought might be: it is definitely something in 3D, some mesh being folded and unfolded like a manuscript. Some clever vertex shader morphing. Let’s investigate. …
To create such a photo, choose 3D Photo when post to Facebook, and use new portrait mode on iPhone. That’s it.
But how does it work under the hood? I like to learn new ideas by reading other people’s code. So I was curious enough to learn how they implemented this effect at Facebook. Here is the story. If you just want to know the tech, skip to the “how it all works” part.
There is a popular way of faking 3D with shader, by using depth map and distort image pixels with fragment shader in…