Creativlog

【UE5】カメラマップで画像とCGを合成して影を落とす【サンプルあり】

しゅーや — Sat, 04 Jun 2022 10:38:44 +0000

あまり知られていないかもしれませんが、割と前からUE4、UE5には、Composite Plane(Beta)というプラグインがあります。
それを使うことでUE5内でもカメラマップ(カメラプロジェクション)ができます。

また、個人的にComposureを使わずに、手軽に静止画、動画とCGをUnreal Engine内で合成できないかと思っていました。
HDRI Backdropも便利なのですが、歪みなくスケールを合わせるのが難しい…

そこでカメラプロジェクションで影を落とせるようにすれば、それっぽくなると思いやってみました。

このやり方の問題点は、後ほど記載しますが、実際、色の扱いや合成の精度など、趣味レベルなので、あしからず！

サンプルプロジェクトはこちらからDLできます。
車は含まれておらず、HDRIとBackplateは、HDRI Haven からDLしたものになります。

ちなみにComposureでのバックプレートとの合成のやり方は、こちらで解説されています。

Composite Plane プラグインとカメラプロジェクションについて

今回の方法は、Composite Planeプラグインをベースに改造しています。
なので、Composite Planetとカメラプロジェクションについて少しご紹介します。

Composite Planeプラグインを使うことで、↓のような感じにカメラプロジェクションができます。

割と前からあるComposite Plane プラグインで
Camera Projection (カメラマップ) 試してみた！

キューブ並べただけだから、ちゃんとやれば、他のソフト同様にもっと3D感でるはず(原理は同じだろうから当たり前だけど)#UE5 #UE5Study pic.twitter.com/RFEgLdciNS
— しゅーや (@syu_ya23) May 10, 2022

簡易的なモデルを配置し、そこに画像、もしくは動画を投影するので、3D感がで、簡単なカメラアニメーションに対応できます。

↑の動画では、私がカメラプロジェクションに詳しいわけではなく、そこまでうまくない+簡単なテストだったので、そこまで複雑にモデルを作成していませんが、ちゃんとやるとこんな感じできたりします。

UE5では、モデリングツールがかなり進化しているので、カメラプロジェクションのモデルなら、UE5内でモデリングするのも可能かと思います。

動いても歪みのないようにするのは少し難しいですが(個人的に)、プラグインの使い方自体は、簡単です。

プラグインのざっくりとした使い方は簡単で
①Composite Planeを有効
②(適宜)メッシュを用意
③BP_CineCameraProj配置
④画像を設定
⑤Projectionするメッシュを指定
⑥シーケンサーでアニメーション
あとは形状に応じて、メッシュを作ったり、配置したり調整
動画を使ったり、キーイングも可能#UE5 https://t.co/hpsPCWff3v pic.twitter.com/eOWsjkrUrw
— しゅーや (@syu_ya23) May 11, 2022

また、 Composite Plane プラグインでは、画像をキーイングしたり、動画をしたりすることもでき、割と多機能です。

ただ、こちらのプロジェクションのメッシュ上にデフォルトでは影が落とせない(はず…！)なので、アクターの影を落とせるようにします。

カメラプロジェクションにアクターの影を落とす

サンプルがあるので、ざっくりとした解説になりますが、やっていることはシンプルです。

Composite Planeプラグインの画像の投影で使われるマテリアルは「Unlit」で基本的には影が落ちません。
ライティングの影響を受けず、影やオクリュージョンも乗らないので、メッシュの境目が目立たなくなるので、綺麗にプロジェクションができます。

メッシュのマテリアルをDefault Litすることで、影を落とすことができますが、今度は、ライティングを受け、オクリュージョンが乗ってしまい境目が目立つようになってしまいます。

そこでメッシュの境目や影を落とさない部分は
① Basecolor = 0, Emissive = Texture にして
影を落とす部分を
②Basecolor = Texture, Emissive = 0
にすることで、境目の目立たなくしつつ、部分的に影を落とします。
①と②もぱっきりわかれているとその際目が目立ってしまうので、グラデーションのマスクで①と②をブレンドします。

ブレンドするためのマスクは、色々な方法で作成できますが、今回は、単純にCircleMaskで円形のマスクを作成しています。
ちゃんとやるのであれば、頂点カラーなどでも良いと思いますし、SphereMaskの位置を自由に動かせるようにしたりすると良いと思います(SphereMaskのBに任意の座標を入れれるようにするなど)。

下記画像の赤の部分がその処理になります。
サンプルでは、「M_CamProj_Shadow」です。

青い部分は、マスクを視覚化するためのデバッグ表示と
影を落とさないメッシュ(IsGround=0)では、一応、マスク関係なくEmissive = Textureにするようにしています。

BP側で制御できるようにしたいのでSwitchを使っていません。

また、完全に影を落とさないメッシュ用にUnlitにしたマテリアルインスタンスも一応、用意しました(MI_CP_Shadow_Unlit)

実は、HDRI Backdropもやり方は少し違いますが、似たようなことをやって、半天球メッシュに影を落としています。

あとは、ブループリントアクター(BP_CineCameraProj)でこれらのパラメーターを調整できるようにします。
サンプルでは、個人的に使わない機能(ノード)は削除しているので、キーイングなど元のプラグインの機能で使いたいものがある場合は、プラグインの BP_CineCameraProj も参考にしてください。

サンプルの使い方

使い方は、Composite Planeとだいたい同じです。

① 画像を投影するメッシュを配置します。

カメラプロジェクションなので画像の形状に合わせるのが良いですが、ただ背景+地面として使うだけで、平らな地面に影を落とすだけであれば、L字や3面でも良いと思います。

スタティックメッシュのDetailsで「Cast Shadow」と「Affect Distance Field Shadow」のチェックを外し、これらのメッシュが影を落とさないようにします。

②BP_CineCameraProj の配置と設定

「Game/CameraProjectionwithShadow/BP_CineCameraProj」をレベルに配置します。

a: バックプレートの画像をセットします
b: 「Ground Object」で影を落とすメッシュ(地面)を指定します
c: 「Objects」でGround Object以外の影を落とさないメッシュを指定します

そうすると、Material Instance Dynamicがアサインされ、現在のカメラの位置から、メッシュに画像が投影されます。

③マスクを調整します

「IsDebugMask」にチェックをいれるマスクが表示されるので、マスクの範囲やグラデーションを「Radius」と「Hardness」で調整します。

あとは、Sky LightにHDRIを設定したり、適宜、ディレクショナルライトなどのライトを設定します。

ただ、影が落ちる部分は、ライティングの影響をうけるので、強さや色を調整して、馴染むようにする必要があります。

このやり方の問題点

このやり方のぱっと思いつく問題点としては、HDRI Backdropも同じなのですが

画像の上にもトーンマップがかかるので、元の画像と色味などが変わってしまいます。
露出などのポストプロセスの影響も受けます。

また、LumenのScreenTraceでの反射が入ってしまい、バックプレートの画像とHDRIの画像の両方の反射が部分的に映り込みます。
「r.Lumen.Reflections.ScreenTraces 0」でScreenTraceをなくすことはできますが、ケースバイケースで迷うところです。

まとめ

カメラマップを使いCGと画像を合成し、影を落とすという方法とサンプルをご紹介しました。

個人的にはComposureより軽くて、簡単で個人的に気に入っている方法ではありますが、趣味レベルでは良いですが、仕事レベルでは、どこまで精度を求めるか次第だなと思いました。

ただ、カメラマップなので、作り方次第で背景により立体感を持たせり、立体的に影を落としたり、少しカメラを動かしたりもできるかと思います。

なので、あまり役に立たないと思うので、紹介するか迷いましたが、せっかくなので、供養しようと思い、記事を作成してみました。

それでもどなたかの何らかのヒントなどになれば幸いです！

【UE4】自動車ビジュアライゼーションTips

しゅーや — Thu, 05 Aug 2021 13:29:09 +0000

自動車や工業製品、建築ビジュアライゼーションなど、今まではV-Rayなどのプリレンダーを使用することが多かったのですが、昨今は、レンダリングをUnreal Engineで行うことも増えてきています。

今回は、そのUnreal Engineでビジュアライゼーションをする上での、ちょっとしたTipsをご紹介します！
Ray Tracingを使用を前提とした内容になっています。
また、処理負荷よりビジュアル優先なので、静止画や動画用途向けな内容です。

