Javascript WebGl呈现JSON文件非常慢，这是因为JSON文件的大小吗？

我试图使用json文件呈现一个非常复杂的模型。json文件的大小是40MB，这是一个巨大的数据，我可以在画布上渲染模型

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

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

影响渲染的是json文件的大小吗？我怎样才能使性能更好？我应该提到这一点，这不是图形卡的问题。像body browser这样的东西速度非常快

我使用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 );

在动画中调用渲染函数

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 );
}

---

您将此问题标记为webgl，因此我认为您希望使用webgl渲染器：

renderer = new THREE.WebGLRenderer();

而不是画布：

---

您将此问题标记为webgl，因此我认为您希望使用webgl渲染器：

renderer = new THREE.WebGLRenderer();

而不是画布：

---

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

我说的模型是什么意思

好吧，如果你进入你最喜欢的建模软件包，制作两个球体，你就有了两个模型。如果你制作了1000个球体，假设每个球体有1000个多边形，那么导出的速度可能会很慢。但是，如果您找到了如何将1000个球体模型折叠为1000个球体的单个模型，然后再次导出，它可能会运行得很快

---

画一个大东西通常比画1000个小东西快。

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

我说的模型是什么意思

好吧，如果你进入你最喜欢的建模软件包，制作两个球体，你就有了两个模型。如果你制作了1000个球体，假设每个球体有1000个多边形，那么导出的速度可能会很慢。但是，如果您找到了如何将1000个球体模型折叠为1000个球体的单个模型，然后再次导出，它可能会运行得很快

---

画一个大东西通常比画1000个小东西快。

很可能是因为IO。读取40MB文件的IO延迟将足够高，从而导致渲染速度变慢。另外，它是JSON，不是jason。你能给我们看一些代码吗，特别是渲染方法？您是否使用缓冲区存储数据？Thanx用于快速回复，在这种情况下，加载json文件的有效过程是什么？即使身体浏览器是一个巨大的数据，它背后的原理是什么？Thanx@Corbin用于Json校正失眠工作的影响。@Matthias我没有使用缓冲区。我正在使用three.js渲染器来渲染模型。这只是一个技巧，不是答案。尝试减少模型的多边形数。Blender有一个名为decimate的选项，它可以实现这一点。在我的经验中，大多数3D模型都有太多的细节，这很可能是因为IO。读取40MB文件的IO延迟将足够高，从而导致渲染速度变慢。另外，它是JSON，不是jason。你能给我们看一些代码吗，特别是渲染方法？您是否使用缓冲区存储数据？Thanx用于快速回复，在这种情况下，加载json文件的有效过程是什么？即使身体浏览器是一个巨大的数据，它背后的原理是什么？Thanx@Corbin用于Json校正失眠工作的影响。@Matthias我没有使用缓冲区。我正在使用three.js渲染器来渲染模型。这只是一个技巧，不是答案。尝试减少模型的多边形数。Blender有一个名为decimate的选项，它可以实现这一点。根据我的经验，大多数3D模型都有太多的细节，不适合你的普通网络应用。非常感谢。我想我在画布空间渲染它是一个问题，现在它只需要时间加载后加载工作正常。我选择了胡安·梅拉多，这解决了我的问题@gman感谢你的建模建议，在实施下一步之前，我会一直记住这个技巧。实际上，它是一个从.stl到.obj再到.js的单一模型。我想说的是由许多多边形组成的单一模型，它是一个颅骨模型。如果我对你的概念理解错误，欢迎提出任何建议。嘿，gman，当你有2^16张以上的脸时，这是如何工作的呢？您应该手动打断几何体并管理绘图调用，还是让任何正在处理它的东西来处理它？性能相对于什么？如果需要绘制>2^16个顶点，则有2个选项。多个绘制调用或非索引几何图形。非索引几何体不限于WebGL上的2^16个顶点。我不知道哪个更快。这可能取决于怎么做。大多数情况下，我不会为此担心。我会制作自动分割模型的工具，然后忘记它。非常感谢。我想我是在画布上渲染的空间是一个

---

问题是，现在只需在加载后加载就可以了。我选择了胡安·梅拉多，这解决了我的问题@gman感谢你的建模建议，在实施下一步之前，我会一直记住这个技巧。实际上，它是一个从.stl到.obj再到.js的单一模型。我想说的是由许多多边形组成的单一模型，它是一个颅骨模型。如果我对你的概念理解错误，欢迎提出任何建议。嘿，gman，当你有2^16张以上的脸时，这是如何工作的呢？您应该手动打断几何体并管理绘图调用，还是让任何正在处理它的东西来处理它？性能相对于什么？如果需要绘制>2^16个顶点，则有2个选项。多个绘制调用或非索引几何图形。非索引几何体不限于WebGL上的2^16个顶点。我不知道哪个更快。这可能取决于怎么做。大多数情况下，我不会为此担心。我会制作自动分割模型的工具，然后忘记它。