ngPlant の覚え書き

起動直後の画面
左に3Dビュー(3Dview)、右にパラメータパネル(Parameter Panel)と構造ツリー(Structure Tree)がある

操作方法。3Dビュー画面にて...

マウス中ボタンドラッグ　　　：視点を回転
マウス中ボタンドラッグ+SHIFT：視点を上下左右に移動
マウスホイールを回す：ズームイン/アウト
alt＋マウスを動かす：ワイヤーフレーム表示を重ね表示しながら視点を変更

単に出来上がりを見る以外に、分かりにくいパラメータ変更の効果を視点を変える(例えば真上から見る)ことで初めて理解するといったこともあります。ぜひ活用してみましょう。

パラメータパネル：タブで分類された設定欄、樹木の特徴を設定することができる。 )
樹木構造ツリー：樹木の構造は「Plant(樹)→Trunk(幹)→Branch(枝)→Twig(小枝)」のように段階的に定義することができます。
なお大元の「Plant」項目では、著作権情報といくつかの定義のみ可能です。現時点でngPlantはツリー内の項目を自動で「Branch-連番」という名称をつけます。この名前を変更するなら、右クリックメニューから「Rename...」を実行してください。

製作のコツ

樹木の枝の本数などパラメータ設定である程度制御できるものの、樹木全体のバランスはプログラム内部数式の法則に従って予想外に変化します。
これは構造ツリーをある程度設定した後に、親ノードのパラメータを再編集すると分かります。枝ぶりが変わっちゃいます。
100％思い通りの樹木を作りたいなら、生成した樹木をobj/dae 形式で書き出してから、他の3D編集ソフトで加工しましょう。
樹木構造ツリーを複雑にしすぎて、間違ったノード(ツリー内の項目)を選択しないよう気をつけましょう。
いい感じの樹木を作ったらngp(ngPlant専用形式)で保存しておこう。再利用してアレンジすれば、過程をすっ飛ばせるので製作効率があがります。
カーブエディタの位置変更1つにもUndo(やり直し)が効きます。便利な反面、カーブを弄りまくる前に戻る場合、相当数Undoしないといけません。

まず何をしたらいい？

テクスチャのある場所を設定しておく(一度だけ設定すればOK)
もし樹木に自作のテクスチャ画像を貼りたいなら、初期設定ダイアログから、読み込ませたいテクスチャファイルのある場所を指定しておいてください。(後でもいいけど、ngPlantを再起動しないと場所を認識しません。)。
参考：テクスチャを貼る

とりあえず単純に針葉樹(枯れ木)からつくってみましょう。

まず、構造ツリーでBranch-1(幹)(上の画像で赤丸で囲ってる項目)を選択しておきます。
そしてその項目上で、右クリックメニューを出して "New Branch..."を実行してください。

↓こうなります

すると構造ツリーでは、Branch-1(幹)の下に、新しく子項目Branch-1-1(枝)が追加されます。
新しく追加したBranch-1-1(枝)が灰色の選択状態なっています。

このとき上のパラメータパネルではBranch-1-1(枝)に対応する設定項目(Stem/Material/Branch)が現れます
枝ぶりなどの特徴はそこで編集してください。3Dビューには編集結果がリアルタイム反映されます。
↓追加した直後は、枝がくし状に生えてます。この枝を曲げたり生える位置を編集する必要があります

枝Branch-1-1のそれぞれの枝から小枝を分岐させるには、同じようにして直下に入れ子項目を追加してください。
しかし今これを追加すると収拾がつかなくなるので、Branch-1-1(枝)を編集したあとで追加すると良いでしょう。
樹木構造ツリーの項目は名前変更できるのでわかりやすい名称に変えても良いでしょう。

樹木の特徴を決める。

パラメータパネルのタブ分類

