3次元ゲームでのディザリングの効果

Papersの作成者であるPlease Lucas Popeは、新しい3次元プロジェクト「Return of the Obra Dinn」に取り組んでおり、 ディザリング効果を使用して古い本の感覚を再現しようとしています。



はじめに、簡単な説明：Obra Dinnはすべてを8ビットパレットでグレースケールで内部的にレンダリングし、その後、後処理段階で最終出力を1ビット値に変換します。 8ビットから1ビットの色への変換は、元の画像の各ピクセルをディザリングタイルパターンの対応するポイントと比較することによって実行されます。 画像ピクセルの値がディザリングパターンポイントの値より大きい場合、出力ビットは1に設定されます。それ以外の場合は0です。出力は1ビット値に単純化され、視聴者の目はピクセルを結合し、それらからより多くのビットを近似します。









ディザリングパターンを使用してソースイメージを変換する



このプロセスの2つのコンポーネントは、元の画像とディザリングパターンです。 さまざまなケースで、Obra Dinnは2つの異なるパターンを使用します。より滑らかな色相範囲のための8x8 Bayerマトリックスと、順序の少ない出力のための128x128ブルーノイズフィールドです。









バイエル/ブルーノイズ







結果は、ワイヤーフレーム線のないエンジン内部にあります。 球上のバイエル、その他すべてのブルーノイズ。



古典的なディザリングプロセスは静止画像に最適であり、動いている画像やアニメートされた画像では非常に悪く見えます。 元の画像がフレームごとに変化する場合、静的ディザリングパターンと低解像度出力が深刻な問題になります。 固体の形状と色合いであるべきものは、ピクセルのきらめくカオスに変わります。





今日、ディザリングは主に静的ソース画像または高解像度出力で使用されます。 このディザリングのフローティング効果を見るときに最初に考えるのは、「はい、それがディザリングの仕組みです」ではなく、「このけいれん効果とは何か、どうすればオフにできますか」です。





動いているオブジェクトに焦点を合わせてみると、Obra Dinnの主な問題がフルスクリーンモードにあることがわかります。 これを修正する方法はありますが、多くの場合、「このスタイルは機能しません。置き換えてください」ということになります。 私はさまざまなスタイルを試しながら、この道をかなり長い道のりで行きましたが、戻って自分に質問をしました-これらのろくでなしのピクセルが私を悩ませてはいけないかもしれません。

ディザリングを安定させます

目にすべてを最適な方法で再結合する機会を与えるために、ディザリングは、出力ピクセルと1対1の相関を持つディザリングパターンポイントで使用するのが最適です。 ただし、出力と「唯一」の相関関係がある場合、シーンのポストエフェクトを適用すると、レンダリングされたジオメトリとしきい値パターンとの間に関連性がなくなります。 各フレームでは、シーンの移動要素に新しいしきい値があります。 代わりに、ディザパターンをジオメトリに「接着」し、シーンの残りの部分と一緒に移動するときに安定して見えるようにします。



これは、オーバーレイの問題が発生する場所です。 ディザリングパターンの「完全な」オーバーレイ（画面と1対1）とシーンの完全なオーバーレイ（ジオメトリと1対1）の間に矛盾があるため、妥協する準備をする必要があります。 私の仕事のほとんどは、異なる空間に入力ディザリングパターンを重ね合わせることに専念しています。これにより、パターンがシーンのジオメトリと最適に一致します。 ここでは、しきい値を設定する前の段階ですべてが行われます。

テクセル空間

私の最初の試みは、テクセル空間にディザリングパターンを課すことでした。 これは、8ビット出力画像を後処理する代わりに、シーンレンダリング中にオブジェクトテクスチャをディザリングすることに似ています。 これが機能するとは思っていませんでしたが、オーバーレイがシーンにどのように完全に一致するかを確認したかったのです。









テクセルディザリングパターン



まあ、一般的に、期待は満たされています。 すべてのオブジェクトのオーバーレイの実行方法は異なるため、パターンのスケールは一致しません。 それらは統合できます。 しかし、本当の問題は歪みです。 あるスペースから別のスペースへのリサンプリングは歪みにつながり、パターンをディザリングするために、従来のテクスチャのようにミップテクスチャリングやフィルタリングを実行するのはそれほど簡単ではありません。 しかし、私たちはそれを終わらせます：





