ソース

テンプレート自体はGitHubにあげましたので、それをご参照ください。
これ自体は自分のいつも使う環境から、Unity2020・2021に対応できていると思いますが、今後のUnityのアップデートで使用できなくなる可能性はわりとあります。
これを導入して、エラーがあったらこの記事の続きを読み進められることをおすすめします。

使い方

いちおう、このテンプレートの使い方を書いておきます。

1. WebGLビルドする

当たり前ですね。記事のタイトルを見てくれと。
ただ、ビルドの圧縮形式によって少し細かな設定が必要です。
ビルドの圧縮形式は、Project SettingのPlayer項目から参照することができます。
下の画像のうち、Compression Format が圧縮形式の設定項目で、この部分の設定次第で Decompression Fallback を設定する必要があります。

Disabled の場合
圧縮を無効にする設定なので、Decompression Fallback はチェックをつける必要がありません。てか、そもそも設定できんのじゃなかったっけ（できたかも）。
Gzip・Brotli の場合
圧縮を有効にする設定なので、当然ですがそれを解凍なり何なり処理する設定をする必要があります。
いくつか方法はあるようなのですが、GASのHTMLに埋め込むわけなので、サーバー側で何か設定できる可能性は薄いです。
なので、Decompression Fallback にチェックをつけて設定することで対処します。
しかし Decompression Fallback を設定する方法には、読み込み速度が遅くなるというデメリットがあることも一応、確認しておきましょう。

このへんの圧縮形式でより詳しい情報がほしい人は、公式リファレンスにいきましょう。

2. 該当ファイルをクラウド上にあげる

さて、ビルドが無事成功したと仮定して、GASのHTML上で読み込むためにいくつかのファイルをクラウド上にあげる必要があります。
要件として、直リンクを取得する必要があります。

今までUnityのクライアント開発一筋だった人間からみると、これが結構きつい条件だったりします。
例えば、Googleドライブはだめです。
Googleドライブは共有リンク以外に、若干頑張れば直リンクも出せるのですが（やり方は詳しくはググるのだ）、圧縮ファイルはともかく、jsファイルは直リンクで読み込めないGoogleドライブの仕様ゆえに、Googleドライブ上から読み込むことができません...。

一つだけ、直リンクを吐き出せるストレージサービスを紹介しておきます。
まあ、ググれば先頭に出てくるものなので、あんまり紹介する意味がない気はしますが...

日本の企業が運営しているものっぽいので、適当な海外の共有サービスより安心かもしれません。
ただフリープランの場合、アップロードできるファイルが一つあたり20MB制限で、先述の Disabled の設定ではwasmファイルあたりがアップロードできない事態に陥ります。
そういうときはおとなしく圧縮して臨みましょう。

3. GASのテンプレートをつっこむ

いよいよGASの時間です。
GASを新規作成、件のテンプレートをコピペするなり何なりして、index.html , style.css.html , コード.gas を配置してください。

4. gasの該当部分にURL等を入力する

gas部分に空の文字列の定数がいくつか書かれていると思いますので、該当するURLや設定を入力します。

gasからunity内の処理に干渉する

本テンプレートには、完全蛇足な感じですが、gasからunityの処理に干渉できるように細工してあります。
詳しくは公式リファレンスと、index.html 内のjavascript部分を参照。
HTMLファイルにgasから干渉する方法は、「強制出力スクリプトレットタグ」という手法が最初からあるので、「gas→javascript→unity」といった感じで干渉することができるんだな、これが。
問題点として、このうち「javascript→unity」の干渉部分がバージョンによって変わる可能性高そう、と個人的には思ってる。
なんせ直近で変わっている部分でもあるので。

こちらにも、index.html 内の記述の一部を抜粋しておくと、こんな感じ。

index.hmtl

	var script = document.createElement("script");
	script.src = loaderUrl;
	script.onload = () => {
	createUnityInstance(canvas, config, (progress) => {
			progressBarFull.style.width = 100 * progress + "%";
		}).then((unityInstance) => {
			loadingBar.style.display = "none";
			fullscreenButton.onclick = () => {
				unityInstance.SetFullscreen(1);
			};	
			// 起動時に指定のunity内の関数を呼ぶ
			if('<?!=gameObject?>'!==''){
				unityInstance.SendMessage('<?!=gameObject?>', '<?!=method?>', '<?!=param?>');
			}
		}).catch((message) => {
			alert(message);
		});
	};
	document.body.appendChild(script);

要は unityInstance.SendMessage が大事で、第一引数にゲームオブジェクト名、第二引数にメソッド名（クラス名ではない）、第三引数以降そのメソッドの引数を指定していく、という感じ。

おわりに

まあ、何かに使えるかもしれない。気軽にWebGLを自分のウェブページで公開できるのは、それだけでメリットだろうか...？
使ってもらえると嬉しいけど、よくわからないエラー出たって言われても、答えられないかもしれない...（GAS初心者）。

GASでWebGLあげるためのテンプレート作った

ソース

使い方