Stem(幹/茎)：枝の生え方(正面),枝の太さ(上面),などを編集
Material(材質)：葉や幹のテクスチャの設定。
Branch(枝)：分岐位置と角度、同じ高さに生やす枝の数などを設定。Plant直下ノード(Shape:Square/方形、Circle/円形)を編集可能、子,孫ノードでは(Declination:跳ね,垂れ)を編集可能
General(一般)：著作情報,LOD,シード値。ウェブ上で配布されてるngPlant用3D樹木データを利用したい場合、ファイル読み込んだときに、ここにライセンス情報が書かれていることがあります。

Branch(枝)タブの設定項目の内容は、Plant直下ノードとそれ以外では違うので注意してください。

重要：パラメータパネルの編集可能な内容は、樹木構造ツリーで現在選択中の項目に対応しています。
(下のスクリーンショットではBranch1-1(枝)に対応する情報が表示されています)
思ったような編集結果にならないと思ったらツリーの選択項目が間違ってないか(枝のつもりで幹の項目を選んでいた等)、確認してみましょう。

ここで、パラメータパネルに存在する入力項目の操作を説明します。
すばやく入力操作ができれば試行錯誤サイクルの短縮にも繋がります。

これは値入力ボックスです

+,-ボタンを押す：値を最小単位で増減(パラメータによって様々)

＋ [　数字　]− - ←数字の上で

左クリックする：値を直接入力するダイアログが出現
左ボタン押しながら左右にドラッグする：スライダーのように値を素早く増減。
マウスホイール回転：値を微調整するときに使う。

これはカーブエディタです

樹木のシルエット(樹型)、枝の太さ、枝の分布、葉の形などのパラメータを設定するのに用いられます。
使い方に慣れるとカーブの曲がり具合に従ってなめらかに設定することができます。

制御点(赤い点)をふやすにはカーブ(白い線)をクリックしてください。
制御点を動かすと、カーブ(白い線)の曲がり具合を変更できます。
詳細な編集をしたい場合は、黒い背景をダブルクリックしてください。大きめのウインドウが開きます
制御点を個別に削除するには、削除したい制御点(赤い点)の上で右クリックしてください。(可能です：訂正しました)
編集をリセットしたいカーブエディタ上で右クリックメニューを出し、"Reset to defalut"を実行すると、制御点はすべて削除され、未編集状態にします。

針葉樹をつくろう

針葉樹のように決まり切ったパターンで成長している樹木は作りやすいです。
今回の例は、デフォルト状態で、Branch1-1を追加した直後から始まります

StemとBranchタブの各パラメータを以下のように変えて、枝ぶりの変化をみてみましょう。
必要最低限のパラメータをいじってなるべく効果的な結果を得られるようにしています。

こんな感じになります。値を変えてアレンジしても良いでしょう。
互い違いに枝を伸ばしたり、ランダムな配置にしたり....

さらに,枝ぶりに変化をもたせるなら、BranchタブのDeclinationカーブをいじりましょう。
雪積もって風雪に耐えている、北方に生えてそうな針葉樹。

公園の並木道にありそうな木。

葉はどうするの？

MaterialタブのBaseColorで色分けすると、構造が見やすくなり作業がやりやすくなります。
また、葉のタイプはStem model typeを変更することで実現します。デフォルトはTube(先細り)。

残念ながらTubeは全方向または下方向にしか向かせることができません。
そのため樹木を作る場合、構造ツリーの入れ子をむやみに増やさず2〜3段階で抑えておきましょう。

作りたい作品の主役が樹木でない限り、ポリゴン数を減らしたほうが後々便利です。
内部までポリゴンをぎっしり詰めるのでなく、MinOffsetの値を工夫し、なるべく枝の先っぽへポリゴンを散らすといいかもしれません。

右クリックメニューの機能

