CODEWITHSUNDEEP
three.jsglslwebglshadervertex-shader
vabada
vabada

Reputation: 1814

Operations on complex numbers in vertex shader

I am developing a hyperbolic graph for visualizing trees with a large amount of nodes. That's why I am using WebGL, and the ThreeJS library, in order to enhance performance. You can check what I have developed until now here: http://hyperbrowser.herokuapp.com/. The idea is to be able to interact with the graph: clicking a node centers the graph in this node, and dragging and dropping the mouse moves the graph around.

I have been able to display up to 100.000 nodes. But when you drag and drop with such a big amount of nodes, performance drops down. I think that is because now I am doing all the operations with JavaScript itself, and then update the vertices position of my THREE.PointCloud.

After making some research I came up with the idea of performing the operations in the Vertex Shader, directly to the vertices itself. And passing the parameters for the specific transformations in either uniforms or attributes. I think this seems viable, thus I want to ask:

All the code is in https://github.com/vabada/hyperBrowser/ in case you want to see how I am performing any specific operations. Of course any tips, ideas and advice are more than welcome.

Upvotes: 2

Views: 4630

Answers (1)

vabada
vabada

Reputation: 1814

So far, I've managed to develop the same solution performing all the operations in the vertex shader. Performance rates are similar, so I'll probably go back to performing the operations with JavaScript. However, it was fun to experiment with shaders, so here is the code for the vertex shader, in case it helps someone.

So, first of all the implemented functions to work with complex numbers (thanks to 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)))

And then the performed transformation in the vertex shader:

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

}

Upvotes: 2

Related Questions