Attempting to display a highly complex model using a JSON file, which is quite large at 40MB. Despite being able to render the model on canvas, encountering severe sluggishness during the process.
The issue arises when trying to manipulate the model by rotating or zooming in, causing the entire browser to hang due to the slow performance. Being new to WebGL, unsure of the root cause for this problem and couldn't find any helpful solutions so far.
Could the size of the JSON file be impacting the rendering speed? How can the performance be optimized? It's important to note that the graphic card itself is not the bottleneck as other aspects like browsing are swift.
Utilizing three.js Jason Loader for loading the file:
loader = new THREE.JSONLoader();
loader.load( 'file.js', function ( geometry ) {
geometry.computeVertexNormals();
mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( ) );
scene.add( mesh );
} );
Within the initialization process, configuring the renderer:
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
The render operation is called within the animate() function:
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
Manipulating the rotation of the mesh in the render function:
function render() {
mesh.rotation.x += ( targetXRotation - mesh.rotation.x ) * 0.05;
mesh.rotation.y += ( targetYRotation - mesh.rotation.y ) * 0.05;
renderer.render( scene, camera );
}