グローシェーダーを微調整して見栄えを良くする


9

私は単純なゲームをしていて、その主題はこれらの小さな線です。iOSとAndroidをターゲットにしているため、現時点で実行できるプロセッサの範囲は非常に広いです。

ここに画像の説明を入力してください

2つの理由でリアルタイムのグローを追加しようとしています

  1. ほとんどのデバイスでアンチエイリアスを処理するためのレンダリング時間がないという事実を隠そうとしています。
  2. ゲームの主題は純粋な光であることになっています。つまり、それらのものが純粋な光のように見えるはずです。

私はかなり長い間、分離可能なガウスぼかしシェーダーを微調整してきました、そして私は欲求不満の点に達しました、私はそれを正しく見せることができません、おそらく問題は光のギザギザのエッジを無駄に隠そうとしていることですその間、光をぼやけさせないようにします。

私の最大の問題は、それを最高に見えるようにするために必要なすべての変数です。

私はグラフィックス/レンダリングに非常に慣れており、決してアーティストではありません。恐らく、私にとってのレンディングで最もイライラするのは、関係しているように見えるすべての変数です。輝きをもって私は多くの可能な変化を見てきました。

  • A.ブレンドモード、スクリーンブレンドモード、またはその他の調合を追加する
  • B.ぼかし、通常の組み合わせ前の重み付け
  • C.ガウスベル関数のシグマ(私はこの 紛らわしい計算機を使用しいますが、他の人が持っているのと同じ値を与えていないようです)
  • D. sigma関数に送信される "x"値のスカラー
  • E.サンプルスケール(ぼかし半径を小さくまたは大きくする)
  • F.グローバッファーの解像度を変更する

このように多くの変数を扱うときに、どのようにして「最適な」定数を見つけるのでしょうか。

微調整を行ってから変更が表示されるまでの時間が長いため、問題も発生しています。シェーダートイで実行しますが、この画像をロードしたり、そのようなものを手続き的に生成したりすることはできません。

現在、ガウシアンベルカーブカーネルのシグマに悩まされています。特に、プロセッサーの速度が必要なため、数式ではなく数値でコーディングしているためです。使用する良いシグマを提案できますか?

回答:


8

ガウスフィルターのシグマとカーネルサイズ

ガウスのシグマとカーネルサイズ(ピクセル)を選択する方法については、ブラーの幅に基づいてシグマを設定し(視覚的に判断して)、シグマに基づいてカーネルサイズを選択します。これは、(数学的には無限の)ベル曲線を十分に捉えて見栄えがよく、しかも高すぎないカーネルサイズを見つけるゲームです。

経験則として、カーネルサイズはシグマの少なくとも6倍にする必要があります。次に、カーネルは各方向に3シグマまで拡張されます。これは、数学的なベル曲線のほとんどすべての重みカバーするのに十分です。フィルターが対称になるように、ピクセルサイズを次の奇数に切り上げるのも良い方法です。たとえば、sigma = 1.5 pxの場合、9ピクセルのフィルターを使用します。sigma = 2.0 px、13ピクセルフィルターなどを使用

または、使用できるカーネルサイズの大きさを制御するパフォーマンスの制限がある場合は、6で除算して、最大のシグマを得ることができます。(シグマはベルカーブ方程式への単なる入力であるため、分数になる可能性があることに注意してください。)

ちなみに、大きなガウスぼかしでパフォーマンスを向上させるコツは、画像をダウンサンプリングし、小さいぼかしを実行してから、アップサンプリングすることです。たとえば、効果的な13ピクセルのぼかしを取得するには、画像を2倍にダウンサンプリング(バイリニアフィルタリングを使用)してから、7ピクセルのぼかしを実行してから、アップサンプリング(バイリニアフィルタリングを使用)します。13ピクセルのぼかしとほぼ同じように見えますが、かなり高速になります。

見栄えの良いグローフィルターを作成する

これらの共通のトリックは、異なる半径の複数のガウスを一緒に使用することです。それだけでは、単一のガウシアンよりも優れたグロー効果が得られます。たとえば、Photoshopのモックアップは、3つのレイヤーが加法的にブレンドされて作成されています。3つのガウシアンのサイズは3px、5px、11pxです(それぞれ、sigma = 0.5px、0.83px、1.83pxに対応します)。

モックアップブルームフィルター

さらに大きなガウス分布を追加して、グローの見かけの半径をさらに大きくすることもできます。これは、標準の「ブルーム」エフェクトが3Dゲームエンジンに実装される方法です。

パフォーマンスが問題になる場合は、最小のガウス分布をぼかしていない元の画像のコピーで置き換えることができます。結果として得られる効果は、シャープではなく、それほど柔らかくはありませんが、周囲を光らせます。前述のように、より大きなガウス分布は、ダウンサンプリング、ぼかし、アップサンプリングによって実行できます。そして、アップサンプリングは、レイヤーをブレンドするパスに折りたたまれたハードウェアバイリニアフィルタリングを使用して実行できます。

ジャギー

上の画像の一部の領域ではまだジャギーが見えています。残念ながら、ぼかしの半径が非常に大きくない限り、ぼかしはジャギーを隠すのにあまり効果的ではありません。後処理を使用してジャギーを取り除く簡単な方法はありません。これらを回避する最善の方法は、最初にジャギーをレンダリングしないことです。:)

パフォーマンス上の理由からMSAAを使用できないと聞きましたが、別のオプションかもしれません。グロートレイルのレンダリング方法によっては、サイズをわずかに大きくして、グラデーションを適用してエッジの数ピクセル以内の色をフェードアウトするシェーダーを作成できる場合があります。それは彼らがより滑らかに見えるのを助けるはずです。これは、手続き型シェイプのアンチエイリアスに使用される1px幅のエッジフォールオフを示すシェーダートイです。


@Nathan_Reed MSAAを実行する代わりに、奇妙なことに2倍のヒットをほとんど出さずにトリックを実行した以外は、ほとんどのヒントを適用しました。現在のエフェクトにハイライトを追加することについて質問がある場合は、質問を編集するか、新しい質問を作成する必要がありますか?
J.Doe

@ J.Doe素晴らしい、うまくいくと聞いてうれしい!特定の見た目がある場合は、効果の微調整について新しい質問をする方がいいと思います。
ネイサンリード
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.