WebGL Textures: Introduction to Mipmaps, Sub Images & Atlases (2015)

Introduction

WebGL Textures: Introduction to Mipmaps, Sub Images & Atlases explains the purpose and and use of mipmaps, how to apply sub images, texture atlas basics, and how to display an animated image from a texture atlas. This book includes instruction, diagrams, fully commented source code, and online examples for each project. The Downloads section explains how to download the source files and graphics.

We cover sub images with the WebGL method texSubImage2D() and two overloads. One overload copies procedural image data. The other overload copies Image object data to a WebGLTexture. We demonstrate how to use mipmaps with WebGL methods generateMipmap(), and texParameteri(). We explain how to modify parameters to vertexAttribPointer() for use with texture atlases. We demonstrate how to render two unique meshes which share one vertex buffer object and one texture.

We assume readers understand how to order vertices and apply texture maps with WebGL. If not please read the first book in this series, or look online for information regarding WebGL and textures. The first book titled WebGL Vertices & Textures: Beginner's Guide, explains texture application and vertex layout for beginners. This second book in the series provides optimization techniques and more details regarding textures with WebGL.

Advantages

Mipmaps, sub images, and texture atlases offer unique advantages. The techniques either provide performance improvements or reduce development time.

Texture Atlas Advantages

WebGL texture atlases operate like HTML5 sprite sheets. Combine a series of images into one texture. Dynamically change vertex attribute parameters, to view different sections of the texture. Texture atlases provide a lightweight method to animate, switch image maps, and display multiple meshes with different images. Additional advantages include display of NPOT (Non Power of Two) graphics, efficient use of storage buffers, and ease of development.

This book includes three texture atlas projects. The switch images project calls the WebGL method vertexAttribPointer() with different parameters, to dynamically change images. The animation project provides an introduction to animation with textures. The third project displays two mesh elements with one vertex buffer object, one texture, and the WebGL method drawElements().

Sub Image Advantages

WebGL sub images modify the currently active texture. Sub images don't need initialization as WebGLTexture Objects. Sub images offer a quick method to change the appearance of a mapped texture. In other words initialize and map a WebGLTexture to a mesh. Then call the WebGL method texSubImage2D() to change color data on the texture.

This book includes two sub image projects. The first Sub Image project copies color information from a second image on to the active texture. The Sub Image Array project copies color information from a procedurally generated Uint8Array. We explain how to load an image for use as a sub image. We demonstrate how to display a Uint8Array of color data, as a sub image. The projects show how to process dynamic updates to the active texture.

Mipmap Advantages

Mipmaps offer the opportunity to enhance performance and reduce artifacts when rendering minified textures. In other words use mipmaps to smooth the appearance of textures rendered at a reduced size. We explain the purpose of mipmaps and how to generate them. The book includes a working mipmap example with drop down menu. The menu allows you to select and view the difference between mipmap settings.