Line2NodeMaterial and vertexNode

Questions
1

Hi community!

Recently, I bumped into something, which I don’t know how to identify: a bug or a feature.
I tried to modify vertexNode of Line2NodeMaterial, but it seems, that no matter what function you apply for that node, it will be ignored, and default functionality will be used.

Example: https://codepen.io/prisoner849/pen/wBaZQKJ?editors=0010
Lines 28-36:

    let m = new THREE.Line2NodeMaterial({
      color: 0x888888,
      linewidth: 0.2,
      worldUnits: true,
      alphaToCoverage: true,
      vertexNode: tsl.Fn( () => { // something enigmatic
        return tsl.vec4(0, 0, 0, 1);
      } )()
    });

Any thoughts, advice or explanation on how to modify that node?

1 Like
2

It looks like Line2NodeMaterial is part of three.webgpu.js eg…

import * as THREE from "three/webgpu"; ?
Or
import {Line2NodeMaterial} from "three/webgpu"; ?

3

Yeah, I’ve seen its source code :slight_smile:
I simply followed that official example for fat line segments: three.js examples
And they instantiate that material without a specific import.

1 Like
4

I was working on a CPU-based rope simulation using Verlet integration, but someone released a flashier WebGPU-based version before I had the chance to publish mine, effectively making it obsolete :face_holding_back_tears:

Line2 extends InstancedMesh, so you’ll need to work with the instanced attributes rather than the standard vertex positions. Here’s a console.log output of a Line2 instance.

Screenshot from 2025-07-03 00-46-22
Screenshot from 2025-07-03 00-46-22543×426 53.9 KB

As you can see, the geometry uses instanced attributes. The instanceStart, and instanceEnd defines the positions of each segment.

To update them in your enigmatic (can’t wait for the wizardry you conjure up :eyes:) compute shader, I suppose you’ll have to wrap those attributes with a storage nodes.

Update: Not the most exciting update, but here goes…

After a closer look, Line2 uses an InstancedInterleavedBuffer, which, as far as I know, isn’t currently supported by the TSL implementation :face_holding_back_tears:

Update2: Couldn’t end my post with a bad new…

It doesn’t have to be an InstancedInterleavedBuffer, you could copy the attributes content into a StorageInstancedBufferAttribute than use it with the storage node :grinning_face:

1 Like
5

Yes, I know the structure of LineSegments2 (Line2 extends from it).
The reason I asked the question is:
When I do

      vertexNode: tsl.Fn( () => { // something enigmatic
        //return tsl.vec4(0, 0, 0, 1);
      } )()

then I expect, that I will see a black screen and/or a bunch of console errors. As I apply a function that returns nothing.
Instead, I’ve got a normally working scene with fat lines. And this is something enigmatic for me :thinking:

2 Likes
6

Got a bit lost in translation there. I thought you were working on something enigmatic!

Not sure if it’s related, but I’ve noticed the TSL compiler tends to do some cleanup. It sometimes rewrites or removes functions, especially if they’re unused or return void.

1 Like
7

Right after I figure out what I do wrong with that node :slight_smile:

1 Like