Edited at

UnityのWebGLで透過(HTMLの背景を表示)


前置き

情報が少なく、日本語の参考サイトが見つからず、、、苦労したので、、、


参考サイト等


前提条件


手順


1.プロジェクトの新規作成

「New」を押下

image.png

「Project name」、「Location」に任意の値を設定して、「Create project」を押下

image.png


2.カメラ設定

項目名
変更前
変更後

Clear Flag
Skybox
Solid Color

Background
-
RGBAをすべて0


変更前

image.png


変更後

image.png


3.フォルダの作成

「Project」タブの「Assets」で右クリック、「Create -> Folder」を押下

下記のフォルダを作成する。


  • WebGLTemplates

  • Plugins

image.png

image.png


4.WebGLの出力用テンプレートを作成


テンプレートのコピー

下記のディレクトリの「Default」を、「Test」に変更してコピー

※デフォルトは「C:\Program Files」配下にインストールされているはず

Unity\Hub\Editor\2018.3.5f1\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\WebGLTemplates

image.png


表示確認用に「index.html」を編集

image.png

「index.html」に下記を追記

<style>

body { background-color: #D0D0D0;}
</style>


変更前

image.png


変更後

image.png


5.Unityのアルファバッファ処理をオーバーライド

image.png

「Plugins」に「clear.jslib」の名称でファイルを作成

R、G、B、アルファコンポーネントへの書込有無を取得して、

配列が「0001」で取得できた場合、処理をスキップ(透明保持)

var LibraryGLClear = {

glClear: function(mask)
{
if (mask == 0x00004000)
{
var v = GLctx.getParameter(GLctx.COLOR_WRITEMASK);
if (!v[0] && !v[1] && !v[2] && v[3])
// We are trying to clear alpha only -- skip.
return;
}
GLctx.clear(mask);
}
};
mergeInto(LibraryManager.library, LibraryGLClear);


6.「Build Settings」でビルドを「WebGL」に変更

「File -> Build Settings」を押下

image.png

「WebGL」を選択、「Switch Platform」を押下

image.png

「Add Open Scenes」を押下

image.png

image.png


7.ビルドのテンプレートを変更

「Player Settings」を押下

image.png

「Inspector」タブの「Resolution and Presentation -> WebGL Template」に、

前述で作成したテンプレート「Test」を選択

image.png


8.表示用のモデルを配置、カメラ位置の調整

image.png


9.ビルド

「File -> Build Settings」を押下

image.png

「Build」を押下

image.png

任意のフォルダを作成、選択

image.png

ビルド待機

image.png


10.出力結果の編集

image.png

下記のファイル内の編集

項目名
変更前
変更後

backgroundColor
-
transparent

Build/WebGL.json

image.png


変更前

image.png


変更後

image.png


11.出力結果をIISに配置、確認

背景が透過されて、モデルデータだけが表示されます!

image.png