儘管requestAnimationFrame（）我的WebGL動畫是緩慢的

我試圖創建webgl動畫爲我的網站背景，靈感來自「threejs - Cloud exemple」（http://mrdoob.com/lab/javascript/webgl/clouds/）。在我的電腦上它看起來相當不錯...但對於某些電腦來說，它非常慢。儘管requestAnimationFrame（）我的WebGL動畫是緩慢的

有沒有辦法進一步優化我的代碼，並檢測顯卡是否不支持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); 
}

感謝您的幫助:-)

來源

2012-10-05 Willy

您好。請考慮標記答案是正確的。本網站上的人們通常會花費相當多的時間回答您的問題，並將正確的答案標記爲讚賞。通過向人們提供最好的信息，它也有助於改善網站。謝謝。 – null

我是新來three.js所自己，但它是相當問題來優化您的代碼。我學到的東西很少。如果您不喜歡黑色閃光，請在添加元素之前進行渲染。讓你幾何和紋理簡單。形狀越複雜，紋理使用的圖像越多，其得到的速度就越慢。我確定有一種方法來優化圖形，但我還不知道。開始試圖解決這個問題。

來源

2012-10-20 19:29:12

只要快速查看Mr Doob代碼，我會注意到一些可能對您有幫助的優化。如果你檢查Doob先生的例子，你可以看到他的雲紋理是256 x 256像素的圖像，而你的雲紋圖像是800 x 800.這裏有兩點需要考慮：

首先，嘗試使用2的冪您的紋理尺寸，即256,512,1024 ......這是因爲圖形卡針對具有這些尺寸的紋理進行了優化。其次，800×800可能比你真正需要的大得多，正如Doob先生的演示所示。大多數情況下，你的紋理縮小到一半或更小。

在Doob先生演示中脫穎而出的另一件事是他正在使用mipmap。 Mipmaps是當顯卡預先緩存不同尺度紋理的多個版本時，並且在任何給定時間使用與當前關卡最接近的版本。這使紋理縮放效率更高，因此將它們打開可能會爲您加速一點。

代碼：

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

杜布先生代碼：WebGL的的

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

關於檢測的信息，請參閱該堆棧溢出的答案：

Three.js detect webgl support and fallback to regular canvas

來源

2012-10-23 09:54:29 null

儘管requestAnimationFrame（）我的WebGL動畫是緩慢的

回答

相關問題