Javascript WebGL纹理无法处理某些纹理

我正试图遵循一个关于WebGL的教程，我发现纹理的行为很奇怪。我使用以下代码创建纹理：

var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, document.getElementById("img"));
gl.bindTexture(gl.TEXTURE_2D, null);

我在html文件中有一个图像，如下所示：

<img id="img" src="texture.png" width="0" height="0"></img>

function loadFileAsIMG(filename) {
  var result = new Image();
  result.src = filename;
  return result;
}

将加载的图像添加到HTML正在正常工作。但是在

gl.texImage2D

函数中使用此加载的图像根本不起作用，并产生以下错误消息：

[Error] WebGL: INVALID_VALUE: texImage2D: invalid image
    texImage2D
    run (glmain.js:149)
    init (glmain.js:26)
    onload (index.html:11)

---

图像是通过网络异步加载的，您必须等待它们加载后才能使用它们

function loadFileAsIMG(filename, callback) {
  const img = new Image();
  img.onload = () => callback(img);
  img.src = filename;
}

function funcToCallAfterImageLoads(img) {
  ...
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
  ...
}

loadFileAsIMG('url/for/some/image', funcToCallAfterImageLoads);

看

您还可以创建一个图像加载器，该加载器返回一个值，然后对正在加载的图像使用

等待

function loadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = url;
  });
}

async function main() {
  const img = await loadImage('url/to/image');
  ...
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
  ...
}

main();

---

另请参见

谢谢，现在可以使用了，这也可以解释为什么我在加载着色器时有时会得到奇怪的结果吗？