UNITYのWebGLコンテンツからパノラマ画像をダウンロードする


UNITYのWebGLコンテンツで3DコンテンツをWEBブラウザで稼働させ、そのコンテンツからパノラマ画像を生成し、ローカルPCに画像を保存する方法についてです。

目的はUNITYで作成したWebGLコンテンツをWEB上で公開するにあたり、ユーザーが自由にゲーム中のシーンのパノラマ画像を取得できるインターフェースを提供することです。

記事でのUNITYバージョンは2019.1.6f1、WebGL Build Supportとします。
また、環境はWindows10、ブラウザはChromeとします。

[File:Build Settings]を開きます。
[Platform]の項目からWebGLを選択します。
右下にある[Switch Platform]をクリックし切り替えます。

これでWebGLコンテンツのビルドができるようになります。
試しに素の状態でbuildができるか試してみます。
※結構時間がかかりますが、工程を進めてbuildできないということになるとダメージ大なので試してみることをお勧めします。

[File:Build and Run]を開きます。
現在のプロジェクトのフォルダが開きますので、例えば[build]というディレクトリを作成します。

[build]のディレクトリを選択し[フォルダーの選択]をクリックするとビルドが開始します。
PCのグレードによりますが、かなり待つとChromeでWebGLコンテンツが開きます。

素の状態なのでSkyBoxとダイレクトライト、Main Cameraしかありません。
したがって上記のような画像が表示されるだけです。

[Build and Run]でWebGLビルドを行うと初回だけなぜかChromeで実行できるのですが、二回目以降ではローカルのビルド成果物をChromeで実行できません。
動作確認を行うにはWebサーバーにアップロードしてChromeで確認しています。

パノラマ画像の作成ですが、「360-screenshot-capture」という無料アセットを使わせていただきます。

https://assetstore.unity.com/packages/tools/camera/360-screenshot-capture-112864

インポートします。

空のゲームオブジェクトを作成します。

適当に分かりやすい名前に変更します。
ここではEmptyGameObjectとします。

適当なアクセス可能なフォルダに”Panorama.cs”というスクリプトファイルを生成します。
今回はAssets/Plagin/Simple360Render配下に生成します。

“Panorama.cs” を以下のように編集します。

using System.IO;
using UnityEngine;
#if UNITY_WEBGL
using System.Runtime.InteropServices;
#endif

public class Panorama : MonoBehaviour
{
#if UNITY_WEBGL
    [DllImport("__Internal")]
    private static extern void FileDownLoad(byte[] bytes, int size, string filename);
#endif

    public int imageWidth = 4096;
    public string filename = "skyonsea_panorama.png";
    private bool saveAsJPEG = false;

    // LateUpdate is called once per frame
    void LateUpdate()
    {
        if (Input.GetKeyDown(KeyCode.P))
        {
            byte[] bytes = I360Render.Capture(imageWidth, saveAsJPEG);
            if (bytes != null)
            {
#if UNITY_EDITOR
                string path = Path.Combine(Application.persistentDataPath, filename);
                File.WriteAllBytes(path, bytes);
                Debug.Log(filename + " has been saved into " + path);
#elif UNITY_WEBGL
                FileDownLoad(bytes, bytes.Length, filename);
#endif
            }
        }
    }
}

Assets/Plugins/WebGL というディレクトリを作成し、以下のコードを “FileDownload.jslib” というファイルネームで保存します。

var FileDownloadPlugin = {
    FileDownLoad: function(pImage , size, pStr) {
        var mimeType = 'data:image/png;base64';
        var filename = Pointer_stringify(pStr);
        var binary = new ArrayBuffer(size);
        var dv = new DataView(binary);

        for (var i = 0; i < size; i++)
            dv.setUint8(i, HEAPU8[pImage + i]);
        var blob = new Blob([binary], {type : mimeType});
        const a = document.createElement('a');
        a.href = window.URL.createObjectURL(blob);
        a.download = filename;
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    }
}
mergeInto(LibraryManager.library, FileDownloadPlugin);

Panorama.csをEmpty EmptyGameObjectにアタッチします。

