时间戳

首页 > 解决方案 > 在 WebGL 中，可以使用片段着色器来设置 LUMINANCE 纹理吗？

webgl - 在 WebGL 中，可以使用片段着色器来设置 LUMINANCE 纹理吗？

问题描述

我正在使用 WebGL 进行一些图像处理，并且我希望我的片段着色器输出到 1 或 2 通道纹理。我可以将 RGBA 或 RGB 纹理附加到帧缓冲区并成功输出。但是，如果我将 LUMINANCE 或 LUMINANCE_ALPHA 纹理附加到帧缓冲区，则 fb 状态将显示为不完整并且不起作用。希望避免不必要的额外纹理通道，但不确定这是否可能。感谢您的任何建议！

如果格式更改为下面的 gl.RGBA 则它可以工作：

gl.getExtension("OES_texture_float")
var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
var format = gl.LUMINANCE;
gl.texImage2D(gl.TEXTURE_2D, 0, format, 512, 512, 0, format, gl.FLOAT, null);
var fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) != gl.FRAMEBUFFER_COMPLETE) {
  alert("framebuffer not complete");
}

标签： webgltexturesshader

解决方案

在 WebGL1 中，只有 3 种帧缓冲附件组合可以保证工作

来自规范，第 6.8 节

以下帧缓冲区对象附件的组合，当所有附件都是帧缓冲区附件完整、非零并且具有相同的宽度和高度时，必须导致帧缓冲区完整：

  • COLOR_ATTACHMENT0= RGBA/UNSIGNED_BYTE质地
  • COLOR_ATTACHMENT0= RGBA/UNSIGNED_BYTE纹理 + DEPTH_ATTACHMENT=DEPTH_COMPONENT16渲染缓冲区
  • COLOR_ATTACHMENT0= RGBA/UNSIGNED_BYTE纹理 + DEPTH_STENCIL_ATTACHMENT=DEPTH_STENCIL渲染缓冲区

所有其他组合都取决于实现。

（注：WebGL1 所基于的 OpenGL ES 2.0 不保证任何组合工作时间）

在 WebGL2中，一组格式/类型组合保证可以工作，但LUMINANCE/FLOAT不是其中之一。

推荐阅读