タイトルにある通り、車を例に紹介しますが、その他の工業製品などのハードサーフェイス系のビジュアライゼーションにも役立つと思います。

今回は、ある程度、UE4を使っている方、向きの記事ですが、まだあまり使ったことがない方は、ぜひこちらもご覧ください！
車系の作品、コンテンツを作るのに役立つアセットや動画、機能などをまとめています。

【UE4】車系のコンテンツ制作に役立つアセットや動画や機能

Unreal Engine4で車系の作品、コンテンツを作るのに役立つ無料アセットや動画、機能、事例などの情報をまとめてみました。

また、今回、紹介するものの多くは、こちらの動画で紹介されているものになります。

前提

Tipsの前に少しだけRay Tracingとコンソールコマンドについて少し…。
ある程度、知っているという方は、飛ばして頂いて大丈夫です！

Ray Tracing

車などのルックを作る際に、反射はとても重要な要素です。
また、レイトレーシングのアンビエントオクリュージョンも、デフォルトのSSAOと比べて、クオリティが高く、プリレンダーに近いAOを表現できます。

そのため、可能であれば、レイトレーシングを使った方が、クオリティを上げやすいです。
ただ、処置負荷が一気に上がるので、VRなどのパフォーマンスが求められるコンテンツでは、使わない場合も多いです。

レイトレに関しては、公式ドキュメントや以下のコンテンツが参考になります。

Just a moment...

コンソールコマンド

アンリアルエンジンでは、コンソールコマンド(Console Variables and Commands、略して、CVar)というコマンドで設定変更をすることができます。
CVarは、アウトプットログなどで使用することができます。

レイトレーシングの設定もポストプロセスボリューム(PPV)から調整することができますが、PPVにない設定もCVarで変更することができます。
「r.RayTracing.~」などがそれに当たります。

デザイナー、アーティストだとこういったコマンドに苦手意識のある方も多いかもしれませんが、見た目に関わる設定も多くありますので、使えた方が良いです。

上記の画像で「r.RayTracing.」と入力しています、文字を入力すると、候補が出てきます。
使えそうなコマンドを見つけた場合は、「～ ?」で、そのコマンドの説明が表示されます。
例えば、「r.Tonemapper.Sharpen ?」のような感じです。

Help→Console Variables からヘルプを表示させるともできます。

ちなみに、CVarで変更した設定は、エディタを閉じるとリセットされてしまいます。
毎回、変更するような設定は、プロジェクト/Config フォルダにある「DefaultEngine.ini」に設定を記述することで、その設定を適用した状態で、プロジェクトを開くことができます。

こちらの画像は、これから紹介する「r.Reflections.Denoiser」などを記述した例です。

注意点としては、アウトプットログでは、「 r.Reflections.Denoiser 0」と記述するのに対して、.iniでは、「 r.Reflections.Denoiser=0」になります。「スペース」と「 = 」で異なります。

プロジェクト設定

前置きが長くなりましたが、本題です。
まずは、プロジェクト設定に関する項目です。

ルックに関する設定

Reflection Capture Resolution

こちらを「1024」や「2048」などに上げます(PCスペックによる)。

アンリアルエンジンのレイトレ反射は、レイトレの反射と従来のスクリーンスペースやリフレクションキャプチャの反射のハイブリッドになります。
(完全にレイトレ反射にすることもできるので、それは後ほど紹介します。)

そのため、「 Reflection Capture Resolution 」でリフレクションキャプチャの反射の解像度を上げるのがおすすめです。

Clear Coat Enable Second Normal

車のボディを表現するのに、Clear Coatは、ほぼ必ず使用するかと思います。

そのため、こちらにチェックをいれておくのがおすすめです。
特にAutomotive Materials Packのカーボンを使用する際は、必須です。

環境効果に関する設定

背景もUE4上で作る場合は、以下の項目にもチェックを入れるのが、おすすめです。
基本的には、上の２つはチェックが入っているかと思います。

Support Atmospheric Fog　☑
Support Sky Atmosphere　☑
Support Sky Atmosphere Affecting Height Fog　☑

「Support Sky Atmosphere Affecting Height Fog」を有効にすることで、透明なオブジェクトにもHeight Fogなどを使用することができます。

Sky Atmosphereに関しては、詳しくは、こちらをご覧ください。

Just a moment...

反射

本記事のメインの反射周りのTipsです。

反射関連のCVar

r.Reflections.Denoiser 0

デフォルトで反射のデノイザーがオンになっています。
これを「0」にすることでデノイザーをオフにすることができます。

デノイザーがオンだと、反射がぼやけてしまいます。
そのため、オフにすることでクリアな反射を表現することができます。

しかし、当然ですが、ノイズが増えます。
環境によっては、サンプル数などをあげても、どうしてもノイズが取り除けない場合もありましす。
そのため、状況によっては、こちらをオンのままにして、ノイズが少ないことを優先する場合もあります。

r.RayTracing.Reflections.ReflectionCaptures 1

ヘッドライトの中を明るくしたりするのに役立ちます。

レイトレの反射の反復回数は、Max Bounceで決めます。
だいたい３回くらいにすることが多いかと思いますが、この反復が終わった後の反射は、黒くフォールオフします。

しかし、「 r.RayTracing.Reflections.ReflectionCaptures 1 」にすることで、黒くフォールオフするのではなく、Reflection Captureの反射を使うようになります。

r.RayTracing.Reflections.MaxUnderCoatBounce 1

クリアコートの下の層の反射のバウンス回数です。
デフォルトは、０なので、下の層では、反射しません。

こちらは、見た目が大きく変わる場合があるので、この設定を変更する場合は、ルックデブの初期から変更しておくのが、おすすめです。

また、反射によるノイズも増えるので注意が必要です。

反射の歪みの改善

下記の設定をすることで、上記の画像のような反射の不自然な歪みを改善し、反射の精度を上げることができます。

プロジェクト設定→GBuffer Format ：High Precision Normals

Static MeshのDetails → Build Settings → Use High Precision Tangent Basis ☑
こちらの設定変更後は、Apply Changesを押さないと、設定が適用されません。

反射に関する知識

Max Roughness

PPVのレイトレの反射の設定に、Max Roughnessというものがあります。

前述したように、UE4のレイトレ反射は、レイトレの反射とラスタライズの反射のハイブリッドです。
そのハイブリッドのブレンド度合いを調整するのが、この数値です。

この値が、「１」の場合は、全てがレイトレの反射になります。
「0.6」などの場合は、0.6より低いラフネス値のマテリアルは、レイトレ反射を使用し、0.6より大きいラフネスでは、ラスタライズになります。
ぱっきり分かれるのではなく、ある程度ブレンドされます。

また、レイトレの反射が多いほど、重くなります。
そして、ラフネス値が高いマテリアルでレイトレ反射を使うと、ノイズも出やすいです。

なので、処理速度に余裕があるからと言って、高くすれば良いというわけではなく、シーンや見せたいもの、ノイズの状況によって、ケースバイケースで変更します。

ラフネス値が高いと、レイトレ反射を使っても、あまり見た目に変化がないので、私は、デフォルトの0.6のままにすることが多いです。

Reflection Capture

前述の通り、Max Roughnessが1より小さい場合は、全てがレイトレ反射ではないため、レイトレを使ったシーンでもReflection Captureも有用です。

パフォーマンスを求める場合は、 Max Roughness を下げ、ボディなどのラフネスの低い重要な部分にだけ、レイトレ反射を使い、他はReflection Captureで補うという手段もあります。

Reflection Captureを使った車のビジュアライゼーションは、こちらが参考になります。

半透明

半透明に関しては、Tipsってほどでは、ありませんが
半透明マテリアルへのレイトレーシングの反射を得るためには、PPVでTransparencyを「Ray Tracing」にする必要があります。

Refractionは、見た目や扱いやすさの観点からオフにする場合が多いです。
しかし、Composureを使う場合などは、Refractionを使用しないと、おかしな見た目になるので、使用する場合もあります。

HDRI Backdrop

自動車などのビジュアライゼーションでは、HDRI Backdropなどを使用し、HDRIを使用したライティングをすることが多いかと思います。

