在webGL / three.js中禁用/啟用webGL上下文

Question

我有一個帶有three.js的很棒的項目，一切都按預期工作。 它在不同的畫布中顯示一些網格，這是我的問題。

該項目旨在展示許多畫布，每個畫布都有自己的上下文，並且達到了16個實時webGL上下文的致命限制。 由於它希望在頁面中顯示更多內容，因此我想通過在未實際顯示在可見頁面上的情況下禁用上下文來扭轉這種限制。 當用戶滾動時，上下文將被禁用/啟用，因此我可以根據需要放置盡可能多的上下文。

我發現了這個函數： renderer.forceContextLoss() ，通過這個函數，我可以強制禁用上下文。 但是我沒有發現任何可以重新啟動的東西。 我設法檢測到上下文丟失，但未檢測到上下文丟失

如果您對我將如何實現有任何想法，請隨時給我一些提示。

提前致謝 ！

Answer 1

這已經在其他地方討論過了，但是使它看起來像有多個畫布一樣，最簡單的方法是只使用three.js的一個實例，使其覆蓋整個窗口，在要繪制事物的位置放置div占位符，然后使用element.getClientBoundingRect設置要在每個元素中繪制的每個場景的剪刀和視口

這里有一個例子 。

這是該示例起源於StackOverflow的答案

https://stackoverflow.com/a/30633132/128511

與使用多個畫布相比，這將使用更少的內存，而每個畫布將需要自己的數據，自己的着色器等。