How Facebook 3D Photos Work

Photo by Roman Vabishchevych

First guess, fragment shader?

Check it out live here. Everything is flat here, it’s just 3D illusion.
3D object on left is built as a displacement of vertices using texture on the right. See it live.

How i decompiled

heaviest file is 400k, next, two 2048x2048 jpegs
it’s a bit hard, but you can guess the kangaroo shape here
now you can see all the vertex data. It’s pretty detailed!

How it all works?

left is actual texture for 3d kangaroo, right is 3d model vertex data.

In the end

See vertical column on the left.
i think they just test image compatibility with your current GPU? Any ideas? UPDATE: thats

--

--

--

curious guy at riverco.de frontend agency

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Everything You Need To Know About Node Js !

Bye Gatsby (Episode 2)

ReferenceError: window is not defined

JavaScript: The privacy and security nightmare

React and Firebase are all you need to host your web apps

Inject Service From Another Module in NestJS

Screenshot of Nest.js

List of a most important method of Javascript that you have to know

How JavaScript uses call stack

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
Yuri akella Artiukh

Yuri akella Artiukh

curious guy at riverco.de frontend agency

More from Medium

Wavy Mesh using Shaders & r3f.

3D CSS Flippy Snaps with React && GreenSock

Exploring digital art with CSS-only

#2 Building a JavaScript & HTML Browser RPG: Game grid