この状態でUnity Editorを再生すると[p]キーでパノラマキャプチャすることができます。

キャプチャされた画像の格納場所はUnity Editorの最下段にデバッグ情報として表示されます。
設定にもよりますが、以下のディレクトリにskyonsea_panorama.pngとして保存されると思います。

C:/Users/%USERNAME%/AppData/LocalLow/DefaultCompany/%PROJECTNAME%

画像は例えば以下のようなものです。

この画像はシーンのパノラマ画像です。
背後に有ったSkyBoxの太陽が見えます。
WebGLとしてビルドしたものをChromeで実行しても、同様にパノラマ画像をダウンロードすることができます。

左下をご確認ください。
ダウンロードディレクトリにパノラマ画像がダウンロードされていると思います。

さてこれでパノラマ画像をダウンロードする仕組みはできました。
後はシーンを作り上げていけば良いことになります。

以下は作例です。

この作例では以下の有料アセットを使っています。

aquas-water-river-set
massive-clouds-screen-space-volumetric-clouds

このWebGLコンテンツをクリック/マウスオーバーしてから[p]キーを押下してください。
Windows10のChromeならパノラマ画像がダウンロードできるかと思います。

如何でしょうか?
ゲーム等にパノラマ画像をダウンロードさせるインターフェースを簡単に設置できることがお分かり頂けたかと存じます。

ただし注意事項があります。
なんでもがパノラマ画像としてキャプチャされるわけではないようなのです。
WebGLとしてビルド可能であることは必須なのですが、例えWebGLとして表示できていたとしてもパノラマ画像としてキャプチャできない例に遭遇します。

例えば私はAQUASのアセットを持っていて、無料アップグレード特典で入手したAQUAS 2020も持っているわけです。
当然AQUAS 2020の方が高機能なのでAQUAS 2020を使ったWebGLコンテンツでパノラマ画像を取得したいのです。
しかしなぜかAQUAS2020のエフェクトがパノラマ画像に反映されません。
理由が分かる方、お教え頂けると助かります。

UNITYはひと時も同じ状態で留まりません。
バージョン毎の差分、アセットの対応バージョン、組み合わせなどが多すぎて上手くいかないことが多いと痛感します。

前はこれでできたから、と思って新作アセットと組み合わせようと思うと、意味不明のエラーメッセージが出力される。
やっとの思いで解決しても、最新のバージョンではまた別の問題に直面する。
その度にググり、ログを見て原因を探り、解決したり諦めたり。

最近では諦めることが多いです。
実を言うと今回の記事、Unity-Chan “Candy Rock Star”でやろうかなと思っていたのですが、 UNITY 2019のWebGLでBuildできず諦めています。

とは言え、簡単に背景を作ることとだけに着目するとそれほど大きな変化が無いので背景作成ツールとしては長いこと使い続けています。

この記事がだれかのお役に立てば幸いです。


挿絵画家になろう(その11)


「挿絵画家になろう(その11)」です。
これまでBlenderのアドオン、MB-Labの啓蒙として記事を連ねてきました。
MB-Labを使って秀逸な少女キャラクターのメッシュオブジェクトを生成し、VRoidStudioの髪をインポートして装着させ、そこそこの服を着せ、キャラクターのマテリアルも弄れるようになり、表情も変更できるようになり、同梱のポーズを組み合わせて新しいポーズも作れるようになりました。
そして服に関しても、まあそれなりに用意できるようになりました。

そろそろ背景が欲しいな、と思います。
単に背景と言っても色々です。
単色塗りつぶしやグラデーションハイライトといった2Dペイントツールでの描画でも良いし、当然ガチンコで屋内屋外の風景を描いても良いです。

ただ、我々は本来「(自称)小説家」です。
自分の小説に挿絵を付けることが目的です。
当然挿絵を書く時間は最小限に留め、その分小説執筆に時間を割きたいですよね?
そのためのいくつかのソリューションを考えました。
ただ残念ながら無料ではありません。
無料でもできなくはないですが、そこはクオリティとのトレードオフになりますね。

