Learn to Morph

With 3ds Max & WebGL

Introduction Software Applications Overview Steps Morph the Mesh Prepare for WebGL Shaders Vertex Shader Fragment Shader Display the Animation Summary

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

A number of initialization details were left out, to focus on the main topic. Most WebGL projects initialize as described in Seven Thunder Software's Learn WebGL Series. However information in this tutorial should apply to other WebGL projects, such as those that use Unity or Three.js, as well.

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.