javascript - 当我在 Chrome 中打开一个 THREE.js 应用程序时，我的浏览器拖得很糟糕

Question

我正在使用 THREE.js 构建一个小型 2D 游戏，我刚刚注意到，当我打开一个标签页并加载了我的 THREE.js 应用程序时，我的其余标签页开始拖到蜗牛的速度。但是当我切换选项卡时，意味着 THREE.js 选项卡被隐藏，一切都恢复正常。有没有办法解决？我相信它很可能与递归运行的 requestAnimationFrame(render) 函数有关。关于如何优化 THREE.js requestAnimationFrame 的任何提示？

标签： javascriptthree.js

Answer 1

Most Three.js setups re-render the scene 60 times per second, which is no easy task for lots of machines. Running a WebGL website is always going to be more resource-intensive than a standard HTML page. Optimizing each frame is entirely dependent on what you're using, so there's no absolute answer to how to optimize it. It's almost always a balance between performance and visual quality. Here are some common culprits that might be causing performance issues, although this list is far from being exhaustive:

• High Mesh count (try merging geometries and instancing when meshes repeat)
• Too many lights (try baking light-maps to use as few dynamic lights as possible)
• Rendering at high DPI (try to set a pixel ratio of 1 if possible)
• Anti-aliasing (no AA is cheaper than using AA)
• Complex shadows (try baking shadows instead of using dynamic shadows whenever possible)
• Complex shaders (some photo-realistic shaders can be expensive to compute)
• Expensive post-processing
• Full-screen rendering (rendering at 1920x1080 is way more expensive than 1024x768)
• Discrete GPU (having a separate graphics card gives substantially better performance than shared graphics processing in the CPU. Many laptops don't have a separate graphics card, leading to slow performance).