そのHDRI Backdropを使用する際の、ちょっとしたTipsです。

HDRIのボケの解消

デフォルトでは、Mipmapが有効なため、HDRIがぼけることがほとんどだと思います。
テクスチャの設定を変えることで、解決します。

Mip Gen Settings: No Mipmap
Maximum Texture Size: 短辺の解像度などに上げる(例：8Kテクスチャなら4096など)

こちらの設定を変えるとフリーズすることがありますが、ちゃんと動いているので、待ちましょう。
1→2の順番でやった方が、 Maximum Texture Sizeの部分で、余計なミップマップを生成しないので、少し早くなります。

Cubemap Resolution

HDRI Backdropをレベルに配置した時点では、Sky LightのCubemapの解像度が低い状態です。

なので、Skylight コンポーネントを選択し、Cubemap Resolutionを上げるのがおすすめです。
私は、2048にすることが多いです。

環境光を調整したい時

HDRI Backdropでのライティングの明るさを調整したいときは、HDRI BackdropのIntensityではなく、Skylightコンポーネント側のIntenistyを調整するのがおすすめです。

HDRI Backdrop側のIntensityを上げると白飛びすることがよくあります。
なので、 Skylightコンポーネント側で調整することで、背景としてのHDRIの明るさは保ったまま、SkyLightの環境光の明るさのみを変えることができます。

設置感を増やす

DIrectional Lightなどの影やレイトレAOで十分な場合がほとんどですが、より設置感を増やしたい場合は、こちらで紹介されている、ColorCorrectVolumeを使った方法が有用です。

やり方を簡単にまとめると

Virtual Production Utilitiesプラグインを有効に
Content Browserで「CCV」で検索(Show Engine Content と Show Plugin Contentに☑)
BP_ColorCorrectVolume を配置
Actor Hidden in Game☑、Type: Boxにし、Gainなどで調整
ScaleでBoxを薄くして配置

シャープ

ハードサーフェイス系だと、シャープをかけることも多いかと思います。

CVarの説明部分でもでてきた「r.Tonemapper.Sharpen」で、UE4上でシャープをかけることができます。

また、こちらは、シャープではありませんが、Screen Percentage を上げることで、シャープな解像度感のある絵を得ることもできます。

PPVのRedering Featurersから設定することができます。

また、Viewport Optionからも可能です。

こちらは、値が200の場合は、２倍の解像度でレンダリングし、元のサイズにリサイズするのと同じ効果があります。
なので、上げるほど、処理負荷も上がるので、お気を付けください。

モアレの解消

CADモデルなどを使用し、ヘッドライトやグリルなど細かなディテールがあると、離れてみたときにモアレが起きる場合があります。

そういった場合は、ディテールを削ったモデル(ローポリ)を用意し、LODとしてインポートします。

そうすることで、離れたときは、ローポリになり、近づいたときは、元のハイポリに切り替わることで、アップにも耐えられる見た目を担保したまま、モアレを解消することができます。

ノイズ対策

レイトレを使用しているとノイズが撮り切れず、困ることがあるかと思います。
ノイズを削減するいくつかの方法をご紹介します。

効果の高い順に紹介します。

Movie Render Queueの使用

静止画、動画用途に限りますが、Movie Render Queue(MRQ)のAnti-Aliasingにあるサンプル数を上げる方法です。

モーショブラーが欲しい場合は、Temporal Sample Countを上げ、モーショブラーが必要ない場合やレンダーパスを出力する場合は、Spatial Sample Countを上げます。

数値を上げるほど、レンダリング時間は増えますが、ノイズも削減されます。
128以上あたりからは、レンダリング時間の割りに、あまり変化がなくなってきます(基本的には、2のべき乗で上げていきます)。

この辺りの詳細については、こちらで紹介しています。

[UE4] 映像向け機能 Movie Render Queue について - Qiita

映像向けの機能として、UE4.25で追加されたMovie Render Queue(High Quality Media Export)ですが、UE4.26でも更に進化しました。様々な機能を備えるMovie Render Queueの中で特に注目の機能を数値検証結果などを...

各サンプル数を上げる

リフレクションやAOなどの各サンプル数(Sample Per Pixel)を上げるのも、特に効果があります。

こちらも上げるほど、重くなっていきます。

なので、MRQを使用し、書き出し時のみサンプル数を上げるのが、作業しやすく、おすすめです。
MRQで「Console Variables」の項目を使用することで、書き出し時のみ適用するCVarを設定することができます。

r.RayTracing.Reflections.SamplesPerPixel
r.RayTracing.AmbientOcclusion.SamplesPerPixel
r.RayTracing.Translucency.SamplesPerPixel

あたりを調整するのが、多いかと思います。

ライトのサンプル数を上げる

ライト側にもサンプル数を上げる設定があります。

こちらを上げるのも有用です。
特にHDRI BackdropなどHDRIを使用したSky Lightのサンプル数を上げるのが効果的です。

だいたい、ここまでで紹介した3つのサンプル数を調整することで、ノイズが気にならないレベルになる場合が多いです。

r.Shadow.Denoiser.PreConvolution 2~4

こちらのCVarを変更することで、ソフトシャドウのちらつきを抑えることができます。

ポストプロセス

DoFとBloomをオフにするのも一つの手です。

微妙にぼけている部分がチラつくことがあります。
なので、最初からオフにするというよりは、見た目優先で、どうしてもこの部分が原因でチラついてしまう場合に、オフにすることを検討するくらいで良いと思います。

苦肉の策

ライティングやマテリアルなど次第でシーンによっては、どうしてもノイズが取り切れない場合があります。
そこで見た目を犠牲にノイズを抑える方法も一応、ご紹介します。

デノイザーを使う

反射のデノイザーを無効にすることで、反射がクリアになることをご紹介しました。

ただ、どうしても反射部分のノイズが取り切れない場合は、デノイズを使用することも検討します。

また、「 r.RayTracing.Reflections.MaxUnderCoatBounce 1 」にすることでノイズが増えることもあるので、こちらを使用しない(=0)というのも効果がある場合があります。

MRQでTAAも使う

MRQでAnti-Aliasingのサンプル数を上げると、デフォルトでかかっているアンチ(TAA)を無効にしてくださいというワーニングがでます。
しかし、無効にせずにTAAも併用することができます。

併用することでノイズを抑えることができます。
しかし、かなりボケた絵になってしまうため、本当に苦肉の策です。

大きな解像度でレンダリングする

苦肉というほどではありませんが、昔からのジャギー対策などでも良く使う、目的の解像度よりも大きな解像度でレンダリングし、後からリサイズする方法です。

MRQでは、High Resolutionという機能があり、タイルに分割して、レンダリングし、あとから合成することで8K、16Kといった高解像度の画像をレンダリングしすることができます。
しかし、レンダリング時間は、一気に増加します。
また対応していないポストプロセスエフェクトもあります。

最後に

今回は、静止画や動画用途などでのビジュアライゼーションのTipsを紹介しました。

どれも、その設定をしたからと言って、劇的に変わるものではありませんが、様々な細かな設定で塵積で変わっていくかと思います。

少しでも作品やお仕事のクオリティアップや問題解決に繋がれば、嬉しいです！

Marmoset Toolbag で3Dモデルをウェブサイト上で表示させる【3D Viewer】

しゅーや — Sun, 14 Feb 2021 12:46:59 +0000

Marmoset Toolbagは作成したシーンを3Dビューワーとしてもエクスポートすることができます。
そのエクスポートした3Dシーンを自身のウェブサイトに埋め込む方法をご紹介します。

ウェブサイトに埋め込むことで、簡単に人に見せることができますし、PCやスマホさえあれば誰でも閲覧することができます。

埋め込むやり方としては大まかに２つ

WordPressのプラグインを使う方法
HTMLでiframeなどを用いて埋め込む方法

それぞれ解説していきます。

実際に埋め込んだものはこちらになります。

本記事ではMarmoset Toolbag3の画面で説明しますが、最新のMarmoset Toolbag4でも設定は同じでした。(2021年2月現在)

Marmoset Toolbag とは？

実際の解説の前にMarmoset Toolbag(以下、MT)について簡単に紹介します。

大まかなMTの特徴としては
・リアルタイムレンダリング
・ベイク
・3Dビューワー
があります。

