スムージング

3次元レンダリングの研究では、おそらくレンダリングされたモデルのエッジに沿ってピクセル化されたノッチの外観に出くわしました。 これらのマークは、OpenGLパイプラインの深さのどこかにあるラスタライザーによって頂点データをスクリーンフラグメントに変換する原理により、必然的に表示されます。 たとえば、立方体のような単純な図であっても、これらのアーティファクトはすでに顕著です。









ざっと見ただけでは何も気づかないかもしれませんが、よく見る価値があり、マークされたノッチがキューブの端に表示されます。 画像を拡大してみましょう：









いいえ、これはダメです。 アプリケーションのリリースバージョンでこのような画質を本当に見たいですか？





オブジェクトの端でのピクセルごとの画像構造の見かけの可視性の効果は、エイリアシングと呼ばれます。 コンピューターグラフィックス業界では、アンチエイリアシングまたはアンチエイリアシングテクニックと呼ばれる多くのテクニックをすでに蓄積しており、これらのテクニックはオブジェクトの境界でのスムーズなトランジションを可能にするこの効果に苦労しています。



そのため、たとえば、最初の1つはスーパーサンプリング（ スーパーサンプリングアンチエイリアシング 、 SSAA ）の手法でした 。 実装は2つのパスで実行されます。最初に、レンダリングは画面よりも明らかに高い解像度でオフスクリーンフレームバッファーに送られます。 その後、画像は画面フレームバッファに縮小して転送されました。 解像度の違いによるこのデータの冗長性はエイリアシング効果を低減するために使用され、メソッドは完全に機能しましたが、1つの「しかし」パフォーマンスがありました。 高解像度でのシーンの結論は、GPUを適切に使用し、このテクノロジーの栄光の時代は短命でした。



しかし、古い技術の灰から、より高度な新しいものが生まれました。 マルチサンプリングアンチエイリアシング （ MSAA ）です。 SSAAのアイデアに基づいていますが、より効果的な方法でそれらを実装します。 このレッスンでは、OpenGLでネイティブに利用可能なMSAAアプローチを詳しく見ていきます。

マルチサンプリング

マルチサンプリングの本質とその仕組みを理解するには、まずOpenGLの本質を深く掘り下げて、ラスタライザの機能を調べる必要があります。



ラスタライザは、最終的に処理された頂点データとフラグメントシェーダの間に位置する複雑なアルゴリズムと手順です。 ラスタライザは、入力にプリミティブに関連するすべての頂点を受け取り、このデータを一連のフラグメントに変換します。 理論的には、頂点座標は絶対に任意ですが、フラグメントの座標ではありません-出力デバイスの解像度とウィンドウサイズによって厳密に制限されます。 プリミティブの頂点の座標がフラグメント上で1つずつ重なることはほとんどありません：何らかの方法で、ラスタライザーは、各フラグメントがどのフラグメントでどの座標にあるかを何らかの方法で決定する必要があります。









この画像は、画面のピクセルを表すグリッドを示しています。 それらのそれぞれの中心には、特定のピクセルが三角形をカバーするかどうかを決定するために使用されるサンプリング/サンプリングポイントがあります。 三角形で覆われたサンプルポイントは赤でマークされます-それらの場合、ラスタライザーは対応するフラグメントを生成します。 三角形のエッジはいくつかのピクセルと重複していますが、サンプリングポイントとは重複していません。ここでは、このピクセルに対してフラグメントは作成されず、フラグメントシェーダーは実行されません。



あなたはすでにエイリアシングの理由を推測していると思います。 画面上のこの三角形のレンダリングは次のようになります。









画面上のピクセル数には限りがあるため、三角形のエッジに沿った一部は塗りつぶされ、一部は塗りつぶされません。 その結果、プリミティブは滑らかなエッジでまったくレンダリングされず、ノッチの形で現れます。



マルチサンプリングを使用する場合、三角形によるピクセルのオーバーラップを決定するために1つのポイントが使用されるのではなく、複数のポイントが使用されます（そのため名前が付けられます）。 ピクセルの中心にある1つのサンプリングポイントの代わりに、特定のパターンにある4つのサブサンプリングポイントを使用して、オーバーラップが決定されます。 その結果、カラーバッファーのサイズも4倍になります（使用するサンプルポイントの数に関して）。









左側は、オーバーラップを決定するための標準的なアプローチです。 フラグメントシェーダーは、選択したピクセルに対して実行されず、オーバーラップが登録されなかったため、ペイントされないままになります。 右側はマルチサンプリングの場合で、各ピクセルには4つのサブサンプルポイントが含まれています。 ここでは、三角形が2つのサブサンプルポイントのみに重なっていることがわかります。

サブサンプルポイントの数は、特定の制限内で変更できます。 より多くのドット-より良いスムージング品質。