本記事はWindows10のChrome推奨です。
その他の環境でどうなるのかは検証していません。
以下のWEBGLコンテンツは参照できますでしょうか?

これはUNITYで作成したWEBGLコンテンツです。
正常に動作していれば、海と空の動く風景が表示されます。
海は波たち、空には雲が流れます。
このような風景が簡単に作れてしまうのです。
UNITY自体は(個人ユースであれば)無料で使えるのですが、今回は以下の有料アセットを使っています。

aquas-water-river-set
massive-clouds-screen-space-volumetric-clouds

屋外風景を考えるに、先ず超遠景としての空や大地もしくは海があり、それよりも近い遠景があり、地形を特徴付ける中近景があり、周囲環境があるわけです。
我々は人物モチーフをMB-Labの3Dキャラクターにする決心をしました。
では風景もある程度は3Dで固めていきましょう。
そのための超遠景に関して先ずは考えよう、というわけです。

上のWEBGLコンテンツをChrome上でマウスオーバーしてアクティブにし、[p]キーを押してみてください。
skyonsea_panorama.png という画像ファイルがダウンロードされれば期待動作です。
適当な画像ビューアで開くと以下のようなパノラマ画像であることが分かります。

上のWEBGLコンテンツは空と海の風景をパノラマ画像として生成するツールでもあるのです。
タイミングを選んで [p]キー を押すことにより、希望の雲の画像を得ることができるのです。

3Dキャラクターを最終的にどのプラットフォームで作品に仕上げるのかは検討すべき課題です。
ただし、今回は結論を出しません。
と言うか、空と海をUNITYで作っておきながら、今回はUNITYでどのように風景を作るのか、という話をしたい訳でもありません。
あくまでも風景画像をBlenderで表示してとりあえずは空と海がある風景の中、3Dキャラクターをレンダリングする方法に関して述べるだけです。

さて、パノラマ画像のサンプルを得ることができました。
この画像を任意のプラットフォームに持っていき、背景に使えば良いわけです。
UNITYのSkyBoxに再移植することもできますし、Daz Studio等、たいていの3Dインテグレーションツールで表示させることができます。
今回はBlenderの背景にする方法を説明したいと思います。

Blenderでの設定方法は簡単です。
先ずオブジェクトモードであることを確認してプロパティウインドウのワールド(青い円のマーク)を選択します。

「サーフェス」の項の「ノードを使用」をクリックします。

「サーフェス」の項に背景が設定されました。

「スクリーンレイアウトの選択」から「compositing」を選択します。

「ノード」を「マテリアル」、「シェーダーを取得するためのデータタイプ」を「ワールド」に切り替えます。

[shift+a]で現れる「追加」メニューから以下を追加します。
・テクスチャ:環境テクスチャ
・ベクトル:マッピング
・入力:テクスチャ座標
そして以下のように連結させます。

環境テクスチャにパノラマ画像を読み込みます。
3Dビューの「3Dビューのシェーディング」で「レンダー」を選択すると背景が描画されます。
もし青っぽくなるけれど全景が表示されないという場合は投影方式が「平行投影」となっています。
テンキーの[5]キーを押して「透視投影」に切り替えます。

後はノードの「マッピング」を調整して背景画像を調整します。
色々極端な設定にすると変化があって面白いです。

MB-Labのキャラクターの背景にしてみました。

いかがでしょうか?
パノラマ画像があれば、それを背景に設定できました。
別に普通の画像でも背景にできますが、パノラマ画像だとアングルやズームが思いのままですので自由度が高いのが良いです。

問題はどのようにしてパノラマ画像を入手するかです。
WEB上では無料素材としてパノラマ画像を公開していらっしゃる方もおられます。
気に入るものがあればそれを使うのでも良いでしょう。
気に入ったものが無いのならば自分で作成するという手もあります。
TwinMotionでも天候を決めてパノラマ画像で出力することができます。
素材を用意できるのならばTwinMotionで背景画像を作るのは良い選択かもしれません。

