Model Optimization Ideas

Efficient 3D models for WebGL

Introduction

This short tutorial introduces a few ideas to optimize 3D models for use with WebGL.
Optimization means to make the most effective use of available resources.
Mobile devices often have more limited processing power and memory than
desktop computers. It's important to create lightweight projects which
download and run quickly, even on mobile phones. This article offers some suggestions to make
your own projects lighter and faster.

The swimming fish
example includes a few optimization techniques.
The number of vertices and texture size
were minimized for faster download and playback time.
Seven Thunder Software modeled the fish
with 3ds Max.
The fish model uses one 256 pixel squaretexture map.
The texture applies alpha transparency
for the fins. The fins
are composed of one dimensional surfaces. The same texture displays on both sides.

Read the
learn to morph tutorial,
for an introduction to WebGL morphing.
This tutorial discusses optimizing the 3D model and map.
Read the
Optimized WebGL Morphing
tutorial, for coding techniques with faster transformations.

Indexed Textures

Use indexed eight bit graphics when texture maps contain large sections of one color or
large sections of complete transparency.
Often a simple 256 color (8 bit) graphic can look great when shaders process lighting.
However 8 bit graphics don't compress complicated images well.
Sometimes models which render with lighting processed in the shader, look great
with very simple textures.
However if an 8 bit graphic contains a lot
of dithering or complexity, then JPG images often have smaller file sizes with a greater
range of color.

The following two graphics map to the Highlighted Skylab
and Highlighted Crown examples, with GLSL shaders.
Highlights or lighting in the WebGL shaders often allows developers to
simplify texture mapping, while maintaining great graphics.

Skylab Texture Map

Texture for Highlighted Crown

Small Textures

Map with small textures when possible.
The swimming fish
example displays with a 256 pixel wide by 256 pixel high
texture map, as follows.

Swimming Fish Texture Map

Low Polygon Models

The term Low Polygon Model applies to 3D models which have
a minimum number of polygons. Polygons can have a number of sides, but with
WebGL they're broken down into triangles. The more triangles, the longer a it takes
to download and display a mesh. Three vertices describe a triangle, however adjacent
triangles can share vertices.

3ds Max offers some features to help create low polygon models. For example
right click a mesh to view the number of vertices. Select the STL check feature to
see areas where edges might intersect or overlap. Select the optimize modifier.
Unfortunately the optimize modifier
changes the shape and mapping on a mesh. Sometimes that's fine. Often it's not.

It's usually best to start with the goal to create a low poly model, when it's really needed.
Weld adjacent vertices together.
Collapse parallel flat surfaces into one surface.
Remove polygons which won't display when the model's in use.
Carefully prepare the model with low poly in mind, to avoid unnecessary
polygons.

Compact VBOs

Graphics processing units (GPU) store vertex, texel, normal, and other data
within vertex buffer objects (VBO). GPUs generally run faster with more data
in one VBO than small amounts of data spread across multiple VBOs.
When possible combine WebGL arrays, then upload all data into one buffer.
The
Optimized WebGL Morphing
tutorial demonstrates one method to process one VBO with multiple attributes in the shaders.

A number of initialization details were left out, to focus on the main topic.
Most WebGL projects initialize as
described in the WebGL e-book series.
However information in this tutorial should apply to other WebGL projects, such as those that use
Unity or three.js, as well.

Summary

This short tutorial introduced a few ideas to optimize 3D models for use with WebGL.
Optimization means to make the most effective use of available resources.
Mobile devices often have more limited processing power and memory than
desktop computers. It's important to create lightweight projects which
download and run quickly, even on mobile phones. This article offered some suggestions to make
your own projects lighter and faster.

The swimming fish
example includes a few optimization techniques.
The number of vertices and texture size
were minimized for faster download and playback time.
Seven Thunder Software modeled the fish
with 3ds Max.
The fish model uses one 256 pixel squaretexture map.
The texture applies alpha transparency
for the fins. The fins
are composed of one dimensional surfaces. The same texture displays on both sides.

Read the
learn to morph tutorial,
for an introduction to WebGL morphing.
This tutorial discussed optimizing the 3D model and map.
Read the
Optimized WebGL Morphing
tutorial, for coding techniques with faster transformations.