リアルタイムレンダリング

このソフトのメインの機能としては、リアルタイムのレンダリングソフトです。

かなり快適に高品質なリアルタイムレンダリングが可能です。
アニメーションを付けることも可能です。

静止画での書き出し、動画での書き出しともに対応しています。

最新のMarmoset Toolbag4ではGPUでのレイトレーシングにも対応しました。

テクスチャベイク

MTのテクスチャベイクは非常に優秀です。
強みとしては
・ベイクできるテクスチャの豊富さ
・Cageの調整のしやすさ
です。

筆者自身、基本的にSubstance Painterでベイクすることがほとんどですが、モデル同士が近すぎてうまくベイクできない (Cageを調整したい) 時やはっきりとしたCarvature mapがほしいときなどに使用します。
あまり使いませんがBent Normalもベイクすることができます。

3Dビューワーとしての機能

作成した3Dシーンは3Dビューワーとしてもエクスポートすることができます。
Marmoset Viwerというスタンドアローンのアプリがあります。
こちらは無料なので、Marmoset ToolbagのライセンスがないPCでも、インターネット環境がない場所でも3Dシーンを表示することができます。

Marmoset Viewer - Interactive 3D Renders In Your Web Browser

VIEWER VIEWER art by Antoine Dupuis, concept by Fino Feng Real-Time Interactive 3D on the Web Viewer is a physically-based WebGL 3D model viewe...

また、エクスポートしたシーンは今回の本題であるウェブサイトへの埋め込みも可能です。

Webで使える形式でエクスポートする

前置きが長くなりましたが、本題です。
まずWebで使える形式でエクスポートする方法です。
上記のスタンドアローンアプリで使用する際もやり方は同じです。

シーンが完成したら
FIle → Export → Marmoset Viewer
をクリックするとウィンドウが開きます。

保存するディレクトリを指定します。
TitleやAuthorなどは空でも問題ありません。
アニメーションがある場合は「Export Animations」に☑を入れることで、アニメーションも含めることができます。

Write HTMLにチェックを入れることを忘れないようにしてください。(WordPressプラグインを使う場合は不要)
解像度なども指定することができます。
ただ、解像度やAuto-Playなどは、後ほどHTMLを書き換えて、変更することも可能です。

諸々の設定をし「Export」を押すと、.mview と .html形式のファイルが書き出されます。
.mview は前述のMarmoset Viewerで開くことも可能です。

WordPressのプラグインで埋め込む方法

WordPressを使ったサイト限定ですが、簡単にサイトに埋め込めるプラグインが公開されています。

Marmoset Viewer

Marmoset Toolbag Web Viewer

更新が3年前で止まっているので、使用する際はご注意ください！(2021/2 現在)

インストール、アップロード

通常通り、プラグインをインストールし、有効にします。

設定

プラグインを有効にすると、サイドバーにMarmoset Viwerが表示され、解像度などを設定することができます。

レスポシブルに対応するように%で指定することも可能です。

記事に埋め込む

プラグインを有効にすると「Insert Marmoset Toolbag2 mview file」というMarmosetのアイコンが表示されます。

Pick Mview Fileをクリックし、書き出した .mviewファイルをアップロードします。
Publishをクリックするとショートコードで生成されます。

ここでオートスタートやUIの表示、非表示を設定することも可能です。

結局はショートコードでURLを指定しているので、自分の(サーバーの)好きな場所にmviewを置いて、指定しても問題ありません。

iframeで埋め込む方法

次にHTMLでiframeで埋め込む方法です。
こちらはWordpress関係なく、埋め込むことが可能です。

サーバーにファイルをアップロード

エクスポートした .html と .mview をサーバーの任意の場所にアップします。
(ここではtest.html と test.mviewとします)
アップした場所に応じて、test.htmlの10行目を絶対パスまたは相対パスで test.mviewを参照できるよう 書き換えます。

marmoset.embed( './test.mview', { width: 1280, height: 720, autoStart: true, fullFrame: false, pagePreset: false } );

同じ階層にtest.mviewをアップした例

この時点でtest.htmlにアクセスすることで、Marmoset Viewerが表示されたページを表示することができます。

エクスポート時に解像度を設定しましたが、HTMLで直接書き換えても問題ありません。

iframeの使用

iframeは、指定したURLをインラインフレーム表示できるHTMLタグです。
そのため、iframeを使うことで先ほどのtest.htmlをウェブページや記事内で表示することができます。

下記がiframeを使用した一例です。

allow=”fullscreen”

で全画面表示にしておくのがおすすめです。

WordPressでもカスタムHTMLなど使うことで同じように使用することができます。

他のWebベースの3Dビューワー

Web(ページ)上で3Dモデルを表示させたい場合にSketchfabという便利なサイト、サービスもあります。

無料で使うことができ、サーバーも必要ないのでこちらの方が簡単です。
ただ、無料のアカウントだとアップロードできるファイルサイズに制限があり、割とテクスチャサイズを下げたりしないといけない場合が多いです。

Use Sketchfab to publish, share and embed interactive 3D files. Discover and download thousands of 3D models from games, cultural heritage, architecture, design...

こちらはSketchfabにモデルをアップロードすることで、Sketchfabのサイト上で閲覧することもできますし、埋め込みタグを生成することもできます。

各ビューのタイトルの下のEmbed から生成することができます。

こちらもiframeを使っているんですけどね（笑）

まとめ

Marmoset Toolbagで作成したシーンをWebページに埋め込む方法をご紹介しました。
全然難しくないので、気軽にできるかと思います。

ちなみに冒頭に埋め込んであるMarmoset Viewはプラグインを使わずに後者のやり方で埋め込んでいます。

ポートフォリオサイトに埋め込んで実際にモデルを表示させるのにも使えますし、仕事でちょっと3Dで見せたいときなどにも役立つかと思います。
ワイヤーフレームやテクスチャも見れるので、見る側からしたら嬉しいです笑
自分のサイトを持っていない方はArt Stationにも埋め込むことができます。

Sketchfabの方が無料で簡単に使うことができますが、クオリティと容量面で私はMarmosetの方が好きです。

また、今回例で使用したおいなりさんは、フォトグラメトリベースで作成したもので、Noteの方で簡単なやり方を紹介しているので、良ければご覧ください。

Reality Captureの使い方とコツ【Photogrammetry】｜Syuya(向井秀哉)

しゅーやと申します。フォトグラメトリーソフトの Reality Captureの使い方を簡単に書いていきます。～このチュートリアルの内容～写真を撮って、Reality Capture(以下、RC)で3D化するまでのやり方とちょっとした撮影のコツを書いています。細かな機能の説明等は省いており Realit...

【UE4】車系のコンテンツ制作に役立つアセットや動画や機能

しゅーや — Fri, 01 Jan 2021 11:21:00 +0000

自動車業界でもUnreal Engineが使われることがどんどん増えています。
映像や静止画はもちろん、コンフィギュレーターや開発時のデザイン検討、HMI(ヒューマンマシンインタフェース)、シミュレーション、自動運転開発など様々な場面で使わています。

ただ、個人レベルで(学生含め)、車のCGを作る方は割と多いのに、日本で車の作品、コンテンツをUE4でを作っている方が何故か少ない…！
そこで、車系の作品、コンテンツを作るのに役立つアセットや動画、機能などをまとめてみようと思います。
今回は主にビジュアライゼーション、そして初心者向けです。
車系のCG制作をしている方、興味のある方がUE4でコンテンツを作るきっかけになれば嬉しいです！

アセット

Unreal Engineのマーケットプレイスで無料で公開されているアセットを紹介します。

Automotive Materials Pack

自動車系に特化したマテリアルライブラリーです。

Just a moment...

このマテリアルパックは本当に重宝しています。
カーペイントはもちろん、カーボン、メタル、ガラス、ラバー、レザー、プラスチックなど車に必要なマテリアルが一通り含まれています。そして、クオリティも高いです。

ほとんどのタイリングマテリアルは、Tri Plannerのプロジェクションでテクスチャを使用しているので、UVを開いていないモデルでも使うことができます。

車ごとに作らなくてはいけないマテリアルはもちろんありますが、このマテリアルパックがあることでかなり時短になります。
また、マテリアルの勉強にもなるかと思います。

