如何檢測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視口是否在屏幕上？

回答

相關問題