今回UNITYを使いましたが、正直なところ小説家になろうの諸兄姉にはお勧めしていません。
理由は満足する画像を作れるようになるまでのハードルが高いことです。
無料で希望する絵作りをするにはかなりスキルを磨く必要があります。
もしくは有料アセットを購入する必要があります。
たとえ有料アセットを購入したところで、バージョンやアセット毎の組み合わせがあり、なんかよく分からない障害にぶつかります。
UNITYってバージョンアップが激しくて古いアセットは新しいバージョンで使えなくなっていることが多いんですよね……。
あのアセットとこのアセットを組み合わせれば、と思いホクホクしていると「なんでこうなる?」ということが多々あり、解決のためにログ見たりググったり、そして夜は更けてゆく。
好きなら良いんですが、誰もがそんなマゾという訳じゃないですよね?
UNITYって本当によく分からない。

上のWEBGLコンテンツで生成した画像は小説の挿絵背景としてならば自由にお使い頂いて構いません。

今回はこれで終わりです。
UNITYでWEBGLコンテンツとしてパノラマ画像を生成・ダウンロードする方法に関しては別方面で需要があるかもしれません。
機会があれば別記事にまとめたいと思っています。
また、時間があれば[その12]を書きたいと思います。


Blenderのシェーダーお絵かき


今回は完全に自分用のメモです。
Twitterを見ていて、Blenderのシェーダーノードでお絵かきしている方がいらっしゃったので追実験。

Blender 2.79bしか使えないのでノードは自作です。

なお、twの元ネタは以下であるようです。
楽しい!Unityシェーダー お絵描き入門!

Blenderで平面ポリゴンを追加して、その平面にシェーダーノードで図形を描写します。
凄く面白いアイデアであると思います。

構造は意外と簡単です。

オブジェクトのテクスチャ画像からx,y各座標を取り出し、中央からの距離と角度を分離します。
そして距離と角度を入力パラメータとする関数を作成し て濃度グラフを作成します。
濃度にカラーランプノード等で閾値の範囲を決め、シェーダーで描写します。
等高線を取り出すノリですね。

fract, distance, angleの三つの ノードグループを作っています。
取り出すベクトルがレングス1.0に正規化されている前提としています。

fractは入力をオブジェクトのテクスチャ座標ベクトルとします。
各xyが周期1、レンジ-1.0~1.0の信号であると仮定し、任意倍数に逓倍し、新しいxy座標を個別に出力します。
出力の範囲は-1.0~1.0の実数です。

\(Fract(x,a) = mod(x+1.0 , \frac{2}{a})・\frac{a}{2} – 0.5\\
Fract(y,a) = mod(y+1.0 , \frac{2}{a})・ \frac{a}{2} – 0.5\)

distanceは各xy座標を値として受け取り、原点からの距離を求めます。
出力の範囲は0.0~ \(\sqrt{2}\) の実数です

\(Distance(x,y)=\sqrt{x^2+y^2}\)

グループノードと出力をそのまま画像出力した例を以下に示します。

原点がゼロで値がゼロ、離れるに従い線形に値が増加してゆきます。
同じ距離であれば同じ値になります。
色表現的な意味では四隅は飽和していることに注意が必要です。

distanceを用いれば数式により同心円系の図形が描けます。

\(Func(s) = abs(sin(16πs))\)

angleは 各xy座標を値として受け取り、 原点との角度を計算します。
出力の範囲は \( 0.0~2π \)です。

\(Angle(x,y)=\\
 cos^{-1}(\frac{x}{\sqrt{x^2+y^2} }) (if y ≧ 0)\\
Angle(x,y)=\\
 cos^{-1}(\frac{-x}{\sqrt{x^2+y^2} })+π (if y < 0)\)

グループノードと出力を \( 2π \)で除して画像出力した例を以下に示します。

同じ角度であれば同じ値になり、反時計回りに値が増加してゆきます。

後はもう一つのノードグループfunc1に適当な関数を記述すれば良いわけです。

\(func1(s)=abs(cos(2.5s))\)

関数を設定してカラーランプノードを弄れば、抜きの入った集中線も実現できます。

