Show HN: ブラウザで3D植物シミュレーション

 (plant.max-richter.dev)
3 ポイント 投稿者 GN⁺ 2023-12-04 | 1件のコメント | WhatsAppで共有
  • Plantariumは、ブラウザで3D植物をノードで組み立てるシステムで、完成した植物を作るには1つのoutput nodeが必要
  • 植物の基本骨格はStemノードが作り、origin、height、thiccness、minThiccness、amount入力で茎の位置・高さ・太さ・本数を調整する
  • 値の反復と変形はVec3とParameterノードが担い、基本値にランダムな変化を加えて植物が均一すぎないようにする
  • 形状変化はRotate、Gravity、Noiseノードで制御し、回転軸と角度、重力方式、ノイズのサイズと強度を入力する
  • 葉はLeaf、Shape、Instanceノードで作成し、茎や枝に沿って配置でき、サイズ・範囲・数・回転・深さ条件を指定できる

ノードグラフの最終出力

  • すべてのノードシステムは最終結果を生成するために1つのoutputノードが必要
  • outputはplant入力を受け取り、植物全体の結果を構成する

茎の生成と位置制御

  • Stemノードは植物の基本となる茎を作る
    • _origin_: 茎を配置する位置で、vec3ノードを接続できる
    • height: 茎の高さ
    • thiccness: 茎の太さ
    • minThiccness: 最小の太さ
    • _amount_: インスタンス化する茎の数
  • Vec3ノードはx、y、z値を出力する
    • 茎を分散配置するにはrandomまたはparameterノードを接続できる

値の変形とランダム性

  • Parameterノードは、基本値に一定のランダム変化を適用した値を出力する
    • _value_: 変形を適用する基本値
    • _variation_: 基本値に適用する変化量
  • 茎、回転、重力、曲線、スライダー値など多くの入力でParameterが繰り返し使われる

回転・重力・ノイズで形を変える

  • Rotateノードは植物を指定した軸と角度だけ回転させる
    • input: 回転対象
    • _axis_: 回転軸
    • _aroundOrigin_: 0,0,0を基準に回転するかどうか
    • smooth: 滑らかな回転に関する入力
    • _spread_: 複数オブジェクトが接続されている場合、1つとして回転するか、分散して回転するかを決める
    • _angle_: 回転角度
  • Gravityノードは枝や茎に単純な重力を適用する
    • input: 重力適用対象
    • curviness: しなりの程度
    • _type_: 重力計算方式で、現在はsimpleとtestのみ動作する
    • strength: 重力の強さ
  • Noiseノードは入力された枝にノイズを適用する
    • plant: 入力植物
    • size: ノイズのサイズ
    • strength: ノイズの強度

葉の生成と茎への配置

  • Leafノードは葉モデルを生成し、Instanceノードで茎に沿ってインスタンス化できる
    • _shape_: 個々の葉の形状で、shapeノードを接続できる
    • _curvature_: 葉のx/y方向の曲率で、vec2ノードを接続できる
  • ShapeノードはLeafノードに接続できる単一形状を出力する
  • Instanceノードは入力モデルを茎や枝に沿って配置する
    • input: 配置基準入力
    • model: 配置するモデル
    • alignRotation: 回転整列
    • alternateRotation: 交互回転
    • _size_: 個々の葉のサイズ
    • _instanceRange_: インスタンスを配置する範囲
    • _amount_: 配置する葉の数
    • rotation: 回転値
    • offsetBySize: サイズに応じたオフセット
    • _depth_: 何層目の枝まで葉を配置するかを指定する
  • Alphaはmin、max値を持つ

関連記事

