WebGl 渲染使用 JSON 文件非常慢，是因为 JSON 文件的大小

WebGl rendering is very slow with JSON file, is it because of size of JSON file?

本文关键字：JSON 文件 是因为 非常 WebGl      更新时间：2023-09-26

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

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

由于我是webgl的新手，我不知道是什么导致了这个问题。环顾四周，什么也没发现。

是 json 文件的大小影响了渲染吗？ 如何使性能更好？我应该提到这一点，这不是显卡的问题。像身体浏览器这样的东西非常快。

我正在使用三个.js jason 加载器进行此方法

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

你把这个问题标记为"webgl"，所以我想你想使用WebGL渲染器：

renderer = new THREE.WebGLRenderer();

而不是画布：

renderer = new THREE.CanvasRenderer();

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

我说的模型是什么意思？

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

画

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

相关文章：