javascript - 在 Chrome 中创建多个 webgl 纹理

Question

我加载了 2 个模型，它们都具有不同的纹理。在 Firefox 上运行完美，我可以将两种纹理应用于每个对象。然而，在 Chrome 上，第二个纹理永远不会出现。我大大简化了我的代码，发现它可能与我加载纹理的方式有关。

function texture() {
    this.texture = null;
}

texture.prototype.loadTexture = function(gl, img) {
    gl.bindTexture(gl.TEXTURE_2D, this.texture);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.bindTexture(gl.TEXTURE_2D, null);
}

texture.prototype.load = function(gl, name) {
    this.texture = gl.createTexture();
    var img = new Image();
    that = this;
    img.onload = function() {
        that.loadTexture(gl, img);
    } 
    img.src = name;
}

我创建新纹理的方式是:

var texture = new texture();
texture.load(gl, "foo.bar");

当我分别渲染每个模型时，它会正确渲染它们。问题是当我在同一个场景中使用两个模型时。我的 Firefox 没有这个问题。我使用上述方法创建了一个包含 2 个纹理的数组，并强制两个模型渲染第一个纹理。这很好用。但是，当我渲染第二个纹理时，Chrome 上没有任何反应，但它适用于 Firefox。 Chrome 实际上做了很多不可预测的事情，这取决于首先加载的纹理，以及我强制两个模型使用的纹理。通常，Chrome 会抛出“RENDER WARNING: texture bound to texture unit 0 is not renderable”

所以这让我相信我加载纹理的方式有问题。所以我的问题是:这是加载纹理的正确方法吗？我从一个在线教程中得到这个，他们似乎一次只使用 1 个纹理/模型。我在 Linux 上运行 Chromium，我还没有在 Windows 上测试过(如果有帮助的话)。

Answer 1

经过更多研究，我解决了我的问题。我使用了 Mozilla 开发者网站的加载函数:https://developer.mozilla.org/en-US/docs/Web/WebGL/Using_textures_in_WebGL

这和我的代码之间的唯一区别是 Mozilla 版本使用的是函数，而我使用的是对象(我也没有对我的纹理进行 mimmap，但我认为这不是问题)。

所以现在我很困惑为什么这行得通，但我原来的实现却行不通。