WebGL
Unity

Unity 5.3 & Web GL/HTML5 セミナー by Unity & Mozilla メモ

More than 3 years have passed since last update.

2015年12月24日に渋谷dots.で行われた「Unity 5.3 & Web GL/HTML5 セミナー by Unity & Mozilla」で記載したメモです。

※間違っている部分もあると思いますのでご了承下さい。


1.Unity 5.3 WebGL

ユニティ・テクノロジーズ・ジャパン 大前広樹氏


■WebGL用のゲーム作成に注意すること

・WebGLはインストーラから、インストールし忘れなようにすること

・必ずBuild & Runで実行

●Build & Runで実行で実行する理由

Unityが中に簡易的なテンポラルサーバーを立ち上げているため、

ブラウザのURLを見るとローカルホストになってる

GoogleChrom等、一部ブラウザはセキュリティの問題でローカル環境では

アセット等がロードできないことがある。

Unityはその問題を解消するため、自前でサーバーを立てて動かしている

なのでBuild & Runを使用すること


■WebGLを実装 or 勉強するには

マニュアルに書いてあることがほとんどなので、それを見ればいい

ただ詳細すぎるため結構骨折れるかも

※技術ブログも多く公開されているので、そちらを参照!


■ゲームパッド

WebGLはGoogleChromとFireFoxのみ、ゲームパッドに対応

Safariはゲームパッドは動かない

ただし、FireFoxはゲームパッドをつなげた時になぜか落ちる


■Unity作成のゲームを移植するには

(1)モバイルゲーム向けのコンテンツ

WebGLに移植するのはあり

(2)PC/Mac/WebPlayerのゲーム向けコンテンツ

WebGLに移植するのは突然の死が待っている!

※最善は1からコンテンツを作ること


■ビルドデータ詳細

・HTML

TemplateData

自分でオリジナルのデータが格納可能

Mosuleのデータが大事

errorhandlerに独自のエラー処理が記述可能

・フォルダの中身

jsgzが実際のゲームコード

memgzはユニティで用意した仮想メモリ

WebGL Memory Size 大きければ大きいほどでかいゲームが動かせるがブラウザが落ちる

このサイズを見極めるのが重要


■WebGLのメモリ

・Unity Heap

・アセットデータ

これはユニティ側でコントロール可能

Strip Engine Code チェックを入れる

→使ってないクラスを片っ端から削除する

できるだけアセットバンドルを使う

JavaScriptをどんどん小さくすることが大事

・注意点

UnityだけでなくJavaScriptもガベージコレクションを使用する

そのため、ゴリゴリとオブジェクトをループで作りまくると落ちるので気をつける

アセットバンドルにはサイズの制限はない

ただ、でかすぎるとブラウザ側でロードを許可するか聞かれる場合もある


■圧縮

LZ4推奨 CPUに優しい

・LZ4推奨の理由

WebGLはスレッドが存在しない

※ブラウザのスレッドサポートが今後対応する予定

LZMA圧縮は複雑な計算式を使用するため、ブロッキングされて止まる


■Strip Engine Codeの注意点

(1)ゲームでは使ってないけど、アセットバンドルでは使っているコード

それもスワッピングされるのでロードされない問題がある

・解決策

一番上にLINK.XMLを置く

設定を書くと対象のコードはスワッピングされない

・エラーが起こった時に出てくる、この謎の数値って何よ

YAMLを参照

YAML Class ID Reference

IDが振られているので、これを元にゲームのオブジェクトを探す

大体コライダーが多い

(2)サードパーティのアセットバンドルしか使わないコード

余裕でストリッピングされる

・解決策は(1)と同じ

・動的なコード生成はできない

仕様なのであきらめましょう

・メタデータを使うものはLINK.XMLで解決


■アセットバンドル

アセットバンドルはLZ4 gzip(Webブラウザー、サーバーがプロトコルレベルで吸収してくれる)

gzipを使うとさらに小さくなる

ユーザーはgzipの利点を感じることができる

サーバー側で勝手に解凍してくれるが、ユーザー環境によっては解凍が動かない時がある。その時はJavaScriptが解凍してくれる

ただ、JavaScriptで解凍させるのは最終手段(時間がかかりすぎる)なので、基本はサーバー側と調整すること


■WebGLでネットワークゲームを作る場合

UNETはWebSocketで動作! 

WebSockets or WebRTC in JavaScript アセットストアにサンプルあり

基本はWWW or UnityWebRequestを使用


■コンテンツデリバリー

CORS (Cross-Origin Resource Sharing)

crossdomain.XMLみたいなもの


■WebGLのデバッグ

プロファイラーが使える

Development Build をチェックすると、例外がコンソールに出るようになる

プロファイラーもWebSocketを使用している

WebSocketはオートコネクトプロファイルをオンにする


■グラフィック

セキュリティの関係で制限がある


■WebGL2.0

WebGL2.0に対応済み

ただし、サポートしているのはFireFoxのみ

快適に動くのもFireFox

しかし、なぜかゲームパッドが動かない!


■プラグイン

C言語をそのまま記述しても動く

・ビルドの注意点

Unityの中にあるEmscriptenのバージョンを確認する。

バージョンが一致していないと動かないことが多い

ビルドはバージョンに合わせて行う事


■ブラウザの注意点

Safariはフルスクリーンにはできるが、入力を受け付けない

Safariはフルスクリーン非推奨


■オーディオ

オーディオはすべてwebオーディオに依存している

ややこしい事はできない

マイクは動かない


■将来的な話

スレッド対応が入ったUnityとFireFoxは相当なパフォーマンスが出る

IE11は非対応にした方がいいかも パフォーマンスがいろいろ悪い


2.Mozilla & Games

Mozilla Japan 清水智公氏


■Mozillaとは

Webを良くしようと動く団体。非営利。

主にアフィリエイトで食ってる


■web the platform

リンクを渡すだけでみんなが共有して使える

アンインストールを必要しない

ユーザーを試させるために非常に敷居が低い

拡散がすごい

・webでゲームを出す利点

気軽に試してもらえるため、すごく敷居が下がる

※インストールは心理的抵抗がある

・利点 

ソーシャルネットワーク上に共有できる

プラグインフリー 根絶を目指している


■なぜゲーム? 

エクストリームなアプリケーションだから


■ゲームを動かすために

・ゲームパッド

ゲームパッドはイベントが飛んでこない

フレーム単位で取ってくるように改修

・サービスワーカー

オフラインになってもちゃんとコンテンツが読めるようにする

プロキシをJSに書く

キャッシュをコントールできる

・通知

通知も出せる

・パフォーマンス

パフォーマンスをいかに上げるかが重要

・asm.js

JSに型をどんどん埋め込んでいるスタイル

・emsripten

Cで書かれたコードをJSに変換する


■将来的な実装

・JSでベクトル計算

一気にやった方が早いよね


■WebAssembly

バイナリフォーマット


■MozVR

HTML上で動くVR


おまけ


Unity道場

2016年1月、来年から始まる新サービス!!

毎月1~2回、Unityのさまざまなテーマで渋谷dots.でセミナーやワークショップを開催。

通年20回以上開催予定。

進化が速くて追っかけるのがつらい。

そういう人はUnity道場に通いましょう!