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



我有一个很酷的项目,有三个.js,一切都按预期工作。它在不同的画布上显示一些网格,这是我的问题。

该项目旨在展示许多画布,每个画布都有自己的上下文,并且达到了16个实时webGL上下文的致命限制。由于它希望在页面中显示更多内容,因此我正在寻找通过禁用上下文来绕过此限制,当它实际上未显示在看到的页面上时。当用户滚动时,上下文将被禁用/启用,以便我可以放置任意数量的上下文。

我发现了这个函数:renderer.forceContextLoss(),有了这个,我可以强制禁用上下文。但是我没有找到任何可以重新启动它的东西。我设法检测到上下文的丢失,但没有检测到它的恢复

如果您对我如何实现这一目标有任何想法,请随时给我一些提示。

提前感谢!

这在其他地方已经介绍过,但让它看起来像有多个画布的最简单方法是只使用三个.js的一个实例,让它覆盖整个窗口,将占位符div 放在你想要绘制的东西的地方,然后使用element.getClientBoundingRect为每个元素中要绘制的每个场景设置剪刀和视口

这里有一个例子。

这是该示例源自的 StackOverflow 中的答案

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

这将比使用多个画布使用更少的内存,每个画布都需要自己的数据、自己的着色器等......

最新更新