実際に車で使用してみた記事も書いているので、良ければご覧ください。

新しい Automotive Materials Pack を使ってみた｜UE4

Epic Gamesが無料で配布しているAutomotive Materials Packが新しく更新されたので、実際に車のモデルにアサインして使ってみました。

Automotive Beach Scene

シーン構築されたアセットです。

Just a moment...

Beach Sceneに車を置いてみた

ライティング済みのシーンなので、このシーンに車を置くだけで良い感じのルックになります。

HDRI Backdropを使った背景制作の参考にもなると思います。

Automotive Bridge Scene

Beach Scene同様にシーン構築されたアセットです。

Just a moment...

Bridge Sceneに車を置いてみた

こちらの橋はパスで編集可能で、自由に道 (橋) を構築することができます。
デフォルトのマップである程度距離のある道路になっているので、走らせることもできます。

オートモーティブ系に重宝するUE4の機能

車系のコンテンツを作るときに使えるUE4の機能を紹介します。

Ray Tracing

反射が重要な車には非常に重宝します。

Just a moment...

UE4で使えるようになって、そんなに月日は経っていませんが、映像や静止画での用途であれば、十分使えると個人的に思います。
透過など難しい部分もありますが、下記の講演などが参考になります。

Just a moment...

ちなみにTransparencyをレイトレーシングにしないと、ガラスなどの透過物の反射がレイトレーシングの反射にならないので注意してください(使い始めた頃知らなかった…)

HDRI Backdrop

プリレンダリングで言うIBLのようなものです。

Just a moment...

HDRIをライティングとして使用しつつ、背景としても使用できます。
地面に影も落ちます。

使い方のコツとしては、これのみの背景というよりは、Beach Sceneなどのように近景、地面は3Dで作るりつつ、遠景、ライティングにHDRI Backdrop+αという使い方がおすすめです。

Movie Render Queue

映像(1枚絵も可)用の機能で連番画像を書き出すのに使用します。

Just a moment...

オブジェクトID(CryptoMatte)やAOなどをマルチレイヤーのexrで書き出すこともできます。
タイルで分割してレンダリングする「High Resolution」の設定もあるので、高解像度画像をレンダリングすることもできます。

また、Anti Aliasingの設定で「Temporal Sample Count」の値を増やすことで、ポストプロセスより綺麗なモーションブラーも得ることができます。
レイトレーシングのノイズの削減にも役立ちます。

Temporal Sample Count :256 でのモーションブラー

Variant Manager

コンフィギュレーターを簡単に作ることができる機能ですが、マテリアルの差し替えなどに重宝します。

Just a moment...

コンフィギュレーターを作るときに使えることはもちろん、色のバリエーション、ライトのオンオフ、ホイール(メッシュ)のバリエーションなど一度登録すれば、専用のGUIで簡単に切り替えることができます。
わざわざ何度もマテリアルをアサインし直したりしないで済みます。
単純な切り替えであれば、ブループリントが分からない方でもエディタの操作だけで使用することができます。

少し前の記事ですが、このブログでも使い方を紹介しているので、良ければご覧ください。

Variant Managerの使い方 | UE4

UE4でコンフィギュレーターを作るときやカラーバリエーションなどを作ってチェックする際に毎回マテリアルをアサインし直したりするの面倒と感じることはありませんか？そんな時にVariant Managerが便利です。使ってみたら便利だったので、使い方を記事にしました。

Datasmith

CADや他のソフトの形式のデータなどを直接読み込むことができます。

Just a moment...

Deltagen、Alias、VRED、Rhinocerosなど様々な形式に対応しています、

仕事では、自動車なの工業製品は、ほとんどがCADベースだと思います。
また、個人でもCADでモデリングしている方をちょいちょい見かけます。
そのような場合でもDatasmithで対応している形式であれば、そのまま読み込むことができます。

また、DatasmithでもBPやPythonで可能ですが、Visual Dataprepという機能を使うことで、簡単に小さいオブジェクトやいらないものを省いたり、マテリアルを置き換えたりした後にモデルをインポートすることもできます。

Composure

アンリアルエンジン内でコンポジットすることができます。

Just a moment...

車の映像や静止画を作成する時に、背景に実写素材を使うことも多いかと思います。

前述の通り、アンリアルエンジン内でもHDRIを使ったライティングが可能なので、アンリアルエンジン内でコンポジットまで完結させることも可能です。

ただ、After EffectやNukeの方がやはり使い勝手は良いので、UE内で確認レベルでコンポジットをし、Movie Render Queueでマスクなどを書き出し、最終コンポジットは、コンポジットソフトというのも良いかと思います。

また、Backplateを使ったコンポジットは、こちらが参考になります。

チュートリアル

Tips系の動画やチュートリアルの動画です。

Unreal Engine 公式 YouTube

Unreal Engine 公式YouTubeに投稿されている動画で自動車系の作品作り、特に絵作りに役立つ動画のプレイリストです。(古めの動画は省きました)
動画を止めて、右上の再生リストからリストを見ることができます。

Car Configurator Tutorials

自分のチュートリアルで大変恐縮ですが、1からカーコンフィギュレーターを作るチュートリアルです。
車をのモデルを(コンフィギュレーター用に)UE4に持っていく準備から説明しています。

自動車ビジュアライゼーションTips

このサイトでも、自動車や工業製品などのハードサフェイス系のビジュアライゼーションをする時のちょっとしたTipsをまとめています。
よろしければ、ご覧ください！

【UE4】自動車ビジュアライゼーションTips

Unreal Engineで自動車や工業製品などハードサフェイス系のビジュアライゼーションをする上での、反射のクオリティの上げ方、レイトレノイズの削減などちょっとしたTipsをご紹介します！

UE4を使った作品、コンテンツ

UE4で作られた車系の作品、コンテンツ、アーティストで個人的にすごいと思うものを紹介します。

Pagani のコンフィギュレーター

Just a moment...

“The Speed of Light” Porsche 911 Speedster Concept + Interactive Demo

David Baylis さん

Damian Bilinski さん

The Human Race

まとめ

主にビジュアライゼーション系での車の作品作りに役立つであろう情報をまとめてみました。
Unreal Engineには、自動車向けの無料アセットや便利な機能が色々とあるかと思います。

ちなみに冒頭で少し述べましたが、アンリアルエンジンが自動車業界で実際にどのように使われているかは、こちらのAUTOMOTIVE FIELD GUIDEで詳しく知ることができます。
ところどころの挿絵がとてもかっこいいです！

Just a moment...

少しでもUE4でコンテンツを作るきっかけになれば嬉しいです！
全くの初心者の方は、こちらの記事も良ければご覧ください。

Unreal Engine おすすめ学習コンテンツ

どうやってアンリアルエンジンを勉強したのか？学習したのか？と聞かれることが最近増えたため、おすすめの学習方法、教材、書籍、コンテンツをまとめました。

Unreal Engine おすすめ学習コンテンツ

しゅーや — Sun, 09 Aug 2020 10:22:21 +0000

ノンゲーム領域でもUnreal Engineを扱うことが増え、今まで Unreal Engine を使用してこなかった業種の方や会社が Unreal Engine を使い始めることがどんどん増えてきています。
どうやってアンリアルエンジンを勉強したのか？学んだのか？と聞かれることが多くあります。

そこで、今回はおすすめの学習方法や教材、コンテンツ、書籍、情報収集源をまとめたいと思います。
私が実際に使ったことがある、そして、使っているものの中で、おすすめのみをご紹介します。

※ Unreal Engine の初心者や使ってみたい方向けの記事です。

「freelance hub(トップページ)」さんでこちらの記事をご紹介いただきました！

ゲームエンジンを使いこなす！選び方から実践ノウハウまでの情報まとめ

ゲーム開発やXR体験、インタラクティブな空間演出など、幅広い分野で活用されているゲームエンジン。UnityやUnreal Engineをはじめ多くの種類があり、使用できるプログラミング言語や得意分野もエンジンごとに異なります。本記事では、代表的なゲームエンジンの特徴や選び方はもちろん、実践的な開発ノウハウ、周辺ツールや...

ネット検索

そんなん当たり前だわ！と怒られそうですが、実際、私のUE4、5の知識の7、8割くらいが、ネット上で得た知識です。

