1

json ファイルを使用して非常に複雑なモデルをレンダリングしようとしています。json ファイルのサイズは 40MB と巨大なデータです。モデルをキャンバスにレンダリングできます。

ここでの問題は、レンダリングが非常に遅く行われることです。モデルを回転させたりズームインしようとすると、ブラウザ全体がハングアップし、とても遅くなります。

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

Render 関数は 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 );
}
4

2 に答える 2

2

40megファイルの構造に依存する可能性があります。個別のモデルはいくつありますか？モデルが多いほど遅くなります。

モデルとはどういう意味ですか？

さて、お気に入りのモデリングパッケージに入って、2つの球を作成すると、2つのモデルができます。1000個の球を作成し、それぞれ1000個のポリゴンを作成してエクスポートすると、実行速度が低下する可能性があります。ただし、これらの1000球モデルを1000球の単一モデルに折りたたんで再度エクスポートする方法を見つけた場合は、高速に実行される可能性があります。

多くの場合、1つの大きなものを描画する方が、1000の小さなものを描画するよりも高速です。

于 2012-05-12T01:53:54.523 に答える
2

この質問に「webgl」というタグを付けたので、 WebGLレンダラーを使用したいと思います。

renderer = new THREE.WebGLRenderer();

キャンバスの代わりに：

renderer = new THREE.CanvasRenderer();
于 2012-05-11T13:14:13.213 に答える