FiltersでGLSLを楽しく学んじゃおう！
2 likes1,824 views
旅する勉強会 tech.kayac meetup #0 http://connpass.com/event/12014/presentation/ で発表したスライドです。
![WebGL[1]（ウェブジーエル）は、ウェブブラウザで3次
元コンピュータグラフィックスを表示させるための標準
仕様。OpenGL 2.0もしくはOpenGL ES 2.0をサポート
するプラットフォーム上で、特別なブラウザのプラグイ
ンなしで、ハードウェアでアクセラレートされた三次元
グラフィックスを表示可能にする。
!
技術的には、JavaScriptとネイティブのOpenGL ES 2.0
のバインディングである。WebGLは非営利団体の
Khronos Groupで管理されている。WebGLはHTMLの
canvas要素を使う。
出典：Wikipedia](https://image.slidesharecdn.com/filterslearningglsl-150225232123-conversion-gate02/85/Filters-GLSL-18-320.jpg)
FiltersでGLSLを楽しく学んじゃおう！
- 2. 自己紹介
- 4. HTML5 Confrence 2015 WebGL セッション WebGL TOKYO MEETUP
- 6. 本題
- 7. Filtersって？
- 8. FILTERS
- 10. ではない
- 11. 自分でフィルターが 作れる
- 12. FILTERS
- 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（シェーダ）(☼Д☼)
- 23. ざっくり言うと
- 26. 変換パイプライン
- 27. 変換パイプライン
- 28. 行列？(￣□￣)
- 29. こういうやつです
- 30. (ﾟ ﾟ)!!
- 34. グラフィクスパイプライン
- 35. グラフィクスパイプライン
- 36. • WebGLでなにができる？( ́ `) • WebGLはなにをしているの？(Ծ﹏Ծ ) • 今日の本題、GLSL（シェーダ）(☼Д☼)
- 37. WebGLで一番大事な シェーダ
- 39. GLSL (OpenGL Shading Language) はGLslangとして も知られ、C言語をベースとした高レベルシェーディング 言語である。これはアセンブリ言語やハードウェアに依 存した言語を使わないで、開発者がグラフィックスパイ プラインを直接制御できるようにOpenGL ARBで策定さ れた。 出典：Wikipedia
- 44. DEMO
- 45. フィルターを 作ってみる
- 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
- 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. ちょっと解説
- 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学習アプリである（違
- 70. ご清聴ありがとうございました