Learn to Morph
With 3ds Max & WebGL
Introduction
This free tutorial explains the steps to prepare a morphing animation with 3ds Max and WebGL. The tutorial provides an overview of modeling, texturing, and rendering. This example includes WebGL shaders which accomplish morphing animation with the Graphics Processing Unit (GPU).
For interactive morphing examples see the Earth to rainbow transformation, swimming fish, and pyramid transforms to a cube, Web pages.
This tutorial includes the full source code listings for the vertex and fragment shaders used
with the
swimming fish
example.
The swimming fish vertex shader applies the mix()
function to blend two vertices.
One vertex represents a portion of the fish base mesh and the other vertex represents a
portion of the fish target mesh.
Each drawing operation processes all vertices for both meshes per frame.
The illusion of swimming happens as the animation transforms between base and target meshes.
This tutorial briefly explains 3D modeling, rendering, and animation with 3ds Max. The tutorial focuses on WebGL shaders which morph between two meshes.
Software Applications
Seven Thunder Software
uses 3ds Max to prepare 3D models, the
free WebGL Translator
to translate models for display with WebGL,
Eclipse (free) to prepare JavaScript and shaders,
Photoshop to modify the texture,
and Google Chrome (free) to test.
However free 3D modeling, rendering, and graphical applications are available online as well. It's not necessary to spend a fortune to render amazing three dimensional scenes online with WebGL. 3ds Max features discussed in this tutorial, most likely have counterparts in free 3D modeling and rendering software.
Steps to Prepare the Animated Fish
First create a 3D mesh, map the mesh, and render to texture. Second create a copy of the mesh and reshape the copy. Third apply the 3ds Max morpher modifier to test the animation. Fourth translate the meshes for display with JavaScript and WebGL. Fifth prepare shaders to display morphing or transforming vertices. Sixth upload the meshes and one texture to the GPU. Seventh test and make modifications to the source code or texture as needed.
- Model, Map & Render to Texture
- Copy the Modeled Mesh
- Reshape the Modeled Mesh
- Test with the Morpher Modifier
- Translate from DAE format to WebGL arrays
- Prepare Shaders
- Test and Modify as Needed
Morph the Mesh
3ds Max's morpher modifier transforms the
shape of a base
mesh into the
shape of target
meshes.
However all targets and the base
must have the exact same number of vertices.
It's simplest to copy the original mesh,
to maintain the same
order and number of vertices, between
morph targets.
Make a few copies of the original mesh for use as morph targets.
Modify the shapes of various mesh copies.
For example bend, twist, or ripple the copies.
Be sure to Reset X Form
on the
modified copies.
Select a base mesh and
apply 3ds Max's morpher modifier.
Select the modified mesh shapes as morph targets
.
Animate the mesh along the timeline.
A value of 100
for a morph
target applies the target's vertex coordinates 100%.
A value of 0
applies nothing
to the morphing sequence from the current target.
A value of 50
for a morph target
applies 50% of the position of the
morph target vertices, to active mesh elements
in the morph list.
Assuming you only have one target mesh in
the target list.
Apply a value of 50
to both
the base and target meshes. The model
appears like a blend between the base mesh and target mesh.
Apply a value of 100
to the target
mesh and 0
to the base mesh.
The model looks like the target mesh only.
Apply a value of 0
to the target
mesh and 100
to the base mesh.
The model looks like the base mesh only.
Prepare for WebGL
When you're happy with the current animation morph
sequence, then delete the morpher modifier.
Output the base and target mesh as Collada DAE files.
You may use Seven Thunder Software's free WebGL Translator
to convert models from DAE format into arrays for applications with WebGL.
Shaders to Morph
The following vertex shader applies morphing or transformation to two sets of vertices. The vertices represent a base and one morph target. The texels and texture remain the same. One texture applies to both the base and target meshes.
The attribute a_position
processes
vertices for the base mesh.
The attribute a_position_morph
processes vertices for the target mesh.
Notice the uniform uf_time
.
JavaScript uploads a floating point value
to uf_time
which modifies the morphing
animation.
The examples modify morphing frame by frame.
Therefore JavaScript assigns a new vallue
to uf_time
for each animation frame.
The mix()
function
returns the average of
vertex values from
attributes
a_position_morph
and a_position
,
based on the value uploaded to uf_time
.
For example if
uf_time
equals 1.0
then mix()
returns the
vertex coordinates representing
a_position_morph
only.
If uf_time
equals
0.0
then
mix()
returns
the vertex coordinates representing
a_position
only.
If uf_time
equals
0.5
then
mix()
returns
the average between
vertex coordinates in
attribute a_position
and coordinates in a_position_morph
.
Hopefully the preceding explanation sounds familiar!
3ds Max applies a similar process for each
morph mesh.
The third parameter for the WebGL mix()
function
ranges between 0.0
and 1.0
.
Apply values between 0
and 100
with 3ds Max's morpher modifier.
Just scale the values down by 100 to accomplish
the same task in WebGL as in 3ds Max.
The vertex shader multiplies
the value returned from mix()
,
with the transformation and perspective matrices.
The transformation matrix applies rotation.
The perspective matrix provides a sense of depth.
Built in variable gl_Position
receives
the product of mix()
, transformation, and perspective
matrices.
The Vertex Shader
attribute vec4 a_position; attribute vec4 a_position_morph; attribute vec2 a_tex_coord0; varying vec2 v_tex_coord0; uniform mat4 um4_matrix; uniform mat4 um4_pmatrix; uniform float uf_time; void main(void) { vec4 v4_mix = mix( a_position_morph, a_position, uf_time ); gl_Position = um4_pmatrix * um4_matrix * v4_mix; v_tex_coord0 = a_tex_coord0; }
Fragment Shader
The following fragment shader is quite simple. The fragment shader samples the mesh texture at the current texel coordinate. The sample is applied to the current fragment color.
precision mediump float; uniform sampler2D u_sampler0; varying vec2 v_tex_coord0; void main(void) { gl_FragColor = texture2D( u_sampler0, v_tex_coord0 ); }
Display the Animation
With JavaScript and WebGL upload vertices, texels, and the texture, to the GPU. Prepare JavaScript to display your animation.
Test the animation.
You might include timed animation, or dwell in certain
positions for a while.
You have a lot of control to morph and move
based on values uploaded to uf_time
.
Sometimes textures need a few modifications to look right. You might smooth, highlight, or fix a few poorly rendered areas of the texture. Eventually the animation should be ready to go.
Summary
This free tutorial explained the steps to prepare a morphing animation with 3ds Max and WebGL. The tutorial provided an overview of modeling, texturing, and rendering. This example included WebGL shaders which accomplish morphing animation with the Graphics Processing Unit (GPU).
For interactive morphing examples see the Earth to rainbow transformation, swimming fish, and pyramid transforms to a cube, Web pages.
This tutorial included the full source code listings for the vertex and fragment shaders used
with the
swimming fish
example.
The swimming fish vertex shader applies the mix()
function to blend two vertices.
One vertex represents a portion of the fish base mesh and the other vertex represents a
portion of the fish target mesh.
Each drawing operation processes all vertices for both meshes per frame.
The illusion of swimming happens as the animation transforms between base and target meshes.
This tutorial briefly explained 3D modeling, rendering and animation with 3ds Max. The tutorial focused on WebGL shaders which morph between two meshes.