この瞬間から、起こるすべてがより興味深いものになります。 2つのピクセルのサブサンプリングポイントが三角形で覆われていると判断したら、このピクセルの最終色を表示する必要があります。 最初の推測は、三角形でオーバーラップした各サブサンプリングポイントに対してフラグメントシェーダーを実行し、ピクセル内のサブサンプルポイント全体の色を平均することです。 この場合、頂点データをサブサンプルの各オーバーラップポイントの座標（この例では2回）に補間してフラグメントシェーダーを数回実行し、これらのポイントで結果の色を保存する必要があります。 幸いなことに、実際には、マルチサンプリングプロセスはそのようには機能しません。そうしないと、フラグメントシェーダーに対してかなりの数の追加呼び出しを行う必要があり、パフォーマンスに大きな影響を与えます。



実際、MSAAを使用する場合、プリミティブによって閉じられたサンプルポイントの数に関係なく、フラグメントシェーダーは1回だけ実行されます。 フラグメントシェーダーは、ピクセルの中心に補間された頂点データを使用して実行され、その実行中に取得された色は、プリミティブによって描画された各サンプルポイントに格納されます。 フレームバッファサブサンプルのすべてのポイントが、描画したプリミティブの色で塗りつぶされると、ピクセルごとの単一値への色のピクセルごとの平均化が行われます。 この例では、2つのサブサンプルポイントのみがオーバーラップし、したがって、三角形の色で塗りつぶされています。 残りの2つは透明な背景色で塗りつぶされました。 これらのサブサンプルの色を混合すると、明るい青色が得られます。



結果としてのフレームバッファには、より滑らかなエッジを持つプリミティブの画像が含まれています。 すでに馴染みのある三角形のサブサンプルのカバレッジの定義がどのようになるかを確認してください。









各ピクセルには4つのサブサンプルポイントが含まれていることがわかります（この例では重要ではないピクセルは空白のままです）。三角形のサブサンプルポイントで覆われた青と、覆われていない灰色。 すべてのピクセルの三角形の周囲で、フラグメントシェーダーが1回呼び出され、その結果が4つのサブサンプルすべてに保存されます。 面では、すべてのサブサンプルがカバーされるわけではないため、フラグメントシェーダーの結果はその一部にのみ保存されます。 三角形で覆われているサブサンプルポイントの数に応じて、ピクセルの最終的な色は、三角形自体の色とサブサンプルポイントに保存されている他の色に基づいて決定されます。



簡単に言えば、三角形で覆われたサブサンプルが多いほど、ピクセルの色は三角形の色と一致します。 マルチサンプリングを使用せずに三角形の例と同じ方法でピクセルの色を塗りつぶすと、次の図が表示されます。









ご覧のとおり、三角形に属するピクセルサブサンプルが少ないほど、その色は三角形の色に対応しなくなります。 三角形の鋭い境界は、わずかに明るい影のピクセルで囲まれているため、遠くから見ると滑らかになります。

ただし、色値だけがマルチサンプリングアルゴリズムの動作の対象ではありません。深度バッファとステンシルバッファは、ピクセルに複数のサブサンプルを使用し始めます。 深度テストを実行する前に、サブサンプルポイントごとに頂点深度値が補間されます。 ステンシル値はピクセル全体ではなく、サブサンプルポイントごとに保存されます。 私たちにとって、これは、使用されるサブサンプルの数に応じて、これらのバッファが占有するメモリが増加することも意味します。



ここでは、マルチサンプリングの仕組みの基本について説明しました。 ラスタライザの真の内部ロジックは、ここで説明するレビューよりも複雑になります。 ただし、マルチサンプリングの原理と動作を一般的に理解するためには、これで十分です。

OpenGLでのマルチサンプリング

OpenGLでマルチサンプリングを使用するには、ピクセルごとに複数のカラー値を保存できるカラーバッファーを使用する必要があります（MSAAはサブサンプルポイントにカラー値を保存することを意味します）。 したがって、指定された数のサブサンプルを保存できる特別なタイプのバッファー、つまりマルチサンプルバッファーが必要です。



ほとんどのウィンドウシステムでは、標準のカラーバッファーの代わりにマルチサンプルバッファーを使用できます。 GLFWにもこの機能があります。必要なのは、標準の代わりにN個のサブサンプルポイントを持つバッファーを使用することを希望することを示す特別なフラグを設定することだけです。

glfwWindowHint(GLFW_SAMPLES, 4);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでglfwCreateWindowを呼び出すと、画面座標ごとに4つのサブサンプルを格納するカラーバッファーを備えた出力ウィンドウが作成されます。 GLFWは、ピクセルごとに同じ4つのサブサンプルポイントを使用して、深度バッファーとステンシルバッファーを自動的に作成します。 また、上記の各バッファーのサイズは4倍になります。