1件のコメント

 
GN⁺ 2023-12-04
Hacker News のコメント

  • いろいろな意味で本当に便利で素晴らしい
    ブラウザベースのノードグラフエディタがよくできていて、手続き型の 3D メッシュを作成でき、.obj エクスポートまでできるうえ、ライセンスも寛容なので、さまざまな手続き型ツールの種になりそう

    • 本当にありがとう :)
      このツールで試せるアイデアがたくさんあり、おそらくこれをテーマに学士論文を書くことになりそう

  • 複雑さが印象的
    すぐに触ってみたい人にはチュートリアルもいいが、面白いところまで数分かかるので、右側パネルのスライダーを調整してシダがどう変わるかを見るのがよい
    また library を押して別のモデルを読み込むと、何ができるのかすぐに感じがつかめる
    ユーザー投稿モデルにまだネタ系モデルがないのを見ると、本当に出たばかりのプロジェクトだと感じる

    • 今は外出中で PC にアクセスできないのだが、投稿がかなり注目されているのをちょうど見たところ
      持ちこたえてくれることを願っている ;)

  • とても良さそうだが、小さな問題が1つある
    値を変えると植物の形が変わり、それに合わせてカメラが毎回調整されるため、カメラが揺れているように見え、個人的にはかなり気になる
    パラメータを変更している間はカメラを固定できるとよさそう

    • 良いフィードバック
      カメラの自動センタリングにデバウンスを追加するとよさそう :)
    • 変更後に安定したタイミングでカメラ移動をアニメーションとして処理するのも良さそう

  • 素晴らしいプロジェクトだが、今は植物がレンダリングされていないようだ
    20分前には植物がレンダリングされていたので、おそらく HN トラフィックの影響を受けたのだと思う
    コードはすべてオンラインにあり、ドキュメントも素晴らしい。実際、このプロジェクトにはサーバーバックエンドもある
    https://github.com/jim-fx/plantarium/tree/main
    https://github.com/jim-fx/plantarium/blob/main/ARCHITECTURE....
    数日後にまた来て、動作しているときに見てみる

    • 復活した

  • 1年前に Rust を Web アプリのエンジンとして使ってみたくて、似たようなものを作った
    wasm にコンパイルして Rust の Web サーバーに載せる方式で、成果物は https://blomma.lorentz.app にある
    ただ、このプロジェクトのほうがプロダクト化という面ではずっと良く、特にノードグラフエディタが本当に強み
    ワークフローにうまく溶け込んでいて、デバッグツールの域を超え、誰でも使えるプロダクトのように感じさせる
    自分のほうが優れている点があるとすれば、葉の形と茎の形の両方にベジェ曲線を使っていることくらい
    トポロジーと三角形分割をきちんと合わせるのはかなり難しかったが、クォータニオン入門と三角法の復習としてはとても良かった。ベジェ曲線ノードを一度試してみることをおすすめする

    • 本当に素晴らしい！うれしい言葉もありがとう :)
      ジオメトリ生成器を Rust/Wasm で書き直すことは、ロードマップにかなり本気で入っている
      今は Advent of Code をやりながら Rust に慣れているところ

  • めちゃくちゃいい！茎の thiccness パラメータが気に入った :)

    • ありがとう :)
      プログラマーは自分のプロジェクトや自分自身を真面目に受け止めすぎる傾向があると思っているので、あちこちに少し遊び心を入れるのが好き

  • 本当に気に入った！
    使いやすさの改善案がいくつかある
    まず、ボックスの外へうっかりマウスを動かしてから離すと、ドラッグ処理がバグったように動く。mouse-up を認識しないため、パラメータが mouse-down 状態に stuck する
    葉エディタで描いたり、スライダーのようにドラッグしてパラメータを変えたりするのが難しくなる。おそらくグラフノードエディタのボックスではなく、共通の祖先に mouse-up イベントハンドラを登録すればよさそう
    次に、接続をドラッグする小さなパラメータ用のポート円形ハンドルが少し小さい。特に縮小してシーン全体をかなり広く見ているときにそう感じる
    グラフィック要素そのものではなく hit area だけでも 25% ほど大きくすると、使いやすさが良くなりそう
    ちなみに Firefox を使っている。Chromium でも mouse handler の問題は同じように起きるが、ノード接続のドラッグは Chromium のほうが少し使いやすそうに見える

    • フィードバックありがとう！
      こういう小さなユーザビリティのバグには自分では鈍感になりがちなので、とても貴重
      どちらも数日以内に直せそう :)

  • 知らなかった人のために：右側パネルはスライドして、さらに多くのパラメータとコントロールを表示できる

  • 素晴らしい
    クラウドソーシングされたアルゴリズム植物で森全体が作られるのを早く見たい
    科学プロジェクトと連携しているのだろうか？植物が生き残る可能性がどれくらいあるか、最も近い分類学上の基準は何か、白いご飯に合う調理法のようなものを教えてくれるAI 植物学者機能も面白そう

    • 自分のアイデアの1つは、植物が育ち、ユーザーがたまごっちのように世話をしなければならない仮想庭園を作ること :)
      科学プロジェクトと連携しているわけではなく、ただ植物好きの nerd が作ったもの
      それでもプロジェクトに gbif.org ID を付けられて、そうすると gbif API 経由で追加情報が読み込まれる :)

  • 素晴らしい！time ノードも追加できれば、基本的なアニメーションも可能になりそう
    全体的に愛らしいプロジェクト

    • 良いアイデア！
      難しいのは、毎フレーム全体のメッシュを作り直さずにアニメーションを統合する方法になりそう
      ただ、生成器から skeleton をエクスポートし、それを使って植物をアニメーションさせるのはかなり簡単そう