GLSLのループについて

Question

GLSL初心者です。
フラグメントシェーダー というものが、描画領域を1pxずつ処理する、ということは
理解できるのですが、以下のコードで、白いグラデーションの玉が２つ描画される理由がよくわかりません。
結局gl_FragColorにセットされるのはひとつのvec4なのに、
なぜループすると２つの玉が描画されるのでしょうか....。

precision mediump float;
uniform vec2  r; // resolution

void main(void){
    vec2 p = (gl_FragCoord.xy * 2.0 - r) / min(r.x, r.y);
    vec3 destColor = vec3(0.0);
    for(float i = 0.0; i < 2.0; i++){
        float j = i + 1.0;
        vec2 q = p + vec2(cos(j), sin(j)) * 0.5;
        destColor += 0.01 / length(q);
    }
    gl_FragColor = vec4(destColor, 1.0);
}

わかりやすい説明をお願いしたいです。

Answer 1

ご自身で書いたコードの説明を他者に求めている状況が謎すぎますが……

---

２つの玉が描画される

の理由に関して，
コードの雰囲気を見て注釈を書いてみるならば…（↓のコードに★で始まる注釈を記した）

void main(void){
    vec2 p = (gl_FragCoord.xy * 2.0 - r) / min(r.x, r.y);
    vec3 destColor = vec3(0.0);
    for(float i = 0.0; i < 2.0; i++){  //★２回ループする
        float j = i + 1.0;  //★このjは２回のループの各回で異なる値になるのだから…
        vec2 q = p + vec2(cos(j), sin(j)) * 0.5;  //★このqは２回のループの各回で違う場所を示す
        destColor += 0.01 / length(q);  //★ここの右辺は，qが(0,0)に近い場合に急激に明るくなる
    }
    gl_FragColor = vec4(destColor, 1.0);
}

こういう感じ．

ある画素位置(A) について，ループで２回計算されるqのうちの一方が非常に(0,0)に近いとしよう．
すると，その画素の色は結果として非常に明るくなるだろう．
（このqだけで destColor の値は本当に大きな値になるだろうから，このときの他方のqの影響はどうでもいいレベルだ）
↓
さて，ここで，
【この「非常に(0,0)に近いq」の座標が色の決定に用いられるのは，この画素位置(A)だけであろうか？】
ということを考えてみよう．
↓
１つの画素位置について，qは２か所計算されるのだから，
例えば，画素位置(A)において明るい結果をもたらしたqというのが「１個目」の側だとしたら，
このqと全く同じ座標を「２個目」として得るような他の画素位置(B)が存在し得るであろう．
↓
だから，同程度にすっごい明るい画素が２か所現れることになる．
↓
その２か所とはどれだけ離れているのだろうか？　というのは，（めんどくせぇからいちいち説明しないけども）コードを見る感じ「相応に離れている」箇所となるだろう．

以上が，２つの玉が描画される理由であると推測される．

Comments

[chevy]

(自分で書いたソースコードですが、色々なサンプルをコピペしつつ試したものでした)

説明、すごくよく理解できました。
まず混乱していたのが、
ループ内の座標とgl_FragCoordの座標についてです。

・描画するピクセルは、(当然のことながら)gl_FragCoordが指定する座標のみ。
・ループ内の座標(vec2で計算しているもの)は、
0.01 / length(q);
この計算をするためのもので、描画するピクセル位置とは無関係。
つまり、 正規化されたpと加算(=q)することで「0,0との近さ」の幅を作るためのもの。

なぜループするほど白い玉の数が増えるか？
については、
・pは正規化されているので、常に、x=[-1から1]、y=-[-1から1]の値。

・jは常に1.0 または　2.0。なので、
vec2(cos(j), sin(j))
これは、常に[0.540....,0.841...] または[-0.416...,0.909...]。
これに0.5を常に乗算しているので、これらの半分の値、つまり
[0.270...,0.420...]、[-0.208...,0.454....]を、正規化された描画ピクセルの座標(p)に加算している。

