3.8.10.5手动生成Mipmap

Question

我正在使用webgl2并将纹理数据加载为半浮点数。使用LINEAR MIN_FILTER可以正确渲染图像。但是，我想使用一个mipmap过滤器。当我使用mipmap过滤器并尝试生成mipmap时，它将失败。 webgl文档https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texImage2D表示R16F纹理是可过滤的，并不表示它限于LINEAR过滤器。是否有我缺少的步骤，或者这是webgl2的未记录限制？

gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
const tex = gl.createTexture();
const unit = 1;  // Pick some texture unit
gl.activeTexture(gl.TEXTURE0 + unit);
gl.bindTexture(gl.TEXTURE_2D, tex);

const numPixels = this.width * this.height;

const level = 0;

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.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); //Works
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST_MIPMAP_NEAREST); //Does NOT work
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

// Upload the image into the texture
const pixel = new Uint16Array(this.binaryImage);

gl.texImage2D(gl.TEXTURE_2D, level, gl.R16F, this.width, this.height, 0, gl.RED, gl.HALF_FLOAT, pixel);

gl.generateMipmap(gl.TEXTURE_2D); //FAILS

const sampler2DLoc = gl.getUniformLocation(program, "u_image");
gl.uniform1i(sampler2DLoc, unit);

Answer 1

WebGL2的规范说WebGL2是OpenGL ES 3.0，但有WebGL2规范中列出的差异。否则，WebGL2规范要求阅读OpenGL ES 3.0规范以了解详细信息。

根据OpenGL ES 3.0规范的第3.8.10.5节

3.8.10.5手动生成Mipmap

Mipmap可以使用命令手动生成
void GenerateMipmap(enumtarget);
...

如果未使用表3.3中未指定大小的内部格式或表3.13中指定的可彩色渲染和纹理过滤的大小内部格式指定级别基本数组，则会产生INVALID_OPERATION错误 >

R16F可进行纹理过滤，但不能进行彩色渲染

您需要检查并启用the EXT_color_buffer_float extension才能生成半浮点格式的mips。

'use strict';

function main() {
  const gl = document.querySelector('canvas').getContext('webgl2');
  if (!gl) {
    return alert('need webgl2');
  }
  const ext = gl.getExtension('EXT_color_buffer_float');
  if (!ext){
    return alert('need EXT_color_buffer_float');
  }

  const vs = `#version 300 es
  void main() {
    gl_Position = vec4(0, 0, 0, 1);
    gl_PointSize = 120.0;
  } 
  `;

  const fs = `#version 300 es
  precision mediump float;

  uniform sampler2D tex;

  out vec4 outColor;

  void main() {
    outColor = vec4(texture(tex, gl_PointCoord.xy).r, 0, 0, 1);
  }
  `;

  // setup GLSL program
  const program = twgl.createProgram(gl, [vs, fs]);

  // a 2x2 pixel data
  const h0 = 0x0000;
  const h1 = 0x3c00;
  const pixels = new Uint16Array([
    h0, h1,
    h1, h0,
  ]);
  const tex = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, tex);
  gl.texImage2D(
      gl.TEXTURE_2D,
      0,                 // level
      gl.R16F,           // internal format
      2,                 // width
      2,                 // height
      0,                 // border
      gl.RED,            // format
      gl.HALF_FLOAT,     // type
      pixels,            // data
  );
  gl.generateMipmap(gl.TEXTURE_2D);

  gl.useProgram(program);

  const offset = 0;
  const count = 1;
  gl.drawArrays(gl.POINTS, offset, count);
  console.log('gl.getError should be 0 was:', gl.getError());
}

main();

<script src="https://twgljs.org/dist/4.x/twgl.min.js"></script>
<canvas></canvas>

无法为half_float纹理生成mipmap

1 个答案:

3.8.10.5手动生成Mipmap