すべてがそれほど悪くはありません-パターンはジオメトリにうまく接続されています。 歪みは独自のフローティング効果を作成し、オーバーレイの統合またはスケーリングは何の助けにもなりません。 テクセルはカメラまでの距離に応じてサイズが変化するため、画面上でリサンプリングされるとひどく歪むディザリングパターンのピクセルが常に存在します。

運動ひずみ

ディザリングパターンで下のジオメトリの動きを追跡したい場合、シーンでレンダリングされた各ピクセルの位置の変化に基づいてパターンを変形するだけではどうですか？ 確かに、試してみませんか。 これは、モーションブラーに少し似ており、各ピクセルが前のフレームに対する動きを追跡します。 この場合、ディザリングテクスチャを更新して、そのパターンがシーンとともに移動するようにします。 シーンピクセルが前のフレームに存在しなかった場合、ディザリングパターンが再ロードされます。 この手法の実装は、ゲームの静的な性質によって大幅に促進されました。個々のオブジェクトではなく、カメラの動きを心配する必要がありました。





それはむしろ「迅速で汚い」試みでしたが、いくつかの事実が明らかになりました。 まず、いくつかの方法で動作します。 第二に、ディザリングパターンは隣人が考慮する必要があります-個々のピクセルだけではありません。 この方法で行われているように、各ピクセルを個別に考慮すると、パターンにギャップや歪みが生じることは明らかです。 このテストシーンでは、カメラを動かして胸の例を示しました。 歪んだディザパターン自体を見ると、気づきやすくなります。





これらのギャップは、異なるピクセル深度と選択されたしきい値が原因で発生します。 私は、エリアの追跡に基づいて問題を修正し、その深さを平均し、各エリアのディザリングパターンのすべてのポイントを同じ値にシフトする複雑なシステムを考えていました。 領域の境界に沿ったギャップは、照明またはスケルトンラインの急激な変化によって隠すことができます。 これは、ゲームが色付きの領域を使用してモデルワイヤフレームを生成したため、実現できませんでした。 これをすべて実装し始めたとき、方程式の深さを最初に見逃しました。

オフセット付きスクリーンオーバーレイ

変形可能なディザリングの方程式をコンパイルするとき、非常に単純な変換がそれらから落ちました：

DitherOffset = ScreenSize * CameraRotation / CameraFov
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

本質的に、これは私が望んでいたことを表しています。つまり、カメラが1つの表示領域を回転させたときに、画面上にディザリングパターンがちょうど1つの画面に重畳されるようにシフトします。 これにより、画面に1対1のオーバーレイが保存されますが、シーンの可視ジオメトリの単純化された変換も考慮されます。 実際、これは画面の中央の動きにのみ対応していますが、私の幸福には、かなり良く見えます。





注意：椅子のディザリングピクセルは、ほとんどの場合ジオメトリと共に移動するようです。 同じことがフィールドにも当てはまります。 視野に垂直な平面はあまりよく表示されません-床はまだ混looksとして見えます。



このアプローチは理想的ではありませんが、画面に適用されるディザリングの単純なシフトにより、シーンの全体的なパターンと動きが維持されるため、目で一緒に追跡する方が便利です。 私はこれにとても満足していました。 コードのクリーンアップとコミットを追求し、devlogで1つまたは2つの投稿をリリースしましたが、完全にスティッキーなディザリングの考えを取り除くことができませんでした。

ワールドスペース-キュービックオーバーレイ

以前の実験では、ディザリングパターンとシーンジオメトリ間の相関は、シーンから受信した深度情報を無視する必要があることが示されています。 実際には、これはカメラの回転中にディザリングをジオメトリにアタッチできるが、その動きにはアタッチできないことを意味します。 これは、ゲームのペースが遅いこととプレーヤーの観察的な役割を考えると、Obra Dinnにとってそれほど悪くはありません。 通常、ゲームでは、彼は船の上を歩き、停止し、オブジェクトを見ます。 画面上を歩くと、非常に多くの変更が発生するため、フローティングディザリングはあまり明確ではありません。



