GLSLでフラグメントシェーダーを書く場合のメモ2
GLSLを使っての簡単な描画表現に挑戦してみます。
中央から縦にグラデーションする。
void main( void ) { //原点を中央にする vec2 p = (gl_FragCoord.xy*2.0 - resolution) / min(resolution.x,resolution.y); //外に行くほど(cの値大きくなるほど)値が小さくなるようにする float c = 0.01/abs(p.y); gl_FragColor = vec4(vec3(c),1.0); }
考慮点とすればマイナス座標をabsで絶対値に変換することです。
サイン波をつくる
sin関数が-1~1の値を返すのでコレを利用してサイン波を作ってみる。
void main( void ) { vec2 p = (gl_FragCoord.xy*2.0 - resolution) / min(resolution.x,resolution.y); //5.0を掛けることで波の数を調整している。 float c = 0.01/abs(p.y + sin(p.x * 5.0) ); gl_FragColor = vec4(vec3(c),1.0); }
ハーフトーンぽい表現をしてみる
gl_FragCoordを利用するとハーフトーンぽい表現ができました。
void main( void ) { vec2 p = (gl_FragCoord.xy*2.0 - resolution) / min(resolution.x,resolution.y); float c = pow(0.5/length(p),5.0) * (sin(gl_FragCoord.x ) + cos(gl_FragCoord.y)) ; gl_FragColor = vec4(vec3(c) ,1.0); }
同心円状の模様を描く
sinを使うことで、同心円状の模様を簡単に書くことができます。
void main( void ) { vec2 p = (gl_FragCoord.xy * 2.0 - resolution)/min(resolution.x,resolution.y); //100.0の値をかけることで円が描画される回数(-1~1の繰り返す回数)を調整します float c = sin(length(p) * 100.0); gl_FragColor = vec4(vec3(c),1.0); }
timeをつかって動かしてみたのはこちら。