【ワールドの作り方：番外編vol.3】ライティング活用！きれいな雰囲気のワールドを作ろう！
Vket Cloudでは、Vket Storeやその他のアセット販売サイトにて購入したアセットを使った自由なワールド制作が可能です。しかし、理想の見た目にマッチした綺麗なワールドを作るには、仕様制限に対応すべく調整とウェブブラウザ環境向けの工夫を行う必要があります。
ここではUnityのアセットを使用して洋風の夕焼けの風景を作り、ワールド制作において発生しやすい問題のうち、特に描画関連の問題についての対処法を解説します。
初期設定
ワールド制作にあたって、今回はこちらの無料アセットを使用いたしました。
Vket CloudではVket Storeのみならず、Unity、UE4などの各媒体にて入手したアセットが使用できます。
Unityにおけるシーンの新規作成、SDKの導入方法については以下の記事が詳しいためここでは割愛します。
なお、今回は便宜のためにアセットに付属しているサンプルシーンを使用してワールド制作の解説を行います。
シーンの初期状態においてはワールドをアップロードするのに必要なコンポーネントが欠けているため、ヒエラルキー上で右クリックし、メニューからAdd essential objects for VketCloudを選択して必須オブジェクトの追加を忘れないでください。
また、基本的にメインカメラを除いたアセットについてはWorldオブジェクト以下に子オブジェクトとして配置します。
またオブジェクトにコライダーがなかったため、すべてのオブジェクトを選択した状態でInspector＞Add Component＞Box Colliderで全てのオブジェクトにコライダーを設定します。
基本的なライトとシェーダーの設定
シーンの最初の状態ではDirectional Light（全体の明るさをコントロールするライト）がない場合があるので確認しましょう。ない場合は追加します。
ここで追加したライトはWorldSettingオブジェクト内のHEOWorldSettingコンポーネントにて登録しないとブラウザ上では機能しません。
ビルドしてワールドに入ってみたところ、ブラウザの画面が真っ黒になっていました。ビルドエラーが原因ではない場合、マテリアルが原因の可能性があります。
使っているシェーダーがVket Cloudに対応していない場合、描写されません。アセットの中のマテリアルを確認すると、対応しているシェーダーではありませんでした。フォルダのオブジェクトをすべて選択し、Standardシェーダーに変更します。
ほか対応しているシェーダーを使いたい場合はこちらから確認できます。
ビルドしてみると、きちんと表示できていますね。
そしてこの状態ではまだ空が黒いため、次に背景を設定します。
Skyboxを使わずに背景を表現する
VketCloudSDKでは、仕様上Skyboxを使うことができないため、別の方法で背景を表現する必要があります。
Skybox以外にもいくつか使えないUnity機能が存在するため、詳細はマニュアルの仕様制限のページをご確認ください。
VketCloudSDKでは、UnityのSkyBoxを出力することは出来ません。そのため、BoxまたはSphereの面を反転させたオブジェクトを配置して、擬似的なスカイボックスとして出力することで代用します。
ここではSphereに色を付けてシーンを覆うことで空を表現します。
具体的な手順としてはSphereを新規作成し、マテリアルを新規作成して空のテクスチャを割り当てることで背景を作ります。
ここで注意点として、Sphereのテクスチャはオブジェクトの外面にだけ描画されているため、反対側は透明になります。
裏側にも表示するためには、裏側に表示ができるシェーダーを使います。
今回はShader＞HIKKY＞VketChanDoubleSidedを選択します。
ほかCubeのスケールを反転させるか、法線をあらかじめ裏返したモデルをBlender等の3Dモデル編集ソフトで用意する方法もあります。
VketChanDoubleSidedはテクスチャを用意する必要があるので、夕焼けの空を準備します。今回はAIを使ったテクスチャを作成しました。
作り方についてはこちら。
テクスチャができたらシェーダーに反映させます。その後Sphereにマテリアルを適用させます。
また、背景用のオブジェクトがあまりにも大きい場合はカリング処理によって穴が開いたような見た目になる場合があります。その場合はProjection Farの設定値を大きくすると描画されるようになります。
Projection Farの値を大きくした際はより遠くのオブジェクトまで描画しようとするため、動作が重くなる場合があります。
配置調整によって一度に映るオブジェクトの数を減らすことをお勧めします。
さて背景を確認するためにビルドして入ってみましょう。
背景が表示されていますね。
ではここからはさらに細かい表現方法を試してみます。
ライティングの設定を見直す
Unity上では、グローバルイルミネーション(Global Illumination, GI)といって光源以外から物体へと間接的に反射した光を反映する技法が適用できます。
人間の目からするとGIが適用されていた方が自然に映りますが、Vket Cloudでは仕様上リアルタイムでのグローバルイルミネーションを使用することができません。
そのため、グローバルイルミネーションをあらかじめ計算し、ライトマップに焼き付ける「ベイク」という手順を踏む必要があります。
ライトマップの概念的な説明についてはUnity公式マニュアルが一番正確ですが、端的に言えば物体への光の反射あるいは影の映り方を計算して画像に焼き付けたものを指します。
Vket Cloud向けのライトマップのベイクの基本的な手順については以下をご確認ください。
Window>Rendering>Light Settingsにて設定を開き、Mixed Lightingタブ下のBaked Global Illuminationは必ず有効にしてください。
なお、ビルド後にライトが白飛びする場合は、ライトマップのエンコード設定が仕様と異なっている可能性が高いです。
Project Settingsにおけるエンコード設定がNormal Qualityになっているか確認してみましょう。
HEOWorldSettingを使いワールドの見た目をブラッシュアップする
HEOWorldSetting内のRenderingタブでは、描画に関する細かい設定を行うことができます。
以下にて簡単に効果の比較を行います。
PBRではPhysical Based Rendering(物理ベースレンダリング)の切り替えを行います。
Bloomでは光源が光っているような効果を表現できます。
また対応したシェーダーにEmissionを設定（今回は街灯のシェーダー）。
Light Scatteringの設定を変更することで霧、砂嵐など光が散乱して先が見えない風景を表現することができます。
その他、IBLの項目ではImage Based Lightingの切り替え及び参照するDiffuse/Specular Mapのサイズ指定の変更ができます。
IBLとは簡単に言えば現実の風景における光の映り方を画像として保存し、描画する際に参照する手法です。
今回のシーンでは使用しなかったため、割愛します。
その他の設定項目についての詳細な説明はこちらのマニュアルを確認してください。
さいごに
ここではVket Cloudでの描画の仕様制限と対処法を主に取り扱いました。
その他にも使える機能と使えない機能の制限があるため、詳細は公式マニュアルを確認してください。
また、公式Discordでは機能あるいは仕様についての質問を受け付けるチャンネルがあります。ぜひお気軽にお越しください！
