More than 5 years have passed since last update.

UnityのWebGLで透過（HTMLの背景を表示）

Last updated at 2019-02-10Posted at 2019-02-10

前置き

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

参考サイト等

ツイッター記事
※すごく助けていただきました！！！！！！！！！
Unity Forums記事
Unity Support記事

前提条件

Unity 2018.3.5f1 (64-bit)
jslibについて解説しない
WebGLの表示方法についての解説はしない
IISにビルド結果を配置して、「Chrome」にて表示確認
使用モデル　黒猫洋品店 - 巡璃めぐる

手順

１．プロジェクトの新規作成

「New」を押下

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

２．カメラ設定

項目名	変更前	変更後
Clear Flag	Skybox	Solid Color
Background	-	RGBAをすべて0

変更前

変更後

３．フォルダの作成

「Project」タブの「Assets」で右クリック、「Create -> Folder」を押下
下記のフォルダを作成する。

WebGLTemplates
Plugins

４．WebGLの出力用テンプレートを作成

テンプレートのコピー

下記のディレクトリの「Default」を、「Test」に変更してコピー
※デフォルトは「C:\Program Files」配下にインストールされているはず

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

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

「index.html」に下記を追記

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

変更前

変更後

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

WebGL API

「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);