Tetrahedra (fat lines, batching, texelFetch)

Hi community!

Picture:

Demo: https://j45eyl.csb.app/

These are Fat Lines. With a single geometry.
Each line in a group, that forms a tetrahedron, has the same index, that uses in shaders to get data from a texture (texelFetch) to compose a transform matrix.
Data to the DataTexture writes from matrices of an array of Object3D (see them as kind of proxy objects). The texture size is 4 x amount_of_tetrahedra, thus 16 floats (4 x vec4, full data from matrix4) per row.

Update #1
Conditional visualization of lines:

Demo: https://4mxncc.csb.app/

Update #2
LDraw-like edges of fat lines:

Demo: https://3ovk8l.csb.app/

22 Likes

Amazing work! Love this!

1 Like

@Lawrence3DPK Thanks :slight_smile:

2 Likes

This is beautiful!!

So just to make sure I understand: normally this would be slow if you were issuing draw calls for every edge (or every disconnected set of edges), but you’re able to batch things here because putting the model matrices into a texture?

Thanks :slight_smile:

Correct :slight_smile: That’s the idea with DataTexture for matrices.

1 Like

This is super cool and super clever, and I’d never come up with it…

but for scenes like this how much more performant is it over batching or even better instancing?

SIDENOTE: These are the FIRST tubular lines I’ve ever seen working…

Most others are tube extrusions or even raymarched and I started to think it wasn’t practical to shade the lines…

Is that just an effect of the bloomPass or could you do a gradient across the fatLine width?

I just realized too “fat lines” may be a “meshline” so maybe that’s why.

I have this “Neon” project super shelved, but I have to use tubes to get the shading right.
All the Line and FatLine setups always render the lines flat…

Thanks :slight_smile:

These are batched instances already.

Not tubular, but they have rounded ends.

They have UV coordinates, but I’ve got no idea how to use it for correct shading.

Specifically for the approach in three.js, they are Mesh with InstancedBufferGeometry.

Since r139, there is CapsuleGeometry.

Oh interesting, I thought you were pushing them onto a dataTexture and then doing the rebuild/processing yourself vs using instancedDrawing or more basic like InstancedBuffers.

I should have been clearer they are “pseudo tubes” where a gradient coloring implies the form.

Vs a tube geometry extruded along the path.

Fatlines have UVs?

What kind of mesh is it? A triangle fan or something?
Clearly I need to read more haha.

The capsule is great, Gsimone got that up quick!

I’m thinking though to do something like your tube endcaps demos floating around and merge geometry with the spherical endcaps.

That way it can still move/be flexible following a spline/etc

Looking at this: three.js/examples/jsm/lines/LineSegmentsGeometry.js at f54eb5b0bf7baa7132acc26c799bbb16bda136a8 · mrdoob/three.js · GitHub
Fat Lines’ geometry is kind of a PlaneGeometry(2, 3, 1, 3).translate(0, 0.5, 0)

Very cool. Is it possible to do dynamic selective outlines and hover effects with this approach?