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

标签 javascript three.js

我的代码是这样的:

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

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

这样效果很好:

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

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

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

最佳答案

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

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

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

关于javascript - 将 renderer.clear() 放在 render() 的末尾会使我的场景变黑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44291993/

相关文章:

javascript - 如何将一个大的一维数组转换成一系列小键 :pair objects in JS?

javascript - 如何将元素的属性传递给 React 中的函数?

javascript - Kotlin JS 项目的基本 Gradle 脚本 Kotlin 文件是什么样的?

three.js - 如何让经过 gltfpack 处理的模型出现在 A-Frame 中?

javascript - 在 Three.js 中,如何为我的形状提供自定义边缘颜色? (不只是设置线框 :true )

javascript - 使用四元数在 Three.js 中将平移/倾斜 Angular 转换为 XYZ?

javascript - 生成随机数并检查它是否存在于数据库中 JavaScript NodeJS

Javascript - 检查按钮位于表格的哪一行和哪一列

javascript - 奇怪的正则表达式总是返回 true

javascript - 如何在 ShaderMaterial 上获得正确的阴影