以较低分辨率渲染一些内容

Question

我正在使用昂贵的海洋着色器（https://threejs.org/examples/webgl_shaders_ocean.html）来破坏旧式移动设备的用户体验（帧速率从60fps降至20fps）。如果在渲染器上设置较低的像素比（2而不是3），我可以获得双倍FPS（约40fps）。我还以编程方式将画布大小减小到50％，之后通过CSS增加它以填充屏幕但分辨率更低。

这两个动作是我现在可以做的最好的事情，以提高性能。但成本很高，因为我不仅在海洋中失去了很多分辨率，而且在现场所涉及的所有其他模型中都失去了很多分辨率。

我正在寻找一种方法来渲染低分辨率的昂贵部分（比如这个着色器材质），在渲染后恢复它，我的意思是：在海洋网格平面上定义onBeforeRender，这样我就可以将分辨率降低到1/3，例如。然后，渲染网格后，我可以使用onAfterRender恢复原始像素比率。我可以毫无问题地降低onBeforeRender的分辨率，但是当我恢复onAfterRender上的原始高质量分辨率时，屏幕变黑。这些是我对https://threejs.org/examples/js/objects/Water.js的改动

scope.onBeforeRender = function ( renderer, scene, camera ) {       
    (original onBeforeRender code)

    renderer.setPixelRatio( 0.5 );
    renderer.render( scene, mirrorCamera, renderTarget, false );
};


scope.onAfterRender = function ( renderer, scene, camera ) {
    renderer.setPixelRatio( 2 );
};

我想知道这个策略是否正确。我是否走在正确的道路上，至少？这是一个基本的JSFiddle来解决这个问题。有一个名为“overrideFunctions（）”的方法，它重新定义Water.js onBeforeRender（）以在渲染海洋之前降低像素比率。然后，我们定义“onAfterRenderer（）”以恢复原始质量，以便模型可以高分辨率渲染。

https://jsfiddle.net/spacorum/y5398gLm

评论有三行。如果取消注释168行，则全局质量降低到仅0.25dpi。这没关系，但是如果你取消注释第174行，模型就会消失，天空变黑......画布太小了。我在渲染海洋之前也尝试了你的建议renderer.clear（），但它现在没有任何区别。很近..

---

编辑3：这是我最接近我需要的东西。孤立的低分辨率海洋版本，包括反射。如果我能设法以正常分辨率显示其余部分，那就完成了：https://jsfiddle.net/spacorum/f63z2ceg/

---

编辑4：尝试使用不同的技术：主场景和背景场景。我最近已经尝试了类似的东西，但我遇到了困难。在这个测试中，我设法显示海的低分辨率版本，将其背景场景渲染到WebGLRenderTarget（仅使用窗口大小的1/10）。它似乎有所改善，但我不确定计算是否相同，我只是以较低的分辨率显示它。无论如何，按照这种方式，我不能让球体看到海里（这是完全正常的，我猜，因为它们在不同的场景中，对吧？）。 renderer.clearDepth可以在某种程度上帮助吗？ https://jsfiddle.net/spacorum/wbtcx9re/

---

编辑5：我的最新方法，混合EDIT3和EDIT4。有两个场景，海洋/太阳添加到背景/次要场景，球体添加到主场景。没有做任何renderer.clear（）并将renderer.autoClear设置为false，我可以渲染两个场景并且球体“进入”添加到次要场景的海洋，到目前为止一直很好。 （当然还没有反射，但我可以修复将球体的副本添加到次要场景）。然后，我可以在渲染次要场景之前降低分辨率（第166行）。但是如果我稍后恢复以使球体在原始分辨率上呈现（取消注释第173行），则第一个场景会消失并呈现白色..我无法理解为什么更改分辨率两次会导致这种情况，我可能会忘记更新之后的东西，但我看不到它：/ https://jsfiddle.net/spacorum/o91se8fz/

Answer 1

使海洋渲染变慢的部分原因是环境立方体贴图的每帧重建。如果你不接近水的物体不断变化，你可能会偶尔更新环境地图，或者当你切换天空或其他东西时一次。

编辑：重新阅读您的问题......您可能正走在正确的道路上。您需要自己控制帧缓冲区清除。设置renderer.autoClear = false，并在渲染缩小的海洋之前调用renderer.clear（）。否则三个是在渲染海洋后自动清除缓冲区。 @spacorum

我的初始答案可能仍然适用，如果您不需要每帧完整的envmap重建，则允许您在完全res处渲染水。