0

「threejs - クラウドの例」( http://mrdoob.com/lab/javascript/webgl/clouds/ ) に触発されて、Web サイトの背景用に 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);
}

ご協力いただきありがとうございます ：-）

4

2 に答える 2

4

Mr Doob のコードをざっと見てみると、役に立つかもしれない最適化がいくつかあることに気付きました。Doob 氏の例を調べると、彼の雲のテクスチャが 256 x 256 ピクセルの画像であるのに対し、あなたの画像は 800 x 800 であることがわかります。ここで考慮すべき点が 2 つあります。

まず、テクスチャ サイズに 2 の累乗を使用してみてください。つまり、256、512、1024 などです。これは、グラフィック カードがこれらのサイズのテクスチャ用に最適化されているためです。

次に、800 x 800 は実際に必要なサイズよりもはるかに大きい可能性があります。これは Mr Doob のデモが示しています。ほとんどの場合、テクスチャは半分以下のサイズに縮小されています。

Mr Doob のデモで際立っているもう 1 つの点は、彼がミップマップを使用していることです。ミップマップとは、グラフィックス カードがテクスチャの複数のバージョンを異なるスケールで事前にキャッシュし、常に現在のレベルに最も近いものを使用する場合です。これにより、テクスチャのスケーリングがより効率的になるため、それらをオンにすると少し速度が向上する場合があります。

あなたのコード:

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

ドゥーブ氏のコード:

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

WebGL の検出については、このスタック オーバーフローの回答を参照してください。

Three.js は webgl サポートを検出し、通常のキャンバスにフォールバックします

于 2012-10-23T09:54:29.737 に答える
0

私自身 Three.jS は初めてですが、コードを最適化するのはかなり問題があります。私が学んだことはほとんどありません。黒のフラッシュが気に入らない場合は、要素を追加する前にレンダリングしてください。ジオメトリとテクスチャをシンプルに保ちます。形状が複雑で、テクスチャとして使用される画像が多いほど、遅くなります。グラフィックを最適化する方法があると確信していますが、まだわかりません。その問題を解決することから始めましょう。

于 2012-10-20T19:29:12.900 に答える