5 ms·

Show HN: WebApp to Create 3D Plants

144 points by jimfx 4y ago

kan02134 4y ago
Cool. Looks great.
jimfx 4y ago
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 :)
- SemanticStrengh 4y ago
  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 )
  - jimfx 4y ago
    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!
    - deleted 4y ago
      [deleted]
- deleted 4y ago
  [deleted]
- julienchastang 4y ago
  Cool! Is this an L-system implementation? [0] https://en.wikipedia.org/wiki/L-system https://en.wikipedia.org/wiki/L-system
  - jimfx 4y ago
    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...
- elevaet 4y ago
  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/ https://www.contextfreeart.org/). This would be their "DNA".
  - jimfx 4y ago
    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 :)
andygcook 4y ago
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.
- jimfx 4y ago
  Thank you :) I think a video tutorial is a good idea!
danielvaughn 4y ago
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.
- jimfx 4y ago
  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...
  - FinalBriefing 4y ago
    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!
    - jimfx 4y ago
      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 :)
  - danielvaughn 4y ago
    Being able to load from a selection of pre-built examples would go a long way.
    - jimfx 4y ago
      That is already available, under the projects tab there is an import button!
      - danielvaughn 4y ago
        ahh good to know, thanks!
lmc 4y ago
I would suggest having the site open with one of the examples, rather than the blank canvas. Regardless, it's very cool!
- jimfx 4y ago
  Thanks for the feedback, that is a very good idea! Implementing right now!
  - maicro 4y ago
    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"...)
    - jimfx 4y ago
      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.
  - lmc 4y ago
    Nice!
brnaftr361 4y ago
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.
- jimfx 4y ago
  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!
jamesmcintyre 4y ago
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/ 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!
- Blahah 4y ago
  https://x6.antv.vision/ https://x6.antv.vision/ is the best I've found, but some of the docs still need the English improved.
- programmarchy 4y ago
  I've been on the prowl for libraries like this, too. https://rete.js.org https://rete.js.org also looked pretty good.
- jimfx 4y ago
  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!
  - WalterGR 4y ago
    Did you evaluate libraries before you decided to build your own? I'm curious what you found.
    - jimfx 4y ago
      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.
its_ethan 4y ago
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...
- jimfx 4y ago
  Ahh, I just tested the website with browserstack, it seems like Safari doesn't have window.structuredClone, fixing right now!
  - WalterGR 4y ago
    How does BrowserStack surface that information? As in, what does it look like? Wondering if I should sign up for it.
    - jimfx 4y ago
      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
      - WalterGR 4y ago
        Ah, okay. I was hoping that they automated error detection and reporting. :( For example, make available all console output, flagging errors.
programmarchy 4y ago
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?
- jimfx 4y ago
  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!
gareth_untether 4y ago
The node system reminded me of https://vvvv.org https://vvvv.org - very quick to prototype ideas and change parameters.
tonetheman 4y ago
brilliant stuff
- jimfx 4y ago
  :)
deleted 4y ago
[deleted]
NIL8 4y ago
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!
vmception 4y ago
can we download to a glb file?
- jimfx 4y ago
  At the moment only .obj, but .gtlf/.glb and .fbx are planned!

144 points by jimfx 4y ago

Cool. Looks great.

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

SemanticStrengh 4y ago
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 )
- jimfx 4y ago
  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!
  - deleted 4y ago
    [deleted]
deleted 4y ago
[deleted]
julienchastang 4y ago
Cool! Is this an L-system implementation? [0] https://en.wikipedia.org/wiki/L-system https://en.wikipedia.org/wiki/L-system
- jimfx 4y ago
  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...
elevaet 4y ago
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/ https://www.contextfreeart.org/). This would be their "DNA".
- jimfx 4y ago
  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 :)

andygcook 4y ago

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.

jimfx 4y ago
Thank you :) I think a video tutorial is a good idea!

danielvaughn 4y ago

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.

jimfx 4y ago
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...
- FinalBriefing 4y ago
  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!
  - jimfx 4y ago
    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 :)
- danielvaughn 4y ago
  Being able to load from a selection of pre-built examples would go a long way.
  - jimfx 4y ago
    That is already available, under the projects tab there is an import button!
    - danielvaughn 4y ago
      ahh good to know, thanks!

lmc 4y ago

I would suggest having the site open with one of the examples, rather than the blank canvas. Regardless, it's very cool!

jimfx 4y ago
Thanks for the feedback, that is a very good idea! Implementing right now!
- maicro 4y ago
  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"...)
  - jimfx 4y ago
    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.
- lmc 4y ago
  Nice!

brnaftr361 4y ago

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.

jimfx 4y ago
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!

jamesmcintyre 4y ago

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/ 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!

Blahah 4y ago
https://x6.antv.vision/ https://x6.antv.vision/ is the best I've found, but some of the docs still need the English improved.
programmarchy 4y ago
I've been on the prowl for libraries like this, too. https://rete.js.org https://rete.js.org also looked pretty good.
jimfx 4y ago
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!
- WalterGR 4y ago
  Did you evaluate libraries before you decided to build your own? I'm curious what you found.
  - jimfx 4y ago
    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.

its_ethan 4y ago

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

jimfx 4y ago
Ahh, I just tested the website with browserstack, it seems like Safari doesn't have window.structuredClone, fixing right now!
- WalterGR 4y ago
  How does BrowserStack surface that information? As in, what does it look like? Wondering if I should sign up for it.
  - jimfx 4y ago
    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
    - WalterGR 4y ago
      Ah, okay. I was hoping that they automated error detection and reporting. :( For example, make available all console output, flagging errors.

programmarchy 4y ago

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?

jimfx 4y ago
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!

gareth_untether 4y ago

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

tonetheman 4y ago

brilliant stuff

jimfx 4y ago
:)

deleted 4y ago

[deleted]

NIL8 4y ago

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!

vmception 4y ago

can we download to a glb file?

jimfx 4y ago
At the moment only .obj, but .gtlf/.glb and .fbx are planned!