Contenu connexe
Similaire à GLSLによるシェーダーアートことはじめ (6)
GLSLによるシェーダーアートことはじめ
- 2. Shaderis 何
頂点情報
Vertex Shader
頂点情報を
線や面に展開
面の1ピクセルごとに
色を塗ったり
絵を張り付ける
Fragment Shader
GPU
プログラム コード
GPUの中で、
頂点情報を受け取ってから
色をつけるまでの処理をする部分
- 5. GLSL (OpenGL Shading Language)の基礎の基礎
#ifdef GL_ES
precision mediump float;
#endif
uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;
void main( void ) {
vec2 pos = ( gl_FragCoord.xy / resolution.xy );
float col = pos.x;
gl_FragColor = vec4(col, 0.0, 0.0, 1.0 );
}
GLSL sandboxで作ってみる
http://glslsandbox.com/e#21788.0
シェーダの外部から
与えられる変数
時刻(ミリ秒)
ポインタの位置(x, y)0.0～1.0
ウィンドウサイズ(x,y)
おまじない
pos.x, pos.y に、今見ているピクセルの座標を0.0～1.0の範囲に変換して格納する
ココをいじってみる
全てのピクセルが、同じプログラムで計算された色で塗られる
- 6. GLSL (OpenGL Shading Language)の基礎の基礎
比例関数y=xの
yを色に割り当ててみる
今見ているピクセルのX座標(0～1)
今見ているピクセルに塗る色
濃い
薄い
R
G
B
A
(0,0)
(1,0)
(0,1)
(1,1)
gl_FragColor = vec4(col, 0.0, 0.0, 1.0);
float col = pos.x;
例１
- 7. GLSL (OpenGL Shading Language)の基礎の基礎
反比例の式を横に0.5スライドさせた絶対値
gl_FragColor = vec4(col, 0.0, 0.0, 1.0);
float col = abs( 0.1 / (pos.x-0.5));
濃い
薄い
(0,0)
(1,0)
(0,1)
(1,1)
0.5
ここの数値を変えると…？
y = | 0.1 / (x-0.5) |
例２
- 8. GLSL (OpenGL Shading Language)の基礎の基礎
この式に近いほど色を濃くする
y = 0.5sin(2πx)+0.5
(0,0)
(1,0)
(0,1)
(1,1)
0.5
1.0
0
1.0
gl_FragColor = vec4(0.0, col, 0.0, 1.0);
float col= abs( 0.1 / (sin(2.0 * 3.14 * pos.x) * 0.5 + 0.5 -pos.y ) );
今見ているピクセルのY座標(0～1)
例３
- 9. GLSL (OpenGL Shading Language)の基礎の基礎
時間の要素を加えると動くよ！
gl_FragColor = vec4(0.0, col, 0.0, 1.0);
float col= abs( 0.1 / (sin(2.0 * 3.14* pos.x + time ) * 0.5 + 0.5 -pos.y ) );
時刻(ミリ秒)
例４
- 10. GLSL (OpenGL Shading Language)の基礎の基礎
式のカッコを1つ付け忘れたら、何やら謎の模様に
gl_FragColor = vec4(0.0, col, 0.0, 1.0);
float col= abs( 0.1 / sin(2.0 * 3.14 * pos.x + time) * 0.5 + 0.5-pos.y );
(0,0)
(1,0)
(0,1)
(1,1)
例５
