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

Summary: WebGL Textures: Introduction to Mipmaps, Sub Images & Atlases

WebGL Textures: Introduction to Mipmaps, Sub Images & Atlases provided an introduction to texture atlases, explained the purpose and use of mipmaps, how to apply sub images, procedural sub images, and display a short animated texture. The book included instruction, diagrams, fully commented source code, and online examples for each project.

We covered the WebGL method texSubImage2D() with overloads for procedural image data, and Image objects. We demonstrated use of generateMipmap(), and texParameteri() to display minification filters with mipmapped textures. We explained how to modify parameters to vertexAttribPointer() for use with texture atlases and animation. We demonstrated how to display two meshes mapped with one texture using drawElements().

Mipmaps, sub images, and texture atlases each provide 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 indices, to view different sections of the texture. Texture atlases provide a lightweight method to animate, switch image maps, or display multiple meshes with different image maps. Additional advantages include display of NPOT (Non Power of Two) graphics, efficient use of storage buffers, and ease of development.

We included 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. Call the WebGL method texSubImage2D() to change the appearance of the texture.

We explained how to load an image for use as a sub image. We demonstrate dynamic updates to the active texture. We included how to display a sub image from an array of color data.

Mipmaps offer the opportunity to enhance performance and reduce artifacts on distant polygons. We explained the purpose of mipmaps and how to generate them. The book includes a working mipmap example with a drop down menu. The menu allows you to select and view the difference between mipmap settings.

Thank you for reading WebGL Textures: Introduction to Mipmaps, Sub Images & Atlases. We hope you enjoyed this short book. Enjoy free tutorials and learn about upcoming books at our Web siteSevenThunderSoftware.com.