0

更新:

对于 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
4

0 回答 0