Javascript 大网格的3.js渐进式渲染

我想使用three.js渲染任意大的静态网格。网格可能为2GB，包含数千万个多边形

我想将网格几何缓存流式传输到indexedDB中，并逐步读取它们并将它们渲染到屏幕上，同时保持交互式帧速率。我将创建一个MemoryManager类，通过将数据从indexedDB加载到固定大小的缓冲区，确保不会使浏览器崩溃。在动画循环中，我将在16毫秒内渲染尽可能多的几何体，直到用户停止交互，然后继续渲染网格，直到不再有网格

这是我想要采取的高级方法，当然，还有许多优化需要完成。（对象池、八叉树、遮挡查询等）

我的问题是：有没有更好的方法可以做到这一点，以前做过吗？（有了WebGL1，我知道WebGL2遮挡查询会使这一点更简单）

---

另外，定制Three.js WebGLRenderer类的最佳方式是什么？有一些私有闭包变量（比如WebGLState），我需要访问它们来调整我的用例的性能。

我不相信WebGL2阻塞查询在这里能帮到你很多。也许可以使用它们，但在cpu上执行消隐可能是一个更好的选择，尤其是在场景基本上是静态的情况下

如果要在用户停止交互时逐步渲染几何体，则可以停止清除渲染缓冲区。使用THREE.js，您可以通过在渲染器上启用

preserveDrawingBuffer

并将

autoClear

设置为

false

来实现这一点

如果相机移动或场景发生其他变化，您需要重新开始，可以通过调用

renderer.clear（）

再次清除视图

关于流式传输数据，我将使用和修改每一帧所需的数据。听起来你已经有了一些关于优化和决定哪些几何体需要渲染的想法

例子 场景在同一帧上反复重画。单击场景以将其清除，然后再次开始绘制。重要的js行是

NOTE

'd

//否：启用preserveDrawingBuffer
const renderer=new THREE.WebGLRenderer（{antialas:true，preserveDrawingBuffer:true}）；
renderer.setClearColor（0x263238）；
renderer.setSize（window.innerWidth、window.innerHeight）；
.clear（）；
document.body.appendChild（renderer.doElement）；
//注意：禁用自动清除
renderer.autoClear=false；
//场景设置
const scene=new THREE.scene（）；
const dirLight=新的三方向光（0xffffff）；
dirLight.position.set（.4,1,1）；
场景。添加（dirLight）；
//摄像机设置
const camera=新的三透视摄像头（45，window.innerWidth/window.innerHeight，0.12000）
摄像机位置z=10；
const geom=新的三个圆环几何体（.5、.2200100）；
const mesh=new THREE.mesh（geom，new THREE.MeshPhongMaterial（{color:0xE91E63}））；
场景。添加（网格）；
//注意：在用户交互时清除
renderer.doElement.addEventListener（'click'，（）=>renderer.clear（））；
（函数renderLoop（）{
mesh.position.y=Math.sin（performance.now（）*0.001）；
渲染器。渲染（场景、摄影机）；
requestAnimationFrame（renderLoop）；
})();

帆布{
宽度：100%；
身高：100%；
}
* {
保证金：0；
填充：0；
字体系列：无衬线；
}
div{
颜色：白色；
位置：绝对位置；
文本对齐：居中；
宽度：100%；
}
单击以清除
Re:webglrender除了分叉之外，没有真正的好方法。在几个版本之前，很多内部构件都暴露出来了，所以可以在一定程度上对其进行修补。现在有更多的封装正在进行，但好消息是它是“相当”模块化的。谢谢，这是一个很好的答案。我同意BufferGeometry方法，我将尝试一下。