GLSLだとデバッグができないので、JSで同じようなコードを作って検証してみました。
```
const r = 512
for(let i1 = 0;i1<=512;i1++){
for(let i2=0;i2<=512;i2++){
const coord = [i1,i2]
let col = 0
for(let z=0.0;z<2.0;z++){
const j = z+1

//正規化、px、pyは-1〜1に収まる
const px = (coord[0] * 2.0 - r) / r
const py = (coord[1] * 2.0 - r) / r

const qx = px+(Math.cos(j)*0.5)//0.5..か-0.4...くらい
const qy = py+(Math.sin(j)*0.5)//0.8..か0.4...くらい

//原点0,0との距離が0.01に近いほど、明るくなる。
const len = Math.sqrt( Math.pow( qx, 2 ) + Math.pow( qy, 2 ))

col += 0.01/len
}
if(col >= 1){
console.log('x=' + i1 +",y=" + i2 );

}
}
}
```
まっしろになる=colが1以上になる座標を出力してみると、
x=185〜189のときy=147〜149、
x=307〜311のときy=139〜141
これらの場合にcol>=1になることがわかりました。

これは、ラジアン が1ごとに57.295...度の角度になるため、
それに応じてqx、qyが定まり、ループ回数を1増やすたびに
ラジアン 1度分の座標が、0.01/lenの計算により1に近づく機会が増える....
ということだと理解しました。

説明がうまくないので伝わりにくいかもですが、
実際の値を見つつ考えたら、当然こうなるな、と理解できました。
ありがとうございました。

[chevy]

※上記ソースコード、解像度512x512で想定したものです。

[fana]

うん．この演算だと，正規化した世界の中で，
・0[rad]の方向に 0.5 だけ進んだ位置が (0,0) に非常に近くなるような場所
・1[rad]の方向に 0.5 だけ進んだ位置が (0,0) に非常に近くなるような場所
のどちらも白くなる，っていう話っすね．

言い換えれば，
・(0,0)から 0[rad] 方向に -0.5 だけ進んだ位置
・(0,0)から 1[rad] 方向に -0.5 だけ進んだ位置
の２か所が白くなる．

[chevy]

補足ありがとうございます。

あと、最初のシェーダー でいうと、
float j = i + 1.0;
これをたとえば
float j = 0.5 * (i+1.0);
のようにしてやれば、もっと小刻みに白い玉を配置できることがわかりました。
(ラジアン を細かくしてあげる=細かい角度ごとに配置できる)

また、
destColor += 0.01 / length(q);
この0.01を大きくするほど、白い玉は大きくなる
=分子が大きければそれだけ値は大きくなる、つまり1になる場合が多くなる
ということだとわかりました。

まだまだ自由に形を描画できるようになるには遠そうですが、
がんばって学習していこうと思います。

[fana]

そうね．iのループの回数を増やせばきっと玉も増えるだろうね．

Answer 2

フラグメントシェーダー というものが、描画領域を1pxずつ処理する、ということは理解できるのですが、

はい、そうですね。
ですから、mainの中で円を2つ描いている、と思ったら間違いです。

結局gl_FragColorにセットされるのはひとつのvec4なのに、

はい、そうですね。
ですので、そのピクセルが何色になるべきか、を考えればいいのです。

極端に言ってしまえば、円の内側であれば白、円の外側であれば黒、としてしまえば、それだけで円が描けるでしょう。
もっとも、それだときれいな円は描けませんから、円の中心が白、円の中心との距離が離れるに従って黒に近づければ、グラデーションになるでしょう。

そのような考え方を元に、もう一度見直してみてください。

Comments

[fana]

> 白いグラデーションの玉が２つ描画される理由

という問いに対する回答とは何になるのでしょうか？
「各ピクセルが何色になるのかを自分で見直せ」という話で，直接的には問いに答えない形ですか？

[katsuko]

単に質問の意図が「結局gl_FragColorにセットされるのはひとつのvec4なのに、なぜ(省略)玉が描画されるのでしょうか。」というところにあるかと勘違いして、そこに重点を置いて説明しただけです。
別に直接的には答えないなんて考えはありませんよ。