Question

In video games only color is applied to help speed up the loading process. After textures are ready, they replace the current colors. Is there a way to do this in WebGL? All the tutorials I’ve seen so far only show how to load in color or texture (not one after the other).

I’d guess that the buffer for each shape needs to be altered after its texture is fully loaded. I would assume this is keyed via an AJAX call that the texture is available, then applied via some kind of JavaScript function. Does WebGL have a built in way of doing this without a complicated image loading process?

Answer 1

In most games that I’ve seen with the behavior you describe they’ll typically start with either per-vertex coloring or a VERY low res texture and “blend up” to the full texture when it becomes available. That sort of smooth transition is tricky, but if all you want is a quick “pop” from one to the other it shouldn’t be too much trouble.

The basic route I would take is to create a vertex buffer that has both texture coord and color information, as well as two different shaders. One shader will use the color information, the other will ignore it and use the texture instead. You would signal the mesh to start using the texture-based one as soon as the texture is ready.

As for detecting the image load, that’s not hard at all and you don’t even need AJAX for it:

var image = new Image();
image.addEventListener("load", function() {
    // Image is done loading, push to texture
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
    // Set up any other state needed, such as switching the shader for the mesh
}, true);
image.src = src;

I’m not sure how much more help I can give on this subject without posting really large code blocks, but if you’re still struggling I can detail some of the other parts.