Show HN: Simulate 3D plants in the browser
439 points
1 year ago
| 22 comments
| plant.max-richter.dev
| HN
MrLeap
1 year ago
[-]
This is so useful and nice for so many reasons.

A well written browser based node graph editor that can create procedural 3d meshes _and_ export as .obj _and_ you've permissively licensed it. This could be the seed for a whole host of procedural tools. Thank you Jim.

reply
jimfx
1 year ago
[-]
Thank you so much :)

I have a lot of ideas for further usecases for this tool, and I am probably going to write my bachelor thesis about it :)

reply
NelsonMinar
1 year ago
[-]
I'm impressed with the complexity here. For folks wanting to take it for a quick spin... The tutorial is great but takes a few minutes to get to the fun. Instead just play with the sliders in the right pane and see how it modifies the fern. Also click library and load some other models to see what it can do.

You can tell this is brand new because there are no penises to load in the user submitted models yet.

reply
jimfx
1 year ago
[-]
I am currently away from home, don't have access to my pc and just saw that the post gained some traction. I am crossing my fingers ;)
reply
Tiberium
1 year ago
[-]
Looks very nice, one small problem - when I change the values, the camera seems to "shake" because the shape of the plant changes, so it has to constantly readjust, and it's kind of annoying (at least for me). Maybe it could be possible to freeze the camera while the parameters are being changed?
reply
jimfx
1 year ago
[-]
Very good feedback, I should probably add a debounce to the automatic centering of the camera :)
reply
andrewflnr
1 year ago
[-]
Probably best to animate the camera change afterward when it relaxes, too...
reply
hx2a
1 year ago
[-]
This is a neat project but it doesn't seem to render the plant at the moment. It did render plants 20 minutes ago - perhaps the HN load has hurt it?

All of the code is available online, with great documentation. There is, in fact, a server back end for this project:

https://github.com/jim-fx/plantarium/tree/main https://github.com/jim-fx/plantarium/blob/main/ARCHITECTURE....

I will be back in a few days when it is working again.

reply
djsavvy
1 year ago
[-]
It’s back up
reply
baalimago
1 year ago
[-]
I did something similar a year ago where I wanted to try out Rust as a webapp engine (compile to wasm -> host on rust webserver): https://blomma.lorentz.app. Although yours is miles better on the productification station, cudos! The real selling point is the nodegraph editor, blends really well to the workflow and brings it down from a debugging tool to a product which may be used by anyone.

Only improvement mine has is bezier curves, for both the leaf shape and stem shape. It was (to me) quite a challenge to get both the topology and triangulization right, but a great intro to quaternions and nice refresher on trigonometry. I'd recommend giving a bezier curve node a go.

reply
jimfx
1 year ago
[-]
That's super cool! And thank you for the nice words :)

A rust/Wasm rewrite of the geometry generator is very much on the roadmap. Currently getting my feet wet with rust during advent of code.

reply
phito
1 year ago
[-]
That is extremely cool! I like the stem 'thiccness' parameter :)
reply
jimfx
1 year ago
[-]
Thanks :) In my opinion we programmers tend to take our projects/ourselves too seriously so I like to add some sillyness here and there
reply
20after4
1 year ago
[-]
I really love this!

A couple of suggestions for usability improvements:

1. Drag handling is buggy when I accidentally move the mouse outside of a box and then release. In that case it doesn't notice a mouse-up and the parameter gets stuck in the mouse-down state. Makes it difficult to draw in the leaf editor or to modify parameters by dragging them like sliders. Probably just need to register the mouse-up event handler on a common ancestor instead of the graph node editor boxes.

2. The little parameter "port" circles for dragging connections are a bit small, especially when zoomed out where you can see a significant portion of the whole scene. Usability would be improved by making them bigger (at least 25%?). It might just be the hit area that needs to be larger, not necessarily the graphical element.

Note: I'm using Firefox. Just tested in chromium and the mouse handler problem happens there as well but dragging to connect nodes seems a bit more usable in chromium.

reply
jimfx
1 year ago
[-]
Thanks for the Feedback!

I tend to get blond to those small usability bugs, so it is very valuable.

Should both be fixed in the coming days :)

reply
ninju
1 year ago
[-]
For those that did not know (like myself), you can slide the right hand panel to expose more parameters/controls
reply
seism
1 year ago
[-]
Fantastic. I can't wait to see a whole forest of crowdsourced algorithmic plants. Is this connected to any scientific projects? A cool feature would be an AI botanist that tells you how likely your plant would survive, what's the closest taxonomic reference, a nice recipe to go along with boiled rice,...
reply
jimfx
1 year ago
[-]
One of my ideas is to build a virtual garden where your plants can grow and you have to take care of them tamagotchi style :)

Not connected to any scientific projects, just a nerd that likes plants. But projects can have a gbif.org id and then some extra information is loaded through the gbif api :)

