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

Question

我正在开发一个双曲线图，用于可视化具有大量节点的树。这就是为什么我使用 WebGL 和 ThreeJS 库来提高性能。您可以在这里查看我迄今为止开发的内容:http://hyperbrowser.herokuapp.com/ 。这个想法是能够与图形交互:单击一个节点使图形在此节点居中，然后拖放鼠标移动图形。

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

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

• 这是否是正确的方法
• 如果是的话，由于我应用的转换是具有复数的函数，有没有办法在着色器本身中执行此操作？ 方法只是进行数学转换:https://github.com/julesb/glsl-util

所有代码都在 https://github.com/vabada/hyperBrowser/ 中如果您想了解我如何执行任何特定操作。当然，我们非常欢迎任何提示、想法和建议。

Answer 1

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

因此，首先实现处理复数的函数(感谢 julesb ):

Define complex operations
#define product(a, b) vec2(a.x*b.x-a.y*b.y, a.x*b.y+a.y*b.x)
#define conjugate(a) vec2(a.x,-a.y)
#define divide(a, b) vec2(((a.x*b.x+a.y*b.y)/(b.x*b.x+b.y*b.y)),((a.y*b.x-a.x*b.y)/(b.x*b.x+b.y*b.y)))

然后在顶点着色器中执行转换:

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);

}