javascript - WebGL texImage2D 参数

Question

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

未捕获的类型错误：无法在“WebGLRenderingContext”上执行“texImage2D”：参数 9 不是“ArrayBufferView”类型。在图像。(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);
 });

标签： javascriptwebgl

Answer 1

请参阅WebGL 规范 - 5.14 WebGL 上下文：

[...]
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);
 });