A Model of Wire

[prisoner849]

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

[PavelBoytchev]

@prisoner849 –

It’s beautiful. Especially how the wires grow.

The result reminds me of various wire statues:

– Pavel

[prisoner849]

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

[PavelBoytchev]

Oops –

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

– Pavel

[jrlazz]

Wonderful… just need to talk

[Fennec]

@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.

[prisoner849]

@jrlazz Thanks

@Fennec Aww, thank you for kind words
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

[drcmda]

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

[gkjohnson]

Amazing work as always! 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 )

[Lawrence3DPK]

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

[prisoner849]

@Lawrence3DPK

doesn’t seem to load up on android

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

@Lawrence3DPK

i wonder if it would be possible to utilize the Web Audio API

Tried to combine the wire with AudioAnalyzer
Got this:

[Lawrence3DPK]

@prisoner849

Redmi mobile and on Samsung Galaxy Tab S7

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

@prisoner849

Got this:

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

[prisoner849]

@Lawrence3DPK Oops… Forgot to add the link to the sandbox I was playing in

musing-gwen-im7j3v - CodeSandbox

[Lawrence3DPK]

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

[trusktr]

Sweet demos!

@prisoner849

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.

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

LUME THREE.MeshLine - Shape example

[drcmda]

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

[trusktr]

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).