\(func1(s)=abs(cos(100s))\)

桜の花びら。

\(Func2(s) = min(\\
  abs(cos(2.5x))+0.4 ,\\
  abs(sin(2.5x))+1.1)・0.240\)

この作例ではDistance系とAngle系は乗算ではなく加算しています。

fractノードの入力を変えることにより任意の縮小繰り返しができます。

数式により任意の図形を作成し、それを繰り返しパターンにできるのです。

シェーダーノードはプログラム環境として機能し、様々な図形を描画できるところがとても興味深いです。

参考までにblenderファイルを置いておきます。
shader_node_sample.blend


挿絵画家になろう(その10)


「挿絵画家になろう(その10)」です。
これまでBlenderのアドオン、MB-Labの啓蒙として記事を連ねてきました。
MB-Labを使って秀逸な少女キャラクターのメッシュオブジェクトを生成し、VRoidStudioの髪をインポートして装着させ、そこそこの服を着せ、キャラクターのマテリアルも弄れるようになり、表情も変更できるようになり、同梱のポーズを組み合わせて新しいポーズも作れるようになりました。

今回は前回に引き続き、襟付きのワンピースを作ります。
今回はキャラクターの体のメッシュを利用して服を作成します。

Anime_female(F_AN02)でキャラクターを生成します。

服のベースはdefaultのキャラクターから作ります。
ポーズをt-poseにします。

t-poseにするのは服の作りやすさからです。
最終的なシルエットの美しさはa-poseから作ったほうが良いのですが、腕や足の角度があるので細かな修正が難しくなるのです。

あとはdefaultのままFinalizeするのですが、接頭語だけは分かりやすい名前を指定します。
ここではmannequin_gilr_1としておきます。

このキャラクターのメッシュの一部を素材として加工することにより服を作ります。
ただしMB-Labで生成したメッシュには各種のmodifierが適用されていて、メッシュ流用時に悪影響が出ます。
Modifierの影響を外す方法はいくつかあるのですが、ここでは簡便に一旦Waveフォーマットでエクスポートすることとします。
Obj形式は複雑なエフェクト類が一切無いのでModifierの影響が全てなくなります。

適当な名前を付けてエクスポートします。
ここではmannequingirl1.objとしておきます。
必ず「選択物のみ」にチェックを入れます。
これを忘れるとカメラやランプなどの余計なものが混入します。

Objファイルのエクスポート後、このBlenderプロジェクトはしばらく使わないので保存しておきます。
ここではmannequin_girl_1_base.blendとしておきます。

mannequin_girl_1_base.blendは暫く使わないので閉じてしまって構いません。

Blenderで新規のプロジェクトを開きます。
そして mannequingirl1.obj をインポートします。

単なるメッシュオブジェクトとしての mannequin_girl_1_body_MBLab_anime_femaleが読み込まれます。

このメッシュオブジェクトを素材にしていくわけです。
メッシュオブジェクトを目的に応じてコピーします。
目的とは原型ベース、メッシュ間引き用、ワーク用等です。

一つは原型ベースとして確保しておきます。
プロパティシェルフの[レンダーレイヤー]ボタン(二枚の重なった書類のボタン)を押下します。

オブジェクトモードになっていることを確認して mannequin_girl_1_body_MBLab_anime_female を右クリックで選択します。
[shift+d]キーを押して mannequin_girl_1_body_MBLab_anime_female をコピーします。
マウスを動かすとコピーされていることがわかります。

[esc]キーを押すと移動がキャンセルされます。
この状態ではコピーした方の mannequin_girl_1_body_MBLab_anime_female.001が選択されています。
[m]キーを押すとレイヤーの移動となります。

左上の枠がdefaultのレイヤなのでそれ以外の枠を選択します。
ここでは上段左から5番目のレイヤを選択します。
プロパティシェルフの[オブジェクト]で mannequin_girl_1_body_MBLab_anime_female.001 をmaterial_baseにリネームしておきます。

material_base を編集します。
5番目のレイヤ、編集モードであることを確認します。
3Dビューのシェーディングはソリッドとします。
服の素材として不要な部分を消していきます。
先ずは首から上。
首の一部分を[alt]キーを押しながら右クリックでラインの選択を行います。

