LoginSignup
37
29

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-02-10

前置き

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

参考サイト等

前提条件

手順

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

37
29
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
37
29