reply
illegalmemory
1 year ago
[-]
Brilliant ! If you could also add a "time" node , it would even allow for some basic animations. Lovely project overall.
reply
jimfx
1 year ago
[-]
That is a nice idea! The tricky part is going to be how to integrate animations without having to rebuild the entire mesh every frame... Though, I think it would be very easy to export a skeleton from the generator and then use that to animate the plant.
reply
i_am_a_peasant
1 year ago
[-]
As far as I can tell this uses WebGL, I wonder if you could get these results just as easily using WebGPU
reply
jimfx
1 year ago
[-]
Yup, I use github.com/oframe/ogl, which makes webgl a bit mor usable for the average programmer. You could also probably achieve the same thing with webgpu, but for the time being i have not yet had a reason to switch :)
reply
i_am_a_peasant
1 year ago
[-]
Awesome. I think I will switch from rust to typescript on the front end and do something similar in WebGPU. Before I did some wasm stuff with the wgpu crate but the fact that wasm can't reach the DOM is a bit of a headache and the gains in performance from WASM seem to be offset by the fact that I still need to create a sort of communication channel between wasm and js if I want my 3D app to talk to a websocket.

Your project is very motivating thank you for making this!

reply
i_am_a_peasant
1 year ago
[-]
Update: I'm I'm just gonna use webgl too. WebGPU seems to be nowhere near a usable state if you're a Linux user, they seemed to have focused more on ChromeOS, MacOS and Windows first so far, with Linux support to be released sometime in the future. Apparently with WebGPU you're better off on native now, and the wasm target just uses the webgl backend ;D
reply
spacecadet
1 year ago
[-]
Super cool! Ive been building some 2D simulations using Pygame lately, so enjoy a good simulation project!
reply
deLta30
1 year ago
[-]
What did you learn to make this?
reply
jimfx
1 year ago
[-]
I learned a lot about webgl and procedural geometry in the process of making this :)
reply
botanical
1 year ago
[-]
This is really well done. And it works well in Firefox too
reply
jimfx
1 year ago
[-]
Plantarium was also developed in Firefox ;)
reply
ur-whale
1 year ago
[-]
The graph editor is really, really well done, congrats.
reply
jimfx
1 year ago
[-]
Thank you so much, I love graph/node editors :)
reply
uoaei
1 year ago
[-]
What makes this a simulation and not just a model?
reply
Daub
1 year ago
[-]
I guess because it is procedurally based, likely using an L-system.

https://en.m.wikipedia.org/wiki/L-system

We use things like this in 3D art and animation. For example the paint system in Maya. This was used to create the forests in Shrek.

Question to OP… have you considered making this available as a Blender plugin?

reply
jimfx
1 year ago
[-]
You're right that it is procedurally based; however, I have not yet implemented L-Systems. I am a long-time Blender Nerd, and if you look in the GitHub repository, there is an ideas/blender-plugin.md file since last year. Unfortunately, I haven't found time to start building it since I spend most of my time trying to get my startup off the ground.
reply
Daub
1 year ago
[-]
> I have not yet implemented L-Systems.

Regardless, what you have produced is kick ass. L-syetm or not, it demonstrates the complexity of nature.

reply
uoaei
1 year ago
[-]
That wouldn't make it a simulation, it's just a different way to generate 3D representations.
reply
Daub
1 year ago
[-]
I teach 3D modeling, and also procedural animation and simulation. The last two I would class as being the same.

3D modeling I would define as being fundamentally intentional. Want a particular form? Make it as according to your intention!

Procedural modeling animation/simulation I would define as being 'overseen' by a mathematical algorithm.

In the case of the former, the artist has complete control over every aspect of the outcome.

In the case of the latter, the artist has limited control. Want to change the direction of that simulation-defined particle? Or that branch of that L-system generated tree? Good luck.

The advantage of a procedural approach is that it can realistically emulate the complexity of nature (which is beyond an intentional approach). Hence it's favor in those artists who are interested in nature.

reply
uoaei
1 year ago
[-]
"Simulation" is a term that has been appropriated by artists but it refers to something much more rigorous in the parlance of the domains featured here on HN. Unless your plant is growing, uptaking nutrients, inhaling CO2 and exhaling O2... unless it can die from dehydration it is not being simulated.

What is presented in OP is a model of the morphology of plants implemented in an L-system. Model has no such fealty to actual physical dynamics. To call them simulations however either grossly misunderstands computational science or the very nature of how plants grow.

reply
jimfx
1 year ago
[-]
I think you would be right that simulation was a bit misleading. In my experience, a simulation is related to time, and updated in discrete time steps. Maybe "Procedural Generation" would be a better term...
reply
fb03
1 year ago
[-]
Wow. Sending this to a bunch of tech art friends
reply
catapart
1 year ago
[-]
Amazing! I love how immediate, and straightforward it is. Easy to understand and fun to play around with!
reply
robertlagrant
1 year ago
[-]
Great tutorial as well.
reply
jimfx
1 year ago
[-]
Thanks :) That came from some feedback I got the last time I posted this project to hn
reply
owenpalmer
1 year ago
[-]
The model visualizer is beautifully nostalgic... somehow.
reply
owenpalmer
1 year ago
[-]
Reminds me of games from my childhood :)
reply
Nition
1 year ago
[-]
It vaguely reminds me of the fractal tree generator that was in some versions of Microsoft Encarta.
reply
eternityforest
1 year ago
[-]
That is amazing, they really look like plants!
reply
jimfx
1 year ago
[-]
Thank you so much!
reply
drumttocs8
1 year ago
[-]
Very cool!
reply