シェーダーアートの解説 for Pdの民

1. シェーダーアート
(呼び方は安定してない模様)
GPUのシェーダーを活用して描く絵
Shader Art / Shadertoy / Shader Effect / etc…
いずれも
表示ポリゴン数1
3D演算なし
しかし
GPU必死

2. Shaderis 何
頂点情報
Vertex Shader
頂点情報を
線や面に展開
面の1ピクセルごとに
色を塗ったり
絵を張り付ける
Fragment Shader
GPU
プログラム コード
GPUの中で、
頂点情報を受け取ってから
色をつけるまでの処理をする部分

3. 3DCGの「陰影」や「反射」等の光学的視覚効果は
そういう図形や画像を用意して貼っているわけではなく、
Fragment Shaderが光具合に応じた色の塗り方を計算している
上に近い部分ほど
白く塗るシェーダー
オリジナルのシェーダーを作って
模様を描ける！
Fragment Shaderの処理
フラットシェーダー
（ベタ塗り）

4. シェーダーアートの特徴
・Fragment Shaderは色を塗るためのものなので
図形を直接描きこむ機能は無い
・画面に広げた四角いポリゴンをキャンバスにして、
Fragment Shaderで色を塗る
・すべてのピクセル（フラグメント）の色が、
同じプログラムで決められる
点や線の概念に縛られない
滑らかな表現が可能

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)
例５

11. GEMでGLSLを使う
Pdで生成した数値をシェーダーに送りこめる！
sandboxから移植してきてコントロールするだけで楽しい！
uniform float siginput;
Shader
・・・
・・・・・・・・・・
Pd patch
サンプルhttp://goo.gl/XPKOaZ

12. Fragment Shaderのみプログラムする場合
Vertex ShaderとFragments Shaderがリンクしてはじめて画像ができる。(P.2参照)
Vertex Shaderもプログラムする場合
GEMでGLSLを使う(詳細)

13. http://glslsandbox.comGLSL sandbox
http://shadertoy.comShadertoy
http://pixelshaders.com/PIXELSHADERS
http://www.demoscene.jp/?p=1147DEMOSCENE.JPの解説
http://wgld.org/d/glsl/g001.htmlwgld| GLSLだけでレンダリング
https://www.khronos.org/files/opengles_shading_language.pdf
GLSL ESの仕様書
おすすめサイト
http://tkrkapps.blogspot.jp
おわり