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.
Upcoming SlideShare
簡単!OpenGL ES 2.0フラグメントシェーダー
Next
Download to read offline and view in fullscreen.

2

Share

Download to read offline

FiltersでGLSLを楽しく学んじゃおう!

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

FiltersでGLSLを楽しく学んじゃおう!

  1. 1. FiltersでGLSLを 楽しく学んじゃおう! 2015.02.25 旅する勉強会 比留間 和也
  2. 2. 自己紹介
  3. 3. 面白法人カヤック 技術部/比留間 和也
  4. 4. HTML5 Confrence 2015 WebGL セッション WebGL TOKYO MEETUP
  5. 5. Lobiっていうアプリ 作ってます
  6. 6. 本題
  7. 7. Filtersって?
  8. 8. FILTERS
  9. 9. 普通のカメラの フィルターアプリ
  10. 10. ではない
  11. 11. 自分でフィルターが 作れる
  12. 12. FILTERS
  13. 13. 画面にカメラの映像を出すだけのフィルター
  14. 14. 言語はGLSL
  15. 15. WebGLで使うアレ
  16. 16. WebGL?
  17. 17. • WebGLでなにができる?( ́ `) • WebGLはなにをしているの?(Ծ﹏Ծ ) • 今日の本題、GLSL(シェーダ)(☼Д☼)
  18. 18. WebGL[1](ウェブジーエル)は、ウェブブラウザで3次 元コンピュータグラフィックスを表示させるための標準 仕様。OpenGL 2.0もしくはOpenGL ES 2.0をサポート するプラットフォーム上で、特別なブラウザのプラグイ ンなしで、ハードウェアでアクセラレートされた三次元 グラフィックスを表示可能にする。 ! 技術的には、JavaScriptとネイティブのOpenGL ES 2.0 のバインディングである。WebGLは非営利団体の Khronos Groupで管理されている。WebGLはHTMLの canvas要素を使う。 出典:Wikipedia
  19. 19. • ざっくり一言でいうと「ハードウェアでアクセラ レートされた(GPUを使った)高速なレンダリン グ能力を手に入れられる」ということ。 • 三次元グラフィックスと書かれているが、実際のポ イントは「ハードウェアでアクセラレートされる」 という点。 • つまりこれは、二次元の表現であったとしてもその 恩恵を受けられる、ということ。
  20. 20. カメラの映像は 2Dで表現できる
  21. 21. • WebGLでなにができる?( ́ `) • WebGLはなにをしているの?(Ծ﹏Ծ ) • 今日の本題、GLSL(シェーダ)(☼Д☼)
  22. 22. WebGL(OpenGL)には パイプラインと呼ばれる 仕組みがあります。 パイプライン(・▽・)
  23. 23. ざっくり言うと
  24. 24. データ(入力)に対して (パイプを通すように)一連の処理を施し、 最終的な結果(出力)にすること
  25. 25. パイプラインイメージ 入力 出力 処理
  26. 26. 変換パイプライン
  27. 27. 変換パイプライン
  28. 28. 行列?( ̄□ ̄)
  29. 29. こういうやつです
  30. 30. (゚ ゚)!!
  31. 31. モデル座標変換 要は「世界のどこに置くか」の定義( ́ `)
  32. 32. ビュー座標変換 要は「どこから撮影しているのか」の定義( ́ `)
  33. 33. プロジェクション 座標変換 要は「どんなレンズか」の定義( ́ `)
  34. 34. グラフィクスパイプライン
  35. 35. グラフィクスパイプライン
  36. 36. • WebGLでなにができる?( ́ `) • WebGLはなにをしているの?(Ծ﹏Ծ ) • 今日の本題、GLSL(シェーダ)(☼Д☼)
  37. 37. WebGLで一番大事な シェーダ
  38. 38. OS シェーダのイメージ ?(๑ ⌓ ๑)? シェーダ ブラウザ
  39. 39. GLSL (OpenGL Shading Language) はGLslangとして も知られ、C言語をベースとした高レベルシェーディング 言語である。これはアセンブリ言語やハードウェアに依 存した言語を使わないで、開発者がグラフィックスパイ プラインを直接制御できるようにOpenGL ARBで策定さ れた。 出典:Wikipedia
  40. 40. つまり、シェーダはGPUを 操作する=GPU上で動く
  41. 41. 本来は3Dオブジェクトの 表面の陰影(シェーディング) をするための言語
  42. 42. 1枚のポリゴンの 表面を描く、と考える
  43. 43. これが1枚ポリゴンのシェーダコード
  44. 44. DEMO
  45. 45. フィルターを 作ってみる
  46. 46. 今回は代表的なフィルターである 「モザイク」を作ってみます
  47. 47. コード
  48. 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. 49. 短っΣ( ̄□ ̄;
  50. 50. DEMO
  51. 51. これだけだとつまらないの で、もう少し手を加えてみる
  52. 52. GLSLでお絵かき
  53. 53. 円を描いてみる
  54. 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. 55. DEMO
  56. 56. 組み合わせる
  57. 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. 58. ちょっと解説
  59. 59. 大事なポイントは Filtersで使える変数
  60. 60. • iScreen • iResolution • iTime • iPosition • iSize • iCamera (0, 0)から(1, 1)のUV座標 カメラの解像度 スタート時からの経過時間(秒) スクロール位置(0∼1) ピンチサイズ(デフォルトは1) カメラの映像(テクスチャ)
  61. 61. • iScreen • iResolution • iTime • iPosition • iSize • iCamera (0, 0)から(1, 1)のUV座標 カメラの解像度 スタート時からの経過時間(秒) スクロール位置(0∼1) ピンチサイズ(デフォルトは1) カメラの映像(テクスチャ) ユーザー操作によって値が変わる
  62. 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. 63. まとめ
  64. 64. • WebGLのめんどくさいセットアップをほぼやって くれている • GLSLだけを書いて、すぐに結果を確認できる • ユーザー操作による動的要素を使ったインタラクショ ンのあるものも作れる
  65. 65. Filtersは
  66. 66. 普通のカメラの フィルターアプリ
  67. 67. ではない
  68. 68. GLSL学習アプリである(違
  69. 69. 気になった人はぜひ ダウンロードしてみてね☆
  70. 70. ご清聴ありがとうございました
  • kanekokazumasa

    May. 4, 2015
  • inushiki

    Feb. 26, 2015

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

Views

Total views

1,649

On Slideshare

0

From embeds

0

Number of embeds

147

Actions

Downloads

8

Shares

0

Comments

0

Likes

2

×