Saving Bandwidth and Memory with WebGL and Crunch - HTML5 Game Development Insights - page 336

var gl = this.gl;
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, 1, 1, 0, gl.RGB, gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 0]));
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
// Notify the user that an error occurred and the texture is ready.
if (callback) { callback(texture, error); }
}
Finally, tying it all together, you define the function that users of this library will actually call to load a texture:
loadDDS . This function queries the texture from the server, parses the returned bytes, and sends the parsed results to
either our upload or error functions.
The code to load a DDS file from the server is a relatively simply AJAX request, with the biggest difference being
that you request the responseType be an Array Buffer , which makes it faster and easier for you to parse (and is what
the parseDDS function already expects), as shown in Listing 21-7.
Listing 21-7. loadDDS Method
// Loads a DDS file into the given texture.
// If no texture is provided one is created and returned.
DXTLoader.prototype.loadDDS = function(src, texture, callback) {
var self = this;
if(!texture) {
texture = this.gl.createTexture();
}
// Load the file via XHR.
var xhr = new XMLHttpRequest();
xhr.addEventListener('load', function (ev) {
if (xhr.status == 200) {
// If the file loaded successfully parse it.
parseDDS(xhr.response, function(dxtData, width, height, levels, internalFormat, bytesPerBlock) {
// Upload the parsed DXT data to the texture.
self._uploadDXT(dxtData, width, height, levels, internalFormat, bytesPerBlock, texture,
callback);
}, function(error) {
self._clearOnError(error, texture, callback);
});
} else {
self._clearOnError(xhr.statusText, texture, callback);
}
}, false);
xhr.open('GET', src, true);
xhr.responseType = 'arraybuffer';
xhr.send(null);
return texture;
}