简单来说，当使用framebuffer交互渲染时，应该关闭dephStencil选项。否则，会导致framebuffer无法按要求更新。这个经验是在绘制多个点的SDF时得到的。
原因解释
在WebGL中，深度缓冲（depth buffer）和模板缓冲（stencil buffer）是与帧缓冲（framebuffer）紧密相关的概念。深度缓冲用于存储每个像素的深度值，而模板缓冲用于执行模板测试。这两者都可以影响帧缓冲的渲染结果。
深度缓冲（Depth Buffer）：
模板缓冲（Stencil Buffer）：
当你创建帧缓冲对象时，可以配置它是否包含深度缓冲和模板缓冲。如果在创建帧缓冲对象时启用了深度缓冲和模板缓冲，它们会影响到后续的渲染操作。关闭depthStencil选项可能是为了在帧缓冲的渲染中不受深度和模板测试的限制，从而更自由地控制像素的渲染和更新。总的来说，深度缓冲和模板缓冲提供了一种控制渲染结果的手段，但在某些情况下，可能需要禁用它们以适应特定的渲染需求。
多个点的SDF示例
下图是多个点的SDF示例，图中有5个点，像素的颜色代表“与离它最近的点的距离”。在使用WebGL的绘制过程中，我需要逐一处理这些点，
易见，这样的操作需要WebGL在framebuffer之间迭代。在迭代过程中，我遇到了无法按要求更新帧的问题。经过反复测试和印证，并查询了一些材料，获得了以上心得。
在本问题中，WebGL默认情况下是启用深度测试的。深度测试可能会导致新的像素值被丢弃，因为它们可能位于深度缓冲中的已渲染像素之后。你可以尝试在每一帧的渲染前禁用深度测试（gl.disable(gl.DEPTH_TEST)），并在渲染后启用它。
配置Depth-Stencil功能 – Win32 apps[1]
WEBGL_depth_texture extension – Web APIs | MDN[2]
XRWebGLSubImage: depthStencilTexture property – Web APIs | MDN[3]
参考资料
[1]
配置Depth-Stencil功能 – Win32 apps:
[2]
WEBGL_depth_texture extension – Web APIs | MDN:
[3]
XRWebGLSubImage: depthStencilTexture property – Web APIs | MDN:
限 时 特 惠： 本站每日持续更新海量各大内部创业教程，一年会员只需98元，全站资源免费下载 点击查看详情
站 长 微 信： lzxmw777
