HTML and CSS Reference
In-Depth Information
case 'DXT5_RGBA':
internalFormat = ctExtension.COMPRESSED_RGBA_S3TC_DXT5_EXT;
break;
}
}
if (internalFormat === undefined) {
// If the pixel format is not supported, fall back to an option that creates an uncompressed
texture.
return "Compressed pixelFormat not supported";
}
var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.compressedTexImage2D(
gl.TEXTURE_2D,
0,
internalFormat,
textureWidth,
textureHeight,
0,
textureData);
This simple example does not cover all aspects of using the extension (including checking browser-specific
names for the extension and robust error handling), but it should give an indication of how the extension is used. For
more information about best practices for using compressed textures, see the Graphics Device implementation as
part the open source Turbulenz Engine (
https://github.com/turbulenz/turbulenz_engine
)
. It is also worth noting
that in the future more compression formats may be supported, so check up-to-date documentation.
There are a few key considerations from looking at this example. The first is what to do when a given pixel
format is not supported. As mentioned throughout this chapter, the best way to load an asset is to not load it at all, so
checking the available formats should happen before the data is even loaded. This allows the game to select the best
option for the given platform. In the event that the WebGL extension or any of the required formats are not supported,
the game will have to provide a fallback option. This could be by choosing to load one of the browser-supported file
formats and accepting the cost of decompressing or, alternatively, if the file format is not supported by the browser,
reading the file and decompressing the data in JavaScript. This may not be as bad as it sounds if the task is executed by
Web Workers running in the background while other data loads. Remember that the result will be an uncompressed
pixel format, which will take up more memory. If you have control of the compression/decompression, you may be
able to choose to use a lower bit depth per pixel (e.g. 16-bit instead of 32-bit), which may affect quality but reduce
storage. The advice is to experiment with different combinations for your game and instrument the loading time in
different browsers on different platforms. Only then will you be able to get a true idea of what best suits your content
as a fallback option.
Another consideration is how texture data is loaded onto the client if the browser doesn't support the file format
and the cost of doing this. DDS is typically used as a container format for DXT compressed textures and will need to
be loaded and parsed to extract the texture data. The files are usually requested using XHR as binary data using the
arraybuffer
response type and can use the Uint8Array constructor to create a byte array that can be manipulated.
Once the loader has parsed the container format, the pixel data, which exists as a byte array, can be passed directly to
