旅する勉強会 tech.kayac meetup #0 http://connpass.com/event/12014/presentation/ で発表したスライドです。

1. FiltersでGLSLを
楽しく学んじゃおう！
2015.02.25 旅する勉強会 比留間 和也

2. 自己紹介

3. 面白法人カヤック
技術部／比留間 和也

4. HTML5 Confrence 2015
WebGL セッション
WebGL TOKYO MEETUP

5. Lobiっていうアプリ
作ってます

6. 本題

7. Filtersって？

8. FILTERS

9. 普通のカメラの
フィルターアプリ

10. ではない

11. 自分でフィルターが
作れる

12. FILTERS

13. 画面にカメラの映像を出すだけのフィルター

14. 言語はGLSL

15. WebGLで使うアレ

16. WebGL？

17. • WebGLでなにができる？( ́ `)
• WebGLはなにをしているの？(Ծ﹏Ծ )
• 今日の本題、GLSL（シェーダ）(☼Д☼)

18. WebGL[1]（ウェブジーエル）は、ウェブブラウザで3次
元コンピュータグラフィックスを表示させるための標準
仕様。OpenGL 2.0もしくはOpenGL ES 2.0をサポート
するプラットフォーム上で、特別なブラウザのプラグイ
ンなしで、ハードウェアでアクセラレートされた三次元
グラフィックスを表示可能にする。
!
技術的には、JavaScriptとネイティブのOpenGL ES 2.0
のバインディングである。WebGLは非営利団体の
Khronos Groupで管理されている。WebGLはHTMLの
canvas要素を使う。
出典：Wikipedia

19. • ざっくり一言でいうと「ハードウェアでアクセラ
レートされた（GPUを使った）高速なレンダリン
グ能力を手に入れられる」ということ。
• 三次元グラフィックスと書かれているが、実際のポ
イントは「ハードウェアでアクセラレートされる」
という点。
• つまりこれは、二次元の表現であったとしてもその
恩恵を受けられる、ということ。

20. カメラの映像は
2Dで表現できる

21. • WebGLでなにができる？( ́ `)
• WebGLはなにをしているの？(Ծ﹏Ծ )
• 今日の本題、GLSL（シェーダ）(☼Д☼)

22. WebGL（OpenGL）には
パイプラインと呼ばれる
仕組みがあります。
パイプライン(・▽・)

23. ざっくり言うと

24. データ(入力)に対して
(パイプを通すように)一連の処理を施し、
最終的な結果(出力)にすること

25. パイプラインイメージ
入力 出力
処理

26. 変換パイプライン

27. 変換パイプライン

28. 行列？(￣□￣)

29. こういうやつです

30. (ﾟ ﾟ)!!

31. モデル座標変換
要は「世界のどこに置くか」の定義( ́ `)

32. ビュー座標変換
要は「どこから撮影しているのか」の定義( ́ `)

33. プロジェクション
座標変換
要は「どんなレンズか」の定義( ́ `)

34. グラフィクスパイプライン

35. グラフィクスパイプライン

36. • WebGLでなにができる？( ́ `)
• WebGLはなにをしているの？(Ծ﹏Ծ )
• 今日の本題、GLSL（シェーダ）(☼Д☼)

37. WebGLで一番大事な
シェーダ

38. OS
シェーダのイメージ
？(๑ ⌓ ๑)？
シェーダ
ブラウザ

39. GLSL (OpenGL Shading Language) はGLslangとして
も知られ、C言語をベースとした高レベルシェーディング
言語である。これはアセンブリ言語やハードウェアに依
存した言語を使わないで、開発者がグラフィックスパイ
プラインを直接制御できるようにOpenGL ARBで策定さ
れた。
出典：Wikipedia

40. つまり、シェーダはGPUを
操作する＝GPU上で動く

41. 本来は3Dオブジェクトの
表面の陰影（シェーディング）
をするための言語

42. 1枚のポリゴンの
表面を描く、と考える

43. これが1枚ポリゴンのシェーダコード

44. DEMO

45. フィルターを
作ってみる

