Show HN: simulação de plantas 3D no navegador

 (plant.max-richter.dev)
3 pontos por GN⁺ 2023-12-04 | 1 comentários | Compartilhar no WhatsApp
  • Plantarium é um sistema para montar plantas 3D com nós no navegador, e é necessário um output node para criar a planta final
  • A estrutura básica da planta é criada pelo nó Stem, e as entradas origin, height, thiccness, minThiccness e amount ajustam posição, altura, espessura e quantidade dos caules
  • A repetição e variação de valores ficam por conta dos nós Vec3 e Parameter, adicionando mudanças aleatórias aos valores padrão para que a planta pareça menos uniforme
  • As mudanças de forma são controladas pelos nós Rotate, Gravity e Noise, que recebem como entrada eixo e ângulo de rotação, modo de gravidade, tamanho e intensidade do ruído
  • As folhas são criadas com os nós Leaf, Shape e Instance e posicionadas ao longo do caule ou dos galhos, com possibilidade de definir tamanho, intervalo, quantidade, rotação e condições de profundidade

Saída final do grafo de nós

  • Todo sistema de nós precisa de um nó output para gerar o resultado final
  • output recebe a entrada plant e compõe o resultado completo da planta

Geração de caules e controle de posição

  • O nó Stem cria o caule principal da planta
    • _origin_: posição em que o caule será colocado; é possível conectar um nó vec3
    • height: altura do caule
    • thiccness: espessura do caule
    • minThiccness: espessura mínima
    • _amount_: quantidade de caules a instanciar
  • O nó Vec3 produz valores x, y e z
    • Para distribuir os caules, é possível conectar um nó random ou parameter

Variação de valores e aleatoriedade

  • O nó Parameter produz um valor aplicando uma variação aleatória fixa sobre o valor base
    • _value_: valor base ao qual a variação será aplicada
    • _variation_: quantidade de variação aplicada ao valor base
  • Parameter é usado repetidamente em várias entradas, como caule, rotação, gravidade, curvas e valores de slider

Mudando a forma com rotação, gravidade e ruído

  • O nó Rotate gira a planta de acordo com o eixo e o ângulo definidos
    • input: alvo da rotação
    • _axis_: eixo de rotação
    • _aroundOrigin_: se deve rotacionar em torno de 0,0,0
    • smooth: entrada relacionada à suavidade da rotação
    • _spread_: quando vários objetos estão conectados, define se giram como um só ou se são espalhados ao girar
    • _angle_: ângulo de rotação
  • O nó Gravity aplica uma gravidade simples a galhos e caules
    • input: alvo da gravidade
    • curviness: grau de curvatura
    • _type_: modo de cálculo da gravidade; atualmente apenas simple e test funcionam
    • strength: intensidade da gravidade
  • O nó Noise aplica ruído aos galhos de entrada
    • plant: planta de entrada
    • size: tamanho do ruído
    • strength: intensidade do ruído

Criação de folhas e posicionamento no caule

  • O nó Leaf gera o modelo da folha, que pode ser instanciado ao longo do caule com o nó Instance
    • _shape_: forma de cada folha; é possível conectar um nó shape
    • _curvature_: curvatura da folha nas direções x/y; é possível conectar um nó vec2
  • O nó Shape produz uma única forma que pode ser conectada ao nó Leaf
  • O nó Instance posiciona o modelo de entrada ao longo de um caule ou galho
    • input: entrada de referência para o posicionamento
    • model: modelo a ser posicionado
    • alignRotation: alinhamento de rotação
    • alternateRotation: rotação alternada
    • _size_: tamanho de cada folha
    • _instanceRange_: intervalo em que as instâncias serão posicionadas
    • _amount_: quantidade de folhas a posicionar
    • rotation: valor de rotação
    • offsetBySize: deslocamento de acordo com o tamanho
    • _depth_: define em quantas camadas de galhos as folhas serão colocadas
  • Alpha possui valores min e max

Leituras relacionadas

