Model Optimization Ideas

Efficient 3D models for WebGL

Introduction Indexed Textures Small Textures Low Polygon Models Compact VBOs Summary

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.

This tutorial discusses preparing low polygon models, simple eight bit graphics for models with shader lighting, small file sizes, and compacting data into one vertex buffer object.

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 square texture 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

$Highlighted Crown 256 Color Texture Map$

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

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.

This tutorial discussed preparing low polygon models, simple eight bit graphics for models with shader lighting, small file sizes, and compacting data into one vertex buffer object.

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.