My adventures of implementing one animation on a website.

Image for post
Image for post

The full animation on the website looks like this:

you can play it to any point

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 )

WebGL

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 …


I love decompiling stuff, i did that for facebook 3D photos recently, but this time it will be about marvelous Tao Tajima website. Go check it out first.

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!

Homepage effect

Image for post
Image for post
See the background transition effect

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. …


Facebook recently rolled out a new feature, 3D Photos, or, as they call it in their javascript: 2.5D Photos. Here is how it looks like:

Image for post
Image for post
Photo by Roman Vabishchevych

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.

First guess, fragment shader?

There is a popular way of faking 3D with shader, by using depth map and distort image pixels with fragment shader in…

About

Yuri akella Artiukh

curious guy at riverco.de frontend agency

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store