How to Unroll Images with Three.js

Do you like to roll up things? Or maybe you prefer rolling them out?

I spent my childhood doing crepes. I loved those rolls.

I guess, the time has come to unroll all kinds of things, including images. And to unroll as many rolls as possible I decided to automate this process with a bit of JavaScript and WebGL.

The setup

I will be using Three.js for this animation, and set up a basic scene with some planes.

Just as in this tutorial by Paul Henschel, we will replace all the images with those PlaneGeometry objects. So, we will simply work with HTML images:

<img src="owl.jpg" class="js-image" />

Once the page loads and a “loaded” class is set to the body, we will hide those images:

.loaded .js-image {
	opacity: 0;
}

Then we’ll get the dimensions of each image and position them into our 3D Planes, exactly there where the DOM image elements were.

MY_SCENE.add(
	new THREE.Mesh(
		new PlaneGeometry(640,480),  // some size of image
		new Material({texture:’owl.jpg’) // texture i took from DOM
	)
)

Because rolling things with CSS or SVG is next to impossible, I needed all the power of WebGL, and I moved parts of my page into that world. But I like the idea of progressive enhancement, so we still have the usual images there in the markup, and if for some reason the JavaScript or WebGL isn’t working, we would still see them.

After that, its quite easy to sync the scroll of the page with the 3D scene position. For that I used a custom smooth scroll described in this tutorial. You should definitely check it out, as it works regardless of platform and actions that you use to scroll. You know this is usually the biggest pain with custom scrolling libraries.

Let’s rock and roll

So, we have what we want in 3D! Now, with the power of shaders we can do anything!

Well, anything we are capable of, at least =).

I started from the end. I imagine every animation as some function which takes a number between 0 and 1 (I call it ‘progress’) and returns a visual. So the result of my imaginary RollFunction(0) should be something rolled. And RollFunction(1), should be just the default state of the plane. That’s how I got the last line of my animation:

vec3 finalPosition = mix(RolledPosition, DefaultPosition, progress);

I had DefaultPosition from the start, it’s usually called ‘position’. So all I needed is to create the RolledPosition and change my progress!

I figured out a couple of ways to do that. I could have had another object (like an .obj file) done in some editor, or even fully exported the animation from Blender or another program.

But I decided to transform DefaultPosition into RolledPosition with a couple of math functions inside my Vertex shader. So, imagine we have a plane lying in the Z plane, so, to roll something like that, you could do the following:

RolledPosition.x = RADIUS*cos(position.x);
RolledPosition.y = position.y; // stays the same
RolledPosition.z = RADIUS*sin(position.x);

If you ever tried to draw a circle yourself, you can easily guess where this is coming from. If not here is a famous GIF illustrating that visualizes that sheds some light on it:

Of course this would just make a (not so) perfect tube out of our plane, but just adding a couple of parameters here, we can make it into a real roll:

RADIUS *= 1 - position.x; // so it gets smaller when we roll the plane
newposition.z =  RADIUS*sin(position.x*TWO_PI);
newposition.x =  RADIUS*cos(position.x*TWO_PI); 

And you will get something like that:

See the Pen Archimedean spiral unroll animation by Ted (@claimred) on CodePen.

This is done with the help of the D3 library, but the idea is the same.

This two-dimensional animation has really helped me to get the idea of rolling things. So I recommend that you to dig into the code, it’s quite interesting!

After that step, it was a matter of time and arithmetics to play a bit with the progress, so I got this kind of animation for my plane:

There are a number of other steps, to make the angle parametric, and to make it a bit more beautiful with subtle shadows, but that’s the most important part right here. Sine and Cosine functions are often at the core of all the cool things you see on the web! =).

So let me know if you like these rolling effects, and how much time you have spent scrolling back and forth just to see ‘em roll! Have a nice day! =)