【问题标题】:WebGL render buffers receiving skewed pixel values from shaderWebGL 渲染缓冲区从着色器接收倾斜的像素值
【发布时间】:2012-02-17 07:04:45
【问题描述】:

我正在将多边形场景渲染到多个渲染目标,以便执行后处理效果。但是,我在片段着色器中设置的值似乎并没有准确地反映在像素着色器中。

现在管道如下所示:

  • 将基本多边形(使用下面的简单着色器)渲染到中间缓冲区
  • 将缓冲区呈现为屏幕大小的四边形。

我正在使用 WebGL Inspector (http://benvanik.github.com/WebGL-Inspector/) 查看中间缓冲区(使用 gl.createFrameBuffer() 创建)。

我在绘制多边形时有一个非常简单的片段着色器,如下所示:

gl_FragColor = vec4(1, 0, 0, 0.5);

在我的draw call之前:

gl.disable(gl.BLEND);

我希望这会在缓冲区中创建一个值为 (255,0,0,128) 的像素,但实际上,它会创建一个值为 (255,0,0,64) 的像素—— Alpha 值是预期的一半。

这个程序相当大而且很复杂,所以如果答案不是很明显,我会在帖子中更新具体细节。

谢谢!

【问题讨论】:

  • 你怎么知道那个像素的alpha值是多少?你在画什么,你在写这个像素值。
  • 恐怕我们可能需要更多信息,但一个想法立即跳到脑海:您是否启用了抗锯齿功能?如果是这样,并且您要采样的像素位于多边形的边缘,则它最终可能会被混合成低于预期的值。
  • @NicolBolas:我已经使用 WebGL Inspector 直接检查了像素的值,在最终渲染中对其屏幕上的值进行采样,并在后续处理步骤中观察其行为。该值是从带有上述简单片段着色器的简单多边形绘制到帧缓冲区中的,然后该帧缓冲区被渲染到屏幕缓冲区。
  • @Toji 颜色在多个多边形的整个表面上是均匀的,我已经在几十个不同的渲染中采样了 100 个点,试图找出原因。 (我刚刚得知在 Chrome 和 FF 中默认启用了 AA,这是出乎意料的!感谢您指出这一点,将调查它是否相关。)
  • 您是否检查过您的渲染目标没有应用伽马校正?如果是这样,它可以更改您返回的值

标签: glsl opengl-es-2.0 shader webgl glblendfunc


【解决方案1】:

您是否将 premultiplyAlpha 设置为 true?摆弄这个是我想到的第一件事:奇怪的 alpha 值。

【讨论】:

  • 我希望这会弄乱 RGB 值,而不是 A 值,但我愿意检查一下。
猜你喜欢
  • 2011-09-04
  • 1970-01-01
  • 1970-01-01
  • 2020-10-25
  • 1970-01-01
  • 2010-12-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多