当我在Chrome中打开一个THREE.js应用程序时，我的浏览器拖得不好

Question

我正在用THREE.js构建一个小的2D游戏，我刚刚注意到，当我打开一个THREE.js应用程序的标签时，剩下的选项卡开始拖到蜗牛的速度。但是，当我切换制表符意味着THREE.js选项卡是隐藏的时，一切都恢复正常。有办法绕过这件事吗？我相信这很可能与递归运行的requestAnimationFrame(render)函数有关。关于如何优化THREE.js requestAnimationFrame，有什么建议吗？

Answer 1

大多数Three.js设置以每秒60次的速度重新渲染场景，这对于许多机器来说并不容易。运行WebGL网站总是比标准的HTML页面更需要资源。优化每个帧完全取决于您使用的是什么，因此对于如何优化它没有绝对的答案。它几乎总是在性能和视觉质量之间的平衡。以下是一些可能导致性能问题的常见罪魁祸首，尽管这一清单远未详尽无遗：

• 高网格数(当网格重复时，尝试合并几何图形和例举 )
• 太多的灯(试着烘焙光图使用尽可能少的动态灯)
• 高DPI的渲染(如果可能的话尝试设置像素比为1 )
• 抗混叠(无AA比使用AA便宜)
• 复杂阴影(尽可能尝试烘焙阴影而不是使用动态阴影)
• 复杂的着色器(一些照片真实感着色器的计算成本很高)
• 昂贵的后处理
• 全屏渲染( 1920x1080的渲染比1024x768要昂贵得多)
• 离散GPU (拥有独立的显卡比CPU中的共享图形处理提供了更好的性能。许多笔记本电脑没有单独的显卡，导致性能缓慢)。