Question

我正在编写一些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。这有可能吗？如果可以，我该如何使用扩展格式？

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

Answer 1

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中，这就是你制作浮点纹理的方式。

WebGL渲染到浮点纹理

1 个答案: