有什么方法可以查询 GPU 以告诉我我网页中的视口当前是否在屏幕上？例如，如果我在 iframe 的画布中渲染了 3d 场景，有没有办法查询硬件（在我的 iframe 内，只有视口中的像素或顶点）来判断我是在屏幕上还是滚动到屏幕外?
我很好奇这是否是我可以在顶点着色器级别做的事情。 WebGL 是否甚至在屏幕外的视口上执行着色器程序？假设它是在画布下方滚动，还是视口被另一个网页浏览器窗口挡住了？有没有办法查询 webgl 的合成部分以查看它是否在视图中或遍历“RenderObject”树以测试它是否在屏幕上然后返回此值？我正在尝试从我正在从事的项目中获得更多性能，并且我正在尝试仅渲染屏幕上可见的内容。
任何可能的想法？这甚至可能吗？谢谢！
【问题讨论】：
标签： html iframe canvas webgl compositing
RequestAnimationFrame 是处理不必要的性能损失的唯一合理方法，即使在语义上也是如此，因为window.requestAnimationFrame tells the browser that you wish to perform an animation... 所以浏览器会在考虑当前页面状态的情况下找出它应该如何以最佳方式处理您的愿望。 但是由于 iframe 使用本地存储进行通信，因此您可以将基本页面状态推送给它们，因此它们每个人都会决定是否使用 RequestAnimationFrame。但是我不确定在你的页面上拥有多个渲染上下文是一件好事，它们都吃资源并且不能共享它们（存储在 GPU 中的数据是沙盒的）所以最终它们将开始从 GPU 内存中相互推送并导致滞后 + GPU 管道可能对所有这些微小的独立实体不太满意。碎片化是主要的 GPU 性能敌人。
【讨论】：
您不会在画布/WebGL 级别提出这个问题，因为例如，它可能会在您绘制另一个框架之前在屏幕上滚动回来，并且浏览器不希望没有要显示的内容，所以有没有规定不抽奖。
我相信您必须查阅可滚动区域的 DOM 几何属性（例如 .scrollLeft）以确定画布是否可见。所述属性中有足够的信息，您可以在没有硬编码页面结构知识的情况下一般地执行此操作。
另外，请确保您专门使用requestAnimationFrame 进行绘图/模拟计划；如果页面被隐藏/最小化/在另一个选项卡中/否则显式不可见，它将暂停动画。
【讨论】：