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

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

## 参考サイト等

- [ツイッター記事](https://twitter.com/kirurobo/status/704556413570326528)
※すごく助けていただきました！！！！！！！！！

- [Unity Forums記事](https://forum.unity.com/threads/webgl-with-transparency-on-the-cavas.327425/)
- [Unity Support記事](https://support.unity3d.com/hc/en-us/articles/208892946-How-can-I-make-the-canvas-transparent-on-WebGL-)


# 前提条件
- Unity 2018.3.5f1 (64-bit)
- jslibについて解説しない
- WebGLの表示方法についての解説はしない
- IISにビルド結果を配置して、「Chrome」にて表示確認
- [使用モデル　黒猫洋品店 - 巡璃めぐる](https://kuroinyan.booth.pm/items/1198232)



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

「New」を押下
![image.png](https://qiita-image-store.s3.amazonaws.com/0/148696/baaf3b7c-b922-6f0a-d570-b34f380fda52.png)

「Project name」、「Location」に任意の値を設定して、「Create project」を押下
![image.png](https://qiita-image-store.s3.amazonaws.com/0/148696/a6a9bfd0-495a-e319-1852-0ed64fb16335.png)



## ２．カメラ設定
|項目名|変更前|変更後|
|---|---|---|
|Clear Flag|Skybox|Solid Color|
|Background|-|RGBAをすべて0|


### 変更前
![image.png](https://qiita-image-store.s3.amazonaws.com/0/148696/230ef3f5-7933-3129-5a45-2e3fed9d5f70.png)


### 変更後
![image.png](https://qiita-image-store.s3.amazonaws.com/0/148696/0db9bead-e60e-1590-d662-f8df59663cdd.png)




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

- WebGLTemplates
- Plugins

![image.png](https://qiita-image-store.s3.amazonaws.com/0/148696/ab4bd76d-2548-9421-2480-3279f4ae6b9f.png)


![image.png](https://qiita-image-store.s3.amazonaws.com/0/148696/fd1ebde1-1036-9ddd-71bd-b9650ad876c5.png)



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

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

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/148696/238f805d-52b7-fa45-4d52-1f3c4f829f5f.png)


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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/148696/3b2f3593-97ba-70c9-e36b-30d422b494f2.png)

「index.html」に下記を追記

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

### 変更前
![image.png](https://qiita-image-store.s3.amazonaws.com/0/148696/57d3a8e4-1b47-4541-234a-17449dc322d3.png)


### 変更後
![image.png](https://qiita-image-store.s3.amazonaws.com/0/148696/cf912b6c-6ca9-9a1a-e9d0-851c5321d3b9.png)



### ５．Unityのアルファバッファ処理をオーバーライド
- [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/getParameter)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/148696/db5c654b-cd52-19a9-e817-00048b11470d.png)


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

R、G、B、アルファコンポーネントへの書込有無を取得して、
配列が「0001」で取得できた場合、処理をスキップ（透明保持）

```JS
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); 
```


### ６．「Build Settings」でビルドを「WebGL」に変更

「File -> Build Settings」を押下
![image.png](https://qiita-image-store.s3.amazonaws.com/0/148696/55994556-2872-6d4e-b3be-618a095a997b.png)

「WebGL」を選択、「Switch Platform」を押下
![image.png](https://qiita-image-store.s3.amazonaws.com/0/148696/8a3492af-4779-6ab3-cf81-98c76769d7ff.png)

「Add Open Scenes」を押下
![image.png](https://qiita-image-store.s3.amazonaws.com/0/148696/311db324-9b93-5c2a-551f-395e8cfd60a6.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/148696/a583ef2a-13e9-e32f-7881-ee8f490bfd0c.png)


### ７．ビルドのテンプレートを変更
「Player Settings」を押下
![image.png](https://qiita-image-store.s3.amazonaws.com/0/148696/bad6ee73-beaa-6622-34a8-e189c307a85a.png)

「Inspector」タブの「Resolution and Presentation -> WebGL Template」に、
前述で作成したテンプレート「Test」を選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/148696/31638b00-2963-b9da-2a68-2c201ce677af.png)


### ８．表示用のモデルを配置、カメラ位置の調整
![image.png](https://qiita-image-store.s3.amazonaws.com/0/148696/a0f3dfab-6ce7-d903-94f1-9f0613855d33.png)


### ９．ビルド
「File -> Build Settings」を押下
![image.png](https://qiita-image-store.s3.amazonaws.com/0/148696/55994556-2872-6d4e-b3be-618a095a997b.png)

「Build」を押下
![image.png](https://qiita-image-store.s3.amazonaws.com/0/148696/5b1dea4e-8354-0caf-e0c8-b86dab734cf8.png)

任意のフォルダを作成、選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/148696/abc94734-8465-5c4e-4cc7-e6b358c15c8d.png)

ビルド待機
![image.png](https://qiita-image-store.s3.amazonaws.com/0/148696/222b411f-5881-c666-4ede-be0f628cb07e.png)

### １０．出力結果の編集
![image.png](https://qiita-image-store.s3.amazonaws.com/0/148696/0499c4f8-740a-089d-d8b4-ba24441a5688.png)

下記のファイル内の編集


|項目名|変更前|変更後|
|---|---|---|
|backgroundColor|-|transparent|


```text
Build/WebGL.json
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/148696/d961a2ea-7749-14b2-9ce8-51afd13a42c8.png)

### 変更前
![image.png](https://qiita-image-store.s3.amazonaws.com/0/148696/6c3802c6-fb59-fa59-694f-7d49e3d1d3fa.png)

### 変更後
![image.png](https://qiita-image-store.s3.amazonaws.com/0/148696/2ec969a1-89b8-3eac-170e-7f5e1013569c.png)



### １１．出力結果をIISに配置、確認
背景が透過されて、モデルデータだけが表示されます！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/148696/a8f780cc-bd97-8f61-908c-c399dfe119d8.png)