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