46. 今回は代表的なフィルターである
「モザイク」を作ってみます

47. コード

48. void main()
{
vec2 uv = iScreen;
uv = floor(uv * iSize * 15.0) / 15.0 / iSize;
vec4 color = texture2D(iCamera, uv);
gl_FragColor = vec4(color.rgb, 1.0);
}

49. 短っΣ(￣□￣;

50. DEMO

51. これだけだとつまらないの
で、もう少し手を加えてみる

52. GLSLでお絵かき

53. 円を描いてみる

54. bool inCircle(vec2 position, vec2 offset, float size) {
float len = length(position - offset);
if (len < size) {
return true;
}
return false;
}
!
void main( void ) {
vec4 red = vec4(1.0, 0.0, 0.0, 1.0);
vec4 white = vec4(1.0, 1.0, 1.0, 1.0);
vec3 destColor = white;
vec2 position = (gl_FragCoord.xy * 2.0 - resolution) /
min(resolution.x, resolution.y);
!
// positionが円の中に入っているか？
if (inCircle (position, vec2(0.0, 0.0), 0.8)) {
destColor *= red;
}
!
gl_FragColor = vec4(destColor, 1.0);
}

55. DEMO

56. 組み合わせる

57. const vec3 white = vec3(1.0, 1.0, 1.0);
!
bool inCircle(vec2 position, vec2 offset, float size) {
float len = length(position - offset);
if (len < size) {
return true;
}
return false;
}
!
void main( void ) {
vec2 uv = iScreen;
uv = floor(uv * iSize * 15.0) / 15.0 / iSize;
vec4 color = texture2D(iCamera, uv);
!
vec3 destColor = white;
vec2 position = (gl_FragCoord.xy * 2.0 - iResolution) / min(iResolution.x,
iResolution.y);
!
if (inCircle(position, iPosition, 1.0 + (1.0 - iSize))) {
destColor = color.rgb;
}
else {
destColor = texture2D(iCamera, iScreen).rgb;
}
!
gl_FragColor = vec4(destColor, 1.0);
}

58. ちょっと解説

59. 大事なポイントは
Filtersで使える変数

60. • iScreen
• iResolution
• iTime
• iPosition
• iSize
• iCamera
(0, 0)から(1, 1)のUV座標
カメラの解像度
スタート時からの経過時間（秒）
スクロール位置（0∼1）
ピンチサイズ（デフォルトは1）
カメラの映像（テクスチャ）

61. • iScreen
• iResolution
• iTime
• iPosition
• iSize
• iCamera
(0, 0)から(1, 1)のUV座標
カメラの解像度
スタート時からの経過時間（秒）
スクロール位置（0∼1）
ピンチサイズ（デフォルトは1）
カメラの映像（テクスチャ）
ユーザー操作によって値が変わる

62. const vec3 white = vec3(1.0, 1.0, 1.0);
!
bool inCircle(vec2 position, vec2 offset, float size) {
float len = length(position - offset);
if (len < size) {
return true;
}
return false;
}
!
void main( void ) {
vec2 uv = iScreen;
uv = floor(uv * iSize * 15.0) / 15.0 / iSize;
vec4 color = texture2D(iCamera, uv);
!
vec3 destColor = white;
vec2 position = (gl_FragCoord.xy * 2.0 - iResolution) / min(iResolution.x,
iResolution.y);
!
if (inCircle(position, iPosition, 1.0 + (1.0 - iSize))) {
destColor = color.rgb;
}
else {
destColor = texture2D(iCamera, iScreen).rgb;
}
!
gl_FragColor = vec4(destColor, 1.0);
}
使っているのはここ

63. まとめ

64. • WebGLのめんどくさいセットアップをほぼやって
くれている
• GLSLだけを書いて、すぐに結果を確認できる
• ユーザー操作による動的要素を使ったインタラクショ
ンのあるものも作れる

65. Filtersは

66. 普通のカメラの
フィルターアプリ

67. ではない

68. GLSL学習アプリである（違

69. 気になった人はぜひ
ダウンロードしてみてね☆

70. ご清聴ありがとうございました