0

次のようなテクスチャから滑らかな (一貫した幅と連続した) 輪郭を生成したいと思います。

ここに画像の説明を入力

現在、非常に基本的なエッジ検出を行うシェーダーを実行しており、最終的に次の結果が得られます。

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

4

1 に答える 1