Append branch : 現在選択中のBranch(枝項目)に、子Branchを追加する。他Branchの色や設置をコピーすることも可能(子孫ノードまではコピーできない)。
Delete stem:選択中のBranchを削除(子孫ノードも削除される)
Stem model:枝(茎)モデルを指定する。葉や枝の表現方法を設定できます。(詳細は後ほど)
Dummy:選択中のBranchをダミー枝にする/元に戻す。ツリー項目での表示が「D[-/-]」になります。これは通常通り編集が可能ですが、3D画面に表示されなくなります。
またこの枝に対応するポリゴンデータはobj/dae形式に書き出した時のデータに含まれません。
ダミー枝は、制作の上で必須だけど見苦しい部分を非表示にし、また出力データにそれを入れたくない時に活用できます。

例えば下図は短冊ポリゴンを円形に配置しています。しかし中心の支持体(放射状に伸びてる奴)が目立って3D画面では邪魔です、しかし必要なデータなので削除することはできません。そんな時ダミー枝化するとそこを隠す事ができます。また他の3Dソフトで編集するときのデータにも含まれないため削除の手間も減らせます。
Hide:3D画面上で編集の邪魔になる枝を一時的に非表示に/解除する。(この状態で保存してもngplantでファイルを再読み込みすると、隠した部分が戻っています)
Reneme:Branchの名前を変更する

重要：パラメータパネルの各タブ内にあるパラメータの数や種類はStem modelに応じて専用のものに変化します。混乱しないよう気をつけてください。
(例：Wingsタイプにすると、Branchタブ内の設定可能なパラメータはRotAngleのみになる。)

Stem type : Tubeの時の設定例

広葉樹や低木をつくろう

植物には、広葉樹のように大きく変則的に枝分かれした木、または草のように根元から株が分かれているものもあります。
このような植物を作るには、構造ツリーPlant直下の階層に新しくBranch(便宜上Branch-2と呼ぶ)を追加してください。
注意すべき点は。追加直後の2本目(Branch-2)は初期化状態にあり、長さも潰れており、根元の位置が1本目と重なってます。
3D画面で確認しやすくするために、ずらしておきましょう。
Materialタブ内にあるBaseColorを変えて見やすくするのもよいでしょう。
また、Stem model のタイプを変更することで、丈長い草や、短い葉をもつ雑草も作れそうです

位置や枝ぶりを編集して変えてみましょう。
まず、構造ツリーの、Branch-2(幹)を選択しておいてください。
パラメータパネルで編集します。編集項目は各タブに分類されています。

幹を長く伸ばしたい： Stemタブに切り替え、LengthまたはVariationパラメータを増減させてください。
幹を大げさに広げたい： Stemタブに切り替え、 Axis variationパラメータを増減させてください。
幹の根元の位置をずらす： Branchタブに切り替え、 Spredパラメータを増減させてください。

枝をコントロールするのがちょっと難しい。
構造ツリーが複雑になりがちなのでミスしないように気をつけよう。
本当はもう一本の枝に葉を生やしたかったのだけど、失敗。

イバラやおどろおどろしい枯れ木
Resolutionの値を上げると、Axsis variationの「のたうち具合」が激しくなります。
これを利用すると地中に広がる根を表現したりすることもできます。
工夫すれば大根やらモンスターやらタコの触手も作れるかも。

Setm タブの役立つパラメータ
Length(長さ): 全体の長さ
Variation(バリエーション)：1本の場合機能しない。複数の枝が林立している場合にそれらをランダムな長さにする。
Resolution(解像度): モデル精度が高くなる。ポリゴン数増大。
Axis variation(湾曲): のたうち回りながら伸びる。Resolutionの値が高ければ綺麗に曲がる

草むらをつくろう

草むらは、構造ツリーのPlant直下にBranch項目を作り、
そのStem model のタイプをQuad またはG-mesh に設定することで実現します。
全体的な散布形状はShapeパラメータによって決定づけられます( CircleとSquare)。

