ブラウザでHUDが急にさかさまになった話 🙃

2026年11月7日

バージョン2026.10.10で、裏側で大きな一歩を2つ踏み出しました。ゲームが Unity 6.6 で動くようになり、ブラウザ版は、使えるブラウザ（たとえば最新の Chrome や Edge）では WebGPU で起動するようになりました。それ以外のブラウザでは、これまでどおり WebGL 2 で動きます。どちらも、ウェブサイトがグラフィックスカードと話すための方法です。WebGL は何年も前からあり、WebGPU はその後継で、いまのグラフィックスカードのしくみに近いものです。その直後、ぼくのHUDがさかさまになりました。🙃

一度見たきり、二度と出ない。ノートパソコンの Chrome でゲームを開いたら、HUDがさかさまでした。再現を試みましたが、できませんでした。ぼく自身も、二度と見ていません。それで、ひとまずこの件は終わりにしました。

そして、写真つきの証拠つきで戻ってきました。10月19日、新しいワールドでまた起きました。今度はすぐにスクリーンショットつきでバグレポートを送りました。ところが、スクリーンショットそのものがおかしかったんです。しま模様だらけの画像が3枚、横に並んでいました。その裏にあった謎解きはこうです。画像はピクセルでできていて、ふつう1ピクセルには赤・緑・青の3つの値があります。ゲームは1ピクセルにつき3つの値を期待していましたが、WebGPU は透明度の値をひとつ足した4つを届けていました。同じデータを1ピクセル4つの値として読むと、画像が読めるようになります。ワールドは正しい向きなのに、HUDは全体が鏡のように反転していました。ホットバーは上にくっつき、VEGAの質問「基本を見せましょうか？」もさかさまです。調べるうちに、WebGPU に切り替えてから、ブラウザのスクリーンショットがすべておかしくなっていたこともわかりました。それまでブラウザからのレポートにスクリーンショットがついていたことがなかったので、だれも気づかなかったんです。🔍

どうしてHUDだけ？グラフィックス設定が「中」以上で、バイザー効果がオンのとき、別のカメラがHUDをグラフィックスメモリ上の専用の画像に描きます。専門家はこれをレンダーテクスチャと呼びます。ゲームはその画像を、バイザー効果とその光といっしょに、ワールドの上に重ねます。ややこしいのはここです。こうした画像で「上」がどちらなのかは、グラフィックスの仕組みごとに意見が分かれます。行を上から数えるものもあれば、下から数えるものもあります。ふだんはゲームエンジンがそれをそろえてくれます。ところが WebGPU のブラウザでは、HUDの画像でそれがときどきうまくいきませんでした。なぜ「ときどき」だけなのかは、いまもはっきりわかっていません。

再現する？ だめでした。ブラウザのバグを自分たちで見つけるために、小さなテストコースを作りました。あるバージョンの完成したゲームパッケージをダウンロードして、自分のパソコンで起動します。それから WebGPU つきのリモコン操作のブラウザがメニューをクリックして進み、ワールドを始めて、AIが見るスクリーンショットを撮ります。ぼくのリンクとまったく同じもので、同じグラフィックスチップで、3回試しました。3回とも、HUDは正しい向きでした。バグが出たのは、ぼくの本物の Chrome だけでした。

バグを起こせないなら、見つけるしかない。そこで、HUDカメラが、画像の左上の角に、4ピクセルの小さなマゼンタ色の点を描くようにしました。HUDをワールドに重ねる前に、バイザーシェーダーが左側の両方の角を見て、点がどこにあるかを調べます。（シェーダーは、グラフィックスカードの上で直接動く小さなプログラムです。）点が下にあれば、シェーダーはHUDを反転させます。そのとき角を隠すので、点が見えることはありません。ただ、バグが隠れているあいだは、こんな修正をテストするのは大変です。そこで、わざと点を間違った角に置くテスト用スイッチを用意しました。するとHUDは必ずさかさまになり、まさにぼくのスクリーンショットとそっくりそのままになりました。これで、検出が働くことが証明できました。✅

いちばん思いつきやすい修正は、バグになるところでした。「じゃあ WebGPU では、いつも反転させればいいじゃないか！」と思いますよね。組み込む前に、テストコースで試してみました。結果は、みんなのHUDが壊れてしまうところでした。ほとんどの場合、もともと正しい向きだったからです。

途中の3つの落とし穴。WebGPU には、ほかにもいくつかいたずらをされました。ひとつめ、単純なコピーの手順が、WebGPU では画像を勝手に反転させてしまうことがあります。そのため、反転したコピーでバグを再現するのはうまくいきませんでした。ふたつめ、シェーダーに渡したかった新しいスイッチが、ブラウザにはまったく届きませんでした。みっつめ、行の順番を確かめるためにピクセルを読み戻したら、矛盾した答えが返ってきました。そこで、シェーダーが判定結果をたった1ピクセルに書き込み、それを読むようにしました。1ピクセルには、上も下もありません。😄

これでどうなったか。バージョン2026.10.24から、ブラウザのHUDは正しい向きになり、ブラウザのスクリーンショットも、ちゃんとした画像に戻りました。バグレポートにはグラフィックスの欄もつくようになり、HUDがどちら向きだったかなども書かれます。だから次は、画像がなくてもわかります。同じパッケージで、Lyxette のレポートにあったバグも直しました。掘った溝の上に動物が浮かなくなりました。🐾

もしまたHUDがさかさまになったら、ブラウザでは F2 でバグレポートが開きます。見に行きますね。🙏