3Dアドオン相談室

[JHSDF休日自衛隊]

3DCGを使ってアドオンを製作するためのソフトの知識や制作のテクニックなどの情報を交換したり蓄積したりするためのページです。
3DCGと言っても、実際にsimutransで使用するためには、

・3Dモデルに光を当てる
・2D画像として出力する
・輪郭を整える
・背景をそろえる
・datでオフセットを行う

など様々な工程が必要となり、またそのノウハウの蓄積も、特に日本語に関してはほとんどありません。
またモデリングソフトの違いによってデータ量にも幅があります。
そこで、3Dアドオンを作るうえで

疑問に思ったことや難しいことなんかを並べたり、
今作ってるものの制作過程を見せ合ったりして、

3Dアドオンをよりよく、また初心者へのデータの蓄積をやっていけたらいいなと思います。

3Dやってる方、やってみたい方、是非お気軽にお使いください！

モデリングに限らず、出力した画像をどうｐｎｇにするのか、と言った話題もお待ちしてます！

[koa]

sketchup用のﾃﾝﾌﾟﾚです。
sketchup2014以降で使用できます。

保存時にオプションにて幅：848pixel、高さ：368pixelに設定すると、
pak128のサイズ位置になります。

[よねしろ]

サンプルとして、昨年末に作ったホーバークラフトMV-PP5 mk2の各種データを添付してみます。
一連の作業の流れに沿って

・メタセコイヤ用のデータ、テクスチャ
・レンダリング画像
・作業用画像データ（レイヤーつき、Photoshop形式なので、多くの画像編集ツールで読めると思います。）
・完成品の画像

を入れてみました。
詳しいレンダリング方法等はアーカイブ内のテキストファイルに記してあります。
我流なので、突っ込みどころ多々あるかもしれませんが、その際はご指摘いただけると幸いです。

[ぽっこんぺー]

３ＤＣＧでのアドオン製作に足を踏み入れたばかりの人の為に、
　レンダリングした後どう画像を処理するのか？大まかな流れを簡単に説明したいと思います。
　＊ここで説明した事はあくまで一例として参考にしてください。

まずは必要なソフトを揃えて下さい。

必要なのは『アルファチャンネルを編集できるドローソフト（ペイントソフト）』と『Shades』です。
　＊shadesは日本語化wikiの『アドオン開発』>『アドオン開発/画像』ページの下部に置いてあります。

レンダリング直後のpngはオブジェのフチの部分が半透明になっています。
　まずはこれを透明と不透明に分けます。
　＊私は『GIMP』というペイントソフトを使っているので以降はGIMPでの説明になります。
　　 『Pictbear』をお使いの方は下の『ラスさんの投稿』をご覧ください。
　ＧＩＭＰではこの作業を『アルファチャンネルの2階調化』といいます。（ソフトによっては２値化とも）
　2階調化をせずに半透明の部分を残しておいたままpak化してゲーム上で読み込むと
　画像の周りに白い淵がついてしまいます。

＊これ以降の説明は必ず順番を守ってください。そうでないと予期せぬ結果になる事があります。
　 作業の節目で必ず画像を別にコピーしてバックアップを取っておいてください。

１・レンダリングした画像をGIMPで読み込みます。
２・上部にあるメニューに『レイヤー』という項目があるのでそこを押します。
３・『レイヤー＞透明部分＞アルファチャンネルしきい値』を選びます。
４・数字を入力するところがあるのでそこに好きな数字をいれます。
　＊大きい数字をいれると半透明の部分が沢山削れます。
　　 小さい数字をいれると半透明の部分が沢山残ります。
　　 どの数値が良いかは個人の好み、アドオンの種類によって様々なので自分で試してみて決めてください。
５・2階調化が終わったら、アドオンの背景を『simutrans上の透過色』にします。
　＊simutrans上の透過色は『231,255,255』別の表記では『#e7ffff』です。
　　 『描画色の変更』で先に色を選択しておきましょう。
６・『色域を選択』を選び、下部に有る設定『しきい値』を０にしてください。
　その後、背景の部分を選択してください。
　＊ここで言う背景とは透明を表す市松模様の部分です。
７・『塗りつぶし』を選び、下部の設定『類似色領域』ではなく『選択範囲』にチェックを入れてください。
８・上記で設定した『simutrans上の透過色』で背景を塗りつぶします。
９・好きな名前で画像を保存します。

