说到渲染引擎就不得不提到延迟渲染,基本上一个引擎如果没有实现延迟渲染就不能说是一个好的渲染引擎,不过可惜的是three.js并没有实现延迟渲染(ps:呼吁作者赶紧实现mrt吧)。由于没有mrt和延迟渲染,本来不打算写后处理的,但是即使没有,我们也希望能实现一些炫酷的效果,那就在现在的基础上对three.js进行简单的改造来实现一套高性能的后处理渲染器吧。
要实现后处理我们首先要考虑需求,是否要兼顾移动端,是否要兼顾大屏(4k),是否要支持webgl1,是否要在各种显卡中都有一个还算不错的性能。目前我主要考虑的是:性能要好,可以兼顾大屏,不打算完美支持webgl1,尽量多使用webgl2的特性。后面所有的性能测试为都以N卡作为性能测试指标,先不管AMD卡(AMD抗锯齿的处理性能会高些的,但是动态处理性能会偏低,这里有很多细节问题)
好了,我们关心的是好的性能,尽量多使用webgl2的特性,尽量能兼顾大屏(这里主要是要注意显存问题),现在开始准备我们的渲染器吧
要完成一个后处理渲染器,我们首先要考虑抗锯齿,常用的有超采样技术和多重采样技术,具体可以看这个介绍 添加链接描述
three.js已经实现了SSAA,SMAA,TAA这三种超采样技术,效果都还不错,具体实现three.js都有例子,就不详细说明了。SSAA抗锯齿效果是最好的,但是性能最差,现实情况下根本无法使用。SMAA性能会好一些,2000个物体差不多掉15帧吧&
用three.js构建自己的后处理渲染器第一篇---抗锯齿的选择
最新推荐文章于 2025-03-13 08:15:54 发布