Question

作为一种自学WebGL和Three.js的方式，我正在建立一个简单的演示/游戏。这个想法是这个版本的3D版本：https://www.youtube.com/watch?v=cYpE8-4_YBk&t=75s - 导航开头，不会崩溃。

我想要做的是创造一个动态的＆＃34;管＆＃34;使用动态计算的顶点，如下所示：

for ( var p = 0 ; p < LIMIT ; p++ ) {
  r = RADIUS + Math.random(); 
  let x = CX + (r * Math.cos(ANGLE));
  let y = CY + (r * Math.sin(ANGLE));
  let z = - ( p / DENSITY );
  let v = new THREE.Vector3( x, y, z );

  tube.vertices.push( v );

  tube.faces.push( new THREE.Face3( p, p-offset[0], p-offset[2] ) );
  tube.faces.push( new THREE.Face3( p, p-offset[2], p-offset[1] ) );

  // update calculation parameters
  CX += ( Math.random() - 0.5 ) * 0.1;
  CY += ( Math.random() - 0.5 ) * 0.1; 
  RADIUS += ( Math.random() - 0.5 ) * 0.1;
  if ( RADIUS < MIN_RADIUS ) RADIUS = MIN_RADIUS;
  if ( RADIUS > MAX_RADIUS ) RADIUS = MAX_RADIUS;
  ANGLE += INCREMENT;

}

我让它工作的地方是将顶点计算为静态网格，然后将其上传到GPU并向相机进行动画处理。还没有互动性。 https://codepen.io/jarrowwx/pen/gKraVm

下一步是让它无限。这意味着我将不得不采用不同的方式。

我能做到的一种方法是在数组中保留足够数量的顶点，随时计算新的顶点，足以弥补自上一个时间步以来的行进距离。然后，每隔一秒左右，重建面部阵列，并重建场景。但这意味着每秒一次，可能会有明显的滞后。

但是因为计算了所有顶点，所以在GPU上完成所有工作并避免首先传输数据的任务是有意义的。

如何在GPU上构建此数据结构，以便数据永远不必从CPU传输到GPU？然后，一旦你把它拉下来，当相机飞过它时，你如何不断地延长它？

如何在GPU上动态构造顶点几何体

0 个答案: