レースゲームをかっこよくしたくて、画面を白飛びさせた

自作のレースゲームに、光がにじむブルームという演出を入れました。かっこよくなるはずでした。

画面が白飛びしました。

Three.jsで描画して、Rapierで車の動きを計算するゲームです。車を走らせるだけでなく、見た目もよくしたい。そこでEffectComposerとUnrealBloomを使ったのですが、自分で作った空が非常に明るく、その空まで盛大にブルームの対象になっていました。

主役は車です。空、そんなに前に出なくていい。

路面にも、ちょっと光を回したかった

環境の画像から照明を作るIBLも使いました。周囲から光が回り込むようにして、いい感じに見せたいわけです。

こちらは路面が灰色っぽくなりました。

明るくしたかったところと、明るくなってほしかった程度が、どうも揃いません。光を足す処理は働いている。でも、できあがった画面を見て採用したいかというと、別の話でした。

結局、このゲームではブルームを含む後処理も、IBLも外しました。導入したものが二つとも帰っていく。

残したのは、輪郭のギザギザを抑える処理、車体の塗装のつや、影、斜めから見た路面のテクスチャを整える処理です。演出の名前を増やすより、車と路面がちゃんと見えるほうを取りました。

スクリーンショットでは、今度は黒

このゲームは、ブラウザを自動操作するテストでも確認していました。テスト用の描画には、GPUの代わりにソフトウェアで処理するSwiftShaderを使っています。

ここでは、描画結果を画像として取り出すためにpreserveDrawingBuffer: trueが必要でした。テスト時のこの設定がないと、スクリーンショットが黒くなる問題がありました。

さっきまで白すぎたのに、今度は黒い。

もちろん、原因は別です。明るさを調整しても、キャプチャの問題は直りません。見た目の異常を全部「描画が壊れた」で一括りにすると、調べる場所まで迷子になります。

制作記録を見返すと、ゴーストカーやドリフトの採点も作っています。レースゲームらしいこともちゃんとやっていました。ただ、こうして書くと、空を光らせたりスクショを黒くしたりしている時間の存在感が強い。

車を走らせたかったんです。本当は。