html5 – 在WebGL中用纹理替换颜色

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

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

至于检测图像负载,这根本不难,你甚至不需要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,gl.RGBA,gl.UNSIGNED_BYTE,imagE);
    // Set up any other state needed,such as switching the shader for the mesh
},truE);
image.src = src;

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