在 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;

我不确定在不发布非常大的代码块的情况下我可以在这个主题上提供多少帮助，但如果您仍在努力，我可以详细介绍其他一些部分。

Answer 2

我将采取的方法如下

loadTexture(url, initialColor) {

  var tex = gl.createTexture();

  // start with a single color.
  gl.bindTexture(gl.TEXTURE_2D, tex);
  var pixel = new Uint8Array(initialColor);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, pixel);

  // start loading the image
  var img = new Image();
  img.onload = function() {

    // when the image has loaded update the texture.          
    gl.bindTexture(gl.TEXTURE_2D, tex);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
    gl.generateMipmap(gl.TEXTURE_2D);
  }
  img.src = url;
  return tex;
}

// Load a tree texture, use brown until the texture loads.
var treeTexture = loadTexture("tree.png", [255, 200, 0, 255]);
// Load a water texture, use blue until it loads.  
var waterTexture = loadTexture("water.jpg", [0, 0, 255, 255]);

这是 http://webglsamples.googlecode.com 尽管它们都默认为蓝色纹理，但仍然可以工作。

您可以轻松扩展该想法以使用纯色，加载低分辨率纹理，然后在完成后加载高分辨率纹理。

注意：上面的代码假设您正在加载 2 的幂纹理。如果没有，您需要正确设置纹理参数。

Answer 3

这实际上非常简单，WebGL 没有任何专门针对此的功能，这是您可以通过它作为 DOM API 免费获得的东西。当您加载图像时，无论如何您都必须实现它们的“onload”回调，因为图像加载是异步的。因此，只需将需要运行的任何代码放入“onload”回调中即可从纯色切换到纹理。