WebGL texImage2D参数

Question

我正在尝试将图像文件加载到我的webGL代码中并从中创建纹理，但是在加载图像时出现错误：

  

未捕获的TypeError：无法在“ WebGLRenderingContext”上执行“ texImage2D”：   参数9的类型不是'ArrayBufferView'。       在Image。 （app.js：13）

 var image = new Image();
 image.src = "./js-logo.png";
 image.addEventListener("load", function(){
     gl.bindTexture(gl.TEXTURE_2D, texture);
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 10, 10, 0, gl.RGBA, gl.UNSIGNED_BYTE, image);
     gl.generateMipmap(gl.TEXTURE_2D);
 });

Answer 1

请参见WebGL Specification - 5.14 The WebGL context：

[...]
void texImage2D(GLenum target, GLint level, GLint internalformat,
                GLsizei width, GLsizei height, GLint border, GLenum format,
                GLenum type, [AllowShared] ArrayBufferView? pixels);
void texImage2D(GLenum target, GLint level, GLint internalformat,
                GLenum format, GLenum type, TexImageSource source); // May throw DOMException

由于图像是image是TexImageSource，因此必须是

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 10, 10, 0, gl.RGBA, gl.UNSIGNED_BYTE, image); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);

请注意，位图的大小被编码为image对象。

---

还应设置纹理过滤参数：

var image = new Image();
image.src = "./js-logo.png";
image.addEventListener("load", function(){
     gl.bindTexture(gl.TEXTURE_2D, texture);
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 10, 10, 0, gl.RGBA, gl.UNSIGNED_BYTE, image);
     gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR );
     gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR );
     gl.generateMipmap(gl.TEXTURE_2D);
 });