requestAnimationFrame()에도 불구하고 내 WebGL 애니메이션이 느립니다.

Question

"threejs - Cloud exemple"(http://mrdoob.com/lab/javascript/webgl/clouds/)에서 영감을 얻은 웹 사이트 배경에 대한 webgl 애니메이션을 만들려고합니다. 내 컴퓨터에서는 오히려 좋은 것처럼 보입니다. 그러나 어떤 PC에서는 매우 느립니다.

내 코드를 최적화하고 그래픽 카드가 webgl을 지원하지 않는지 감지 할 수 있습니까? (배경)

내 애니메이션 : http://wabeo.fr/?theme=auriga-7이

내 코드 :

var container = document.getElementById('container'); 
var wi  = window.innerWidth; 
var he  = window.innerHeight; 
var renderer = new THREE.WebGLRenderer({ 
antialias: true 
}); 
var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera(75,wi/he,1,10000); 
var distance = 500; 
var geometry2 = new THREE.Geometry(); 

renderer.setSize(wi ,he); 
container.appendChild(renderer.domElement); 
scene.add(camera); 

var texture = THREE.ImageUtils.loadTexture('/wp-content/themes/auriga-7/i/cloud.png'); 
texture.minFilter = THREE.LinearFilter; 
texture.magFilter = THREE.LinearFilter; 

var m = new THREE.MeshBasicMaterial({color:0x000000}); 
var material = new THREE.MeshBasicMaterial({ map: texture,transparent: true}); 
var plane = new THREE.PlaneGeometry(400,400,4,4); 


for (ix = 0; ix <45; ix++) { 
    item = new THREE.Mesh(plane, m); 
    item.position.x = ((Math.random()-0.5)*(Math.random() * wi/2) /4)*Math.random()*10; 
    item.position.y = ((Math.random()-0.5)*(Math.random() * he/2) /4)*Math.random()*10; 
    item.position.z = ix*10-50; 
    item.rotation.z = Math.random() *250; 
    item.scale.x = item.scale.y = Math.random() * Math.random() * 2 + 0.5; 

    THREE.GeometryUtils.merge(geometry2,item); 
} 

mesh = new THREE.Mesh(geometry2, material); 
scene.add(mesh); 

camera.position.z = distance; 
camera.lookAt(scene.position); 
renderer.sortObjects = false; 


// create a point light 
var pointLight = 
    new THREE.PointLight(0xFFFFFF); 

// set its position 
pointLight.position.x = 10; 
pointLight.position.y = 50; 
pointLight.position.z = 130; 

// add to the scene 
scene.add(pointLight); 
requestAnimationFrame(wanarender); 

document.addEventListener('mousemove',onMouseMove, false); 
window.addEventListener('resize',onResizeMyFuckinBrowser,false); 
function onMouseMove(event){ 

    var mouseX = event.clientX - wi/2; 
    var mouseY = event.clientY - he/2; 

    camera.position.x = (mouseX - camera.position.x) * 0.02; 
    camera.position.y = (-mouseY - camera.position.y) * 0.02; 
    camera.position.z = distance; 
    camera.lookAt(scene.position); 
} 
function onResizeMyFuckinBrowser(){ 
    var wi  = window.innerWidth; 
    var he  = window.innerHeight; 
    renderer.setSize(wi ,he); 
} 
function wanarender(){ 
    requestAnimationFrame(wanarender); 
    renderer.render(scene, camera); 
} 

나 자신을 three.js를 위해 새로운 해요

Answer 1

:-) 당신의 도움을 주셔서 감사합니다하지만이 상당히입니다 코드를 최적화하는 데 문제가 있습니다. 내가 배운 것들은 거의 없다. 검은 색 플래시가 마음에 들지 않으면 요소를 추가하기 전에 렌더링하십시오. 지오메트리와 텍스처를 간단하게 유지하십시오. 모양이 복잡해질수록 텍스처로 사용되는 이미지가 많을수록 느리게 생성됩니다. 그래픽을 최적화 할 수있는 방법이 있지만 확실하지 않습니다. 그 문제를 해결하려고 노력하십시오.

Answer 2

미스터 Doob 코드를 살펴보면 몇 가지 최적화가 도움이 될 것입니다. Mr Doob의 사례를 살펴보면 그의 구름 텍스처가 256x256 픽셀 이미지이고 800x800 인 것을 볼 수 있습니다. 여기에서 고려해야 할 두 가지 사항이 있습니다.

먼저 2의 제곱을 사용해보십시오. 256, 512, 1024 등의 텍스처 크기 ... 그래픽 카드가 이러한 치수를 가진 텍스처에 최적화되어 있기 때문입니다.

둘째, Doob의 데모 데모에서 보여 주듯이 800x800이 실제로 필요한 것보다 훨씬 클 것입니다. 대부분의 경우 텍스처가 크기의 절반 이하로 축소됩니다.

미스터 Doob 데모에서 두드러진 또 다른 점은 그가 밉맵을 사용하고 있다는 것입니다. 밉맵은 그래픽 카드가 여러 버전의 텍스처를 서로 다른 크기로 사전 캐시하고 현재 시간에 가장 가까운 것을 사용합니다. 이렇게하면 텍스처 스케일링이보다 효율적으로 이루어 지므로이를 켜면 약간의 작업 속도가 빨라질 수 있습니다.

코드 :

texture.minFilter = THREE.LinearFilter; 
texture.magFilter = THREE.LinearFilter; 

씨 Doob의 코드 : WebGL이의

texture.magFilter = THREE.LinearMipMapLinearFilter; 
texture.minFilter = THREE.LinearMipMapLinearFilter; 

에 대해서는 감지, 내용은이 스택 오버플로 답변을 참조하십시오 :이

Three.js detect webgl support and fallback to regular canvas