Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
UnityWebGL Tips集
Search
mao
June 03, 2018
Technology
0
1.2k
UnityWebGL Tips集
[秋葉原] Unityもくもく勉強会×1週間ゲームジャム準備会
LT資料
https://weeyble-game.connpass.com/event/87052/
mao
June 03, 2018
Tweet
Share
More Decks by mao
See All by mao
たのしいUnsafeUtility
mao_test_h
0
2.3k
VRMSpringBoneをJobSystem&ECSで最適化してみた話
mao_test_h
0
580
ECS初学者に向けてのTips集
mao_test_h
0
370
OculusGoで大量のオブジェクトを動かしてみた
mao_test_h
1
1.2k
UE4+Tangoをいじってみた話
mao_test_h
0
510
UE4初心者がエディタ拡張をやってみた
mao_test_h
0
2.1k
Other Decks in Technology
See All in Technology
Bluesky 2019〜2022
yamarten
1
120
寒冷地稲作の歴史にみるコミュニティ
miu_crescent
2
140
Amazon CloudWatchで小さく始めるWebサービスのオブザーバビリティ / How to start Observability for Web Sevices with Amazon CloudWatch
sms_tech
3
190
Amazon ECS & AWS Fargate 今昔物語 / past and present stories of Amazon ECS and AWS Fargate
iselegant
18
3.8k
Application Signalsで始めるSLO ユーザー満足度を数値化する第一歩
niftycorp
PRO
2
140
KubeVirt Networking ONIC 2024
orimanabu
4
730
Reality is not an End-to-End Prediction Problem: Applied NLP in the Age of Generative AI
inesmontani
PRO
0
110
Azure AI servicesと歯のおはなし/AzureTravelers_Fukuoka2024_baba
nina01
1
110
WSUSが非推奨に!? Windowsの更新管理を改めて勉強する!
ebibibi
0
560
20241015 Toranomon Tech Hub#1 Service Catalog使ってみた
hiashisan
0
220
パートナー企業のテクニカルサポートエンジニアとして気になる、より良い AWS サポートの利活用について
kazzpapa3
1
220
Rist_Meetup_Kaggleは業務の役にたつ - ビジネスコンテンツ情報を活用する BtoB 事業編 - / rist-meetup-20241012
taro_masuda
0
320
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Six Lessons from altMBA
skipperchong
26
3.4k
The World Runs on Bad Software
bkeepers
PRO
65
11k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
105
48k
Documentation Writing (for coders)
carmenintech
65
4.4k
The Cult of Friendly URLs
andyhume
77
6k
Fireside Chat
paigeccino
32
3k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
Become a Pro
speakerdeck
PRO
24
4.9k
BBQ
matthewcrist
85
9.2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
250
Transcript
Unityもくもく勉強会×1週間ゲームジャム準備会(2018/06/03) LT枠
どこからきたの?なわばりは? ・mao (@TEST_H_) ・ゲームプログラマーなフレンズ ・仕事では主にUnityちほー等に生息している ・Unity1Weekの参加歴は多分4回ぐらい
質問です。 この中でWebGLについて完全に 理解しているフレンズは?
今回話す内容について。 結論から言うと大体は公式ドキュメントに載っていた り、調べたりすると(多分割と簡単に)出てきます。 オリジナルな黒魔術とかそっち方面ではないのでご了承を。 Unity Documentation : WebGL https://docs.unity3d.com/ja/current/Manual/webgl.html
GraphicsAPIの違い? 日本語周りについて NativePlugin活用術 おまけ 目次
GraphicsAPIの違い?
Editor / Chrome / Firefoxで実行
Safari or Edgeで実行
なんか違う
どうしてこうなった ・SafariとEdgeがWebGL 2.0に非対応のため - 今回の実装としてはSSR(Screen Space Reflection)でゴリラを反射させている。 但しSSR自体はDeferred Renderingである事が必要。 -
Deferred Rendering自体はWebGL 2.0から可能となっているので、 対応していないブラウザでは表示されない。 ※例自体はUnity2017.4.4f1 + PostProcessing v1で実装。Editor上ではWebGL 2.0でエミュレート WebGL グラフィックス https://docs.unity3d.com/ja/current/Manual/webgl-graphics.html ※その他互換性はこちらで確認可能 https://docs.unity3d.com/ja/current/Manual/webgl-browsercompatibility.html
注意点 ・外部Assetとかは注意しよう - 把握せずにビルドして動かしてみると「写真と違わない?」となることも。 - ちゃんと把握した上でEditor上でも正しくGraphics emulationを設定して確認。 ・一部演出が無くなる程度であるなら割り切ることも - ※2.0対応ブラウザで遊んだ方がグラ周りが豪華になる的な感じで
・仮に2.0を前提としている場合には注意 - 2.0専用である事を明記するとか。 - (やった事無いけど、user agent取得するplugin作ってタイトル辺りで弾くとかできるか な...)
日本語周りについて
Arialフォントに注意 →UI.Textとかにデフォルトで設定されてる奴 - Editor上だと日本語が表示されるがブラウザ上だと日本語が表示されないので注 意。 ・日本語を含むフォントを設定しよう - ライセンスには注意すること。 - M+
FONTSさんとかおすすめ。 - 解決策ではないが、入れたついでにTextMeshProを使うとか。 UnityのWebGLで日本語を表示する https://qiita.com/tsubaki_t1/items/93e4b91b830729cd93a4
日本語入力について ・InputFieldとか置いてもブラウザ上だと日本語入力が出来ない - そしてEditor上では出来るという罠。 - ※原因について少し掘り下げると、ブラウザ側でキーボード入力自体は取れるが、かな変換をやっ ている時のコントロールはブラウザ上には無い為にキーイベントが飛んでこないらしい。 →その上でこれを直接JSでコントロールするAPIも無いのとの事..。 ・公式で解決策が公開されているのでこちらを用いる -
InputFieldの拡張 - 改造すれば多分TextMeshProとも合わせられるはず。。(多分) (「え?? この流れなら普通「実は僕の方で用意しました!」と出すところでは??」禁止) WebGLでの日本語入力・コピー&ペーストについて https://helpdesk.unity3d.co.jp/hc/ja/articles/220207047
Native Plugin 活用術
何が出来るの? ・UnityからJavaScriptコードを呼び出してWebAPIを叩いたり出来る。 - “.jslib”の拡張子がつくJavaScriptコードを用意したり。Application.ExternalEvalに string型でJavaScriptコードを書くと言う手もあったが、最新のドキュメントを見たら Obsoleteになってた。 ・JavaScript側からUnityのスクリプトを呼び出すことも可能。 - WebAPIの何かしらの取得結果をUnity側に渡したり出来る。 WebGL:
ブラウザ スクリプトとの相互作用 https://docs.unity3d.com/ja/current/Manual/webgl-interactingwithbrowserscripting.html
注意点 ・Unity⇔JSのやり取りについて - 例えばUnityからJSに引数を渡す際など。 値型ならそのまま渡せるが、stringだとJS側にポインタが渡ってくるの で”Pointer_stringify”ヘルパー関数を用いてJS側の文字列に変換する必要があった りなど。 - 詳細についてはドキュメント参照。 ・キャッシュが残る...?
- たまに修正しても反映されない現象?を確認。。 - 詳細は不明だが、キャッシュ消したら直ったので参考までに。。
実装例 ・別タブへの切り替えや最小化と言った非表示時を検知して「Pause...」を表示してみるテ スト。 - “visibilitychange”イベントを見ている。 - この例ではポーズ表示を行っているが、例えばホラゲだと精神的ブラクラを表示でき たりとかd(ey mao-test-h/WebGL-VisibilityState https://github.com/mao-test-h/WebGL-VisibilityState
参考リンク ・WebGL での開発を始めるにあたって - https://docs.unity3d.com/ja/current/Manual/webgl-gettingstarted.html ・【Unite 2017 Tokyo】WebGL:ゲームプラットフォームとしてのWebと現在と未来 ※講演 動画あり
- https://www.slideshare.net/UnityTechnologiesJapan/unite-2017-tokyowebglweb-76727421 ・【Unite 2017 Tokyo】Unity+WebGLでゲームを開発・運用して見えてきたメリット・デメリッ ト ※講演動画あり - https://www.slideshare.net/UnityTechnologiesJapan/unite-2017-tokyounitywebgl-76727485
おまけ (長くなりそうなやつとか。メモ書き的な何か)
おまけ(ビルド編) ・WebGLのスクリプティングバックエンドはIL2CPP - AssetBundle運用時などはStrip Engine Codeに注意。 - ※例えばassetBundleでは参照していても実行ファイルの方で参照していない Scriptが存在すると、ビルド時に削られる可能性がある。 -
※Strip Engine Code自体の有効/無効は設定可能。 - →こちら自体はlink.xmlで解決可能。 - 詳細は公式ドキュメントの「Issues with code stripping」を参照。 ・インクリメンタルビルド - デフォルトで有効との事。 - キャッシュ自体は”Library/il2cpp_cache”にある。こちらを削除するか別のUnityバー ジョンで開かれるとリビルドされる。
おまけ(ビルド編) ・Development Buildについて - 出力後のJavaScriptファイルはminifyされない模様。 - その為にファイルサイズがメチャクチャデカくなる。 - 【GraphicsAPIの違い?】の項目で表示したゴリラ2体表示する実行ファイル一式のサイズの違いを見 比べると...
- Release Build(通常時) : 8.04 MB - DevelopmentBuild(Use pre-build Engine有効) : 206 MB ・Use pre-build Engineについて - Development Buildを有効時に選択可能。 - 有効にするとUnityはビルド時にマネージドコードのみを再構築してビルド前の UnityEngineと動的にリンクする。(再構築が30%~40%早くなるとか?) - ただし、動的なリンクオーバーヘッドの為にパフォーマンスは通常時よりも遅くなる。
おまけ(ビルド編) ・Chromeだとビルド生成物のindex.htmlをダブルクリックで開いても動かない? - Chromeではセキュリティ上の理由からローカルファイルのURLから開いたScriptに 制限がある。 - 自前で立てたサーバー経由。若しくはBuild & Runでローカルのサーバー経由で開く と動く。
- 後はオプションを付けてChromeを動かし制限を解除するとか。 - 詳細は公式ドキュメントの「Building and running a WebGL project」を参照。
おまけ(メモリ編) ・とにかくメモリ周りが結構シビア。 - 特に32bit環境はブラウザ側で確保できる最大メモリが2GBとなるので、その中で色々とやりくりされるので 結構シビア。 - ※WOW64の上で実行した場合などについては不明...(未調査) - ChromeだとJavaScriptのコード解析の段階で膨大なメモリを食うので32bitだとシビアだとか。 -
それ以外にもデカいデータを置きまくるなどすれば32bitだと特に厳しくなるかもしれない。 - PlayerSettings -> Publishing Settingsにて「WebGL Memory Size」と言うUnityが使用するメモリ領域を設定 できる項目があるが、256を超えた辺りから警告が出る。 - ※64bitでも物によっては512ぐらい取らないと「Out of memory」が出たりするときも.. - Asset管理戦略は慎重に。一気に読み込んで確保しておくのではなく、細かく読む戦略の方が良いとか。 - ※「【Unite 2017 Tokyo】WebGL:ゲームプラットフォームとしてのWebと現在と未来」でメモリ周りにつ いて解説されているのでおすすめ。
おまけ(その他) ・スレッドは非サポート。 - ※「【Unite 2017 Tokyo】WebGL:ゲームプラットフォームとしてのWebと現在と未来」曰くJavaScript側でゴ ニョゴニョすることでそれっぽいことは出来るとのことだが...未検証。 ・ログはブラウザのJavaScriptコンソールから確認可能 - ChromeだとF12押したら出てくるやつ。
・バックグラウンドタブでの実行 - PlayerSettingsにある「Run in background」のチェックが有効であれば、キャンバスや ブラウザがフォーカスされて無くてもゲームが動き続ける。 - →但し裏に回った際には実行に制限が掛かり、更新間隔が大分遅くなったりするの で注意。
おまけ(その他) ・AssetBundleについて - WebGLはAndroid/iOSと違いストレージにAssetBundleを保存することが出来ない。 - ブラウザキャッシュやLoadFromCacheOrDownloadと言ったUnityのキャッシュシステ ムを使うことになると思われる。 - ※後者について、正確に言うとIndexedDBに保存される模様。 -
ここらは「【Unite 2017 Tokyo】Unity+WebGLでゲームを開発・運用して見えてき たメリット・デメリット」で触れられている。 - Addressable Asset Systemで管理がどう変わってくるのかは要調査。
おまけ(その他) ・StreamingAssetsについて - こちらどうやらビルド時の生成物一式の中にそのままの形で吐き出されるっぽい。 - 故にStreamingAssetsから読み込む際には一緒にサーバーにアップする必要があり そう。
Thank you!