2013-02-11 59 views
1

我正在使用移動攝像頭工作在Three.js中的環形3D starfield,但是在CPU上執行此操作對我的幀率不利。如果這能夠通過頂點着色器完成,那將是非常棒的。是否可以使用Three.js存儲着色器頂點位置到紋理中?

這是我想在着色器做的JavaScript代碼:

SW.Starfield = function (position, scene) { 
    var scale = 10000; 
    var particleCount = 2000; 
    var x, y, z; 
    var particles; 

    var material = new THREE.ParticleBasicMaterial({ sizeAttenuation: false, size: 1, color: '#FFFFFF' }); 
    var geometry = new THREE.Geometry(); 

    for (var i=0; i <= particleCount; i++) { 
     do { 
      x = Math.random() * scale - scale/2 + position.x; 
      y = Math.random() * scale - scale/2 + position.y; 
      z = Math.random() * scale - scale/2 + position.z; 
     } while (new THREE.Vector3(x, y, z).length()> scale/2); 

     geometry.vertices.push(new THREE.Vector3(x, y, z)); 
    } 

    particles = new THREE.ParticleSystem(geometry, material); 
    particles.dynamic = true; 
    particles.position = position; 
    particles.sortParticles = true; 
    scene.add(particles); 

    this.update = function(shipPos) { 
     for (i=0; i <= particleCount; i++) { 
      var particleVec = new THREE.Vector3().copy(particles.geometry.vertices[ i ]); 
      var shipVec = new THREE.Vector3().copy(shipPos); 

      if (shipVec.sub(particleVec).length() >= scale/2) { 
       particles.geometry.vertices[ i ].add(shipVec.multiplyScalar(2.0)); 
      } 
     } 
    } 
} 

如果我理解正確的話,我將不得不存儲星星的位置somwhow的紋理,使這個以着色器工作,因爲我不認爲你可以在這種情況下只用初始位置和方程來計算星星的新位置。如果你看看更新功能,應該清楚我的意思。

有沒有辦法在Three.js中做到這一點?我知道可以存儲顏色。也許我可以將位置編碼爲顏色,但位置可以具有比顏色更高的值,也可以具有負值。

回答

2

谷歌GPGPU和three.js。

網上有幾個例子。他們大多數都很老。

這裏是最近的一個:

http://jabtunes.com/labs/3d/gpuflocking/webgl_gpgpu_flocking3.html

three.js所r.56dev。

+0

完美!看看你的鏈接的來源,有一種叫做THREE.DataTexture()的東西。這應該夠了吧。謝謝西! – 2013-02-12 10:36:57

+0

你明白了。 --- – WestLangley 2013-02-12 10:46:33

+0

哦,順便說一句,謝謝你和Mr.Doob提供了這個非常棒的框架。目前,我正在研究關於three.js的第二本學士論文。保持良好的工作! – 2013-02-12 10:55:32

相關問題