0

我正在尝试为我的网站背景创建 webgl 动画，灵感来自“threejs - 云示例”（http://mrdoob.com/lab/javascript/webgl/clouds/）。在我的电脑上看起来相当不错......但对于某些电脑来说它很慢。

有没有办法进一步优化我的代码，并检测显卡是否不支持 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);
}

谢谢你的帮助 ：-）

4

2 回答 2

4

快速浏览一下 Mr Doob 代码，我注意到一些可能对您有所帮助的优化。如果您查看 Doob 先生的示例，您可以看到他的云纹理是 256 x 256 像素的图像，而您的图像是 800 x 800。这里需要考虑两件事：

首先，尝试对纹理大小使用 2 的幂，即 256、512、1024... 这是因为显卡针对这些尺寸的纹理进行了优化。

其次，正如 Doob 先生演示所展示的那样，800 x 800 可能比您真正需要的要大得多。大多数时候，你的纹理被缩小到一半或更小。

在 Mr Doob 演示中突出的另一件事是他正在使用 mipmap。Mipmap 是指显卡预先缓存不同比例的多个版本的纹理，并在任何给定时间使用最接近当前级别的版本。这使纹理缩放更有效，因此打开它们可能会加快速度。

您的代码：

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

Doob先生的代码：

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

关于 WebGL 的检测，请参阅此 Stack Overflow 答案以获取信息：

Three.js 检测 webgl 支持并回退到常规画布

于 2012-10-23T09:54:29.737 回答
0

我自己是 Three.jS 的新手，但是优化你的代码是很成问题的。我学到的东西很少。如果您不喜欢黑色的闪光，请在附加元素之前渲染。让你的几何和纹理简单。形状越复杂，用作纹理的图像越多，速度就越慢。我确信有一种方法可以优化图形，但我还不知道。从尝试解决这个问题开始。

于 2012-10-20T19:29:12.900 回答