そのくらい Unreal Engine は情報が多く、日々増えていっています。

Unreal Engine に限ったことではありませんが、何か学習する時は、何か目的や作りたいものがはっきりしていると、学びやすく、定着しやすいですよね。

例えば、私が初めて車のカーコンフィギュレーターというコンテンツを作成した時は、カーコンフィギュレーターのチュートリアルはありませんでした。
そのため、機能ごとにタスクを切り分けて、そのやり方を検索することで、徐々に形になっていきました。

例えば…
・マテリアルの色の変更の仕方
・プレイ中にオブジェクトを変更
・UMG(UI)の作り方
など、これらを詰め合わせていって、1つコンテンツのを完成させることができました。

近道ではありませんが、Unreal Engineのマテリアルやブループリントは、ノードベースなどのでやりたいことに近しい単語で検索してみたり、ノードの一覧から使えそうなものを探し、そのノードについて調べたり、使ってみるのもとても勉強になるかと思います。

上記の動画の例では、車の色をグラデーションで変化させたかったので、マテリアルエディタで「Grad…」(グラデーション)と検索してみたりといった具合です。
最終的にそれを採用しなくても、他の場面で、あんなのあったなと思いだし、役に立ちます。

このようにコンテンツ丸ごとのチュートリアルはなくても、やりたいことの部分ごとのチュートリアルであればだいたいヒットします。
目的に向けて、やりたいことを都度、検索して徐々に学んでいくのが、学習、習得の一番の近道ではないかと個人的に思っています。

また、英語でも検索しましょう。
情報量が一気に増えます。

英語が読めなくてもChromeなら右クリックですぐに翻訳できますし、DeepLなどのより優秀な翻訳ツールもあります。

昨今は対話型AIなどのAI系のツールも活用できます(”現状”、割と嘘つくこともあるので注意が必要ですが…)

ネット上のおすすめコンテンツ

ネット上から情報を得ることがほとんどと述べましたが、その中でもおすすめのブログやサイトを紹介します。

Epic Developer Community

https://www.unrealengine.com/ja/onlinelearning-courses?sessionInvalidated=true

名前の通りEpic Gamesのコミュニティサイトです。

「ラーニング」には動画チュートリアルがあります。
何から始めて良いかわからない方も、ある程度目的がある方も何かに特化して学びたい方にもおすすめです。

ノンゲーム含め様々なジャンルの内容があり、初心者向けの内容も多数あります。
音声は英語の場合がほとんどですが、日本語字幕付きも多いです。

Quixelのハイクオリティな映像を例にした内容もあるので、現在もよく利用しています。

また、質問できるフォーラムもあるので、解決できないことがある際は投稿してみるのも良いでしょう。
ただ、回答は基本的に有志によるものなので、必ずしも回答がつくわけではありません。

Unreal Engine 公式YouTube

Unreal Engine

Welcome to the official Unreal Engine channel! Unreal Engine is a complete suite of real-time 3D tools made by developers, for developers. Create and take your...

最新情報はもちろん、Unreal Engineの機能のチュートリアルやTips、セミナーやウェビナーなどの動画など様々な情報を得ることができます。

全て英語ではありますが、日本語字幕の付いているものも多くあります。

Unreal Engine JP の方にも日本でのライブストリーミングやセミナーなどの動画があります。

Unreal Engine JP

このチャンネルではUnreal Engineの使い方を動画で覚えることができるチュートリアルや講演動画を展開していきます。 UnrealEngine公式サイトはこちら

エピックゲームズジャパンのDocswell

エピックゲームズジャパンさんのプロフィール | ドクセル

ドクセルはスライドやPDFをかんたんに共有できるサイトです

過去のUnreal Engine関係のイベントのスライドが公開されています。

過去の情報でも現在も役立つ情報が多数あります。

Qiita

Epic Games Japan - Qiita

Unreal Engine の提供、開発サポートを行っています。

Epic Games Japan がドキュメントにはないような機能の紹介であったり、技術的なTips記事を投稿しています。

通常のネット検索でもQiitaの記事もヒットしますが、サイト内で「記事の検索」をしてみるのも良いかと思います。

Quixel のYouTubeとブログ

Quixel

Quixel is a technology leader in 3D asset creation, powering Megascans, the world's largest photogrammetry asset library, now exclusively available on @Fab. M...

Get the latest Quixel Megascans news & updates

Stay inspired with the latest Megascans releases, new features, and behind-the-scenes looks at our ever-growing 3D asset library.

背景、環境メインになりますが、QuixelのブログとYouTubeも有益な情報やチュートリアルが多くあります。

QuixelはMegascansという大量のアセットライブラリを持っており、 Unreal Engine での使用なら、全て無料で使用することができます。
アセットを自前で用意できない方もこういったアセットを利用することでシーンを構築することもできます。

ヒストリアさんのブログ

UE4・ニュース・イベント｜ゲーム企画・開発のヒストリア

Unreal Engine の情報といったら、ヒストリアさんのブログです。
Unreal Engineについて何か検索した時に大抵ヒットするくらい様々な記事があります。

何度助けられたかわかりません。

ブログの一覧を見るだけでも、「こんなことができる」というのを知ることができるかと思います。

ゲームメーカーズ

アンリアルエンジンの最新記事｜ゲームメーカーズ

ゲームメーカーズは趣味のゲームづくりに関する情報発信を行っていくメディアです。ゲームづくりをはじめるきっかけや、ツールの最新情報、クリエイターインタビュー、ゲームづくりTipsなどを取り扱っています。

チュートリアルはあまり多くありませんが、 Unreal Engine の最新情報や関連した情報をわかりやすくまとめた記事が多いです。

情報収集の場として重宝します。

80 LEVEL

80 Level

80 LEVEL is an industry-leading platform for game developers,, digital artists, animators, video game enthusiasts, CGI and VFX specialists. Join us to learn abo...

海外のCG系の有名サイトで、 Unreal Engine を使った作品のメイキングなども記事が多数あります。

メイキングの中でも
「どのようにライティングをしているか」や「このマテリアルはこのように組んでいる」、「このようなポストプロセスの設定にしている」など載っている記事もあるので、大変参考になります。

Unreal Engine に限らず、CG系の情報収集源として重宝しています。

Twitter

Tweets by UnrealEngineJP

一番の情報収集源はTwitterかと思います。
最新情報はもちろん、イベントのアナウンスなどもこちらに投稿されます。

Twitterをやっているのならば、アンリアルエンジンの公式ツイッターアカウントは、ぜひフォローしてみてください。

私もUnreal Engineに関する役立つ情報や機能についてなどツイートしてますので、併せてフォローしていただけますと嬉しいです！

Tweets by syu_ya23

書籍

読んだことのある書籍は多くありませんが、何冊か読んだ中で毎回、人に勧める4冊を紹介します。

Unreal Engine 5で極めるゲーム開発：サンプルデータと動画で学ぶゲーム制作プロジェクト

「極め本」の通称で有名な Unreal Engine 4で極めるゲーム開発のUE5バージョンが6/29に発売。

UE4でのこちらの書籍は非常に好評な書籍で、人気のあるものでした。
ゲーム開発の基礎から学ぶことができます。

ゲーム開発をしない方にもおすすめです。
この書籍でUnreal Engineの基礎を学べるというのもありますが、ゲーム開発のノウハウでゲーム以外のコンテンツ開発でも大いに役立ちます。
むしろ、表現の幅が大きく広がりますし、別の業界(特にゲームの技術の進歩は早いし、すごい)のノウハウを学ぶことでアイデアの幅も広がります。

Unreal Engine 4 建築インテリアビジュアライゼーション

筆者が最初に読んだ書籍で、この書籍のおかげで当時の目的の物が作成でき、UE4にはまっていったと言っても過言ではありません。

メッシュのインポート、マテリアルやライティング、BP、UIなど幅広く学ぶことができます。
ノンゲーム向けではありますが、基礎的な部分からわかりやすく書かれているので、建築に関係のない方にもおすすめです。

注意点として、こちらはUE4を使って説明された書籍です
そのためUE5ではUIや機能など異なる部分があるので、ご注意ください。
ただ、全てが変わってしまっているわけではないので、役立つ部分は多いかと思います。

Unreal Engine 4 マテリアルデザイン入門[第2版]

