Show HN: WebApp to Create 3D Plants | Hacker News Reader

Show HN: WebApp to Create 3D Plants

plant.jim-fx.com

144 pointsjimfx46 comments

First thing I noticed was the awesome node ui and went to your package.json to see what library you used... nope, you made your own, lol. Awesome! I've been looking for a good react/js node-graph library with a lot of customization around nodes/edges and good hierarchical auto-layout and the best I've found so far is https://reactflow.dev/ but some of the features I need are behind a pro-license. I hadn't considered trying to write my own, it doesn't seem like a trivial task, lol. Anyway, awesome work on this app!

https://x6.antv.vision/ is the best I've found, but some of the docs still need the English improved.

I've been on the prowl for libraries like this, too. https://rete.js.org also looked pretty good.

Thank you! It was definitely not a rational decision implementing my own node system, but I wanted to explore how they work and what challenges there are to solve.

The most difficult thing was definitely the positioning of the connections and the scaling/transforming and converting between global coordinates and local coordinates.

Would recommend trying it though, it was a lot of fun!

Did you evaluate libraries before you decided to build your own? I'm curious what you found.

I looked shortly at Rete.js but for some reason it did not immediately click for me? And I was already thinking about how to implement it myself, so I just did that.

Cool. Looks great!

> nope, you made your own

The author calls it Nodesystem. The code is here:

https://github.com/jim-fx/plantarium/tree/main/packages/node...

(I went looking for the code so I thought I'd share this.)

I am very creative in naming!

Hi HN :) I created a web app to create parametrized 3D models of plants. It's open source and build with svelte, typescript, ogl and nest.js. Feedback on UI/UX or code is very welcome :)

It's a very cool project. However I'm lazy and untalented at this, it'd be nice if we could see public creations or at least share with us some of your creations (and we can import them )

A public gallery is very much on the roadmap, right now you can export and import projects as .json files and there are some examples you can import, the ui is a bit rough though...

I definitely want Plantarium to accommodate users who just want to play around, so that is valuable feedback!

Cool! Is this an L-system implementation?

[0] https://en.wikipedia.org/wiki/L-system

Nope, not really, some people mentioned L-Systems maybe in the future I will implement them in Plantarium. For me, they always seemed a bit too mathematically and structured and not so natural...

This is very cool!

For years I've had a fantasy of building a sim game where you design plants, and then toss the seeds into the wind. The plants could then grow, in competition with other plants of the world for the environmental resources of sun, water, and maybe soil nutrients.

The plant design would probably be in a context-free grammar (inspired by https://www.contextfreeart.org/). This would be their "DNA".

This sounds like a super nice idea! I had a similar idea, where you could use an adversarial neural network that creates random plants, and you would have a fitness function that determines how well a plant survives...

And contextfreeart looks super interesting!

Thanks for the ideas :)

I love this. Definitely a bit unintuitive but you can fix that. I love parametric rendering - it would be amazing to see something like this fleshed out for all sorts of objects, enabling all sorts of interesting use cases.

Yup, I think this is one of the big issues right now, I am still experimenting with different tutorial types, another commenter mentioned a video walkthrough, maybe that is a good idea...

Making the Node menu visible at all times might help. Also, some pre-configured demos would be nice to explore what you can create. It's a really neat idea!

Yeah, i sort of decided against the menu being visible at all times, because I wanted to keep the UI as clean and simplistic as possible, but maybe that should be an option.

You can find some examples under projects>import.

And thank you for the feedback :)

Being able to load from a selection of pre-built examples would go a long way.

That is already available, under the projects tab there is an import button!

ahh good to know, thanks!

I would suggest having the site open with one of the examples, rather than the blank canvas.

Regardless, it's very cool!

Thanks for the feedback, that is a very good idea! Implementing right now!

Will poke around at this later, but it looks very cool at least X)

In addition to the default project - maybe also have a random/shuffle option (and consider having the default project randomized, or load from a set of curated random configurations). Maybe "random" could only be applied to parameters

And a slight bug report - the "[] Legend" box in the bottom right corner obscures error messages when a parameter "box" is missing a connection. I'd also consider having that highlight the specific node/box/etc. that's got an issue - if you make something very complex, you'll be scrolling around, zooming in and out, quite a bit to find the specific named object.

And a question - is there a way to delete an object?

(sorry if any of that sounded on the harsh side - was trying to provide constructive feedback with enough detail to be useful, but that length can come off "ranty"...)

Don't worry did not sound hard at all, thank you for the feedback :)

Good catch with the legend box! And highlighting the node with an error makes a lot of sense as well.

Yeah, you can delete a node by selecting it and pressing x.

Nice!

Really appreciate the project, plants were a pain point for me learning modelling, a couple of ideas:

Show the real node in render; for example, if you're altering branch nodes show some nodules in the render view informing about the chain they're altering. Probably redundant for advanced users who have better intuition of nodes.

Viewport behavior; If possible selecting from node or viewport. E.g. select leaf, branch, ... specifically from viewport and display "child" nodes. For certain nodes, like curve, perhaps allow direct viewport editing?

Local view; as above, but let users bring up those node chains in the viewport via hotkey.

Thank you for the feedback, that was actually super helpful.

Especially the idea of showing the connection between parts of the model and the nodes.

I am still working on the curve node, it is not really working the way i like it right now.

The local view is a fantastic idea as well!

This is very impressive! Could not get it to load on Safari for some reason, but worked great on Firefox. Also, have you played with Blender Geometry Nodes yet?

I am a huge blender nerd, so definitely! The development of this was 100% inspired by Jacques Luckes animation nodes.

Regarding safari, i just found out that window.structuredClone is not available in Safari, the fix should be out shortly!

Congratulations on the launch! I have to admit that I'm lost, even with having gone through the tool tip tutorials. Perhaps a quick video showing how the UI works would go a long way to helping plebeians like me to understand how this works.

Thank you :) I think a video tutorial is a good idea!

This is really impressive and not just the code. I like the UI, general site layout, and the fact that I don't have to weed through a lot fluff just to see what it is and how it works. Good work!

Am I doing something just totally wrong? I see no plants - on either the first example project or a new project following through the tutorial?

edit: I was using safari -- switched to Firefox and works now...

Ahh, I just tested the website with browserstack, it seems like Safari doesn't have window.structuredClone, fixing right now!

How does BrowserStack surface that information? As in, what does it look like?

Wondering if I should sign up for it.

BrowserStack is amazing for this, I just used the free tier, where you have like one minute with a remote safari session.

And can just open DevTools and look at the error. But it's a bit stressful because of the time limit

Ah, okay. I was hoping that they automated error detection and reporting. :( For example, make available all console output, flagging errors.

The node system reminded me of https://vvvv.org - very quick to prototype ideas and change parameters.