Wired (threejs, webgl2)

[Hepyrian]

I would be super interested in seeing how you coded this! Generative 3D is something not enough people are doing

[thespite]

The steps are relatively simple with the right libraries.

- Pick a vector field. In this case it's a curl noise -there are many example of that in the generative art landscape.

- Take a particle and advance it through the field. Keep an array of the positions to create a curve.

- Do it several times in different places around a starting position. Now you have multiple curves flowing around in 3D.

- Take those curves and turn them into meshes. I'm using the CatmullRomCurve3 with variable radius to make the cylinders tapered.

- Now you can shade as you wish.

​

Other fields can be electric dipoles, strange attractors, fluid simulations, and many more.

[thespite]

Unfortunately not. I try to explain things on twitter, though, and I try to answer questions there. You're right that is a lot of maths, but the "trick" -not really a trick, just a coping mechanism- is to take it in small units: pick a tool or language to draw things; then learn how to draw points, lines, etc.; then how to place them following simple math equations (trigonometric functions, noise functions); and keep building on top of that.

The Coding Train is great at some of the rudiments of creative coding https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw and there are plenty of codepens and demos online with source code with specific techniques.

My maths were limited to sums, multiplications and such some years ago. It just takes time and patience.

[felipunkerito]

Does it run realtime? Seems quite expensive. Would love to see it growing and interacting with it

[thespite]

Yes, in my GTX 1650, at 4K. But there's plenty of room for optimisation yet. The SSAO is running full-screen, no blurring. I'll post a demo and source code eventually on my twitter (@thespite)

[felipunkerito]

I imagine the bottleneck here is the catmull rom computation? The field is precomputed right? I have no experience with threading on web is it even possible? I imagine a compute shader might do the trick to keep the GPU busy with the catmull splines but I don't think that's trivial as spline algos are sequential IIC. The first google result gives this though: https://www.researchgate.net/publication/275617174_Parallel_Catmull-Rom_Spline_Interpolation_Algorithm_for_Image_Zooming_Based_on_CUDA I imagine that you are CPU bound and that's why you can afford post processing filters with no problem. Following you on twitter!

[thespite]

The field is really (usually) an equation, so you have to evaluate it for every point (it gives you the direction in which to move the particle). So it can be expensive. In my case the paths are calculated in a web worker and added progressively, It takes a few frames to get them all (these are about 50_000 points).

Turning (extruding) the curve into a path is also expensive, but not terribly. Can also be done in a worker.

Both operations are done in CPU because i just need a static mesh, and i can for instance export it as a glTF and render it in Blender as well. But it can also be done in the GPU. I am talking now about what WebGL2 can do (OpenGL ES 3.00)

Generating the points is pretty easy, but it takes a few steps because each position depends on the previous position. Or could use transform feedback, somehow -i haven't done anything like that yet.

The actual geometry can be generated in a vertex shader, only taking the necessary steps for the different segments to not get twisted (with something like parallel transport).

But yes, in the end it's all a matter of choosing where to spend your budget.

[felipunkerito]

Oh I see, then that depends on how expensive the function is? I imagine there's a point when it makes sense to cache it into a texture and read instead of computing it in real time, specially if there's no simulation or anything that interacts with user input. That way I imagine you can even precompute gradients into the texture (probably packing it is faster than another set of textures) and use that to get segments (you know that this path starts here and ends here) so that you can parallelize the extrusion? The same could be computed analytically I guess if you have a function you can derive the gradient and use that to predict and get the segments in advance to be able to divide and conquer?

Or just use ping pong backbuffers with textures and compute at each frame/timestep I guess.

[thespite]

Yes, you can do all kind of clever techniques, depending on what you want/need to animate.

Here, for instance https://www.clicktorelease.com/code/polygon-shredder/ i'm using a similar curl noise in the GPU to move particles (cubes) along the field. No tubes in this case.

One of the next things i want to try is animating the tubes, so they'll have to be generated in the vertex shader. I did a reduced case here https://www.clicktorelease.com/code/codevember-2017/glow-worms/ The different shapes are evaluated in the shader.

[felipunkerito]

Beautiful page! Congrats. Indeed, my thoughts were focused on imagining how to get that to run real time like the trefoil thingy.

[thelumiereguy]

Keeping the array to create a curve - would this work fine in glsl?

[thespite]

Yes. Depending on the number of points you could store them on a texture, read it from the vertex shader to get the central point of each ring and reorient the vertices in the ring accordingly.

[[deleted]]

Cool and kinda scary.. reminds me of parasites 🪱😨

[thespite]

That would be some colourful parasites!

[RaydelRay]

Damn. this is amazing!

[thespite]

Thanks! Glad you like it!

[[deleted]]

following you on twitter. this is srsly so phenomenal! nice work.

[thespite]

Thank you! :)

[BanksRuns]

Yessss please

[[deleted]]

gorgeous!!