在WebGL中用纹理替换颜色

Question

在视频游戏中,仅应用颜色以帮助加速加载过程.纹理准备好后,它们会替换当前颜色.有没有办法在WebGL中执行此操作？到目前为止,我见过的所有教程只显示了如何加载颜色或纹理(不是一个接一个).

我猜想每个形状的缓冲区需要在纹理完全加载后改变.我认为这是通过AJAX调用键控纹理可用,然后通过某种JavaScript函数应用.在没有复杂的图像加载过程的情况下,WebGL是否有内置的方法？

Answer 1

在我所看到的大多数游戏中,你所描述的行为通常都是以每顶点着色或非常低的纹理开始,并在可用时将其"混合"到完整的纹理.这种平稳的过渡很棘手,但如果你想要的只是从一个到另一个的快速"流行",那应该不会太麻烦.

我将采取的基本路线是创建一个具有纹理坐标和颜色信息的顶点缓冲区,以及两个不同的着色器.一个着色器将使用颜色信息,另一个将忽略它并使用纹理.一旦纹理准备好,您就会发信号通知网格开始使用基于纹理的网格.

至于检测图像负载,这根本不难,你甚至不需要AJAX:

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;

我不确定在没有张贴真正大的代码块的情况下,我可以在这个主题上给予多少帮助,但如果你还在努力,我可以详细介绍其他部分.