How to display fat lines edges with instanced buffer geometry?

Questions
, ,
1

Hi all!

I have been trying for some time to display fat edges with instanced buffer geometry but nothing worked.

I am basically trying to mix those two examples: webgl_lines_fat, edges with instanced buffer geometry.

Could anyone help me to achieve this?

2

Here is what I got so far https://jsfiddle.net/7mo56kaL/147

I do not manage to find how to apply correctly the offset to each fat line.

3

LineSegmentsGeometry is InstancedBufferGeometry already.
It’s not possible to apply several levels of instancing to a geometry. :thinking:

4

Thanks for your reply.

I know LineSegmentsGeometry is InstancedBufferGeometry but it is not the issue.

I want to show the edges of several box instances with fat lines but I do not manage to change the position of each line based on the position of the instance associated.

Here is what I tried https://jsfiddle.net/7mo56kaL/147 , if you have any idea it would be great!

5

It means that each fat line in your box is an instance already.

6

Yes that is why I applied each offset to 12 instances of lines with:
geometry.setAttribute("offset", new THREE.InstancedBufferAttribute(new Float32Array(instOffset), 3, false, 12));

I managed to do it by thinking more about the number of instances.
What I was missing was the lineSegmentsGeometry positions that was a 72 length array (12 edges coordinates) instead of a 72 * 9 length array for my 9 box instances.

I duplicated the lines coordinates once for each box instance, it is a bit dirty: https://jsfiddle.net/68g5a0kh/53/
I will check if I can do something cleaner by reusing the coordinates instead of duplicating them.