0

私の答えを紹介します。

これはwebglでレンダリングされた三角形です。うーん、ちょっと拡大… ここに画像の説明を入力

そして、これは私が持ちたい三角形です:ここに画像の説明を入力

そこで、プリミティブ三角形のエッジをブレンドできるシェーダーを探しています。私はそれを実現する方法を考えていますが、おそらくまだそれを書くのに十分ではありません.

私の考えは次のようなものです:3つの頂点の位置に基づいて、各フラグメントについて計算し、プリミティブがピクセルをどれだけカバーし、計算された情報に基づいてこのピクセルの透明度を設定します...

頂点シェーダーから 2D 座標を取得し、フラグメント シェーダーで使用できます。gl_FragCoord.xy今、私はおそらく%ピクセルカバーを使用または計算したいのですgl_PointCoord.xyが、これらの値を比較することはできません(単位が異なるようです。マイルをミリメートルで計算し、「ポイントゼロ」はこれらのベクトルの別の場所にあります)。最終的な透明度の値を計算できません。

誰でも私を助けてもらえますか?ちょうど私を正しい方向に向けてください。

4

2 に答える 2

1

これを達成する方法はたくさんあります

より高い解像度でレンダリングできます。キャンバスを表示されるサイズよりも大きくすると、ブラウザはほぼ確実に結果を双一次補間します。例:

<canvas width="400" height="400" style="width: 200px; height 200px" />

表示時に 200x200 にスケーリングされる 400x400 バックストアを持つキャンバスを宣言します。

ここにフィドルがあります。

もう 1 つの手法は、ポリゴンのエッジに沿って必要なブレンディングが得られるように、シェーダーでアルファ値を計算することです。

他にもいると思います。ほとんどの Canvas2D 実装は、GPU がアンチエイリアシングをサポートしていない場合でも GPU アクセラレーションとアンチエイリアシングが行われるため、それらの 1 つを調べてみることができます

于 2013-10-03T02:34:19.337 に答える
0

あなたの計画の問題は、OpenGL が独自のテストを適用して最初に描画するピクセルを決定することです。フラグメントの中心がジオメトリ境界の内側にある場合はラスター化され、外側にある場合はそうではありません。境界とラスター化は、水平方向または垂直方向のランの開始点または終了点にあるかによって異なります。境界条件により、2 つの三角形が正確に交わる場所では、両方に同じフラグメントが含まれることはありません。

したがって、フラグメントごとのカバレッジを計算すると、50% 未満の数値が得られることはほとんどありません (コーナーやその他の非常に薄いジオメトリは例外です)。あなたが望む完全なアンチエイリアシングを得ることはできません。エイリアスされたバージョンによってクリップされたアンチエイリアスされたバージョンが得られます。

ハードウェアは、出力ピクセルごとに複数のフラグメントをサンプリングすることでこれを実現します。出力サイズの倍数でテクスチャにレンダリングしてから縮小することで、それをシミュレートできます。ミップ マップの生成により、入力画像がフィルター処理されます。

そうは言っても、呼び出したときのantialiasように渡すだけでしたか?これは、ハードウェアとブラウザーのサポートに応じて、ハードウェア機能を使用します。truecanvas.GetContext

于 2013-10-02T15:35:36.027 に答える