JSON文件的WebGl渲染非常慢，是因为JSON文件的大小吗？答案

【问题标题】：WebGl rendering is very slow with JSON file, is it because of size of JSON file?JSON文件的WebGl渲染非常慢，是因为JSON文件的大小吗？
【发布时间】：2012-05-12 09:53:54
【问题描述】：

我正在尝试使用 json 文件渲染一个非常复杂的模型。 json文件大小为40MB，数据量很大，我可以在canvas上渲染模型。

现在的问题是渲染非常缓慢。如果我尝试旋转模型或放大，整个浏览器都会挂起，这太慢了。

由于我是 webgl 的新手，我不知道是什么导致了这个问题。看了一圈也没找到。

是影响渲染的json文件的大小吗？我怎样才能使性能更好？应该提一下，这不是显卡的问题。身体浏览器之类的东西非常快。

我正在为这个方法使用three.js jason loader

loader = new THREE.JSONLoader();
loader.load( 'file.js', function ( geometry ) {
    geometry.computeVertexNormals();
    mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( ) );
    scene.add( mesh );
} );

为了渲染，我在 init 里面做这个

renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );

在 animate() 中调用渲染函数

function animate() {
    requestAnimationFrame( animate );
    render();
    stats.update();
}

在渲染函数中像这样旋转网格

function render() {
    mesh.rotation.x += ( targetXRotation - mesh.rotation.x ) * 0.05;
    mesh.rotation.y += ( targetYRotation - mesh.rotation.y ) * 0.05;
    renderer.render( scene, camera );
}

【问题讨论】：

很有可能是IO的原因。读取 40MB 文件的 IO 延迟会高到足以导致渲染缓慢。此外，它是 JSON，而不是 jason。
能否给我们看一些代码，尤其是渲染方法？您是否使用缓冲区来存储数据？
感谢您的快速回复，在这种情况下，加载 json 文件的有效过程是什么？连body浏览器都是一个庞大的数据，背后的原理是什么？感谢 @Corbin 进行 Json 校正（不眠不休的工作效果）。
@Matthias 我没有使用缓冲区。我正在使用three.js 渲染器来渲染模型。
这只是一个技巧，而不是答案。尝试减少模型的多边形数量。 Blender 有一个名为 decimate 的选项。根据我的经验，大多数 3D 模型对于您的普通 Web 应用来说都包含太多细节。

标签： javascript webgl three.js

【解决方案1】：

您将此问题标记为“webgl”，所以我认为您想使用 WebGL 渲染器：

renderer = new THREE.WebGLRenderer();

而不是 canvas 一个：

renderer = new THREE.CanvasRenderer();

【讨论】：

【解决方案2】：

这可能取决于 40meg 文件的结构。有多少个单独的模型？模型越多，速度就越慢。

模型是什么意思？

好吧，如果你进入你最喜欢的建模包并制作 2 个球体，你就有 2 个模型。如果您制作 1000 个球体，假设每个球体 1000 个多边形并导出它可能会运行缓慢。但是，如果您知道如何将这 1000 个球体模型折叠成一个包含 1000 个球体的模型并再次导出，它可能会运行得很快。

画一件大事往往比画一千件小事要快。

【讨论】：

非常感谢。我认为我在画布空间上渲染它是一个问题，现在加载它需要时间才能正常加载。我为 Juan Mellado 打勾，它解决了我的问题。 @gman 感谢您的建模建议，在实施下一件事之前，我将永远记住这个技巧。实际上它是从.stl 转换为.obj 再转换为.js 的单个模型。所以我会说由很多多边形组成的单个模型，它是一个头骨模型。如果我对您的概念理解错误，欢迎提出任何建议。寻求帮助。
嘿 gman，当你有超过 2^16 个面孔时，这如何工作？您应该手动中断几何图形并管理绘图调用，还是让处理它的任何东西来处理它？
性能相对于什么？如果您需要绘制 > 2^16 个顶点，您有 2 个选项。多个绘制调用或非索引几何体。非索引几何不限于 WebGL 上的 2^16 个顶点。我不知道哪个更快。这可能取决于optimized the indices and vertices are 的方式。大多数情况下，我不会担心它。我会制作工具来自动拆分我的模型，然后忘记它。