[尝试设置JavaScript WebGL上下文类型时收到无效类型错误

Question

context.readPixels(0, 0, context.drawingBufferWidth, context.drawingBufferHeight, context.RGBA, context.FLOAT, pixels);

这是代码。我在控制台中收到此错误：WebGL：INVALID_ENUM：readPixels：无效类型

但是这很好用：

context.readPixels(0, 0, context.drawingBufferWidth, context.drawingBufferHeight, context.RGBA, context.UNSIGNED_BYTE, pixels);

应该支持float或int，但只有unsigned_byte有效。网上没有关于如何正确应用似乎有效的类型的资源。一切都遵循不同的模式。

Answer 1

不保证会支持FLOAT。保证可以支持的唯一格式/类型组合是RGBA / UNSIGNED_BYTE。

此后的另一个依赖于实现格式/类型组合可能会受到支持，具体取决于您正在阅读的内容的类型。您可以使用

查询

const altFormat = gl.getParameter(gl.IMPLEMENTATION_COLOR_READ_FORMAT);
const altType = gl.getParameter(gl.IMPLEMENTATION_COLOR_READ_TYPE);

const gl = document.createElement('canvas').getContext('webgl');
showAltFormat('canvas');

const ext1 = gl.getExtension('OES_texture_float');
const ext2 = gl.getExtension('WEBGL_color_buffer_float');
if (ext1 && ext2) {
  const fb = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
  const tex = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, tex);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0,
                gl.RGBA, gl.FLOAT, null);
  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
  showAltFormat('float rgba fb');
}

function showAltFormat(msg) {
  const altFormat = gl.getParameter(gl.IMPLEMENTATION_COLOR_READ_FORMAT);
  const altType = gl.getParameter(gl.IMPLEMENTATION_COLOR_READ_TYPE);
  console.log(msg, 'readPixel alternate format/type combo', glEnumToString(gl, altFormat), glEnumToString(gl, altType));
}

function glEnumToString(gl, value) {
  const keys = [];
  for (const key in gl) {
    if (gl[key] === value) {
      keys.push(key);
    }
  }
  return keys.length ? keys.join(' | ') : `0x${value.toString(16)}`;
}

上面的代码生成RGBA / FLOAT纹理，并将其附加到帧缓冲区，然后检查备用格式/类型组合以读取它。在Chrome上获取RGBA / UNSIGNED_BYTE，在Firefox上获取RGBA / FLOAT。由于备用组合是依赖于实现。

都是有效的响应。