Three.js 顶点着色器中的复数运算

我正在开发一个双曲线图，用于可视化具有大量节点的树。这就是为什么我使用WebGL和ThreeJS库来提高性能。您可以在此处查看我迄今为止开发的内容：。这样做的目的是能够与图形交互：单击一个节点将图形置于该节点的中心，然后拖放鼠标将图形四处移动

我已经能够显示多达100.000个节点。但是，当您拖放大量节点时，性能会下降。我想这是因为现在我用JavaScript本身做所有的操作，然后更新我的THREE.PointCloud的顶点位置

在做了一些研究之后，我想到了在顶点着色器中直接对顶点本身执行操作的想法。以及以一致性或属性传递特定转换的参数。我认为这似乎是可行的，因此我想问：

• 这是不是正确的方法
• 在这种情况下，由于我应用的变换是复数函数，有没有办法在着色器本身中执行这种操作？ 方法就是进行数学变换：

---

所有的代码都是以防你想看到我如何执行任何特定的操作。当然，任何提示、想法和建议都是非常受欢迎的。

到目前为止，我已经成功地开发了相同的解决方案，执行顶点着色器中的所有操作。性能速率是相似的，所以我可能会回到使用JavaScript执行操作。然而，使用着色器进行实验是很有趣的，因此下面是顶点着色器的代码，以防它对其他人有所帮助

因此，首先要实现处理复数的函数（感谢）：

然后在顶点着色器中执行变换：

uniform vec2 t;

void main(){

  vec2 z = vec2(position.x,position.y);
  vec2 newPos = divide((z+t),(vec2(1.0,0) + product((conjugate(t)),z)));
  gl_Position = projectionMatrix * modelViewMatrix * vec4(newPos, 0, 1.0);

}

---

我没有看你是如何构建你的图的，但在我看来，你只是在显示heroku is中显示的随机图，正如你所说的，以100个节点的顺序。但为了生成它，可以修改一些变量（如深度和每个节点的子节点数），从而使总节点数发生变化。我做了一些试验修改这些变量，当性能下降到60 fps以下时，达到了10万个数量级。这个想法是在之后进行一些聚类，这样图形仍然可以被人类读取，但因此我必须在每次移动后计算每个节点的变换。这就是为什么我想在shaderI进行计算我想我正在解决这个问题的路上。我已经在使用着色器材质，现在正试图通过均匀贴图传递变换。对于复杂的操作，我看到了类似的东西，基本上在笛卡尔坐标系中执行操作：vec2cmult（vec2a，vec2b）{返回vec2（a.x*b.x-a.y*b.y，（a.x+a.y）*（b.x+b.y）-a.xb.x-a.yb.y）}@dabad1。首先，你有226次抽签。用谷歌搜索三条线，然后画一条线。看看这是否有帮助。2.每次鼠标移动都会实例化一个新的

Raycaster

。创建一个并重用它。3.确保您考虑如果顶点着色器修改了位置，您将如何进行拾取。非常感谢@WestLangley这真的很有帮助。我现在只定义一次光线投射器，并使用线条。这使我的表现提高了很多。但是，我想尝试在着色器中执行操作是否会平滑过渡（如果您现在查看示例，大约100k个节点，它渲染良好，但在拖动鼠标时会减少一点：您还可以增加深度（&depth=12）以渲染更多节点）。我不确定我是否理解你的第三个想法，你所说的选择是什么意思？

uniform vec2 t;

void main(){

  vec2 z = vec2(position.x,position.y);
  vec2 newPos = divide((z+t),(vec2(1.0,0) + product((conjugate(t)),z)));
  gl_Position = projectionMatrix * modelViewMatrix * vec4(newPos, 0, 1.0);

}