こんどは『shades』を使います。
１・先程処理した画像を読み込みます。
２・『すべての特別色を取り除く』ボタンを押します。
　＊３Ｄで作った画像はあらぬ所に特別色が使われてしまっている事がよくあるのでこの処理をします。
　　 『特別色をハイライト表示』で確認し、もし特別色が使われていなければこの操作は省いても良いです。
３・『背景色修復』ボタンを押します。
　＊GIMPで背景色は塗っているのでしなくても大丈夫ですが念の為の操作です。
４・『保存』ボタンで画像を保存します。
　＊pak化するにあたって画像の『アルファチャンネル』を削除する必要がありますが、
　　 shadesで読み込んだ後、保存すると勝手に削除してくれます。

もしアドオンに特別色（夜光色など）を使う場合は、
　GIMP等のペイントソフトであらためて塗ってください。
　終わって保存すればpak化用のpngの出来上がりです。

しきい値の設定をここで紹介したとおりにやって『周りに白や黒のフチが出た』という方は下記の
”しきい値の処理の際の不具合について”をご覧ください。

以上で説明は終了です。
もしわからない事や聞きたいことがありましたら、
随時補足などを書き込むつもりなので、気兼ねなく書き込んでください。

冗長な説明でしたがご覧いただきありがとうございました。

　

[ラス]

ぽっこんぺーさんがあまり説明がいきわたらない部分についてとてもいいことを書いて くれたので、便乗して。
Gimpでは標準機能でアルファチャンネルの2階調化ができますが、Wikiの方でアドオンの作り方の説明にて使用されているためSimutransユーザーの利用率が高いと思われるPictbearにはこの機能が搭載されていません。
そのためPictbearでも2階調化の作業ができるよう、前に自作したプラグインをここに置いておきます。

展開したプラグインのファイルをPictbearのウィンドウ上にドラッグ&ドロップでインストールされます。
使用方法は同じで、0-255の範囲で大きい数字を入れると半透明の部分が沢山削れ、小さい数字を入れると半透明の部分が沢山残ります。
インストール後は「フィルタ→カラー→透明度を2値化」から使用できます。

[JHSDF休日自衛隊]

日本語化wikiにアップした弁才船のソースと、テクスチャとかの類を添付してみました。

レンダリング画像と、256のソースpng、さらにそれを192四方にいじったファイルが入っています。


このアドオンは大学のサークルで作成した船のCGをsimutransに移植したも のです。
この船は長さ約30mでpak128japanとしては1マスを少しはみ出るくらい の寸法です。そこで、256×256の画像の中に小さく収めようと256×256でレンダリングし、画像を並べ、ぽっこんぺーさんから教わったやり方でアルファチャンネルを取り除きました。
ところが、それでpak化したところ画像が大きくなりすぎたため、ソースpng画像を256サイズから192サイズに強引に縮小してpak化してちょうどいいサイズに直しました。

従来であれば横向き・縦向きの画像がレンダリングの時に見切れないことを確認してレンダリングするのですが、今回は帆船と言う縦長の船であったため高さを食い、長さの前に高さに気を配る必要があり、またレンダリングのカメラが原点にあったためソース画像より上に画像が表示されることから、サイズを見誤ってしまいました。
レンダリングの際のカメラアングルや位置・サイズ決めなどもう少し練習が必要なようです。

さらにもう一つ、帆船につけたロープの類が、アルファチャンネルの2値化によって消えてしまいました。ロープを残すと船体が黒く浮き、船体をクッキリさせるとロープが消えるという状態だったのですが、皆様どのように対処してらっしゃいますでしょうか？

[ぽっこんぺー]

添付された弁才船のソースを拝見しました。
　素晴らしい出来で、船のアドオンが少ないsimutransでは貴重なアドオンになると思います。

本題ですが、つまり『ロープと船体を別々に２値化』できれば良いという事でしょうか？
　このやり方について私のやり方を説明したいと思います。

＊以降はGIMPでの説明になります。

