更新:
对于 WebGL2 调用声明,请参见这篇文章的结尾
问题描述
调用我的函数以将数据加载到纹理中时出现此错误。我正在使用 Chrome 68 浏览器。该代码适用于WebGL1
但不适用于WebGL2
. 我的 WebGL 参数(internalFormat、format、channelType)如下:
WebGL 1:
internalFormat: number = WebGLRenderingContext.RGBA;
format: number = WebGLRenderingContext.RGBA;
channelType: number = WebGLRenderingContext.FLOAT;
channelSize = 4;
WebGL 2:
internalFormat: number = WebGL2RenderingContext.R32F;
format: number = WebGL2RenderingContext.RED;
channelType: number = WebGLRenderingContext.FLOAT;
channelSize = 1;
在 WebGL 1 和 2 中,我启用了这个扩展:
this.textureFloatExtension = this.gl.getExtension('OES_texture_float');
在 WebGL 2 中,我另外启用了此功能:
this.colorBufferFloatExtension = this.gl.getExtension('EXT_color_buffer_float');
以及函数定义:
updateTexture(texture: WebGLTexture, width: number, height: number, data: Float32Array): void {
const gl = this.gl;
gl.bindTexture(gl.TEXTURE_2D, texture);
let buffer: ValidArrayTypes = data;
if (data) {
buffer = this.encoder.encode(data, width * height);
}
gl.texSubImage2D(
gl.TEXTURE_2D,
0, // level
0, // xoffset
0, // yoffset
width, height, this.encoder.format, this.encoder.channelType, buffer);
this.checkError();
gl.bindTexture(gl.TEXTURE_2D, null);
}
在此调用之前使用以下命令创建纹理:
allocateTexture(width: number, height: number): WebGLTexture {
const gl = this.gl;
// Create the texture
const texture = gl.createTexture();
// Bind the texture so the following methods effect this texture.
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
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.texImage2D(
gl.TEXTURE_2D,
0, // Level of detail.
this.encoder.internalFormat, width, height,
0, // Always 0 in OpenGL ES.
this.encoder.format, this.encoder.channelType, null);
this.checkError();
gl.bindTexture(gl.TEXTURE_2D, null);
return texture as WebGLTexture;
}
API 声明 (WebGL2):
texSubImage2D(target: number, level: number, xoffset: number, yoffset: number,
width: number, height: number,
format: number, type: number, pixels?: ArrayBufferView | null): void;
texSubImage2D(target: number, level: number, xoffset: number, yoffset: number,
format: number, type: number, source: ImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement): void; // May throw DOMException
texSubImage2D(target: number, level: number, xoffset: number, yoffset: number,
format: number, type: number, source: ImageBitmap | ImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement): void; // May throw DOMException