できるだけ少ないポリゴンで効果的にやりたい、柔軟な編集をしたいならQuadタイプ。
ポリゴン板を細かく散らすならG-meshのRhomb(ひし形)またはTriangle(三角形)タイプ。
花や実など、自作の3Dモデルを読み込んで散布するならG-meshのobj-importタイプ

それぞれ、下の図のような違いがあります。

Quad編

木の枝でやるのと同じ操作方法です(※ここでの説明は割愛)。
一枚あたりの大きさ、散布の規模を柔軟に設定することができます。
スクリーンショットの例はテクスチャを貼る前の段階です。

Gmesh編

構造ツリー項目上で右クリックメニューを出し、そこからサブメニューを辿って選べます。

Rhomb(ひし形),Triangle(三角形)を指定した場合は最初にダイアログが出るので、サイズを設定してください。)

G-meshにした場合 Stemタブに設定項目は存在しません。Branchタブにすべての設定項目があります。
Min/Max Numberは、散布ポリゴンの数です。
Spredで散布規模を広げたり狭めたりできます。
DeclinationとVariationはShape:Circleの時のみ効果あり。周囲にあるポリゴンほど花咲くように外側へ倒れ込みます。
RotAngleはShape:Circle/Square両方で効果あり。ポリゴンをY軸(上方向)を中心に旋回させます。

Gmesh(Import.OBJ)編

OBJ(Wavefront)形式で保存された3Dデータファイルを読み込めます。
これを使えばngPlantで自動生成できないような複雑な葉を配置したり、
樹木に自作の花や木の実を追加することができます。
他にも面白い利用法があるかも？(階段やシャンデリアとか)

ngPlant対応モデル作成のコツ
うまく作らないとエラーがでて読み込めないことがあります。
ここに、今まで試行錯誤して判明したことを載せておきます。

重要：OBJ形式で保存してください。
重要：OBJファイル読み込み時にngPlantは「Generate Tangent Space info？」と聞いてきます。この機能は詳細不明ですが、NOでもYESでも構いません。YESで読み込みが失敗した時はNOを選ぶと読み込みがうまくいくことがあります。
重要：モデルは必ず三角/四角ポリゴンで構成されていること。そうしないとngPlantで読込む際にエラーがでます。
重要：必ずUV展開しておくこと。そうしないとngPlantで読込む際にエラーがでます。
重要：高さ=0(例：Y=0)よりも下へ配置しよう、ngPlantで読み込んだ時、3次元空間上での高さ0の地平面で原点を貫きます。(※3DソフトによってはZ軸が高さの場合もあります)
そのため、枝から実をうまく垂れ下がるようにするには、原点(0,0,0)に花梗(かこう)または果柄(かへい)の先っぽがくるように配置してください。
果柄とは？果柄 - Google 検索
複雑なモデルを使うとポリゴン数やファイルサイズが増大するため、なるべく単純なモデルを使いましょう。
大きさは、小さめに作っておくと効果的です。
エッジにハードエッジ属性がついてると角がシャープになります。
UVやマテリアルは必要ですが、ngPlant読み込み時はマテリアルやテクスチャは無視されます。

重要：読み込んだ直後はひっくり返っています。
果実ノードのパラメータパネルBranchのStartRevAngleを180に設定してください

構造ツリーにおける幹(Trunk)、枝(Branch)、葉(Leaf)、果実(Fruits)ノードの親子関係はこのようになっています。
どの階層に何を配置したらいいか迷った時の参考に。

UVデータを正しく展開せずに保存したデータは読み込み時にエラーが出ます。
(gmesh_import_obj.lua:134: invalid attribute index count)

三角/四角ポリゴン以上のポリゴンはサポートしません。(例：五角形のポリゴンを検知したため失敗)
(gmesh_import_obj.lua:124: face with unsupported vertex count (5) found)

テクスチャを貼る

事前にやること（初回のみ）

メニューバーから、ngPlant＞Preference を選び、Preference(環境設定)ダイアログウインドウを開きます
「Tex.locations」タブをクリックするとつぎのような画面になります。

