Energy wave shader

Questions
, , ,
1

He llo my friends. I desperatly need your help. :smiley:
I have to create selective bloom like energy wave, something similar to yellow lines from example that I found on the internet https://codepen.io/prisoner849/pen/RwjQaeO

But lines should be thicker and some of them all over the place.
So for some of them I used THREE.TubeGeometry with CatmullRomCurve3 as given bellow:

const points = [];
    points.push(new THREE.Vector3(-10,-4.5,2));
    
    points.push(new THREE.Vector3(-1,-0.4,1));
    
    points.push(new THREE.Vector3(0.2,0.2,2));

    points.push(new THREE.Vector3(0.8,0.5,0.5));

    points.push(new THREE.Vector3(12,4,-2));

    let geometry = new THREE.TubeGeometry(new THREE.CatmullRomCurve3(points, false, "catmullrom", 0), 512, 0.001, 64, false);

const material = new THREE.MeshPhongMaterial({
        color: 0xffffff,
        shininess: 150,
        side: THREE.DoubleSide,
        vertexColors: false
    });
   const line = new THREE.LineSegments( geometry, material );
   line.computeLineDistances();
   scene.add(line);

But lines are neither white, neither have that wave effect, they just pulse from gray to white. I found out that vLineDistance paramether is what gives that wave, and that it is set with computeLineDistances() function but not for my geometry. And if I use THREE.BufferGeometry().setFromPoints(points) I get line that is not from point to point.

Please help me,
Thank you

2

Hi!
I would use TubeGeometry with LineSegments, if I’d want to have an object with strange structure only

image
image988×860 14.2 KB

Moreover, .computeLineDistances() doesn’t work on indexed geometries (TubeGeometry is of that type). But the using of LineSegments with a geometry that intended for meshes, expecting to see thick lines, this is something unusual.

Is there a picture of the desired result?

3

Here is an example, that demonstrates the using of approximate length of curve in shaders to achieve effect of dashed lines on tubes:

Picture:

image
image955×860 17.1 KB

Demo: https://codepen.io/prisoner849/pen/zYawQoy

1 Like
4

Hi thanks you all, I wind solution by using TubeGeometry from cutmullRomCurves for line, and for glow on the lines I use laser from following demo:

5

Is that THREEx stuff still compatible with the latest revisions of three.js? Haven’t used it for several years already )