WebGLで影が表示されないときの対処法

投稿者: | 2020-01-14


UnityでWebGL向けにビルドするとカーリングゲームのストーンにディレクショナルライトによる影が表示されなかったので、プロジェクタで影を作ってみます。

まずカーリングストーンのプレハブに新しい空のゲームオブジェクトを付けて、Projectorコンポーネントを付けました。

ProfectorコンポーネントのMaterialに、スタンダードアセットのプロジェクタ用のマテリアルをアタッチしました。

デフォルトでは、プロジェクタが前方を向いているのでディレクショナルライトと同じ回転値にします。

Unityで作っているときは影が表示されるので、ディレクショナルライトのShadow TypeをNo Shadowsにして影が表示されないようにしておきます。

これでゲームをプレイするとプロジェクタで影が作れているのがわかりますが何か不自然です。

プロジェクタをオフにしてディレクショナルライトによる影を表示して見比べてみます。

ディレクショナルライトによる影は、プロジェクタで作った影より暗いですし、ディレクショナルライトはどの面にも同じ角度から当たる平行な光なので影のサイズが変わりません。

プロジェクタで像が表示される範囲は、カメラと同様に近面より遠面の方が大きい錐台の形をしているので、近くのものには小さな像を映して遠くのものには大きな像を映します。

ProjectorコンポーネントのOrthographicにチェックを入れると、像のサイズが変わらなくなります。

像のサイズはOrthographic Sizeで変えられます。

これで、カーリングストーンの落下中の影のサイズが変わらなくなります。

プロジェクタで作る影を暗くする

まだ影が明るいのでプロジェクタに付けたマテリアルに使っている画像を編集して暗くします。

スタンダードアセットのプロジェクタ用の「Shadow」というテクスチャをダブルクリックすると、.psdファイルを編集できるソフトで開いて編集できました。

シャドウ・ハイライトを編集します。

「シャドウを明るく」のスライドで暗くできます。

これを元のファイルと同じ場所に別名で保存します。

すると今作ったファイルがすぐにUnityに表示されます。

このファイルのインスペクタの設定を、元のファイルと同じにしました。

カーリングストーンの影のために使っているマテリアルを複製します。

複製して新しくできたマテリアル選択して、インスペクタでテクスチャを変更します。

このマテアリルを、カーリングストーンのProjectorコンポーネントのMaterialにアタッチします。

これでカーリングストーンに自然な影が付きました。

プロジェクタで作る影がカーリングストーンに映らないようにする

プロジェクタがカーリングストーンより上にあると、ストーンにストーンの影が映ってしまいます。

ProjectorコンポーネントのIgnore Layersで選択されたレイヤーのついたオブジェクトへはプロジェクタが像を映さなくなるので、ここにストーンのプレハブに付けたレイヤーを設定します。

コメントを残す

メールアドレスが公開されることはありません。