次のようなテクスチャから滑らかな (一貫した幅と連続した) 輪郭を生成したいと思います。
現在、非常に基本的なエッジ検出を行うシェーダーを実行しており、最終的に次の結果が得られます。
void main(void) {
vec2 texCoord = vec2(((vProjectedCoords.x / vProjectedCoords.w) + 1.0 ) / 2.0,
((vProjectedCoords.y / vProjectedCoords.w) + 1.0 ) / 2.0 );
float borderWidth = uWidth; // in px
float step_u = borderWidth * 1.0 / uCanvasWidth;
float step_v = borderWidth * 1.0 / uCanvasHeight;
vec4 centerPixel = texture2D(uTextureFilled, texCoord);
vec4 rightPixel = texture2D(uTextureFilled, texCoord + vec2(step_u, 0.0));
vec4 bottomPixel = texture2D(uTextureFilled, texCoord + vec2(0.0, step_v));
// now manually compute the derivatives
float _dFdX = length(rightPixel - centerPixel) / step_u;
float _dFdY = length(bottomPixel - centerPixel) / step_v;
gl_FragColor.r = max(max(centerPixel.r, rightPixel.r), bottomPixel.r);
gl_FragColor.g = max(max(centerPixel.g, rightPixel.g), bottomPixel.g);
gl_FragColor.b = max(max(centerPixel.b, rightPixel.b), bottomPixel.b);
gl_FragColor.a = max(_dFdX, _dFdY);
return;
生成された等高線は明らかにきれいではありませんが、適切なソーベル フィルタリングを適用しても結果はそれほど向上しませんでした。
ほぼピクセルに完全な輪郭を取得したいのですが、可能であれば、入力テクスチャからのノイズも無視するのが理想的です。
ありがとう!
編集:おそらく次のようないくつかのスムーズな手順を追加する必要があります: https://www.shadertoy.com/view/4ssSRl