Help us understand the problem. What is going on with this article?

2次元ディスタンスフィールド使い方

More than 1 year has passed since last update.

はじめに

2次元ディスタンスフィールドまとめでは色々な距離関数(ディスタンスフィールド)について紹介しました。しかし、距離関数(ディスタンスフィールド)だけでは図形を描くことはできません。距離関数(ディスタンスフィールド)に距離を設定することではじめて図形を描くことができます。ここでは、距離関数(ディスタンスフィールド)に距離を設定して、塗り、線、グロウなど、様々な図形の描画方法を紹介します。

距離の設定と、線・塗り

距離を設定する(放射状グラデーション塗り)

まず、素のままの距離関数(ディスタンスフィールド)を可視化してみます。

rawdist.png

https://goo.gl/pnzkzZ

precision mediump float;
uniform vec2  m;       // mouse
uniform float t;       // time
uniform vec2  r;       // resolution
uniform sampler2D smp; // prev scene

void main(void){
    vec2 p = (gl_FragCoord.xy * 2.0 - r) / min(r.x, r.y);
    float distanceFunc;
    float bright;
    float radius=.5;
    distanceFunc = length(p);
    // direct output
    bright = distanceFunc;
    // gradation circle  
    //bright = radius - distanceFunc;
    // circle fill
    //bright = step(0.,radius - distanceFunc);
    // circle stroke
    //bright = 1.-step(.005,abs(radius - distanceFunc));
    // circle fill + glow
    //bright = radius / distanceFunc;
    gl_FragColor = vec4(vec3(bright), 1.0);
}

この時点ではまだ図形が確定していません。

これに距離.5を与えてあげると半径0.5のグラデーションの円が描けます。

gradcircle.png

bright = radius - distanceFunc;

べた塗り

グラデーションの塗りで0.以上を1.としてあげればベタ塗りが出来ます。

fillcircle.png

bright = step(0.,radius - distanceFunc);

linecircle.png

bright = step(abs(radius - distanceFunc),.005);

塗り+ glow

glowfill.png

bright = radius / distanceFunc;

glow

グロウ

glow.png

bright = 0.01 / abs(distanceFunc - radius);

グロウ(外側)

glowOuter.png

bright = 0.01 / (distanceFunc - radius);

グロウ(内側)

glowInner.png

bright = 0.01 / -(distanceFunc - radius);

アンチエイリアス

線や塗りで、stepのところをsmoothstepに変えて極小な範囲を設定するとアンチエイリアスを掛ける(ギザギザを無くす)ことができます。

antifill.png

bright = smoothstep(0.,.01,radius - distanceFunc);

antiline.png

    bright = 1.-smoothstep(.005,.015,abs(radius - distanceFunc));

グラデーション

smoothstepの範囲を大きくすると任意の長さのグラデーションとして利用できます。

gradfill.png

bright = smoothstep(0.,.5,radius - distanceFunc);

gradline.png

bright = 1.-smoothstep(.005,.5,abs(radius - distanceFunc));

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away