THREE.js 根据 mp3 中的数据改变平面的顶点

Question

所以我被卡住了一段时间，因为我一直无法根据 mp3 的频率数据动态更改位置几何形状中的顶点形状，我遇到了两个主要问题：

1) mp3 生成的数组值太多，无法快速渲染出顶点，因此，我正在使用此代码获取频率数据。

var frequencyData = new Uint8Array(analyser.frequencyBinCount);

2) 每次频率数据更改时重新渲染平面会导致极端的性能问题，以至于它不再渲染出来

我一直在使用单纯形噪声来使顶点变形，并且它确实有效，直到显然我传入频率数据并且一切都中断了，这是我试图用来变形平面顶点的代码听音乐。

function adjustVertices() {

      for (var i = 0; i < 100; i++) {
          for (var j = 0; j < 100; j++) {
              var ex = 0.5;
              pgeom.vertices[i + j * 100].z =
                  (noise.simplex2(i / 100, j / 100) +
                      noise.simplex2((i + 500) / 50, j / 50) * Math.pow(ex, frequencyData[2]) +
                      noise.simplex2((i + 400) / 25, j / 25) * Math.pow(ex, frequencyData[2]) +
                      noise.simplex2((i + 600) / 12.5, j / 12.5) * Math.pow(ex, frequencyData[2]) +
                      +(noise.simplex2((i + 800) / 6.25, j / 6.25) * Math.pow(ex, frequencyData[2]))) /
                  2;
              pgeom.verticesNeedUpdate = true;
              pgeom.computeVertexNormals();
          }
      }

  }

这是我的平面对象：

var pgeom = new THREE.PlaneGeometry(5, 5, 99, 99);
 var plane = THREE.SceneUtils.createMultiMaterialObject(pgeom, [
 new THREE.MeshPhongMaterial({
  color: 0x33ff33,
  specular: 0x773300,
  side: THREE.DoubleSide,
  shading: THREE.FlatShading,
  shininess: 3,
}),
]);



 scene.add(plane);

非常感谢大家的帮助，我只是在努力掌握three.js :)

Answer 1

我会检查 computeVertexNormals 是否是该渲染循环中花费最多的时间，然后考虑优化它，如果您仍然需要它。

您可以通过在启动时构建一次网格拓扑来优化正常计算，因为它在运行时不会改变，从而使重新计算在恒定时间内运行。

然后减少顶点数，直到事情变得易于管理。 :)

Answer 2

第一个答案是正确的。最有可能计算顶点法线导致命中，并且最有可能发生这种情况是因为您似乎正在使用的Geometry 方法创建了很多new THREE.Vector3。如果您对此进行分析，我想您会看到很多 GC 活动，而不是太多的计算时间。

由于您只映射一个变量，需要考虑的另一件事是在着色器中移动此计算。您可以将您的值写入纹理并仅对其进行更新。您不必刷新比仅存储输入变量所需的纹理大得多的顶点和法线缓冲区。您还可以并行执行此计算。