Optimal Asset Loading - HTML5 Game Development Insights - page 28

Texture Formats
Anyone who has written web content will be familiar with browser support for file formats such as JPEG, PNG, and
GIF. In addition, some browsers support additional file formats such as WebP, which provides smaller file sizes for
equivalent quality. The browser is usually responsible for loading these types of images, some of which can be used
by the Canvas (2D) and WebGL (2D/3D) APIs. By using WebGL as the rendering API for your game, you may have
the option to load other image formats and pass the responsibility of processing and storing the data to the graphics
card. This is possible with WebGL if certain compressed texture formats are supported by the hardware. When
passing an unsupported format such as JPEG to WebGL via the gl.texImage2D function, the image must first be
decompressed before uploading to the graphics card. If a compressed texture format such as DXT is supported, then
the gl.compressedTexImage2D function can be used to upload and store the texture without decompressing. Not only
can you reduce the amount of memory required to store a texture on the graphics card (and hence fit more textures of
equivalent quality into memory), but you can also defer the job of decompressing the texture until the shader uses it.
Loading textures can be quicker because they are simply being passed as binary data to the graphics card.
In WebGL spec 1.0, the support for compressed texture formats such as DXT1, DXT3, and DXT5 that use the S3
compression algorithm is an extension that you must check for. This simplified example shows you how to check if
the extension is supported and then check for the format you require. If the format is available, you will be able to
create a compressed texture from your image data. See Listing 2-4 for a simplified example of how to achieve this. The
assumed variables are listed in the comment at the top.
Listing 2-4. Checking if the Compressed Textures Extension Is Supported and How to Check if a Required Format
is Available
/**
* gl - The WebGL context
* textureData - The data that will be used to create the texture
* pixelFormat - The pixel format of your texture data that you want to use as a compressed texture
* textureWidth - The width of the texture (power of 2)
* textureHeight - The height of the texture (power of 2)
*/
/**
* Request the extension to determine which pixel formats if any are available
* The request for the extension only needs to be done once in the game.
*/
var internalFormat;
var ctExtension = gl.getExtension('WEBGL_compressed_textures_s3tc');
if (ctExtension) {
switch (pixelFormat) {
case 'DXT1_RGB':
internalFormat = ctExtension.COMPRESSED_RGB_S3TC_DXT1_EXT;
break;
case 'DXT1_RGBA':
internalFormat = ctExtension.COMPRESSED_RGBA_S3TC_DXT1_EXT;
break;
case 'DXT3_RGBA':
internalFormat = ctExtension.COMPRESSED_RGBA_S3TC_DXT3_EXT;
break;