WebGL Change Shape Animation

Question

I'm creating a 3D globe with a map on it which is supposed to unravel and fill the screen after a few seconds.

I've managed to create the globe using three.js and webGL, but I'm having trouble finding any information on being able to animate a shape change. Can anyone provide any help? Is it even possible?

score 6 · Answer 1 · answered Jun 13 '13 at 18:29

(Abstract Algorithm's and Kevin Reid's answers are good, and only one thing is missing: some actual Three.js code.)

You basically need to calculate where each point of the original sphere will be mapped to after it flattens out into a plane. This data is an attribute of the shader: a piece of data attached to each vertex that differs from vertex to vertex of the geometry. Then, to animate the transition from the original position to the end position, in your animation loop you will need to update the amount of time that has passed. This data is a uniform of the shader: a piece of data that remains constant for all vertices during each frame of the animation, but may change from one frame to the next. Finally, there exists a convenient function called "mix" that will linearly interpolate between the original position and the end/goal position of each vertex.

I've written two examples for you: the first just "flattens" a sphere, sending the point (x,y,z) to the point (x,0,z).

http://stemkoski.github.io/Three.js/Shader-Attributes.html

The second example follows Abstract Algorithm's suggestion in the comments: "unwrapping the sphere's vertices back on plane surface, like inverse sphere UV mapping." In this example, we can easily calculate the ending position from the UV coordinates, and so we actually don't need attributes in this case.

http://stemkoski.github.io/Three.js/Sphere-Unwrapping.html

Hope this helps!

score 1 · Accepted Answer · answered Jun 01 '13 at 13:21

1

In 3D, anything and everything is possible. ;)

Your sphere geometry has it's own vertices, and basically you just need to animate their position, so after animation they are all sitting on one planar surface.

Try creating sphere and plane geometry, with same number of vertices, and animating sphere's vertices with interpolated values of sphere's and plane's original values. That way, on the start you would have sphere shape and in the end, plane shape.

Hope this helps, tell me if you need more directives how to do it.

myGlobe.geometry.vertices[index].position = something_calculated;
// myGlobe is instance of THREE.Mesh and something_calculated would be THREE.Vector3 instance that you can calculate in some manner (sphere-plane interpolation over time)

answered Jun 01 '13 at 13:21

Dragan Okanovic

7,509
3
32
48

I'm completely new to use and I have no idea how I'm supposed to animate the vertices with interpolated values. If I have a sphere shape and a plane shape they have different numbers of vertices? I've only been using three.js for a couple of days, this is all completely new to me. If I have to start writing shader code then it's not going to be cross-browser compatible and that's not what I need. – ise Jun 03 '13 at 17:00
You can simply calculate position of vertices. Sphere's vertices are somewhat grouped in the parallels. So for each vertex you can calculate an angle from "starting" meridian and then that convert to position on plane surface. That's for X-axis, while Y stays the same. It's like you're unwrapping the sphere's vertices back on plane surface, like inverse sphere UV mapping. – Dragan Okanovic Jun 03 '13 at 18:10
This might help: http://learningwebgl.com/blog/?p=1253. In this tutorial, you are shown how to create sphere's vertices and assign assign to each a UV coord [0..1], wwhile you need the opposite process, so converting vertex position to [0..1] and that you could scale up to [-width/2..width/2] of the plane. – Dragan Okanovic Jun 03 '13 at 18:26

score 1 · Answer 3 · answered Jun 01 '13 at 15:53

(Abstract Algorithm's answer is good, but I think one thing needs improvement: namely using vertex shaders.)

You make a set of vertices textured with the map image. Then, design a calculation for interpolating between the sphere shape and the flat shape. It doesn't have to be linear interpolation — for example, one way that might be good is to put the map on a small portion of an sphere of increasing radius until it looks flat (getting it all the way will be tricky).

Then, write that calculation in your vertex shader. The position of each vertex can be computed entirely from the texture coordinates (since that determines where-on-the-map the vertex goes and implies its position) and a uniform variable containing a time value.

Using the vertex shader will be much more efficient than recomputing and re-uploading the coordinates using JavaScript, allowing perfectly smooth animation with plenty of spare resources to do other things as well.

Unfortunately, I'm not familiar enough with Three.js to describe how to do this in detail, but all of the above is straightforward in basic WebGL and should be possible in any decent framework.

Thanks. I also meant though vertex shader, simply adding extra attribute or so, and Three.js offers adding custom attributes through ShaderMaterial. — Dragan Okanovic, Jun 01 '13 at 23:17
@AbstractAlgorithm OK, sorry 'about that. Take mine as just a little clarification then :) — Kevin Reid, Jun 01 '13 at 23:20
I'm really looking for a three.js way of doing it as I'm only a few days into using it. I was just hoping I could say, this is a sphere, this is a plane, animate from one to the other. — ise, Jun 03 '13 at 17:02

WebGL Change Shape Animation

3 Answers3