GIMPだと色々な画像の『選択』の方法があります。
　＊例えば「矩形選択」や「自由選択」など
　１・自分が操作しやすい選択方法を選びます（仮に自由選択を選んだとして説明します）
　２・自由選択で「ロープの部分だけ」をくるっと囲むように選択します。
　　＊ちゃんと選んだ領域が選択されているか確認してください。
　３・しきい値の設定で低めの数値で２値化し、ロープが残るようにする。
　　＊ロープだけが２値化の処理がされたか確認する。入力する数値は自分の好みで。
　４・上部メニューの『選択』から『選択の解除』を選び、
　　 画像上で先程選択したロープの周りの選択範囲が解除されたか確認する（重要）
　５・あらためてしきい値の設定をし、船全体の２値化をする。
　　＊今度は高めの数値を入力すると黒く浮かび上がらない。もちろん数値は自分の好みで。

こうすると「船全体」と「ロープ周り」の別々に２値化することが出来ます。
　＊つまり画像を部分選択したまま２値化すると、その部分だけに２値化の処理を施せるという事です。

以上が私なりのやり方です。


ご覧いただきありがとうございました。

[JHSDF休日自衛隊]

ぽっこんぺーさん
なるほど・・・　レイヤー単位ではなく、その中の細い部分だけ別に２値化しておく・・・ありがとうございます！　
ちょっとおろそかにし過ぎた学業にもうちょっと力入れないといけないのでゆるゆると ですがチャレンジしてみようと思います。

さて、アルファチャンネルの２値化と発光色の設定について、失敗例を作ってしまったのでせっかくと言うことで投げさせていただきます。
発光色の削除をする時にshadeを使う、というのが以前のレスであったと思います。その時に背景を背景色にした状態で行うところを、ためしに（めんどくさがって）背景がアルファチャンネルのある透明なままの画像の発光色をshadesで加工してみました。

すると、背景が黒に置き換えられてしまい、あとで加工をしようとしたとき、輪郭の黒と背景の黒とが区別できなくなって変な所が欠けてしまったりしました。
ということで、shadesを使うときは背景を背景色に塗ってから、さらにバックアップをちゃんととっておくことをお勧めします

添付容量が限界だったので自ろだに投げました。
http://ux.getuploader.com/JHSDFsimutrans/download/74/failed_image.zip

[ぽっこんぺー]

JHSDF休日自衛隊さんの以前の投稿で「ロープが消えてしまった」というのがありました。
　3DCGで作った『細かいオブジェクト』は、64のサイズや128のサイズでレンダリングすると、
　1ピクセルも描画されない（半透明には描画される）事があります。
　
ここで提案したいのが『ＣＧで作る際の大胆なデフォルメ』です。
　細かいオブジェクトをちゃんとレンダリング時に描画されるように、
　多少大きめに作るのはアドオン作りにおいて結構大事だと思います。
　　＊大きくするのは小さいオブジェクトだけで、元々レンダリング時にちゃんと描画される大きさのオブジェクトはそのままで。
　もちろん小さいオブジェクトだけを大きくすると同じＣＧ内ではバランスが悪く、見栄えも悪くなりますが、
　64や128のサイズでレンダリングした時にも同じような感想を抱くとは限りません。

これから3DCGでアドオンを作ろうと思う方や、作り始めたばかりの方は、

”CG上で素晴らしい出来に見えても、simutrans用にレンダリングした画像が同じく素晴らしい出来になるとは限らない”

これは作る上で念頭に置いた方が良いと思います（これは逆にしても同じことが言えると思います）
　私自身も経験がありますが3Dでモデリングした際に、
　かなり細かく作って「よし、これだけ細かく作りこんだから良い出来だろう」と思い、
　128のサイズでレンダリングしたら「あれ？」という事が何度もありました。
　モデリングで細かく作ると128のサイズ（もちろん64も）だと画像が潰れて見えてしまう事があります。
　作ろうとしているアドオン、たとえばそれが鉄道車両なら、
　車両自体のサイズはそのままに
　　（アドオン全体のサイズは純正のアドオンと合わせないとゲーム上で大きな違和感が出ます）
　前面のライトや、パンタグラフなど「それを構成する上で重要な要素」を踏まえて、
　その「重要な要素を強調する」事が大事だと考えています。

