はじめに
応用編では、独自HTMLの作成とUnityエンジニアならよく見かけるであろう、 いつもの"あれ"のWebGLでの表示をやってみたいと思います。
開発環境等は、基本編をご覧になって下さい。
独自HTMLの作成

Assets/WebGLTemplates/<任意の名前>/
このディレクトリ配下にindex.html
、thumbnail.png
を置くことによって、独自のHTMLテンプレートをBuild時に生成することが出来ます。ここに配置した参照される画像ファイルやindex.htmlの内容がそのままBuild時に出力されます。

Projects Settings -> Player から配置した独自HTMLを設定できるようになります。GaprotTemplateようにthumbnail.png
はここに表示されます。
ここはUnity2019.4と変わらないです。
デフォルトのHTMLテンプレートをコピー
0から自分でコードを書くより、デフォルトのテンプレートを改造 していく方が楽なので、一旦コピーします。
<Unityインストールディレクトリ>/PlaybackEngines/WebGLSupport/BuildTools/WebGLTemplates/
このディレクトリに、ディレクトリのHTMLテンプレートが置いてありますが、
デフォルトのテンプレートを設定してBuildすると、同じ内容のものが生成されるので、ディレクトリを追うより、Buildして生成された、index.html
とTemplateData
をコピーして、先ほどのWebGLTemplates
配下の任意のディレクトリに配置した方が早いかと思います。

以後このデフォルトのテンプレートをベースに改造していきます。
Unityのロゴを消す
プログレスバーの表示を変える。

起動直後の読み込み画面で、デフォルトではUnityのロゴが表示されていますが、 それを変更したいと思います。
<div id="unity-loading-bar">
<div id="unity-logo"></div>
<div id="unity-progress-bar-empty">
<div id="unity-progress-bar-full"></div>
</div>
index.htmlの13行目あたりに、このようなプログレスバーの表示設定しているところがあります。このid
が後述するcssとの参照を担っています。
Webフロントに知見にある方なら早い話だと思います。
#unity-logo {
width: 154px;
height: 130px;
background: url('unity-logo-dark.png') no-repeat center
}
#unity-progress-bar-empty {
width: 141px;
height: 18px;
margin-top: 10px;
background: url('progress-bar-empty-dark.png') no-repeat center
}
#unity-progress-bar-full {
width: 0%;
height: 18px;
margin-top: 10px;
background: url('progress-bar-full-dark.png') no-repeat center
}
TemplateData/style.css
でこのように画像の設定してある場所があります。(本来は一行で書かれてますが、見やすい用に改行してあります。)
ここのurl
を任意のものに書き換えることで、ロゴやプログレスバー画像を差し替えることが出来ます。
デフォルトではTemplateDataと同階層の画像を参照するようになっています。

変更後このような感じになります。
画面下部の領域を消す。

デフォルトではPCで見た時に、画面下の方にロゴと全画面に するボタンが表示されていますが、あれを消します。
モバイルでは全画面表示され、画面下の方のロゴは表示されないです。
<div id="unity-footer">
<div id="unity-webgl-logo"></div>
<div id="unity-fullscreen-button"></div>
<div id="unity-build-title">GaprotWebGL</div>
</div>
index.html
の19行目あたりにこのような、Unity画面の表示設定をしている部分があります。ここを全部消すと表示されなくなります。
var fullscreenButton = document.querySelector("#unity-fullscreen-button");
index.html
の42行目あたりのこの”unity-fullscreen-button”の参照が無くなるので、ここも消しましょう。
#unity-webgl-logo { ~省略~ }
#unity-build-title { ~省略~ }
#unity-fullscreen-button { ~省略~ }
TemplateData/style.css
のこの参照もいらなくなるので消しましょう。
PCでも全画面表示したい
やることは、モバイルとPCの分岐をなくして、PCでもモバイルと同じ設定 をするだけなので難しくないです。
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
container.className = "unity-mobile";
config.devicePixelRatio = 1;
} else {
canvas.style.width = "540px";
canvas.style.height = "960px";
}
index.html
44行目あたりの、モバイルかどうかで分岐をしている処理
を全部消してしまいます。
config.devicePixelRatio = 1;
その後に、この一行を追加してください。
#unity-container.unity-desktop { ~省略~}
#unity-container.unity-mobile {~省略~}
.unity-mobile #unity-canvas {~省略~}
.unity-mobile #unity-footer {~省略~}
次にTemplateData/style.css
の中ですが、.unity-desktop
、.unity-mobile
といった分岐がされているものを消してしまいます。
#unity-container { position: absolute; width: 100%; height: 100% }
#unity-canvas { background: #231F20; width: 100%; height: 100% }
このままでは、まだ全画面表示されないので、上記の用にwidth
とheight
を追記します。
これで、PCでもモバイルでも全画面表示されるようになります。
いつもの”あれ”を表示してみる

