WebGl 렌더링은 JSON 파일의 경우 매우 느립니다. JSON 파일의 크기 때문입니까?

Question

json 파일을 사용하여 매우 복잡한 모델을 렌더링하려고합니다. json 파일의 크기는 40MB이므로 대용량 데이터이므로 모델을 캔버스에 렌더링 할 수 있습니다.

이제 렌더링 문제는 매우 느리게 처리됩니다. 모델을 회전 시키거나 확대하려고하면 전체 브라우저가 멈추고 느려집니다.

나는 webgl에 새로운 무엇이 나는이 문제를 일으키는 지 모른다. 주변을 둘러 보니 아무 것도 찾지 못했습니다.

렌더링에 영향을 미치는 json 파일의 크기입니까? 성능 향상을 위해 어떻게해야합니까? 나는 이것을 언급해야한다, 그것은 그래픽 카드의 문제가 아니다. 바디 브라우저와 같은 것들은 매우 빠릅니다.

애니메이션으로 불린다 I이 방법 나 기능 렌더링

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

init을이 내부 하하고, 렌더링

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

제이슨 로더 three.js를 사용하고()

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

과 같이 메쉬를 회전하는 렌더 함수에서

,210

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

당신은 "WebGL을"같은이 질문에 태그, 그래서 당신이 WebGL을 렌더러를 사용하고자하는 생각 : 대신 캔버스의

renderer = new THREE.WebGLRenderer(); 

하나

renderer = new THREE.CanvasRenderer(); 

Answer 2

을

그것은 40meg 파일의 구조에 달려 있습니다. 얼마나 많은 개별 모델이 있습니까? 더 많은 모델은 더 느리게 갈 것입니다.

모델은 무엇을 의미합니까?

좋아하는 모델링 패키지에 들어가서 2 개의 구체를 만들면 2 가지 모델이 있습니다. 1000 개의 구체를 만들면 각각 1000 개의 다각형을 말하며 수출 속도가 느려질 것입니다. 그러나 1000 개의 구형 모델을 1000 개의 구형 모델로 축소하여 다시 내보낼 수있는 방법을 찾으면 빠르게 실행됩니다.

드로잉 1 큰 것은 종종 1000 개의 작은 것들을 드로잉하는 것보다 빠릅니다.