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

见this article

您还可以制作一个图像加载器，在正在加载的图像上 returns Promise and then use async functions 到 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();

另见 this

WebGL 纹理不适用于某些纹理

WebGL textures not working on some textures

html

javascript

webgl