頂点を削除します。

首から上が分離します。
首から上のメッシュにマウスオーバーさせて[l]キーを押下して選択していきます。

歯茎や舌のメッシュが残りますが同様に削除していきます。

首から上が消えたら、次は体の半分を消します。
意図はミラーモデファイアで左右対称にするためです。
ちなみにdefaultのメッシュは意外なことに左右対称ではありません。

ライン選択→頂点の削除→メッシュの選択→頂点の削除で右半分を削除します。

どんどん消します。
なんか楽しくなってきます。

黒いマテリアルだと作業しにくいので適当な色に変えます。

現状のメッシュは目が細かすぎるので間引きます。
具体的な作業としては一本置きにライン選択をして「削除」→「辺の溶解」を行います。

これで素材ベースとしてはいい感じになりました。
ミラーモデファイアを適用します。
オブジェクトモードに戻り、プロパティシェルフのモデファイア―からミラーを選択します。

XをチェックしてX軸で左右対称にします。

このまま「適用」ボタンをクリックして適用します。

プロパティシェルフのレンダーレイヤ―を選択し、レイヤーのシーンで1番目のレイヤを重ねます。
([shift]キーを押しながら左クリックすると複数のレイヤを選択できます。)

素材ベースはメッシュを間引いているのでオリジナルより若干小さくなっています。
素材ベースを体より大きくするために法線方向に拡大します。
material_baseオブジェクトが選択されていることを確認してから編集モードに切り替えます。
オブジェクトにマウスオーバーさせて[a]キーを押して全選択します。

[alt+s]キーを押し法線方向への拡大とし、[↓]を三回ほど押します。

膨らみました。
ギリギリを狙うよりは体から明確に服が離れる程度にするほうが良いと思います。

ここからはメッシュを変形させていきます。
テンキーの[3]キーを押して真横からのビューにします。

この先の作業は基本的に一番下のラインを[e]キーで延長、拡大、回転で調整しながら下に伸ばしていきます。

上半身側の一番下のラインを[alt]キーを押しながら右クリックして選択します。

[e]キー→[z]キーを順番に押し、[下]キーを押して服を下に伸ばします。

基本、[e]キーには[z]を組み合わせて下へだけ延長、[s]キーや[g]キーも[x][y][z]と組み合わせて方向を管理してゆきます。
正直ここは経験が要りますが、そんなに難しくはありません。
後でモデファイア―をかけますのでシルエットを整えることに専念します。

とりあえず以下のように変形させました。

イメージとしては体の線を強調させすぎず、スカートがやや広がるワンピースです。

襟もつけましょう。
首の一番上の線を選択し、[e]キー、[s]キーを順番に押してマウスで広げます。

適当な大きさに広がったら[enter]キーで確定させます。
辺ループカットで適当なサイズに分割します。

襟の前部分のメッシュを削除します。

袖も加工します。
両手分の袖を同時に作りたいので再度半分を消し、ミラーモデファイア―を適用します。

袖を作ります。

襟を整え、ミラーモデファイアを適用します。

次にUVマップ用のシームを付けていきます。
シームとはUVマップ展開したときに島として分離したい境界線です。
ワンピースのデザインとして、前回に合わせて襟と袖口は白、その他は紫ということにしましょう。
シームを付けたい線を選択します。
ある程度部分に分けないと[スマートUV展開]で微少な島が量産されてしまい苦労します。

[ctrl+e]キーを押して辺のメニューを出し、[シームを付ける]をクリックします。
シームを付けた所が赤い線になります。

[a]キーで全選択して[u]キーを押下し、UVメニューを出します。
[スマートUV展開]をクリックします。
[島の余白]は0.01(1cm)程度にします。

UV画像エディターでUVを確認します。

新規画像は全面黒かと思います。
UVマップには一見どこの部位か分からないほど細かく島が生成されています。
服の造形がテキトウであるため、エッジが多く、分割されてしまうのです。
これを避けるにはスムースな造形を心掛ける必要があります。
しかしそれは「簡単に早く作る」という造形意図に反するので悩ましいところです。