一通り Unreal Engine を学んだら、次に読むことをおすすめする1冊です。

タイトル通り、マテリアルに特化した内容になっています。
UE4のマテリアルは本当に様々なことがノードでできます。
マテリアルで何ができるかを知るのにも役立ちます。
そのため、ふと「こんなこと書いてあったけど、どうやるんだっけ」と読み返すことが多い書籍です。

クオリティをワンランク上げたい方にもおすすめです。

こちらもUE4の書籍ですが、UE5でも大いに役立ちます。

HoudiniとUnreal Engine 4で学ぶリアルタイムVFX(レベルアップのための心得と実践)

エフェクトを学びたい方は、確実にこの１冊だと思います。

こちらもUE4の書籍で特にNiagaraの機能が変わってしまっている部分が多く、最新バージョンだと同じようにできない部分もあるかと思います。
ご注意ください。

ただ、Niagaraの基礎的な部分から書かれており、わかりやすいです。
また、エフェクトはマテリアル(シェーダー)を駆使するので、マテリアルに関しても濃い内容で書かれているので、エフェクトの専門でない方もマテリアルの勉強になります。

そもそものエフェクトに必要な知識なども書かれているので、勉強になりました。

Unreal Engine 5 リアルタイムビジュアライゼーション

ノンゲーム向けではありますがUE5で解説された書籍です。

表紙は車ですが
「リアルタイムレンダリングとはなぞや」ということであったり、CAD系のことも書かれているので、車に関係なく、工業、プロダクト系の方にもおすすめです。

こちらもUE5の機能が幅広く書かれています。

マーケットプレイス

Just a moment...

自分のプロジェクトの使用するためにアセットやプラグインを購入、使用することはもちろんですが、マテリアルやシーンの構築、エフェクト、ライティングなど、どういう作り方をしているか探っていくのも勉強になります。

マテリアルなどかなり複雑でぱっと見、意味わからないようなものもたくさんありますが、少しづつ分解していくと、ノードの使い方や組み合わせ方など表現の幅が広がります。

無料のコンテンツも豊富です。
背景に関しては、Quxelの以下の動画のシーンなど無料でダウンロードできるので、どのように作られたかを実際のシーンを見ながら確認できます。

また、月替わりで5つ程度のアセットが無料になります。
毎月初旬に更新されるので、とりあえず、全部入手しておくのがお勧めです。
今は必要なくても、後々役立つことが多いです。

マーケットプレイスとは少しずれますが、Epic Games Luncherの「サンプル」では、デモやサンプルもDLすることができるので、こちらも学習に非常に役立ちます。

機能別サンプルは、機能ごとに基礎的な簡単なものから、ある程度応用されたものまで、かなり多くのサンプルが含まれています。
とりあえず、色々なレベル(マップ)を片っ端から開いてみると、どういうことができるのかなどわかるので引出が増えます。

まとめ

初心者向けにおすすめの学習コンテンツやサイトを紹介しました。

前述の通り、本当にネットにたくさんの情報があり、Epic Gamesの公式からも有益なチュートリアルなどが多数、公開されています。
なので、無料でUnreal Engineをある程度、習得できるかと思います。

ネットだと何から手を付ければよいかわからないと感じる方や
今は特に目的はないけど学習したいという方は書籍から入ると学びやすいかもしれません。

古くなってきてしまっていますが私自身も今回の記事のようなUnreal Engineについての記事やYouTubeでチュートリアル動画をあげているの、よろしければご覧ください。

この記事が Unreal Engine を学ぶ手助けになれば嬉しいです！

CG系チュートリアル一覧

しゅーや — Tue, 21 Jul 2020 03:37:37 +0000

現在、私が作成した3DCG系のチュートリアルの一覧です。
随時、更新していきます。
UE4をメインにたまにHoudiniやMaya、その他のCG系のチュートリアルを定期的に作成しています。

Car Configurator Tutorial

【UE4】カーコンフィギュレーターチュートリアル - Car Configurator Tutorial Part 0

YouTubeにて「Car Configurator Tutorial - Part 0: Introduction」を公開しました。このチュートリアルは全８回に渡ってUE4でカーコンフィギュレーターを作成していくチュートリアルです。そのチュートリアルがどういった内容なのかをご紹介します。

アンリアルエンジンを用いてカーコンフィギュレーターを作成していきます。
カーコンフィギュレーターとは主に車の販促などに使われる車のビューワー兼カスタマイザーのようなものです。

チュートリアルのレベルとしてはUE4の基本操作を理解している初心者向きです。
UE4で使う車のモデルの準備の仕方やマテリアルの色の換え方、UMG(UI)の作り方など全８回に渡り機能ごとに動画を分けて説明しています。
色々な機能を使いつつ、コンテンツを1つ作成するので、カーコンフィギュレーターを作ることが目的ではない方も得るものがあるかと思います。

CGWORLD +digitalvideo Vol.262

CGWORLD +digitalvideo Vol.262 のオートモーティブ×ゲームエンジン特集にて、8ページに渡り、UE4での自動車ビジュアライゼーションについて執筆させて頂きました。

前半はUE4のオートモーティブマテリアルについて、後半は後述にもあるVariant Managerを用いた簡単なカーコンフィギュレーターの作り方を紹介しています。

Reality Captureの使い方とコツ【Photogrammetry】

Reality Captureの使い方とコツ【Photogrammetry】｜Syuya(向井秀哉)

フォトグラメトリーソフトの「Reality Capture」の使い方と撮影などのコツを書いています。

このチュートリアルではカメラはiPhoneを使い、簡単にフォトグラメトリーで3Dモデルを作ってみるといった内容です。

仕事では一眼レフで撮り、色などもしっかり調整して、VRなどでもちゃんと使えるモデルにして…
とやっているので、そのパターンもそのうち書けたらと思います。

【UE4】VATの作り方と使い方～VATで桜を咲かせる～

【UE4】VATの作り方と使い方～VATで桜を咲かせる～｜Syuya(向井秀哉)

初めまして。しゅーや　と申します。初note、初チュートリアルです。よろしくお願い致します。チュートリアルの内容まずこちらをご覧ください。こちらの動画のような桜が花が開花して、若干色づくこれをUE4でVertexAnimationTexture(VAT)を使って作成していきます...

HoudiniでVAT(Vertex Animation Texture)を作成し、それをUE4で使う流れを
桜の花を咲かせる作例に沿って説明していきます。

300円の有料ノートとなっていますが、チュートリアル自体は全て無料で見ることができます。
購入して頂くことで、HoudiniのファイルやUE4のプロジェクトデータなど、このチュートリアルで使用したデータ一式をDLすることができます。

Variant Managerの使い方 | UE4

UE4.21から追加されたVariant Managerの使い方を説明しています。
これを使うことでBPをほぼ使わずに、スタティックメッシュの切り替えやマテリアルの切り替え、ライトのオン、オフ、ビジブルのオン、オフなどが手軽にできます。
UMGと紐づけることもできるので、簡単にコンフィギュレーターのようなものなどを作成することができます。

Quad Remesher の使い方

Quad Remsherを実際に使ってみたので使った結果や使い方をご紹介します。

Maya、3dsMax、Houdiniなどに対応したプラグインのQuad Remesherの使い方や各パラメータの説明をしています。

このプラグインはメッシュを全て4角形ポリゴンに再構築、必要に応じてリダクションしてくれるプラグインです。
ZBrushのQuad Remesherに近いです。

【Adobe Aero】Substance Painterのテクスチャとモデルのインポートのやり方

【Adobe Aero】Substance Painterのテクスチャとモデルのインポートのやり方｜Syuya(向井秀哉)

Adobe AeroにSubstance Painterで作った(Base Color、Metallic、Roughness、Normal等)テクスチャとそのモデルのインポートの仕方の１つの方法についてです。結果から申しますと Substance Painterでのテクスチャエクスポート時に Configを「glT...

かなりニッチではありますが、ARコンテンツを簡単に作れるスマホアプリでSubstance Painterのテクスチャを使用するやり方を紹介しています。

UE4 マーケットプレイス出品の手順と出品してみて

しゅーや — Sat, 18 Jul 2020 16:37:56 +0000

アンリアルエンジンのマーケットプレイスに先先月、初めて出品をし、約１か月ちょっとが経ちました。

