WebGL Textures & Vertices

Beginner's Guide

Page Seventy Three

WebGL API texImage2D() for Image Files

Step 6 the WebGL method texImage2D() assigns a number of properties to the current active texture. Method texImage2D() includes a number of parameters, and at least one overload. The section titled WebGL API texImage2D() for Procedural Textures demonstrates how to use the overloaded version of texImage2D() for JavaScript generated image data.

The following listing demonstrates calling texImage2D() to prepare a WebGLTexture from downloaded Image data. We discuss each parameter after the listing.


Listing 73: WebGL API texImage2D() for Image Files

Pass the WebGL constant TEXTURE_2D as the first parameter for flat graphical images. Use TEXTURE_CUBE_MAP<side> to display six images mapped to six sides of a cube. TEXTURE_CUBE_MAP's usually associated with skyboxes. Plans are in place to post Seven Thunder Software's official free e-book, WebGL Skybox version here. Until then, see WebGL Skybox Examples online and take a look at the source code.

The second parameter, 0, represents the level of detail for this texture. In this book we're using only the first mipmap level 0.

The third, and fourth parameters represent the the internal format and the pixel source data format. Both parameters must match. RGBA represents four channels including red, green, blue, and alpha. JPG image files can use RGB without alpha transparency. However, RGBA works for JPG files as well.

The fifth parameter indicates the type of data which represents each color channel. UNSIGNED_BYTE applies to images composed of channels with values in the range {0..255}. In other words red, green, and blue components can't exceed 255 in value, neither can any component contain a negative value.

The last parameter is the Image we downloaded.

WebGL Beginner's Guide Introduction WebGL Beginner's Guide
Copyright © 2015 Seven Thunder Software. All Rights Reserved.