重要：ngPlantはユーザーが登録した場所にある画像しか読み込めません。
重要：ngPlantを再起動しないと、登録した場所を認識しません。

HDDのどこかに、ngPlantで利用するためのテクスチャ置き場を決めておいてください。

(1)「Browse...」をクリックするとファイルセレクタウインドウが出るので、さっき決めたディレクトリのある場所を開き「Open」ボタンをおして確定。
すると(2)の欄に先ほど指定したパスの場所が表示されます。そこで「Append」ボタンを押してください。すると(4)の欄に追加されます。
これでいいと思ったら、 (3)「OK」ボタンを押してPreferenceダイアログを閉じてください。
ngPlantを終了して、もう一度ngPlantを起動してください。

これで、さっきの場所に画像ファイルがあれば、ngPlantから画像をテクスチャとして読み込むことができるようになります。
読み込む場所はいくつでも追加できます。
また、登録した場所を削除したい場合は(4)の項目をクリックしてから、(5)「Remove」を押せば削除できます。

テクスチャを読み込む

テクスチャ画像ファイルを用意し、ngPlantのPreference(環境設定)で登録した場所に入れておく。
また、今回は例としてこの画像を使います：

(256x256ピクセル, png形式,背景透過済み)
ngPlantの樹木構造ツリーから幹または葉のノードを選択、Materialタブに切り替えてください。

Texture Layersの「Dif」ボタンがアクティブになっていることを確認。
そしてTexture「？」部分をクリックしてください。
ファイルセレクタが現れます。テクスチャとして読み込ませたい画像ファイルを指定してください。
重要：環境設定で登録した場所以外から画像を読込ませることはできません
うまく読込めた場合、次のような画面になっているはず。

しかし透明部分が黒くなっているので、Transparentチェックボックスにチェックを入れてください。
こうなります。

テクスチャを削除したい場合は、テクスチャプレビューの横の「x」をクリックしてください。

