GLSLによるシェーダーアートことはじめ
- 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 おわり