Drawing a cylinder between 2 boxes using shaders

I’m trying to move the following code into a vertex shader: https://jsfiddle.net/tfethwfe/54/

My ultimate goal would be to use instancing for those cylinders since I have many of them
so I’m trying to write the lookAt code in a shader. This is my current attempt:
https://jsfiddle.net/tfethwfe/65/

I just don’t understand how to use the distance between the 2 vectors to scale the cylinder
all the way between them.
Also, is it possible to eliminate the quaternion as a uniform and do it as well inside the shader?

Couldn’t you just merge the geometries (two boxes and the cylinder) into a single one and then use Instancing? I guess this would make things a little bit easier…

I’m afraid I cannot because each cylinder has it’s own data and I need to be able to select it individually.
Also, potentially I have many boxes and many cylinders (a graph) and each box can have multiple cylinders to other boxes so I cannot just combine those 3.

Okay, i’ve edited your fiddle: https://jsfiddle.net/tfethwfe/83/

As you can see, pos is now the midpoint between both boxes. The scale value is now scaleZ since you scale the geometry along the z-axis.

1 Like