これを念頭に置いて、私の次の試みは、カメラを中心とした立方体の側面にパターンを事前にレンダリングすることにより、ジオメトリにディザリングパターンを間接的に課すことでした。 立方体はカメラとともに移動しますが、世界に対して相対的な方向を維持します。 それは、小さな画面、小さなシーンという混合物になります。









ディザリングパターンは、カメラの中心にある立方体に重ねられます。









カメラからの眺め、コーナーを見ています。 明瞭さのためのオーバーレイスケールが増加しました。



立方体のオーバーレイは、側面を見るとうまく機能しますが、カメラが斜めになっているとうまく機能しません。 カメラが回転しても、ディザリングパターンは3Dで完全に固定されます。 大まかなチェックでも、結果は有望に見えます。





ケースは最終的に移動しました。 これは後処理であるという事実により、このアプローチは空間でのテクセルのオーバーラップよりも一般的であり、これは良いことです。 問題は、特定のキュービックオーバーレイに要約されます。 完全なブレンドでは、カメラの回転に関係なく、キューブごとに1つのテクセルが常に画面上の1ピクセルに対応します。 キューブの場合、これは不可能です...

ワールドスペース-球面オーバーレイ

...しかし、球のおかげで、私は十分に近づきました。









球の内側にディザリングパターンをオーバーレイする



この特定の球面オーバーレイの検索には、ある程度の時間がかかりました。 球体を正方形のテクスチャで完全にタイリングする方法はありません。 六角形などのグリッドを介してディザリングマトリックスを再定義し、球体を適切に傾斜させることができます。 うまくいったかもしれませんが、私は試していません。 代わりに、球体のタイリングを「クラック」し、元のディザリングパターンの「リング」オーバーレイが良好な結果を生むように慎重に調整しました。





キューブよりも優れていますが、それでも多くの歪みがあります。 球状に重ねられたポイントのサイズは、画面ピクセルのサイズに非常に似ています-モアレを作成するのに十分なだけ異なります。 私は解決策に近づいていると感じ、そのような歪みをスーパーサンプリングで修正するのは非常に簡単です：より高い解像度でディザリングしきい値を適用し、それを低くします。









2倍の倍率で球面に重ねられたディザリングパターンと1倍に縮小された解像度





これはこれまでのところ私が受け取った最高の結果です。 いくつかのトレードオフがあります。

1. ディザリングパターンポイントはサイズが大きくなり、画面の端で効果が低下します。
2. ほとんどのカメラターンでは、パターンは「上下左右」の方向に整列しません。
3. 最終的な解像度の低下により、出力は1ビットではなくなりました

しかし、メリットは非常に大きいです。

1. ディザリングは、すべてのカメラターンに完全に適用されます。 ゲームでは、これは少し奇妙に感じます。
2. フルスクリーンモードでも、フローティングディザリングによる不快感は完全になくなりました。
3. ピクセル化されたゲームプレイスタイルを維持

欠陥50は、出力を再び50％の単純なしきい値で1ビット値に制限することにより、完全に排除できます。 結果は、スーパーサンプリングを行わない場合よりも優れています（比較のための3つの例を以下に示します）。

まとめると

気づかないことにも100時間を費やすのは少し奇妙に思えます。 誰も絶対に「それを気にしませんが、このディザリングは地獄のように安定している、それはある種の魔法です。」 しかし、私は人々に発生するはずの問題を持たせたくなかったので、それらを除去する価値がありました。



画面スペースのオフセットオーバーレイは、1倍のスケールで最適に機能し、球面オーバーレイは2倍で最適に機能します。 シーン全体が800x450の解像度（640x360から解像度を上げた）でレンダリングされるようになりました。これにより、低解像度のスタイルを犠牲にすることなく読みやすさが向上します。 完成したゲームには、2つの表示モードがあります。



DIGITAL-オフセット付きの画面スペースでのディザリング、1ビット出力。



ANALOGUE-球体に重ねられたフルスクリーンディザリング、スムーズな出力。