Question

I am trying to render a very complex model using json file. The size of the json file is 40MB it is a huge data, I can render the model on canvas.

Now the problem is rendering is done very very slowly. If i try to rotate the model or zoom in, whole browser hangs, it is such a slow.

As i m new to webgl i do not know what is causing this problem. Looked around didnt find anything.

Is it the size of json file which is affecting rendering? how can i make the perfomance better? I should mention this, it is not a problem of graphic card. things like body browser is very fast.

I am using three.js jason loader for this method

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

For rendering, i am doing this inside init

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

Render function is called in animate()

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

and in render function rotating the mesh like this

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

Answer 1

You tagged this question as “webgl”, so I think you would like to use the WebGL renderer:

renderer = new THREE.WebGLRenderer();

instead of the canvas one:

renderer = new THREE.CanvasRenderer();