Butler A. - WebGL Textures: Introduction to Mipmaps, Sub Images & Atlases

Copyright (C) 2015 A. Butler. All rights reserved.

You may modify, copy, and use, the code under certain conditions. Please see the for details.

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.

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

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

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.

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.

Atlas: Animate Textures
Sub Images

Atlas: Switch Images
Mipmap Bricks

Atlas: Two Meshes
Bonus Maze Game

The projects covered in this book include texture atlas examples which dynamically switch images, animate, and display two meshes. We demonstrate mipmapping with a drop down menu to change minification options. We explain how to use sub images and the book includes a bonus maze game, developed with sub images.

WebGL Textures: Introduction to Mipmaps, Sub Images & Atlases includes a bonus simple maze game developed with WebGL sub images. The game displays a two dimensional maze. The player's tile displays in red. The player moves the tile through the maze with taps along the edges. The game keeps score based on the number of steps the player takes to find their way out of the maze.

First we discuss texture atlases with the Texture Atlas: Switch Images, Texture Atlas: Animation, and Texture Atlas: Two Meshes, projects. Then we cover the Mipmaps and Sub Images projects. The last project titled Bonus Maze Game, describes a simple game created with sub images. Last we provide an overview of two supporting JavaScript files. The supporting files named GLControl.js and GLEntity.js initialize vertex and texture buffers.

The introductory book WebGL Textures and Vertices: Beginner's Guide, discusses the supporting files in depth. However this book includes diagrams and fully commented source code, for those who haven't read the first book. See the section titled Initialization Activity Diagram for an outline of the supporting files. By default projects use one buffer with interleaved vertices and texels.

You may download thoroughly commented source code for details. You may also download source code without comments, for more lightweight Web page display.

Section titles which start with WebGL API, refer to WebGL specific functions and properties. To find WebGL features, look in the table of contents for entries starting with WebGL API. The WebGL API specific features may look a little peculiar. They resemble OpenGL ES features. However WebGL API functions and properties represent the key to interaction with the GPU for high speed graphics.

Text and diagrams represent vertex coordinates within parenthesis (x, y, z). Texel texture coordinates are represented within square brackets [s, t]. Indices are also represented within square brackets [index].