Animasi WebGL saya lambat meskipun ada requestAnimationFrame()

Saya mencoba membuat animasi webgl untuk latar belakang situs web saya, terinspirasi oleh "threejs - Contoh Cloud" (http://mrdoob.com/lab/javascript/webgl/clouds/). Di komputer saya sepertinya cukup baik... Tapi untuk beberapa PC sangat lambat.

Apakah ada cara untuk lebih mengoptimalkan kode saya, dan mendeteksi jika kartu grafis tidak mendukung webgl?

Animasi saya (di latar belakang): http://wabeo.fr/?theme=auriga-7

Kode saya:

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);
}

Terima kasih atas bantuan Anda :-)


javascript canvas webgl requestanimationframe
person Willy    schedule 05.10.2012    source sumber
comment
Hai, yang di sana. Harap pertimbangkan untuk menandai jawaban sebagai benar. Orang-orang di situs ini akan sering menghabiskan banyak waktu untuk menjawab pertanyaan Anda, dan menandai jawaban sebagai benar sangatlah dihargai. Ini juga membantu menjadikan situs lebih baik, dengan mengarahkan orang ke informasi terbaik. Terima kasih.   -  person null    schedule 25.10.2012
comment
@null Dia tidak bisa karena mungkin belum ada jawaban yang benar. - Menurut saya, hal ini bergantung pada sistem yang menjalankan aplikasi Anda. Tidak ada yang dapat Anda lakukan jika sistem sudah ketinggalan jaman.   -  person Tom    schedule 20.05.2020

Jawaban (2)


arrow_upward
4
arrow_downward

Hanya dengan melihat sekilas kode Mr Doob, saya melihat beberapa optimasi yang mungkin bisa membantu Anda. Jika Anda memeriksa contoh Mr Doob, Anda dapat melihat bahwa tekstur awannya adalah gambar berukuran 256 x 256 px, sedangkan tekstur awan Anda berukuran 800 x 800. Ada dua hal yang perlu dipertimbangkan di sini:

Pertama, coba gunakan pangkat 2 untuk ukuran tekstur Anda, yaitu 256, 512, 1024... Ini karena kartu grafis dioptimalkan untuk tekstur dengan dimensi tersebut.

Kedua, 800 x 800 mungkin jauh lebih besar dari yang Anda butuhkan, seperti yang ditunjukkan oleh demo Mr Doob. Seringkali, tekstur Anda diperkecil hingga setengah ukurannya atau kurang.

Hal lain yang menonjol dalam demo Mr Doob adalah dia menggunakan mipmaps. Mipmaps adalah saat kartu grafis melakukan pra-cache beberapa versi tekstur pada skala berbeda, dan menggunakan versi terdekat dengan level saat ini pada waktu tertentu. Hal ini membuat penskalaan tekstur lebih efisien, jadi mengaktifkannya mungkin akan sedikit mempercepat Anda.

Kode Anda:

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

Kode Tuan Doob:

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

Mengenai deteksi WebGL, Lihat jawaban Stack Overflow ini untuk informasi:

Three.js mendeteksi dukungan webgl dan fallback ke kanvas biasa

person null    schedule 23.10.2012

arrow_upward
0
arrow_downward

Saya sendiri baru mengenal Three.jS tetapi cukup bermasalah untuk mengoptimalkan kode Anda. Beberapa hal yang saya pelajari. Render sebelum Anda menambahkan elemen jika Anda tidak menyukai kilatan warna hitam. membuat geometri dan tekstur Anda tetap sederhana. Semakin rumit bentuknya, dan semakin banyak gambar yang digunakan sebagai tekstur, maka semakin lambat prosesnya. Saya yakin ada cara untuk mengoptimalkan grafisnya, tapi saya belum mengetahuinya. Mulailah dengan mencoba memecahkan masalah itu.

person Naman Goel    schedule 20.10.2012