1 comentários

 
GN⁺ 2023-12-04
Opiniões no Hacker News

  • Realmente útil e incrível em vários aspectos
    O editor de grafos de nós baseado no navegador é bem-feito, permite criar malhas 3D procedurais, ainda faz exportação para .obj, e a licença é permissiva, então parece que pode virar a semente de várias ferramentas procedurais

    • Muito obrigado mesmo :)
      Tenho muitas ideias do que dá para fazer com esta ferramenta e provavelmente vou acabar escrevendo minha monografia de graduação sobre ela

  • A complexidade impressiona
    Para quem quiser mexer rapidamente, o tutorial é bom, mas leva alguns minutos até chegar à parte divertida; então vale ajustar os sliders no painel da direita para ver como a samambaia muda
    Além disso, ao clicar em library para carregar outros modelos, você entende na hora o que dá para fazer
    Pelo fato de ainda não haver modelos de brincadeira entre os enviados por usuários, dá para sentir que é um projeto que acabou de sair

    • Estou fora de casa agora e sem acesso ao PC, mas acabei de ver que o post está chamando bastante atenção
      Espero que aguente bem ;)

  • Parece muito bom, mas há um pequeno problema
    Quando se altera um valor, a forma da planta muda e a câmera fica se reajustando o tempo todo, parecendo que a câmera está tremendo, e pessoalmente isso me incomoda bastante
    Seria bom poder fixar a câmera enquanto os parâmetros são alterados

    • Bom feedback
      Acho que seria bom adicionar debounce ao recentramento automático da câmera :)
    • Também parece uma boa tratar o movimento da câmera como uma animação quando ela estabilizar depois da mudança

  • Projeto legal, mas agora parece que as plantas não estão sendo renderizadas
    Há 20 minutos elas renderizavam, então provavelmente foi afetado pelo tráfego do HN
    O código está todo online e a documentação também é excelente. Na verdade, este projeto também tem um backend de servidor
    https://github.com/jim-fx/plantarium/tree/main
    https://github.com/jim-fx/plantarium/blob/main/ARCHITECTURE....
    Vou voltar daqui a alguns dias para ver quando estiver funcionando

    • Voltou ao ar

  • Há um ano, fiz algo parecido porque queria experimentar Rust como engine de webapp
    Compilava para wasm e rodava em um servidor web em Rust; o resultado está em https://blomma.lorentz.app
    Mas este projeto é muito melhor do ponto de vista de produto, especialmente porque o editor de grafos de nós é um verdadeiro ponto forte
    Ele se integra bem ao fluxo de trabalho e faz parecer um produto que qualquer pessoa pode usar, não apenas uma ferramenta de depuração
    Se houver algo melhor do meu lado, talvez seja apenas o uso de curvas de Bézier tanto para o formato das folhas quanto para o formato dos caules
    Acertar a topologia e a triangulação foi bem difícil, mas foi ótimo para uma introdução a quatérnios e para revisar trigonometria. Recomendo tentar criar um nó de curva de Bézier

    • Muito legal! Obrigado também pelas palavras gentis :)
      Reescrever o gerador de geometria em Rust/Wasm está bem seriamente no roadmap
      No momento estou me familiarizando com Rust fazendo Advent of Code

  • Muito legal! Gostei do parâmetro de thiccness do caule :)

    • Obrigado :)
      Acho que programadores tendem a levar seus projetos, ou a si mesmos, a sério demais, então gosto de colocar um pouco de brincadeira aqui e ali

  • Gostei muito!
    Tenho algumas sugestões de melhoria de usabilidade
    Primeiro, se você move o mouse sem querer para fora da caixa e solta, o arrasto passa a se comportar como um bug. O mouse-up não é reconhecido, então o parâmetro fica preso no estado de mouse-down
    Isso dificulta desenhar no editor de folhas ou alterar parâmetros arrastando, como em sliders. Talvez baste registrar o handler de evento de mouse-up em um ancestral comum, em vez de na caixa do editor de nós do grafo
    Segundo, os pequenos handles circulares de porta de parâmetro usados para arrastar conexões são um pouco pequenos. Especialmente quando você dá zoom out para ver uma boa parte da cena
    Acho que aumentar só a área de clique em cerca de 25%, sem mudar o elemento gráfico em si, melhoraria a usabilidade
    Para referência, estou usando Firefox. O problema do mouse handler também acontece no Chromium, mas o arrasto de conexões entre nós parece um pouco mais usável no Chromium

    • Obrigado pelo feedback!
      Eu costumo ficar meio cego para esses pequenos bugs de usabilidade, então isso é muito valioso
      Acho que os dois serão corrigidos nos próximos dias :)

  • Para quem não sabia: o painel da direita pode ser deslizado para revelar mais parâmetros e controles

  • Fantástico
    Mal posso esperar para ver uma floresta inteira feita de plantas algorítmicas crowdsourced
    Está ligado a algum projeto científico? Também seria legal ter um recurso de botânico de IA que diga qual a chance de a planta sobreviver, qual seria a classificação taxonômica mais próxima, ou uma boa receita para acompanhar arroz branco

    • Uma das minhas ideias é criar um jardim virtual onde as plantas crescem e o usuário precisa cuidar delas como um Tamagotchi :)
      Não está ligado a um projeto científico; foi feito apenas por um nerd que gosta de plantas
      Ainda assim, dá para anexar um ID do gbif.org ao projeto, e então informações adicionais são carregadas pela API do gbif :)

  • Excelente! Se também fosse possível adicionar um nó de tempo, acho que animações básicas se tornariam possíveis
    No geral, é um projeto adorável

    • Boa ideia!
      A parte complicada provavelmente seria integrar animação sem recriar a malha inteira a cada frame
      Mas exportar um skeleton pelo gerador e depois animar a planta com ele parece que seria bem fácil