如何检测WebGL视口是否在屏幕上？

有没有什么办法可以查询GPU来告诉我我的网页中的视口当前是否在屏幕上？例如，如果我在iframe的画布中渲染了3d场景，是否有方法可以查询硬件（在我的iframe中，只有视口中的像素或垂直），以查看我是在屏幕上还是在屏幕上滚动？如何检测WebGL视口是否在屏幕上？

我很好奇这是否是我在顶点着色器级别上可以做到的。 WebGL甚至在离屏的视口上执行着色器程序吗？让我们说如果它在画布下滚动，或者视口被另一个网页浏览器窗口阻挡？有没有办法查询webgl的合成部分，以查看它是否在视图中或遍历“RenderObject”树来测试它是否在屏幕上，然后返回该值？我试图从我正在处理的项目中获得更多的性能，并且我试图只呈现屏幕上可见的内容。

任何可能的想法？这甚至有可能吗？谢谢！

来源

2012-11-02 xtr33me

RequestAnimationFrame是唯一合理的方式来处理不必要的性能损失，甚至在语义上，因为window.requestAnimationFrame tells the browser that you wish to perform an animation...因此，浏览器会考虑如何以最佳方式处理您的愿望，并考虑当前页面状态。但是，由于iframe使用本地存储进行通信，因此您可以将它们推送给您的基本页面状态，以便它们每个人都会决定是否应该使用RequestAnimationFrame。但我不确定在你的页面上渲染渲染上下文是一件好事，它们都会占用资源并且不能共享它们（存储在GPU中的数据会被沙箱化），所以最终它们将开始互相推送GPU内存并导致滞后+ GPU管道可能不太满意所有那些微小的独立实体。碎片化是主要的GPU性能敌人。

来源

2012-11-08 07:51:09 JAre

谢谢JAre。这似乎是我见过的最好的答案。我非常感谢这些信息！ – xtr33me

您不要在canvas/WebGL级别提出这个问题，因为它可能会在您绘制另一个框架之前在屏幕上滚动，并且浏览器不希望显示内容，所以没有规定不画。

我相信你将不得不咨询你的可滚动区域的DOM几何属性（例如.scrollLeft）以确定画布是否可见。在所述属性中有足够的信息，您可以一般地完成此操作，而无需对页面结构进行硬编码。

此外，请确保您专门使用进行绘图/仿真调度;它会暂停动画，如果页面隐藏/最小化/在另一个选项卡/否则明确不可见。

来源

2012-11-03 01:45:52

感谢您的回答凯文，但有没有办法在webgl级别做到这一点？您收集的每个游戏客户端/角色都在自己的iframe中运行，并且我将服务器托管在与展示它们的网页不同的src上。我目前拥有它，因此每个iframe都能自我识别并使用本地存储进行通信。然而，在测试中，当我开始在屏幕上获得更多的iframe时，我看到放缓，并且如果iframe的子画布在屏幕外滚动，则不想调用更新。 – xtr33me

如何检测WebGL视口是否在屏幕上？

回答

相关问题