複雑なUVマップなので、単純にいくつかの色を塗るだけならまだ良いのですが、縞模様の服を作りたい場合などは苦労することでしょう。

UVマップ用の新規画像を開き、とりあえず[onepiece]と名前をつけます。
全体を紫で埋めたのち、袖と襟を白く塗ります。

マテリアルの設定で、[onepiece]の画像を割り当てます。

色が反映されます。

後はクロスモデファイアを適用します。

mannequin_girl1_MBLab_anime_femalにコリジョンモデファイアをかけます。

onepieceのほうにクロスモデファイアをかけます。

仕上がりは以下のような感じです。

ライティングが悪いのでマネキンではなく、デフォルトキャラクターに着せてみましょう。

胸の形など、必要以上にはボディラインが強調されず、でも体形に沿った綺麗なシルエットになっています。
これは縫合スプリングが前後左右への締め付けが発生するのに対して、重力による布の落下しかないためです。

縫合スプリングを用いる方法より、こちらの方法の方が シルエットをコントロールするのが圧倒的に楽です。
襟の形も、少々の風や乱流があっても然程は乱れません。
襟足の高いデザインでもある程度はコントロール可能です。
服の造形はシルエットを制御する程度のクオリティで良く、後はクロスモデファイアがいい感じに整形してくれてしまいます。

以上の作業ですが、慣れると一着三十分程度で行えます。
途中までの成果物があればキャラクターごとに流用可能なので、シルエットの直しや、襟の形の直し等であればさらに短時間で新しい服を生成可能です。

デメリットは以下。
・UVマップの島が複雑。
・キャラクターごとに作りなおす必要がある。
・メッシュのライセンスを考慮する必要がある。

MB-Labのメッシュを流用するので、当然ライセンスに関してはMB-Labのライセンスの影響を受けると考えたほうがよいでしょう。
服を配布したい場合や3Dゲーム等に使う場合はMB-Labのライセンス条項に従うべきかと。

以上前回と今回で、アプローチの違う二つの方法で、ほぼ同じ形状の襟付き長袖ワンピースを作成しました。
どちらにもメリット・デメリット、得意・不得意があることがお分かり頂けたかと存じます。
どちらが正解というものでもなく、組み合わせていけばよいのだと思います
とはいえ、もっと簡単な方法はないものかと……。

と、いうことで今回は終わりです。
時間があれば[その11]を書きたいと思います。


挿絵画家になろう(その9)


「挿絵画家になろう(その9)」です。
これまでBlenderのアドオン、MB-Labの啓蒙として記事を連ねてきました。
MB-Labを使って秀逸な少女キャラクターのメッシュオブジェクトを生成し、VRoidStudioの髪をインポートして装着させ、そこそこの服を着せ、キャラクターのマテリアルも弄れるようになり、表情も変更できるようになり、同梱のポーズを組み合わせて新しいポーズも作れるようになりました。

で、やはりネックは服なんですよね。
その2」でネット上の情報をもとに縫合スプリング機能を使って簡易的な袖なしTシャツを作る方法を紹介しました。
また「その4」ではワンピースを作る方法を紹介しました。
でも襟は無いし、半そでだしで多分これだけでは満足できないですよね?

私としても服を自由に、そして簡単に作る方法を模索し続けているのです。
でも、無料の良いソリューションを見つけることができていません。
もしご存じの方がいらっしゃったら是非ぜひお教えください。

縫合スプリングを使う方法は、私自身、あまり良い方法とは思っていません。
Tシャツなどの簡単なものならば良いのです。
しかしやってみると分かるのですが、少しでも凝ろうとすると難易度が跳ね上がっていきます。

私も縫合スプリングを知った当初は、実際のドレスシャツの型紙から各パーツを作れば良い、なんて考えていました。
しかしパーツの数が増えると、縫合線を結ぶ事自体が難しくなります。
襟や袖を離れたところから縫合しようとすると移動の途中で変形してしまい、もとの形状が失われてしまいます。
綺麗に縫合するには変形後の形状を合わせる必要があり、複雑な形にするにはかなりの研究が必要です。