【Unreal Engine】Car Configurator Template の販売を開始しました

アンリアルエンジンのマーケットプレイスにて「Car Configurator Template」の販売を開始しました。その内容についてご紹介します。

そこで備忘録を兼ねて、マーケットプレイスへの出品のやり方と出品してみてどうだったか？どうなのか？という感想の２部構成で書いていきます。

UE4 マーケットプレイスへの出品手順

出品者登録

まず、出品者としての登録が必要となります。
EPIC GAMESアカウントを持っていない場合は、そちらも作成する必要があります。

以下のサイトにアクセスして、「始めよう！」をクリックすることで、登録フォームに移ります。

Publishing Portal

PUBLISHER INFO

こちらには、名前、電話番号、メールアドレスなどを英語で登録します。
外部には公開されません。

STORE INFO

こちらは公開される情報です。
Store Nameは氏名である必要はありません。
アドレスはPUBLISHER INFOやEPIC GAMESのアカウントのアドレスと違うアドレスでも問題ありません。
ホームページやツイッターアカウントなどがある場合は入力しても、しなくても大丈夫です。

PAYOUT INFO

売上の代金の支払いについての設定です。
PayPal か銀行振込かを選択できます。海外からの振り込みになるので、PayPal の方がおすすめです。私はPayPalにしました。

TAX INFO

税関係についての設定です。
最初の項目は日本なので「I Report Tax Iutside Of The United States」にします。
個人の場合は「Indivisual/Solo Proprietor」にし、Name On Tax IDはフルネームで大丈夫です。法人の場合は、その他の適した選択肢にします。

これにて、出品者登録は完了です。

出品するコンテンツの登録

出品するコンテンツが完成したら、コンテンツを登録していきます。

また、コンテンツ内のディレクトリ構造や各アセットについて色々と決まりがあります。
それらに沿っていないと審査が通りません。
詳しい内容はマーケットプレイスガイドラインをご覧ください。

Just a moment...

出品者登録が済みますとMarketplace Publisher Portalにアクセスできます。
ADD PRODUCT からコンテンツ情報を登録していきます。

PRODUCT MEDIA

・GALLERY

ここでは製品の詳細画像を登録します。ページに訪れた方が一番見るであろう重要な部分です。
解像度は1920×1080で3MB以下でなけれななりません。
1～25枚まで登録することができます。

・サムネイル

サムネイルはそのままサムネイルです。284×284の解像度でなけれななりません。

・FEATURED IMAGE

こちらは↓の画像のようなショーケースやその他のところで表示される画像かと思います。
間違っていたらすみません…。
解像度は 894×488 でなければなりません。

PRODUCT INFORMATION

・PRODUCT TITLE

製品のタイトルです。80文字以内で、30文字以内が好ましいようです。

・価格

価格を設定します。
これはマーケットプレイス上で表示される価格ではなく、自分の売上となる価格です。
なので、マーケットプレイス上では、ここで設定した価格にマーケットプレイスのマージンを乗せた価格が購入価格になります。

・ CATEGORY

コンテンツの種類を選択します。
コードプラグインなどの場合はディレクトリ構造なども変わってくるので、そこもマーケットプレイスガイドラインでチェックしておきましょう。

・TAGS

内容に即したタグを設定します。ちゃんと設定しておくことで見つけてもらいやすくなります。

・SHORT DESCRIPTION

製品の短い説明です。255文字以内で、100文字以上がおすすめなようです。
ちなみに製品ページだと、この部分に表示されます。

・詳細な説明

コンテンツの詳細な説明を記入します。
ビデオリンクやデモなどがある場合は、こちらにリンクも載せておきます。
1900文字以内である必要があります。

・テクニカル情報

コンテンツに含まれているものの情報や使用方法、ドキュメント、チュートリアルなどのリンクはこちらに入力します。
ブループリントやマテリアルの数など細かく記載したほうが良いようです。

PRODUCT FILES

コンテンツをアップロード情報を入力します。
作成したコンテンツはGoogle Driveなどを使用して、共有します。

バージョン毎にファイルが異なる場合は、その分登録します。

画像では「SUBMIT FILE UPDATE」になっていますが、最初は「CREATE NEW VERSION」をクリックすることで、登録する欄が増えていきます。

私の場合は4.24と4.25移行で設定が若干違うので、2つ登録しました。

・ DISTRIBUTION METHOD

これはダウンロードする際に既存のプロジェクトにインポートするのか、プロジェクトそのものを作成するのかの選択になります。

プロジェクト設定などのConfigが必要な場合は「Complete Project」にします。
DLした際にプロジェクトを作成するタイプです。

Configファイルを必要としないアセット集やマテリアルなどでは「Asset Pack」にします。
既存のプロジェクトにインポートするタイプです。

全ての入力が完了しましたら「SUBMIT FOR APPROVAL」で押して、審査してもらいます。

審査

私の場合、5月の頭に申請をしました。コロナの影響で遅くなってしまうかと思ったのですが、2週間くらいで審査結果のメールが届きました。

ここで修正が必要な場合は、チェック項目のPDFが添付されており、何を修正すれば良いのかが記載されています。

修正し、データをアップロードし直したら、再度申請をし、待ちます。一度、申請をしてもらった後の修正のレビューは1、2日ですぐに返ってきました。とても素早い対応です…！

無事、申請が通れば、好きな時に販売を開始することができます！

結果的に私の場合は申請から許可まで1ヶ月かかりませんでした。その時の状況にもよると思うので、参考までに！

出品してみて…

出品する際に関して

規則が割とあり、それにきちんと沿っていないと申請が通らないので、少し大変でした。ただ、この規則があるからこそ、マーケットプレイスのコンテンツ、アセットが扱いやすいのだなと実感しました。

修正込みで1ヶ月以上かかるかと思っていたのですが、対応が素早く、修正すべき内容もわかりやすかったです。UE4についてある程度、全体的に理解しているとスムーズに審査も通るかと思います。

出品した後に関して

質問への回答が少し大変

これはコンテンツ次第だと思いますが、出品した後は質問に対する回答が少し大変な印象です。

全てマーケットプレイス上で質問を頂ければ、他の方も見られるので質問も減ってくるのですが、メールなどのクローズドな質問にもガイドライン的には答えるよう尽くした方が良いです。ただ実際、答えるか否かは自己判断です。
私は関係ないこと以外は答えるようにしています。

意外と売れた

カーコンフィギュレーターというニッチなもので、値段も安くはないので、少ししか売れないと思っていましたが、意外に売れました。

国内のみではなく、世界中の方が利用しているプラットフォームなので、ユーザーも多く、海外からの購入の方が多いのかもしれません。
英語で説明文等を用意する必要はありますが、世界中の方に自分の作品を利用して頂けるのは嬉しいです。

まとめ

備忘録も兼ねて、アンリアルエンジン　マーケットプレイスへの出品の仕方をまとめてみました。
実際に出品してみて、とても良い経験になりました。

最初は少し大変に思うかもしれませんが、一度やってしまえば、そんなに難しくないことがわかるかと思います。
次は背景アセットなどを出品してみたいなと考えています。

ルールに沿えばだいたい審査に通ると思いますが、それでも一定に基準を満たしていないと出品できないため、実績にも繋がるかと思います。
出品を考えている方の参考になれば嬉しいです！

UMG(UI)の作り方、設定、アニメーション – UE4 Car Configurator Tutorial Part8

しゅーや — Mon, 29 Jun 2020 10:30:06 +0000

YouTubeにて「Car Configurator Tutorial – Part8: Creating the UMG 」を公開しました。

簡単な内容説明

このチュートリアルは全８回に渡ってUE4でカーコンフィギュレーターを作成していくチュートリアルです。

そのチュートリアルの最後、第8回目はUMG(UI)の作成についてです。

UMGを作成し、今まで作った機能をこのUMGから使用できるようにしていきます。
また、UMGのボタンにアニメーションも付けていきます。

UMGを１から作成していくので、UE4でUIを作ったことがない方もUE4でのUI作成を一通り学べる内容になっています。
また、チュートリアルで使用しているボタンの画像はYouTubeの概要欄のリンクからDLできるようになっているので、今までのチュートリアルをやって頂いている方であれば、スムーズにこのチュートリアルも進めることができるかと思います。