最初に記述した「細かいと半透明にしか描画がされない事がある」という事と、
　「細かいと画像がつぶれて見えてしまう事がある」この2つの点から
　『モデリング時にデフォルメする事を意識して作る』事を私はお勧めします。

一応注意点を。
　上述したようにバランスが悪くなる恐れがあるので、
　必ず『こまめにレンダリングして出来を確認する』事をやってください。
　でないとレンダリング時の出来が悪い事に気付かぬまま進めてしまい、
　最後で出来の悪さに気付いて大幅に作り直さなければならなくなるかもしれません。

後、本題と関係ありませんが3Dモデリングのソフトはハングアップして強制終了する事が頻発するので、
　モデリングしたデータの『定期的な保存』を強く勧めます。
　3Dのモデリングをしていて、相当作りこんだ後に強制終了して今までの苦労が・・・という事は誰もが経験していると思います。
　作っていて興が乗ってくると、これを忘れることがよくあります。
　重要な事なので繰り返しますが、『定期的な保存』はかならずやりましょう。

ご覧いただきありがとうございました。

[JHSDF休日自衛隊]

お久しぶりです。
先日、日本語化wikiに青函連絡船のアドオンを投稿しました。
複雑な形の船舶を色違いで7種類作るとなると、やはり3Dの強みを感じます。・・・モデリングに一か月かけちゃったわけですが(汗

今回新しく覚えた知識が、一枚一枚レンダリングした画像をsimutrans用の画像にする時の画像の貼り付け方として、GIMPのグリッドを用いたことでした。
レンダリング画像は512×512の画像で、これを横8枚、縦に7隻分並べることになったのですが、飛行機アドオンではこれを手作業で並べていました。
今回は、GIMPにある「グリッド」という機能を用いて、「画像」→「グリッドの設定」で512ドット間隔で網目模様のグリッド線をひき、「表示」→「グリッドにスナップ」という機能を用いることで、画像を等間隔に綺麗に並べる事が出来ました。
その後一度出力した画像をpak384サイズに縮小し、今回の連絡船をいいサイズで、潰れることなく作るい事が出来ました。
もし、レンダリング画像の画像加工で並べる時をとにかく面倒と感じている方は是非お試しください。

さて、ちょっと疑問に思って質問してみようと思いまして。
今回はアドオンの窓をモデリングの段階で窪ませて、窓の材質も反射率の高い黒い材質にしたのですが、以前実験室wikiに投げていた航空機はツルッツルの機体にテクスチャで窓を設置していました。
みなさんは、建物や乗り物の窓を作るとき、きっちりモデリングする波ですか？　それともテクスチャで済ます派ですか？
128四方なら、細かい造形を省略してテクスチャでやってもあまり目立たないような気もするんですが、BunpMapを四角い窓とかでやるとどうも陰影が濃くなりすぎて違和感が出るもので・・・

下手な文章で失礼しましたが、読んでくださりありがとうございます。皆さんも何か質問があればぜひ、小さなことでもここに書いてみてくださいね！

[ぽっこんぺー]

GIMPのグリッドの機能を使って並べるというのは初めて知りました。
　今度試してみたいと思います。

一枚ずつレンダリングした画像を並べる方法ですが、私は『画像結合ソフト』を使用させて頂いております。
　画像結合ソフトを用いると、最初に何列×何列と入力し並べたい順番に画像をドラッグ＆ドロップします。
　最後にエクスポートすると、「好きな縦横の列数」「画像の並び方を選ぶ」「一枚の画像にしてエクスポート」という事が出来ます。
　　＊ソフトによって機能や使用法は異なります。
注意点は
　１．pngが扱える事　
　２．αチャンネルが読み込めること　
　３．作成したアドオンを公開する場合、「ソフトを使用して作成した画像の公開」を利用規約で許可している事。
　　＊「αチャンネルが読み込めるかどうか」はソフトを使用して画像を並べる前に、
　　　αチャンネルの除去を行っておけばこの機能が無くても問題ないと思います。

もしこのような機能を持ったソフトが使用したい方は、
　「フリーソフト　画像結合」などのワードで検索するといくつか出てくると思います。

窓のモデリングですが、私は出来るだけ細かくモデリングします。
　ただJHSDF休日自衛隊さんが仰る通り、128のサイズだとほとんど目立ちません。
　なのでどちらかというと「アドオンの出来」というよりは、「モデリングの練習」の要素の方が強いです。
　詳細なやり方は毎回意図的に変えているので、ここに全てを書くと大幅にスペースを取ってしまうので割愛します。
　窓そのものの色はモデリングの段階で「simutransの発光色」に近い色をあてています。
　simutransのアドオンの場合、最後に窓には「発光色」を塗らなくてはいけないので、
　窓の造形はあまり細かくなくても良いかもしれません。
　あとバンプマップ、または法線マップを使って窓を表現する手法を私は用いたことはありませんが、
　数値で強さの調整が出来るはずなので違和感を多少は緩和できるかもしれません。

私も3Dモデリングの勉強中の身です。「始めようとしている方」や「始めたばかり」という方は是非一緒に学びましょう。
　些細な事でも何か質問のある方は気兼ねなく書き込んでください。

ご覧いただきありがとうございました。

[ぽっこんぺー]

以前、『レンダリング後の画像処理の方法』という題で書き込みをさせて頂きました。
　その際に「この説明の通りにしきい値の処理をすると、どうしても黒いフチが残ってしまう」とご報告いただきました。
　この事に私自身が「何故だろう」と不思議に感じたのと、
　なにより私の以前の書き込みに不備があり、読まれた方に対して申し訳無いとの思いから、
　この事を調べ直し、もう一度書き込みをさせて頂こうと思います。

＊対策だけ知りたい方は『２』から読んでください。

　まず最初に知って頂きたい事が二つあるので先に説明します。
　アルファチャンネルには『２種類』あります。
　『Straight Alpha(ストレートアルファ)』と『Premultiplied Alpha(プリマルチプライドアルファ)』の二つです。
　　＊この二つの方式の詳しい違いは画像を交えながら詳しく解説されているサイトがあるので、
　　　関連する語句を検索サイトなどで検索してご覧になって下さい。
　そして上述したしきい値の処理の際にでる「黒いフチ」または「白いフチ」の事を『フリンジ』というそうです。


１・何故『フリンジ』が発生するのか？
　3Dソフトでレンダリングの際、アルファチャンネルを「ストレート」と「プリマルチプライド」のどちらにするか設定されています。
　　＊ソフトによって設定が出来るソフトもあれば、固定されているソフトもあるようです。
　　　私はBlenderを使っているのですが調べてみるとこの設定をする項目が無くなってしまって、
　　　最新のVer.は自動で設定されているそうです。
　　　（私は処理の際にフリンジが出たことがないのでデフォルトの設定で多分大丈夫だと思います）
　　　またmayaは「Render Setting」に「Premultiply」というチェックボックスがあり、
　　　ON、OFFでアルファチャンネルの種類を切り替えられるようです。
　　　他のソフトについてはわからないので試された方はフォーラムに記述いただければ幸いです。
　
一方しきい値の処理をするドローソフト（ペイントソフト）の方にもどちらの方法で処理をするかの違いがあります。
　以前しきい値の処理の方法の説明を「GIMP」で説明しましたが、GIMPではストレートの方法でしか処理できないようです。（Photoshopも）
　つまり3Dソフトでアルファチャンネルの設定を「プリマルチプライド」でレンダリングし、
　ドローソフトのほうで「ストレート」で処理をするとフリンジが発生してしまうようです。
　　＊逆に「ストレート」でレンダリングし、「プリマルチプライド」で処理をしてもフリンジが出ます。
　
手持ちの画像のアルファチャンネルがどちらのタイプか見分ける明確な方法は無いよう なのですが、
　RGBチャンネルを見ると分かりやすいようです。
　　＊GIMPでのRGBチャンネルの見かたは画像を読み込んだ後、
　　　上部のメニュー『色』から「色要素→チャンネル分解」をして、出てきた設定の「色モデル」を「RGBA」（RGBでもOK）にする。
　　　出たきた画像のフチと背景の境界を比べてクッキリしていれば「ストレート」。
　　　徐々に暗くなるグラデーションになっていれば「プリマルチプライド」と見分けることが出来ます。
　　　元々の画像が暗めの色だと判別しにくいのが悩みの種ですが・・・。
　　　他のソフトでの方法はわかりませんのでご自身で検索して探して下さい。


２・処理をやり易くする為にどうするか
　まずはモデリングソフトとドローソフト（ペイントソフト）のアルファチャンネルの種類をどちらかで統一する。
　　＊GIMPをつかうなら3Dソフト側のアルファチャンネルの設定を「ストレート」にしてレンダリングする。
　　　3Dソフトの設定で「Premultiply」の項目しかない場合は、
　　　そこのチェックなどを外し機能をOFFにする事で「ストレートアルファ」になります。
　photoshopを使用されている方は、黒マット削除、白マット削除、フリンジ削除などの機能があるそうなので色々と試してみてください。

　3Dソフトのmayaを使用されているJHSDF休日自衛隊さんの話では、
　mayaで「ストレート」の設定にしてからGIMPでしきい値の処理をすると、
　失敗しにくい、やりやすい方法になるようです。（私自身は未確認です）

ここに書くことが出来なかった他の3Dソフトやドローソフト（ペイントソフト）の設定方法などは
　それぞれの解説サイトをご覧になってください。

詳しい方法が書かれていないソフトで実際に上記の処理の方法を試された方は
　具体的な手法や結果等をフォーラムに記述いただければ、と思います、
　
ご覧いただきありがとうございました。

[JHSDF休日自衛隊]

ぽっこんぺーさん
ありがとうございます。黒いフチ問題に関して、レンダリングの設定をストレートにして改修した弁才船を日本語化wikiに投げました。
また、ロープの部分も以前ここでお話の合った部分的なアルファチャンネルの2値化によって出しています。

http://japanese.simutrans.com/index.php?Addon128Japan%2FShips

旧版も消えずに残っているようなので、もし気になる方は比べてみてください。
黒潰れを消そうとするとどうしてもえぐれてしまっていた船体がえぐれずになっている かと思います。

問題が問題だと気付かなかったところがまだまだ色々あるみたいです・・・

[JHSDF休日自衛隊]

日本語化wikiに地下鉄線路を投稿しました。

地下鉄線路、jpの公式線路からはちょっとずれているのですが、アドオンを作るときの寸法の目安みたいなものを説明させていただきます。

今回の線路は32ｍ平方の正方形の上に設置しました。
128jpでは1マスが約26メートルですが、3Dでアドオンを作る際はアドオンのピクセルと似た数字にするとよさそうです。
線路は高さ0.5m、幅0.5mと実際より結構大きいサイズですが、それでもいい感じになりました。　間隔はオブジェクトの中心同士の間隔で2ｍにしてあります。

ホームに関してですが、高さは2メートル、長さはマス全体の32メートル、幅は13mでタイルの端に設置したところ、現在の128jpで使用されている車両にピッタリな寸法のホームを制作することが出来ました。

ちなみに、1マスの高さは13メートルにすると合いますので、箱積み駅舎を作るときは32メートル四方で13メートルの高さの箱をモデリングすればうまく作れると思います。

添付画像に数値を書いておいたのでご参考までに。

[JHSDF休日自衛隊]

普通の建物の設定も書いておこうと思います。添付画像もご活用ください。
市内建築物は1タイルしか使用できないため、大きな建物を小さく作り小さい建物は並べたり拡大したりして作る技術が必要になってきます。
自分の場合は一番近くを走る乗り物に合わせて作っているので、海沿いの建物であれば船に合わせたスケール、道路に面する建物ならバスに合わせたスケールで高さを設定しています。
駅舎や本社、特殊建築物などはタイル数を自由に決められ、最近ではL字形など特殊な形の建物を作ることもできるので、高さに合わせて地面のサイズを変えることもできます。
箱積み駅舎での高さは3Dモデリングソフトで言うところの1タイルの13/32です。バスとかと合わせるならば、もうすこし1フロア当たりの高さを抑えてみるのも、正しくなくともよく見せるための手段の一つではないかとも思います。