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

}

顶点着色器中复数的运算

1 个答案: