3DCGソフトは使い方が難解で初心者にはハードルが高いです。そこで、ブラウザのみで3Dキャラ的なポートレートを作ってみたので紹介します。次回はブラウザの2Dツールのみで顔写真を今回の3Dキャラに貼り込んでメークアップ？
ブラウザの制約
3DCGのWebサービスではWebGLとFlashを多用するので、この２つが動くブラウザで使う必要があります。最も汎用的なのはFirefoxの最新版です。ChromeやEdgeでも動くとは思いますが、私が今回使用したのはFirefox 49.0.2ですのでFirefoxの最新版をおススメします。
全体の流れ
- （3Dキャラクターの作成）今回は省略してプリセットキャラクターを使用
- MIXAMO：プリセットキャラクターの選択/ポーズの選択とFBXでの書き出し
- Sketchfab：FBXの読込みと背景の設定、およびカメラワークとパブリッシュ
- 【今回】
【次回以降】
- 顔写真の準備：自撮り写真、またはGoogle写真などのライブラリーから選択
- Pixlr Editor：3Dキャラクターの顔に顔写真の貼り込み
- TAAZ：顔のメイクアップ、およびヘアースタイルのメイクアップ
- Facetune：表情のチューニングその他（スマホアプリ）
- Fotor：ポートレート全体の仕上げ
PoserやDAZ Studioなどの3DCG統合ソフトでは１本のソフトで上記のような作業が全てできますが、使いこなせるようになるまでかなり時間と労力が必要になります。今回は、多くの部分的なWebサービスを組合わせて使うことで、短時間に少ない労力でポートレート画像を作る事が可能となります。
今回の作品
まだ中間段階ですが、ポートレートのベースとなる3Dキャラクターと背景（東京ビッグサイト）をSketchfab上にパブリッシュしました。ローポリゴン（低解像度）なのでフォトリアルではないし、所々おかしな映像部分があります。
以下の動画をスタート後、映像上でマウスなら左ボタンドラッグ（回転）、右ボタンドラッグ（移動）、ホイール（拡大縮小）、スマホ／タブレットならスワイプ（回転）、ダブルスワイプ（移動）、ピンチ（拡大縮小）により、3Dキャラクターを見回せます。
ブラウザなので動きが緩慢な場合があり、少し反応を待ってから次のアクションに入ってください。
3Dキャラクターの作成
今回はプリセットキャラクターを使う事で面倒なキャラクター作りはスキップしましたが、興味があれば以下の記事などを参考にしてください。Autodesk Character GeneratorというWebサービスを使います。
【3DCG】無料で使える3Dキャラクター作成Webアプリとは？！
なお、この記事ではSketchfabにはFBXが読込めないのでBlender経由でとありますが、現在はFBXが読込めるようになりました。ポーズを付ける必要はあるので、BlenderかMIXAMOに読み込んでポーズを付けてからSketchfabにアップロードする必要はあります。
プリセットキャラクターの選択とポーズ
Adobeの傘下にあるMIXAMOというサイトに行きます。
https://www.mixamo.com/
右上のメニューから初めてならサインアップ、登録済みならログインを行ってください。ADOBE IDとMIXAMO IDが使えますが、統合化されて１つにできます。
「BROWSE ANIMATIONS」をクリックします。
検索窓の右下にある「Characters」をクリックします。
好きなキャラクターを選んでクリックします。一番下にページボタンがあるので、他のページも見ると良いです。
これを選択してクリックしました。
いわゆる「Tポーズ」なので、アニメーションから適当なポーズを選びます。メニューの左隣の「Animations」をクリックします。
シンプルに立っているポーズを選んでクリックしました。
右上の「ADD TO MY ASETTS」をクリックします。
「VIEW / DOWNLOAD」をクリックします。
右上の「QUEUE DOWNLOAD」をクリックします。
そのまま「QUEUE DOWNLOAD」をクリックします。
右下の「DOWNLOAD」をクリックします。
「OK」をクリックします。
これはFirefoxの場合ですが、右上のダウンロードボタンをクリックするとファイルの確認ができます。以上でプリセットキャラクターのファイルができたので、これをSkatchfabにアップロードします。
FBXのアップロードと背景の設定、およびカメラワークとパブリッシュ
Sketchfabという3DCGモデルの共有サイトに行きます。
https://sketchfab.com/
なぜいきなり共有サイトに行くかというと、このサイトは3Dキャラクターファイルをアップロードさえすれば、その後のほぼ全ての工程がブラウザ上で行えるのと、リアルタイムレンダリングが高品質な割に非常に高速なことです。
3DCGソフトを使っていると、レンダリングで３０分も待たされるという事が頻繁に起こります。Sketchfabだと一瞬でレンダリングが終わる割に十分な高画質が得られるのでストレスを感じる事無く作業ができます。
右上の「LOGIN」か、初めてなら「SIGN UP」をクリックしてユーザー登録してログインします。
右上の「UPLOAD」ボタンをクリックして、先ほどのFBXファイル（ダウンロードフォルダー内）を指定してアップロードすると、上記のようにキャラクターが表示されます。右下のオレンジ色の歯車メニューをクリックします。
「3D settings」をクリックします。
いろいろな事がここでできますが、先ずは中央の「Camera Field Of View」を設定します。わからなければそのまま「45°」とかでOKです。値を小さくすると望遠側、大きくするとワイド側になり、背景も含めて映像に反映されます。
ポートレートは望遠側が一般的ですが、どのくらいクローズアップにするかで決まります。
下にある「BACKGROUND」のスイッチをONにして左端の三角をクリックすると以下のようになります。
「ENVIRONMENT」タブを開くと「Blur」があり背景のぼかし具合を調節できます。「０」でぼかし無しです。私は今回は「１」にしています。ポートレートの場合は「２」か「３」でかなりぼかすのが定石だとは思いますが、背景がわかるようにしてみました。
その下の「Brightness」は背景の明るさです。キャラクターの明るさは変わらないので、背景とキャラクターを個別に調整したい場合に使います。
次に背景を選択します。トップのツールバーの左から２番目のランプボタンをクリックします。
「ENVIRONMENT」の右にあるスイッチをONにして、左の三角をクリックして開くと現在の背景が表示されます。下にある「Orientation」はキャラクターとの相対角度なので、キャラクターを動かさずに背景だけ回転できます。
「Brightness」は背景とキャラクターの両方の明るさを調整できます。こちらでキャラクターの明るさを決めて、先ほどの背景のみの「Brightness」で背景の明るさを決めると良いと思います。ちょっとややこしいですが・・・
背景のタイトルの右の三角をクリックして、いろいろな背景の中から選びます。キャラクターへのライティングを変えたい場合は、その上の「LIGHTS」のスイッチをONにして調整します。キャラクターのズームはホイール、回転は左ドラッグ、移動は右ドラッグです。
上記は全画面表示にして全画面のスクリーンショットを撮った画像です。今回はポーズにしたのでアニメーションはしませんが、MIXAMOで動きのあるアニメーションを選べば、ここでアニメーションが観れます。
他にももっと多くの調整ができますが、今回は最小限の項目のみ紹介しています。個別のテクスチャーなどの明るさや色なども細かく調整ができるので、時間があればいろいろいじってみると楽しいと思います。
次回はこの画像を元に、2DのWebサービスを使って顔写真を貼付けてメイクアップしたり髪形を変えたり表情を変えたりしてポートレート画像を完成させます。
初音ミク V4X
まとめ
次回以降は2DのWebサービスを使います。その方が効率が良いのと高画質処理がリアルタイムでできるからですが、例えばメイクアップを3DCGソフトで本格的にやろうとすると、それだけでけっこうな値段のするプラグインやユーティリティーソフトを買わなければならなくなります。
一方で2DのWebサービスだと無料でけっこうな事ができます。以下は私がテスト的にやったサンプルです。
塗った場所は色が付いているので、白いところは塗っていない場所ですが、ベースが肌色であればけっこうなメイクができそうです。顔のパーツの認識も3Dではマニュアルで指定しなければなりませんが、2Dだと自動的に認識してくれます。
【ポートレート】ブラウザの2Dツールだけで顔写真を3Dキャラと合成？！
ではでは、きらやん
