WebGL渲染到浮点纹理

时间:2014-10-24 18:36:18

标签: floating-point webgl render-to-texture

我正在编写一些WebGL代码,需要渲染到浮点纹理 使用扩展程序gl.getExtension('OES_texture_float');gl.getExtension('OES_texture_float_linear');,我现在可以创建和绘制此纹理并使用线性过滤器。
但它似乎没有正确计算。

基本上需要将值加在一起,所以我正在使用

    gl.blendEquation(gl.FUNC_ADD);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
    gl.enable(gl.BLEND);
    gl.disable(gl.DEPTH_TEST);

渲染到纹理时。也可能出现负值要添加。

现在经过几个小时的谷歌搜索后,我发现了这个:WEBGL_color_buffer_float extension

到目前为止,我正在使用命令

    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, rttFramebuffer.width, rttFramebuffer.height, 0, gl.RGBA, gl.FLOAT, null);

但我认为我需要使用RGBA32F。这有可能吗?如果可以,我该如何使用扩展格式?


已解决:正如答案所示,使用的格式没有错误。我为着色器制服分配了一些错误的值,并使用了非常不利的背景颜色,导致错误的可视化。

1 个答案:

答案 0 :(得分:10)

gl.getExtension('OES_texture_float_linear');没有给你浮点纹理。它使您能够对浮点纹理使用LINEAR过滤。 gl.getExtension('OES_texture_float');使您能够创建浮点纹理。

至于这个

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, rttFramebuffer.width, rttFramebuffer.height, 
              0, gl.RGBA, gl.FLOAT, null);

这是对的。 WebGL中没有RGBA32F。它由gl.RGBA, gl.FLOAT

推断

是的,这很愚蠢。这种疏忽在OpenGL ES 3.0中得到了修复,并将在WebGL 2.0中修复,但在当前的WebGL中,这就是你制作浮点纹理的方式。