GLWLによってマルチサンプルバッファーを作成した後、OpenGLで既にマルチサンプリングモードを有効にするために残ります。

 glEnable(GL_MULTISAMPLE);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ほとんどのOpenGLドライバーでは、デフォルトでマルチサンプリングがアクティブになっているため、この呼び出しは冗長になりますが、必要な機能を明示的に含めることは良いトーンであり、これによりデフォルトの実装に関係なくモードが有効になります。



実際、マルチサンプルバッファーを注文してモードをオンにすると、すべての作業が完了します。残りはすべてOpenGLラスタライザーのメカニズムに当てはまり、参加しなくても発生するからです。 レッスンの最初からおなじみの緑の立方体を引き出そうとすると、その面がより滑らかになっていることがわかります。









実際、この立方体の端ははるかに魅力的に見えます。 また、同じ効果がシーン内のオブジェクトに影響します。



例のソースコードはこちらです。

オフスクリーンマルチサンプリング

GLFWのおかげで、MSAAを有効にして基本的なフレームバッファーを作成するのは簡単な作業です。 たとえば、オフスクリーンレンダリング用に独自のバッファを作成する場合は、このプロセスを自分の手で行う必要があります。



フレームバッファにさらにアタッチするためのマルチサンプリングでバッファを作成するには、対応するレッスンから既に解析されたものと同様に、テクスチャアタッチメントとレンダータイプアタッチメントの2つの主な方法があります。

マルチサンプリングテクスチャアタッチメント

複数のサブサンプルをサポートするテクスチャを作成するには、通常のglTexImage2Dの代わりに、テクスチャターゲットタイプGL_TEXTURE_2D_MULTISAPLEと関数glTexImage2DMultisampleを使用します。

 glBindTexture(GL_TEXTURE_2D_MULTISAMPLE, tex); glTexImage2DMultisample(GL_TEXTURE_2D_MULTISAMPLE, samples, GL_RGB, width, height, GL_TRUE); glBindTexture(GL_TEXTURE_2D_MULTISAMPLE, 0);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2番目の引数は、作成されるテクスチャ内のサブサンプルの数を示します。 最後の引数がGL_TRUEに設定されている場合、テクスチャは各テクセルに対して同じ数とサブサンプルポイントの位置を使用します。



このようなテクスチャをフレームバッファオブジェクトにアタッチするには、同じglFramebufferTexture2D呼び出しが使用されますが、今回は指定されたテクスチャタイプGL_TEXTURE_2D_MULTISAMPLEを使用します。

 glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D_MULTISAMPLE, tex, 0);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その結果、現在のフレームバッファーには、マルチサンプリングをサポートするテクスチャベースのカラーバッファーが提供されます。

マルチサンプリングレンダラー

複数のサブサンプルポイントでレンダーバッファーを作成することは、そのようなテクスチャを作成することと同じくらい難しくありません。 さらに、さらに簡単です。現在バインドされているレンダーオブジェクトのメモリを準備するときに、 glRenderbufferStorageの呼び出しをglRenderbufferStorageMultisampleに変更するだけです。

 glRenderbufferStorageMultisample(GL_RENDERBUFFER, 4, GL_DEPTH24_STENCIL8, width, height);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでの新しいものから、サンプルポイントの数を示す、レンダーバッファーのレンダーターゲットのタイプの後に来る追加パラメーターが1つだけあります。 ここでは、このような4つのポイントを示しました。

マルチサンプリングでフレームバッファーにレンダリングする

マルチサンプルフレームバッファーへのレンダリングは自動的に行われ、必要なアクションは必要ありません。 アタッチされたフレームバッファーにレンダリングするたびに、ラスタライザー自体が必要な操作を実行します。 そして、出力に多くのサブサンプルポイントを持つカラーバッファー（深さ、ステンシル）を取得します。 多くのサブサンプリングポイントを持つフレームバッファーは通常のものと多少異なるため、シェーダーでのテクスチャサンプリングなどのさまざまな操作に個別のバッファーを直接使用することはできません。



マルチサンプリングをサポートする画像には通常よりも多くの情報が含まれているため、この画像を解決するか、つまり解像度をより小さなものに変換する必要があります 。 この操作は、通常どおりglBlitFramebufferを呼び出すことで実行されます。これにより、多くのサンプルポイントを持つ現在のバッファーに関連付けられた解像度で、1つのフレームバッファーの領域を別のフレームバッファーにコピーできます。

