javascript - 将 renderer.clear() 放在 render() 的末尾会使我的场景变黑

Question

我的代码是这样的:

function render() {
    renderer.render( scene, camera );
    renderer.clear();
}

我想知道为什么它会让我的场景变黑。这是因为颜色缓冲区在实际渲染之前被清除了吗？

这样效果很好:

function render() {
    renderer.clear();
    renderer.render( scene, camera );
}

但是在调用 clear() 之前如何确保颜色缓冲区已渲染？

我很好奇最后清除和开始清除之间的区别。

Answer 1

渲染之前和之后清除渲染器帧缓冲区的区别在于 WebGL 内容呈现到网页的方式。问题是 WebGL 总是至少是双缓冲的(在 WebGL Insights 书中，来自 Mozilla 的人说在 Firefox 中 WebGL Canvas 实际上是三缓冲的)。这意味着在 requestAnimationFrame 回调(在您的情况下为 render 函数)内，所有 WebGL 调用仅影响所谓的后台缓冲区。另一个缓冲区(称为前缓冲区)不受影响。然后，当回调结束时，浏览器交换缓冲区:后缓冲区变为前缓冲区，前缓冲区变为后缓冲区。然后浏览器使用新的前端缓冲区来绘制网页。下次调用 rAF 回调时，WebGL 将绘制新的后台缓冲区。需要注意的是，浏览器默认情况下不会在交换缓冲区内容时更改它们(尽管 preserveDrawingBuffer 上下文选项会改变这一点)。

回到你的问题，不同之处在于，当你第一次渲染场景然后清除缓冲区时，你首先会得到奇怪的结果，因为帧缓冲区包含先前渲染的相同帧的渲染结果(你不会看到这些结果)在屏幕上，它们只会在缓冲区的内存中)，然后由于清除了缓冲区，所有这些都变得无关紧要。之后，浏览器将按原样向页面呈现干净的缓冲区，或者作为黑色矩形(或一些不同的颜色，具体取决于渲染器的选项)。但是，如果您先清除然后渲染场景，您将获得正确的结果:首先清除会消除前一帧的残留物，然后将新内容放入其中。然后浏览器将其呈现给页面。

所以，总结一下:我们通常首先清除帧缓冲区，以删除先前帧的任何痕迹，因此我们从“干净的石板”开始，然后向其渲染内容。