我正在尝试为我的网站背景创建webgl动画,灵感来自“threejs - Cloud exemple”(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);
}
感谢您的帮助: - )
答案 0 :(得分:4)
快速查看Mr Doob代码,我注意到一些可能对您有所帮助的优化。如果你检查一下Doob先生的例子,你可以看到他的云纹理是一个256 x 256像素的图像,而你的是800 x 800.这里有两件事需要考虑:
首先,尝试使用2的幂来表示纹理大小,即256,512,1024 ......这是因为显卡针对具有这些尺寸的纹理进行了优化。
其次,800 x 800可能比你真正需要的要大得多,正如Doob先生的演示所示。大多数情况下,您的纹理缩小到一半或更小。
在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 detect webgl support and fallback to regular canvas
答案 1 :(得分:0)
我自己是Three.jS的新手,但优化代码却很成问题。我学到的东西很少。如果您不喜欢黑色闪光,请在追加元素之前渲染。 保持几何和纹理简单。形状越复杂,用作纹理的图像越多,它就越慢。 我确定有一种优化图形的方法,但我还不知道。首先尝试解决这个问题。