今回はWordPressの記事に埋め込んでいる Unity で作った WebGL ゲームの表示の改良をやってみました。
Unity の WebGL を埋め込んでいるブログのページを開くと、ページにアクセスすると同時に WebGL のダウンロードと読み込み処理が行われます。その処理が終わるまでページのスクロールが引っ掛かる減少が気になっていました。
そこで今回は YouTube の動画埋め込みのように再生ボタンをクリックしたら WebGL の処理が行われるように改造してみることにしました。
UnityでビルドしたWebGLゲームのファイルを確認
まず、Unity の WebGL ビルドでデフォルトで書き出される index.html ファイルがどうなっているか確認しましょう。コードの内容は次の通りです。
Unity WebGL Player | corevale.com
<head>タグ内のScriptでWebGLをのダウンロードと読み込み処理を行っています。コードの12行目で変数 gameInstance に UnityLoader を格納しています。
つまりページにアクセスすると同時に WebGL ファイルの処理をはじめています。この部分をマウスクリックで実行すればよいのでは？と考えました。
index.htmlファイルに書かれている処理を関数にまとめる
上記の index.html ファイルの処理の部分を function loadWebgl() という名前の関数にしました。そして
タグ内で画像をクリックしたら関数 function loadWebgl() を実行するようにしました。出来上がったのが次の通りです。<!DOCTYPE html>Unity WebGL Player
スクリプトで使用されている変数宣言の問題点
コード内のコメントにも書いたのですが、デフォルトのコードで宣言されていた変数 gameInstance の頭に var をそのまま付けると、フルスクリーン表示切り替えができなくなっていました。
フルスクリーン切り替え処理のコードを見るとは onclick=”gameInstance.SetFullscreen(1)” となっています。つまり変数 gameInstance に格納された WebGL ファイルの関数 SetFullscreen() を実行するとなっています。
フルスクリーン切り替えができない原因としては WebGL 処理を関数 loadWebgl() にまとめたことです。変数 gameInstance が関数 loadWebgl() の中でしか参照できなくなったということだと思います（たぶん）。
ということで、関数 loadWebgl() の外側から変数 gameInstance が参照できるように変数 gameInstance の頭にある var を外しました。JavaScript については勉強不足ですが、とりあえずフルスクリーン切り替えができるようになったのでOKとしましょう。
埋め込みWebGLをフルスクリーン表示するには
実ははまだフルスクリーン切り替えには問題が残っています。WebGL をビルドしたデフォルトの html ファイル埋め込んでいる場合でもフルスクリーン切り替えができませんでした。しかしこれは調べるとすぐにわかりました。iframe タグの最後に allowfullscreen と書いてあげると解決しました。埋め込みタグは次のようになります。
ということで、改良した埋め込みWebGLが次の状態です。画像をマウスクリックするとWebGLのダウンロードと読み込みが始まります。
今回、色々と調べたもののまだわからない点はたくさんありますが、これでひとまず WebGL ファイルの埋め込みの改良ができました。
今後のブログ記事はこの方法で WebGL を埋め込むことにしました。過去の記事についても埋め込み方法を修正していく予定です。
コメント
WebGL凄いですね。惹きつけられます。
教科書にさせて頂きたいと思います。
軽くなるオススメのセッティングなどあれば教えて欲しいです。
コメントありがとうございます！
データサイズの軽量化については、使用するテクスチャのサイズを小さくする。可能であればタイリングテクスチャを利用する。ライトマップの解像度を下げる。といった形で今のところ対応しています。WebGLのデータ軽量化についてはあらためて記事にしてみたいと思います。