WebGL Lighting E-Book Screen Shots

Model Optimization Ideas

Efficient 3D models for WebGL

Introduction Indexed Textures Textures for Highlights Small Textures Low Polygon Models Compact VBOs Summary See Optimized Examples

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.

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. The skylab with lighting model uses the following eight bit texture. 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.

Skylab Texture Map

Skylab 8 bit Texture Map

Textures for Highlights

The Texture for Highlights applied to the Highlighted Crown example also maps an eight bit graphic. Shaders also process lighting for the Highlighted Crown example. However the texture map is just 32 pixels square. Sometimes models displayed with lighting processed in the shader, render fine with very small textures.

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 pixels wide by 256 pixels high texture map.

Swimming Fish Texture Map

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.

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 limited processing power and memory compared to 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.

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.

See more optimized WebGL examples. Have fun and love learning!

See Optimized WebGL Examples

WebGL Games E-Book Screen Shots
Copyright © 2015 Seven Thunder Software. All Rights Reserved.