Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
シェーダーアート 
(呼び方は安定してない模様) 
GPUのシェーダーを活用して描く絵 
Shader Art / Shadertoy / Shader Effect / etc… 
いずれも 
表示ポリゴン数1 
3D演算なし 
しかし 
G...
Shaderis 何 
頂点情報 
Vertex Shader 
頂点情報を 
線や面に展開 
面の1ピクセルごとに 
色を塗ったり 
絵を張り付ける 
Fragment Shader 
GPU 
プログラム コード 
GPUの中で、 
頂点情...
3DCGの「陰影」や「反射」等の光学的視覚効果は 
そういう図形や画像を用意して貼っているわけではなく、 
Fragment Shaderが光具合に応じた色の塗り方を計算している 
上に近い部分ほど 
白く塗るシェーダー 
オリジナルのシェーダ...
シェーダーアートの特徴 
・Fragment Shaderは色を塗るためのものなので 
図形を直接描きこむ機能は無い 
・画面に広げた四角いポリゴンをキャンバスにして、 
Fragment Shaderで色を塗る 
・すべてのピクセル(フラグメ...
GLSL (OpenGL Shading Language)の基礎の基礎 
#ifdef GL_ES 
precision mediump float; 
#endif 
uniform float time; 
uniform vec2 mo...
GLSL (OpenGL Shading Language)の基礎の基礎 
比例関数y=xの 
yを色に割り当ててみる 
今見ているピクセルのX座標(0~1) 
今見ているピクセルに塗る色 
濃い 
薄い 
R 
G 
B 
A 
(0,0) ...
GLSL (OpenGL Shading Language)の基礎の基礎 
反比例の式を横に0.5スライドさせた絶対値 
gl_FragColor = vec4(col, 0.0, 0.0, 1.0); 
float col = abs( 0....
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 
g...
GLSL (OpenGL Shading Language)の基礎の基礎 
時間の要素を加えると動くよ! 
gl_FragColor = vec4(0.0, col, 0.0, 1.0); 
float col= abs( 0.1 / (sin...
GLSL (OpenGL Shading Language)の基礎の基礎 
式のカッコを1つ付け忘れたら、何やら謎の模様に 
gl_FragColor = vec4(0.0, col, 0.0, 1.0); 
float col= abs( 0...
GEMでGLSLを使う 
Pdで生成した数値をシェーダーに送りこめる! 
sandboxから移植してきてコントロールするだけで楽しい! 
uniform float siginput; 
Shader 
・・・ 
・・・・・・・・・・ 
Pd ...
Fragment Shaderのみプログラムする場合 
Vertex ShaderとFragments Shaderがリンクしてはじめて画像ができる。(P.2参照) 
Vertex Shaderもプログラムする場合 
GEMでGLSLを使う(詳...
http://glslsandbox.comGLSL sandbox 
http://shadertoy.comShadertoy 
http://pixelshaders.com/PIXELSHADERS 
http://www.demosc...
Upcoming SlideShare
Loading in …5
×

GLSLによるシェーダーアートことはじめ

6,020 views

Published on

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

Published in: Technology
  • Be the first to comment

GLSLによるシェーダーアートことはじめ

  1. 1. シェーダーアート (呼び方は安定してない模様) GPUのシェーダーを活用して描く絵 Shader Art / Shadertoy / Shader Effect / etc… いずれも 表示ポリゴン数1 3D演算なし しかし GPU必死
  2. 2. Shaderis 何 頂点情報 Vertex Shader 頂点情報を 線や面に展開 面の1ピクセルごとに 色を塗ったり 絵を張り付ける Fragment Shader GPU プログラム コード GPUの中で、 頂点情報を受け取ってから 色をつけるまでの処理をする部分
  3. 3. 3DCGの「陰影」や「反射」等の光学的視覚効果は そういう図形や画像を用意して貼っているわけではなく、 Fragment Shaderが光具合に応じた色の塗り方を計算している 上に近い部分ほど 白く塗るシェーダー オリジナルのシェーダーを作って 模様を描ける! Fragment Shaderの処理 フラットシェーダー (ベタ塗り)
  4. 4. シェーダーアートの特徴 ・Fragment Shaderは色を塗るためのものなので 図形を直接描きこむ機能は無い ・画面に広げた四角いポリゴンをキャンバスにして、 Fragment Shaderで色を塗る ・すべてのピクセル(フラグメント)の色が、 同じプログラムで決められる 点や線の概念に縛られない 滑らかな表現が可能
  5. 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. 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; 例1
  7. 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) | 例2
  8. 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) 例3
  9. 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 ) ); 時刻(ミリ秒) 例4
  10. 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) 例5
  11. 11. GEMでGLSLを使う Pdで生成した数値をシェーダーに送りこめる! sandboxから移植してきてコントロールするだけで楽しい! uniform float siginput; Shader ・・・ ・・・・・・・・・・ Pd patch サンプルhttp://goo.gl/XPKOaZ
  12. 12. Fragment Shaderのみプログラムする場合 Vertex ShaderとFragments Shaderがリンクしてはじめて画像ができる。(P.2参照) Vertex Shaderもプログラムする場合 GEMでGLSLを使う(詳細)
  13. 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 おわり

×