WebGL 纹理在某些纹理上无法工作

Question

我正试图按照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>

这里一切正常 我见过一种只在JS中加载图像的方法，看起来像这样。

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)

Answer 1

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

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

请看 本文

你也可以制作一个图像加载器，返回一个类似于 Promise 再用 async 职能 到 await 在加载的图像上

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();

另见 这个