检测WebGL视口是否在屏幕上的方法？

Question

有没有办法可以查询GPU告诉我我的网页中的视口当前是否在屏幕上？例如，如果我在iframe的画布中进行了三维场景渲染，是否有办法查询硬件（在我的iframe中，只有视口中的像素或顶点）来说明我是在屏幕上还是在屏幕上滚动？

我很好奇这是否是我在顶点着色器级别可以做的事情。 WebGL甚至可以在屏幕外的视口上执行着色器程序吗？让我们说如果它在画布下面滚动，或者视口被另一个网页浏览器窗口阻挡了？有没有办法查询webgl的合成部分以查看它是否在视图中或通过“RenderObject”树迭代测试它是否在屏幕上然后返回此值？我正在努力从我正在进行的项目中获得更多性能，并且我只想渲染屏幕上可见的内容。

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

Answer 1

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

我相信你必须查阅可滚动区域的DOM几何属性（例如.scrollLeft）以确定画布是否可见。所述属性中有足够的信息，您可以在不对页面结构进行硬编码的情况下执行此操作。

另外，请确保您专门使用requestAnimationFrame进行绘图/模拟计划;如果页面被隐藏/最小化/在另一个标签中/显然不可见，它将暂停动画。

Answer 2

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