実際の縫製用型紙を作るのも難しいのでしょうが、縫合スプリングではまた別の難しさがあるのだと思います。

縫合スプリングで複雑な服を作るには、それはそれで深く険しい道なのだと思います。

それでも、単純な形状ではそれっぽい服を作成できるのが縫合スプリングの良さだと思います。
今回と次回で、同じような襟付きの長袖ワンピースを別の方法で作成していき、差を見ていきたいと思います。

ということで今回は縫合スプリングを使った方法です。
変形前の素材を以下に置いておきます。
clothe_onepiece_spring_mat.zip

この素材はMB-LabのAnime_Female(F_AN02)のデフォルトキャラクターに合わせて作成しました。
ZIPファイルには以下のファイルが梱包されています。
clothe_onepiece_spring_mat.obj
clothe_onepiece_spring_mat.mtl
onepiece_txt.png

MB-Labで適当なキャラクターを生成して後にインポートしてください。
次のアニメーションのように首に丸い輪っかを通すようにして全体を整えます。

マテリアルの設定は以下のようにします。

UVマップが非常にシンプルです。
縫合スプリングで服を作成する場合、元の形状が平面であるため、[スマートUV投影]でもほぼメッシュ通りの分かりやすいUVマップとなります。
色を塗るにしても、柄を書き入れるにしても非常に便利です。
これはスプリング縫合方式のメリットの一つです。

さて、パラメータにもよりますが、仕上がりは以下のようになります。

クロスモデファイアを使う場合、通常では[クロスフィールドの重み]をデフォルトにしておくと、いい感じに乱れます。
この乱れがリアルな皺を作ったり、縫合を徐々に密なものにしてくれたりしているわけです。
しかし、襟がある場合は少しの乱れでも大きく暴れてしまい、意図した所に収まらなくなります。
許容できないので、[重力]、[全て]、[力]、[空気抵抗]のみ1にして、他は0にします。
その他、[クロス]の[空気抵抗]も0にします。
このように、小さなパーツを含む場合は、気を付けなければならない所が多くなります。

風等の乱れがまったくないため、クロスモデファイアをかけ続けても、変化は少ないです。
縫合もあまりきちっとはされません。
縫合しきれなかった部分が筋となって、地肌が見えてしまっています。
これは手動で縫うか、レンダリング画像を2Dペイントツールで補正すれば良いでしょう。

いかがでしょうか?
複雑さとシンプルさの微妙なバランスに苦心しました。

正直な話、襟の造形のために他の部分を犠牲にしている感があります。
襟を含めて一度で造形するより、襟なしで一旦クロスモデファイアをかけたあとに、改めて襟を作りこんだほうが良いかと思います。

今回の作例では襟のメッシュは以下のようになっています。

この円形の襟の部分を変更すれば別の襟にすることが(理屈上)できます。
とは言え、スプリングによって引っ張られてしまい、完成後の造形予想は難しいものがあります。
特に襟足の高い造形は非常に難しいです。

ワンピースをマリアに適用してみました。
デフォルトのキャラクターと体形が違いすぎて、素直には適用できません。
同じ比率では首が太すぎ、かつ短すぎでBodyに干渉してしまいます。
首が乗っている四角形の外枠の形を変えないよう気を付けながら、ワンピースの首を太く、短くしてBodyと干渉しないように変形させて適用しています。

結局、同じ服をグラマーな大人キャラクター、スレンダーな子供キャラクタ―で共有するのは、色々難しい課題があります。
スレンダーボディに合わせると、必要以上にボディラインが強調された服になってしまいます。
グラマーボディに合わせると、胸が余った服になってしまいます。
結局はキャラクターごとに服をワンメイクで作る必要があるのでしょうか?
それでも縫合スプリングは元のメッシュが単純なため、ターゲットに合わせこむ手数は少なくて済みます。

と、いうことで今回は終わりです。
時間があれば[その10]を書きたいと思います。