
マイケル
みなさんこんにちは!
マイケルです!
マイケルです!

エレキベア
こんにちクマ〜〜〜

マイケル
今日は開発中のオセロゲームをWebGL対応した際に
発生したエラーと対処内容についてまとめていくぜ!
発生したエラーと対処内容についてまとめていくぜ!

エレキベア
WebGL対応については確か以前もまとめていたクマね

マイケル
そう、前対応した時はビルドが通るようにすればすんなり上手くいったんだけど、
今回はそれに加えていくつか対応しないといけない箇所があったからまとめてみたんだ!
今回はそれに加えていくつか対応しないといけない箇所があったからまとめてみたんだ!

エレキベア
今回は少しやっかいだったクマね

マイケル
それではさっそく見ていこう!
発生したエラー内容

マイケル
対応した内容としては
・URPでのビルド時エラー
・UTSがWebGL非対応で表示がおかしい
・マルチスレッド処理が機能しない
の3つになります!
・URPでのビルド時エラー
・UTSがWebGL非対応で表示がおかしい
・マルチスレッド処理が機能しない
の3つになります!

エレキベア
結構対応する箇所が出てきたクマね

マイケル
なお、今回使用したUnityのバージョンは
2021.3.1f になります!
バージョンの差異によってはエラー内容が違ったり、解消されていたりする場合もあるためご注意ください!
2021.3.1f になります!
バージョンの差異によってはエラー内容が違ったり、解消されていたりする場合もあるためご注意ください!
URPでビルドしたらエラー

マイケル
一つ目はURPプロジェクトとしてWebGLビルドした際に発生した下記のエラーです。
Shader error in 'Hidden/kMotion/CameraMotionVectors': SV_VertexID semantic is not supported on GLES 2.0 at line 11 (on gles)

マイケル
こちらはエラー文言通り、Shaderの一部がGLES2.0(WebGL1)をサポートしていないために発生しているエラーになります。

エレキベア
今は確かWebGL2が主流でWebGL1は非推奨になっていた気がするクマね

マイケル
今回は Build Settings – Other Settings から
Graphics APIs の Auto Graphics APIのチェックを外してWebGL1を削除 することで解決しました!
Graphics APIs の Auto Graphics APIのチェックを外してWebGL1を削除 することで解決しました!

エレキベア
簡単な対応クマ〜〜
UTSがWebGL非対応

マイケル
さあこれでビルドも通ったし一見落着!
・・・と思っていたところ、ゲーム画面を見て異変に気がつきました。
・・・と思っていたところ、ゲーム画面を見て異変に気がつきました。

マイケル
キャラクター表示がバグっている・・・・

エレキベア
これはひどいクマ・・・

マイケル
調べたところ、今回使用させていただいた
UTS(UnityChanToonShader)はWebGLには非対応 らしく、その影響でバグってしまっているようでした。
UTS(UnityChanToonShader)はWebGLには非対応 らしく、その影響でバグってしまっているようでした。
GitHub – UnityChanToonShaderVer2_Project

エレキベア
確かにTargetPlatdformに載っていないクマ・・・

マイケル
しかし開発終盤だったこともあり今からシェーダを変えたくないなという気持ちもありました・・・。
どうにかできないか見ていたところ、どうやら表示がおかしいのはアウトラインのみのようだったため、今回はアウトラインのみ無効にすることで対処できました。
どうにかできないか見ていたところ、どうやら表示がおかしいのはアウトラインのみのようだったため、今回はアウトラインのみ無効にすることで対処できました。

エレキベア
それだけで済んでよかったクマ・・・

マイケル
今回は助かったけど、ちゃんとプラットフォームのサポートは見て決めないといけないなと痛感しました・・・
マルチスレッド処理が動かない

マイケル
さあ今度こそバッチリだぜ!
そう思いながらオセロをプレイしてみたところ・・・
そう思いながらオセロをプレイしてみたところ・・・

マイケル
今度はオセロを開始した途端にAIが何も反応しないという事象が発生しました・・・

エレキベア
これでは何もできないクマ・・・

マイケル
これを調べた結果、WebGLではマルチスレッドが使用できないために、
スレッドを切り替えて実行している処理は全く動作しない ということが分かりました。
スレッドを切り替えて実行している処理は全く動作しない ということが分かりました。
↑モンテカルロ等の重い処理はスレッドを切り替えていた

エレキベア
ここに来て高い壁がクマ・・・

マイケル
元々重かったからスレッドを分けたわけなので、シングルスレッドに戻すとそれはそれでカクカクしてひどいです。
つまりマルチスレッド以外の方法で重い処理を対処する必要があります。
つまりマルチスレッド以外の方法で重い処理を対処する必要があります。

エレキベア
むむ・・・どうすればいいクマか・・・

マイケル
今回は手を決めるまでの時間を犠牲にして、
ある程度の処理を行なった後に1フレーム待機させることで対処しました。
ある程度の処理を行なった後に1フレーム待機させることで対処しました。

マイケル
具体的には下記のように対処しています。
モンテカルロ処理の中で指定回数ゲームを行なって勝利した回数を求める関数になるのですが、一定回数石を置いたら1フレーム待機させるよう、実装しました。
モンテカルロ処理の中で指定回数ゲームを行なって勝利した回数を求める関数になるのですが、一定回数石を置いたら1フレーム待機させるよう、実装しました。
GitHub – unity-reversi-game-scripts/masarito617 – AIAlgorithm.cs
↑一定回数石を置くごとに1フレーム待つ

マイケル
このようにすることで1フレーム内で行う処理が減り、
結果として描画負荷を軽減させることができます。
結果として描画負荷を軽減させることができます。

マイケル
厳密には置いた回数より時間を計測した方が効率がいいとは思いますが、
今回はこれでヨシとします・・・!!
今回はこれでヨシとします・・・!!

エレキベア
面倒臭かったクマね

マイケル
以上、3つの対策で無事WebGLでも動作するようになりました!

エレキベア
やったクマ〜〜〜
おわりに

マイケル
というわけで今回はWebGL対応した際のエラー対応でした!
どうだったかな??
どうだったかな??

エレキベア
前回はすんなりいったクマが今回は中々大変だったクマね

マイケル
まあスレッド周りは勉強になったけど大変だったね・・・

マイケル
みなさんもWebGL対応する際には描画周りとスレッドには気を付けましょう!!
それでは今日はこの辺で!アデューー!!!
それでは今日はこの辺で!アデューー!!!

エレキベア
クマ〜〜〜〜
【Unity】WebGL対応した際に発生したエラーまとめ【WebGL】〜完〜