A Model of Wire

Hi community!

Picture:

Video:

Demo: https://codepen.io/prisoner849/full/eYjpXXe

Another effect I’ve been thinking about for years.
The idea: using Raycaster, take points on a model, then build curves from these points, write the data of the curves into DataTexture, use the texture as a source for instances of cylinder to have wire.

For faster raycasting, used three-mesh-bvh
Modified CurveModifier for the wire.

Background pattern: LineSegments of InstancedBufferGeometry.

PS Curves build slightly different every time you run the codepen, so the result varies from pretty nice to weirdly creepy :sweat_smile:

20 Likes

@prisoner849

It’s beautiful. Especially how the wires grow.

The result reminds me of various wire statues:


– Pavel

2 Likes

@PavelBoytchev Thanks :slight_smile:
Yeah, I think, that similar pics became the source of inspiration.

1 Like

Oops –

Forgot to add a link to the fiberbots: Neri Oxman's swarm of Fiberbots autonomously build architectural structures - YouTube

– Pavel

1 Like

Wonderful… just need to talk :smile:

1 Like

@prisoner849 As usual, this is beautiful. Even though I know I’ll never catch up, with every demo you raise the bar a little higher, it’s always a pleasure to study your work. At this point, I surprise myself checking this board for your next demo, like if I was looking for the upcoming episode for some Netflix show … Thank you for inspiring us.

2 Likes

@jrlazz Thanks :slight_smile:

@Fennec Aww, thank you for kind words :handshake:
To be honest, I don’t think I do something extraordinary. I just try to fulfill my thoughts, ideas and dreams about some effects, combining the things, that built by people way smarter than me (three-mesh-bvh, CurveModifier, and all the other stuff, that the framework has).
Big thanks to all in the three.js community :v:

2 Likes

the glowing eyes are a bit much :sweat_smile: but this is an amazing effect

1 Like

Amazing work as always! :heart_eyes: Love the animation, as well.

One small comment is that on my Mac the render resolution is lower than it could be. Adding these lines gives a nice 1:1 pixel perfect render resolution:

    this.finalComposer.setPixelRatio( window.devicePixelRatio )
    renderer.setPixelRatio( window.devicePixelRatio )
1 Like

really beautiful work! the codepen example doesn’t seem to load up on android but none the less it’s lovely!

i wonder if it would be possible to utilize the Web Audio API in conjunction with the growth of the cylinders to make them grow based on a dynamic input somehow

Hmm… Works for me on Redmi mobile and on Samsung Galaxy Tab S7 (both are android, used Chrome)

Tried to combine the wire with AudioAnalyzer
Got this:

1 Like

ok maybe i need to try again, using p30 here, not sure why it wouldn’t work, i’ll try again and get back to you

amazing so it could work, i’m thinking with some audio API filters and use of the frequency fourier transform, time and frequency could be linked to different tube sections based on frequency analysis and a time coefficient, this could also add a random deviation to the path of the tubes somehow… i’m just throwing random ideas but i could see really neat patterns being created from sounds that a user could interact with to build wierd and wonderful “sculptures” with

@forerunrun Oops… Forgot to add the link to the sandbox I was playing in :sweat_smile:

1 Like

that’s awesome, as a starting building block this demo demonstrates the idea really well.
i love how when you zoom into the array there’s a really neat little wobble that happens on the geometry

Sweet demos!

There’s actually a meshline demo similar to that idea, making the lines with raycasting:

2 Likes

btw since we’re here, meshline is a great library, but had some maintenance issues. for a while studio utsuboco cared for it, now transferred here and it’s alive and well: GitHub - pmndrs/meshline: 🪱 Mesh replacement for THREE.Line

1 Like

Indeed meshline hasn’t been maintained for a while. I saw that nice fork too.

I forked to LUME - A CSS3D/WebGL UI toolkit. because I wanted to make opinionated changes (f.e. using @lume/cli for build management, total refactoring of setPoints for performance, and will change breakingly to geometry shading (later WebGPU compute shading) to avoid expensive GPU uploads for point animation).