尝试调用 readPixels 时出现无效类型错误 [英] I get invalid type error when trying to call readPixels

问题描述

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

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

This is the code. I get this error in the console: WebGL: INVALID_ENUM: readPixels: invalid type

但这工作得很好:

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

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

Float or int is supposed to be supported, but only unsigned_byte works. There's no resource online on how to correctly apply a type that seems to work. Everything follows a different pattern.

推荐答案

不保证支持 FLOAT.保证支持的唯一格式/类型组合是 RGBA/UNSIGNED_BYTE.参见规范第 4.3.1 节

FLOAT is not guaranteed to be supported. The only format/type combination that is guaranteed to be supported is RGBA/UNSIGNED_BYTE. See Spec, section 4.3.1

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

After that one other implementation dependent format/type combo might be supported depending on the type of thing you're reading. You can query that with

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.两者都是有效的响应，因为备用组合依赖于实现.

The code above makes a RGBA/FLOAT texture and attached it to a framebuffer then checks the alternate format/type combo to read it. On Chrome it gets RGBA/UNSIGNED_BYTE, on Firefox it gets RGBA/FLOAT. Both are valid responses since the alternate combo is implementation dependent.

这篇关于尝试调用 readPixels 时出现无效类型错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！