テクスチャとして利用できる画像形式は png/jpg/tga。RGBA,8bit
Dif : Diffuse(通常のテクスチャ画像）
Nor:Normal (ノーマル(法線)マップ画像
Aux0〜1はシェーダやプログラムで利用するらしい。

ネタ編

※これらはngPlant本来の使い方ではないので思った通りにいかないこともあります、予めご了承ください。

螺旋階段をつくろう(Gmesh-import.OBJの応用)

↑踏み板の3Dオブジェクト(objファイル)
(今回は幹に配置するので、木の実の時とは違う位置にモデルを配置して保存しておきます(横倒し)。
今回は踏み板の回転角度が22.5だったのでメモしておきました)

★柱-Pillar-の設定と、踏み板-Stair tread-の設定
踏み板のStem model は import.OBJタイプにしてあります。
踏み板オブジェクトをPillarに対して直角に配置させるため、踏み板のRotAngleの値を90度にしてあります。
また階段に隙間が生じないように、踏み板のRevAngleの値を22に設定(パラメータが小数点以下に対応してなかったので少数切り捨て。)

手すりとか支柱など、まだまだ研究余地はあります。

集落を自動生成してみた。(草むらの応用)

スキーリフト(樹木の応用)

お洗濯日和(樹木の応用)

その他:虫(樹木、葉、根、草の応用)

虫です。
ムカデなどの節足動物も作れそうです。しかし頭胸胴に別れた昆虫は少し難しいです。

この例では胴-胸-頭のラインで作って、そこで胴から一対、胸から2対づつ脚を生やしました。
足の先や体は、Declinationや、Max Min.offsetを調節することで、先端に1つづつ枝を乗せてうまくつなげてください。
左右対称に生やすには、親ノード BranchタブでMultiplicity:2,Min.Number:1にすることがポイントです
また羽は葉の応用でいろいろな生やし方ができそうです。

ただし脚は横にまっすぐにしか生やすことができませんでした。
(※枝を水平の鋭角範囲に2本だけ作成する機能が無いためです。
自由な角度で追加したいなら、それぞれ独立した脚として作成する必要があります。)

髪の毛(樹木、葉、根、草の応用)

3Dで髪の毛のモデリングをするのはとても大変です。
ところで、髪の毛と葉って似てますよね。なんとか髪の毛を作れないか試してみました。

右が作成中の画面、左は完成予想図として顔を書き加えたものです(イメージです)。
この子の前髪はStem:Tubeポリゴンの散布で表現、後ろ髪は二段階構造になってて、
↓Stem:Quadで短冊ポリゴンを1枚だけ生やしたものをMultplyパラメータを使い円状に配置しています。

ngPlantで作った髪は上から見て360度すべてに髪の毛が広がってしまう点に注意してください。
また、ポリゴンには髪の毛用テクスチャが貼ってあります。
ngPlantでベースカラーが設定してある場合、テクスチャに色が乗ります。

前髪、ポニーテールなど、髪の毛にボリュームや先細り感を与えたい場合Stem:Tubeタイプにしておくと作りやすいです。

その他：マンドラゴラ, 人形(樹木、葉、根、草の応用)

応用するとngplantでマンドラゴラを作ることも可能。
Branchのmin/max offsetを調節して、枝の生える場所をコントロールするのがコツです。
さらに作り込めば人物っぽいものを作れたりはします.....。
(腕や足を曲げてポーズを変えれるものの、パラメータが複雑であまり実用的ではありません)

従って、ngPlantは髪の毛といった部品を作るために利用し、
完成は(使い慣れた)別の3Dソフトでやるのが良いです。

髪の毛以外の使い道として、ホウキ、絵筆、動物の尻尾などに利用できるかもしれません。

データを保存しよう

メニューから File＞Saveすると ngPlant専用形式(.ngp)で保存できます。
メニューから File＞Export to ...で ngPlant専用アーカイブ形式(.nga)を選択することができます。

他の3Dデータ形式で保存するには？
メニューから File＞Export to ...で dae 形式と obj形式で出力することができます。

トラブルシューティング

★樹木に実を成らせたいが、Gmesh Import.OBJで読み込んだ実の位置がおかしい。
OBJ形式で保存した時のオブジェクトの位置を変えてみましょう(地平面下へさげる)。
また、枝から実をうまく垂れ下がるようにするには、原点(0,0,0)に花梗(かこう)または果柄(かへい)の先っぽがくるようにしてください。
果柄とは？果柄 - Google 検索

★Gmesh Import.OBJの「Generate Tangent Space info？」ダイアログでYESにしたら読み込み失敗した。
NOを選ぶと読み込みが成功する場合があります。

★Gmesh Import.OBJで実のオブジェクトを読み込んだが、実が逆さまになっている。
構造ツリーで果実ノードを指定し、パラメータパネルのBranchタブにある、StartRevAngleの値を180に設定

★G-meshでObj形式のファイルが読み込めない
Gmesh(Import.OBJ)編の、「読み込むコツ」を参照ください。

★樹木作成中にG-Meshのサブメニューが選べない(G-mesh,Rombus,Triangleが選べない)。
★またはFile＞Export to ... を選んでもメニューにdaeやobj形式で保存する項目が見当たらない。
これはngPlantのプラグインディレクトリの場所が間違ってるか、プラグインディレクトリの場所に出力用luaスクリプトがないことが原因です。

ngPlant＞Preferences でngPlant環境設定ウインドウを出し、Misc.タブのプラグインディレクトリを正しく指定してください。
例えばOSXのApplications フォルダにngPlant をインストールしている場合、
/Applications/ngplant.app/Contents/Resources/plugins がそれです。

(ディレクトリパスが正しければメニューが追加されます。)

ngPlant 0.9.13覚え書き

アプリケーション版ngPlantの使い方