こちらのユニティちゃん公式サイトより、 2020/07/10に出たばかりのURP向けSunny Side Up(ver1.0.1)を表示してみました。 Unityエンジニアの方なら一度は見たことあるかと思います。
いくつか手順が必要だったので紹介していきたいと思います。
なおここからは、WebGL関係無しに他のプラットフォームでも関係する 内容が出てきます。
別プロジェクトからの移植
unitypackageが配布されていないため、解答したプロジェクトから
Assets/UnityChanSSU
を自分のプロジェクトに持ってくる必要があります。
同じUnityバージョンならそのままこのプロジェクトで作業でも問題ないのですが、
バージョン(※1)が違うので、安全のために一旦.unitypackage
にしてから持ってきました。
UnityChanToonShaderVer2_Project-release-urp-2.2
UnityChanSpringBone-release-1.1
それと、Unityに内蔵されていないPakageがあるため、Packages
ディレクトリから上記二つを作業プロジェクトのPackages
ディレクトリにコピーする必要あります。
- ※1
- このUnityChanSSUのバージョン:2019.4.8f1
- 記事での作業バージョン:2020.1.6f1

イメージはこんな感じです。
Render Pipelineの設定

URP(Universal Render Pipeline)によって描画されているため、
今回ユニティちゃんの描画設定をしているUTS2URPPipelineAsset
を設定する必要があります。解凍したプロジェクトそのままの場合はすでに設定されていると思います。
赤枠で囲ってある、Always Included Shaders
の追加されている4つですが、
ユニティちゃんプロジェクトでは設定されてましたが、今回はあってもなくても、
差異は感じられませんでした。
Assembly Definitionの設定
Packages\UnityChanSpringBone-release-1.1\Editor\GUI\Inspectors\InspectorFloatSlider.cs(28,30): error CS0246: The type or namespace name 'SerializedProperty' could not be found (are you missing a using directive or an assembly reference?)
ユニティちゃんプロジェクトのバグだと思うのですが、 Editorのソースコードを何故か全プラットフォームでBuildしようとしているので、 それで上記のようにBuildすると起きるバグを修正します。

Packagesディレクトリ配下のUnity Chan Spring Bone/Editor/com.unity.animations.springbone.editor
がこの原因です。
右上に赤で囲ってある、13という数字と目玉みたいなアイコンですが、 ここをクリックすることで、Packages配下のディレクトリを可視化の On/Offが出来ます。Packages配下が何故か表示されないと思ったら、確認してみてください。

Inspectorより、PlatformsのAnyPlatform
のチェックを外して、
PlatformsはEditor
のみにします。
これで完了です。
カメラを動かすスクリプトを止める
UnityChanSSUというシーンあるのでそれを開き、 以下二つのカメラを設定します。
MainCamera

アタッチされているAimConstraitをOffにする。
CAM_FaceCam

アタッチされているParentConstraintをOffにする。 この画像ではオブジェクトごとOffにしていますが、 Onのままだと、顔をアップで映すような映像になります。
TimeLineをちょっといじる

ユニティちゃんのダンスはTimelineによって管理されています。
/// <summary>
/// Timelineの操作
/// </summary>
[RequireComponent(typeof(PlayableDirector))]
public class GapTimelineContoller : MonoBehaviour
{
[SerializeField]
private Button _startButton;
private Transform _buttonParent;
private PlayableDirector _playableDirector;
// Start is called before the first frame update
void Start()
{
_playableDirector = GetComponent<PlayableDirector>();
_playableDirector.Evaluate();
_buttonParent = _startButton.transform.parent;
_startButton.onClick.AddListener(playDance);
}
/// <summary>
/// ダンス開始
/// </summary>
private void playDance()
{
_buttonParent.gameObject.SetActive(false);
_playableDirector.Play();
}
}
記事を読んでいる間に勝手に再生されたら困るため、 上記のようなボタンを押したらTimelineを再生するスクリプトを付けました。
Unityに慣れている人ならすぐに分かる内容でかつ、WebGLにあまり関係無いので、 細かい説明は省略します。
_playableDirector.Evaluate();
を呼んでいるのは、最初に同じポーズで
固まっている時間が長いので、それをスキップするためです。
InspectorからPlayOnAwake
はOffにし、InitalTime
は10にしてあります。
WebGL表示
<p><iframe src="https://gaprot-webgl.web.app/index.html" width="392" height="273" frameborder="0" scrolling="no"></iframe></p>
BuildしたWebGLアプリの記事内表示方法ですが、上記の用にiframeタグ
で
くくることによって表示できます。
中央のユニティちゃんライセンスロゴのボタンを押すと、踊り始めます。
iPhone、Androidでは、メモリ不足のエラーが出て表示できないです。
PCでご覧になってください。
URPがWebGLでも表示できるのか不安でしたが、表示できました。
まとめ
文章にすると長くなってしまいましたが、独自にHTMLをいじる作業は 単純で分かってしまうとあまり難しくありません。 自分はロゴをちょっと変えるだけでも時間がかかってしまいましたが、 Webフロントの知見がある方ならすぐに出来るのでないでしょうか?
PC版のみではあるものの、ユニティちゃんのデモが動いたので、WebGLでも いろんな選択肢がとれるのではないかと思いました。