我正在开发一个双曲线图以可视化具有大量节点的树。这就是为什么我使用WebGL和ThreeJS库来提高性能的原因。您可以在此处检查我到目前为止所开发的内容：http : //hyperbrowser.herokuapp.com/。这个想法是为了能够与图形交互：单击一个节点，图形将在该节点中居中，然后通过拖放鼠标来移动图形。
我已经能够显示多达100.000个节点。但是，当您使用如此大量的节点进行拖放时，性能会下降。我认为这是因为现在我使用JavaScript本身进行所有操作，然后更新THREE.PointCloud的顶点位置。
经过研究后，我想到了在“顶点着色器”中直接对顶点进行操作的想法。并以制服或属性传递用于特定转换的参数。我认为这似乎可行，因此我想问：
所有代码都在https://github.com/vabada/hyperBrowser/中，以备您查看我如何执行任何特定操作时使用。当然，任何提示，想法和建议都非常受欢迎。
到目前为止，我已经设法开发了在顶点着色器中执行所有操作的相同解决方案。性能速率是相似的，因此我可能会回到使用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);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句