[HN Gopher] Show HN: WebApp to Create 3D Plants
       ___________________________________________________________________
        
       Show HN: WebApp to Create 3D Plants
        
       Author : jimfx
       Score  : 86 points
       Date   : 2022-05-20 17:07 UTC (5 hours ago)
        
 (HTM) web link (plant.jim-fx.com)
 (TXT) w3m dump (plant.jim-fx.com)
        
       | its_ethan wrote:
       | 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 wrote:
         | Ahh, I just tested the website with browserstack, it seems like
         | Safari doesn't have window.structuredClone, fixing right now!
        
           | WalterGR wrote:
           | How does BrowserStack surface that information? As in, what
           | does it look like?
           | 
           | Wondering if I should sign up for it.
        
             | jimfx wrote:
             | 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 wrote:
               | Ah, okay. I was hoping that they automated error
               | detection and reporting. :( For example, make available
               | all console output, flagging errors.
        
       | jimfx wrote:
       | 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 :)
        
         | [deleted]
        
         | julienchastang wrote:
         | Cool! Is this an L-system implementation?
         | 
         | [0] https://en.wikipedia.org/wiki/L-system
        
           | jimfx wrote:
           | 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...
        
         | SemanticStrengh wrote:
         | 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 wrote:
           | 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]
        
       | danielvaughn wrote:
       | 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 wrote:
         | 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 wrote:
           | 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 wrote:
             | 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 wrote:
           | Being able to load from a selection of pre-built examples
           | would go a long way.
        
             | jimfx wrote:
             | That is already available, under the projects tab there is
             | an import button!
        
       | lmc wrote:
       | I would suggest having the site open with one of the examples,
       | rather than the blank canvas.
       | 
       | Regardless, it's very cool!
        
         | jimfx wrote:
         | Thanks for the feedback, that is a very good idea! Implementing
         | right now!
        
           | maicro wrote:
           | 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 wrote:
             | 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 wrote:
           | Nice!
        
       | brnaftr361 wrote:
       | 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 wrote:
         | 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 wrote:
       | 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!
        
         | programmarchy wrote:
         | I've been on the prowl for libraries like this, too.
         | https://rete.js.org also looked pretty good.
        
         | jimfx wrote:
         | 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 wrote:
           | Did you evaluate libraries before you decided to build your
           | own? I'm curious what you found.
        
             | jimfx wrote:
             | 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.
        
               | WalterGR wrote:
               | Cool. Looks great!
        
         | WalterGR wrote:
         | > 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.)
        
           | jimfx wrote:
           | I am very creative in naming!
        
         | Blahah wrote:
         | https://x6.antv.vision/ is the best I've found, but some of the
         | docs still need the English improved.
        
       | programmarchy wrote:
       | 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 wrote:
         | 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!
        
       | andygcook wrote:
       | 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 wrote:
         | Thank you :) I think a video tutorial is a good idea!
        
       ___________________________________________________________________
       (page generated 2022-05-20 23:00 UTC)