この関数は、画面空間の4つの座標で指定されたソース領域を、4つの画面座標で指定されたレシーバー領域に転送します。 フレームバッファのレッスンを思い出させてください。フレームバッファオブジェクトをGL_FRAMEBUFFERターゲットにバインドすると、フレームバッファからの読み取りのターゲットとフレームバッファへの書き込みのターゲットの両方にバインドが暗黙的に実行されます。 これらの目標に個別にバインドするには、特別なターゲットID GL_READ_FRAMEBUFFERとGL_DRAW_FRAMEBUFFERをそれぞれ使用します。



操作中、 glBlitFramebuffer関数はこれらのアンカーポイントを使用して、どのフレームバッファーが画像のソースで、どのフレームバッファーがレシーバーであるかを判断します。 その結果、ブリットを使用して、マルチサンプルフレームバッファーから標準に画像を簡単に転送できます。

 glBindFramebuffer(GL_READ_FRAMEBUFFER, multisampledFBO); glBindFramebuffer(GL_DRAW_FRAMEBUFFER, 0); glBlitFramebuffer(0, 0, width, height, 0, 0, width, height, GL_COLOR_BUFFER_BIT, GL_NEAREST);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アプリケーションをアセンブルして実行すると、フレームバッファを使用していない前の例と同じ画像が得られます。MSAAを使用して描かれたアシッドグリーンキューブは、その顔を見ることで見ることができます。









サンプルのソースはこちらです。



しかし、多くのサブサンプルポイントを持つフレームバッファーの画像を後処理のデータソースとして使用する場合はどうすればよいでしょうか？ シェーダーでマルチサンプルテクスチャを直接使用することはできません。 ただし、マルチサンプルではなく、通常のバッファーを使用して、ブリットを使用してマルチサンプルフレームバッファーから画像を転送することができます。 そして、通常の画像を後処理のリソースとして使用し、基本的にMSAAのすべての利点を得て、その上に後処理を追加できます。 はい、このプロセス全体で、MSAAテクスチャをシェーダーで使用できる通常のテクスチャに解決するための補助オブジェクトとしてのみ機能する、別個のフレームバッファーを作成する必要があります。 擬似コードの形式では、プロセスは次のようになります。

 unsigned int msFBO = CreateFBOWithMultiSampledAttachments(); //     FBO        ... glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, screenTexture, 0); ... while(!glfwWindowShouldClose(window)) { ... glBindFramebuffer(msFBO); ClearFrameBuffer(); DrawScene(); //       glBindFramebuffer(GL_READ_FRAMEBUFFER, msFBO); glBindFramebuffer(GL_DRAW_FRAMEBUFFER, intermediateFBO); glBlitFramebuffer(0, 0, width, height, 0, 0, width, height, GL_COLOR_BUFFER_BIT, GL_NEAREST); //       ,     glBindFramebuffer(GL_FRAMEBUFFER, 0); ClearFramebuffer(); glBindTexture(GL_TEXTURE_2D, screenTexture); DrawPostProcessingQuad(); ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このコードをフレームバッファーのレッスンのポスト処理の例に追加すると、エッジがギザギザにならずに、これらすべての効果をシーンイメージに適用できます。 たとえば、ぼかし効果を使用すると、次のようになります。

1つのサブサンプルポイントを持つ標準テクスチャが後処理に使用されるため、一部の処理方法（たとえば、境界線の検索）は、シーンに再び目立つ鋭いエッジとノッチをもたらす可能性があります。 このアーティファクトを回避するには、結果をぼかすか、スムージングアルゴリズムを実装する必要があります。

ご覧のとおり、MSAAとオフスクリーンレンダリング技術の組み合わせについては、いくつかの詳細を考慮する必要があります。 しかし、余分な労力はすべて、結果として得られる画像の品質が大幅に向上します。 ただし、マルチサンプリングを有効にすると、特に多数のサブサンプルポイントが設定されている場合に、最終的なパフォーマンスに大きな影響を与えることに注意してください。

ネイティブスムージング方法

実際、マルチサンプルをシェーダーに直接転送して、通常の補助的なものにブリットすることはできません。 この場合、GLSL機能はテクスチャ内の個々のサブサンプリングポイントへのアクセスを提供し、独自のスムージングアルゴリズムを作成するために使用できます（大規模なグラフィックアプリケーションの場合が多い）。



まず、通常のsampler2Dではなく、 sampler2DMSのような特別なサンプラーを作成する必要があります。

 uniform sampler2DMS screenTextureMS;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、サブサンプルポイントで色の値を取得するには、次の関数を使用します。

 vec4 colorSample = texelFetch(screenTextureMS, TexCoords, 3); //   4  
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで、追加の引数-アクセスされているサブサンプルポイントの数（ゼロからカウント）を確認できます。



ここでは、特別な平滑化アルゴリズムの作成の詳細については検討しません。これは、このトピックに関する独自の研究の出発点に過ぎません。



PS ：転送を調整するための電報confがあります。 翻訳を手伝いたいという真剣な願望があれば、大歓迎です！