2013-02-11 52 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

相关问题