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.

WebGLことはじめ

9,539 views

Published on

WebGL Tokyo Meet upで話したスライドです。
WebGLのセットアップからGLSLなどの、Hello Worldをざっくりと解説しています。

Published in: Technology
  • Be the first to comment

WebGLことはじめ

  1. 1. ことはじめ
  2. 2. 比留間 和也 の
  3. 3. 2月頭に突然の iOSチーム異動
  4. 4. Lobiっていうアプリ 作ってます
  5. 5. マイQiita っていうアプリ出しました
  6. 6. 作ったもの
  7. 7. Canvas 2D CSS3D WebGL iOS8でカヤックサイト見るとロゴが3Dに!(゚ ゚)!
  8. 8. 今日のゴール 今回話すことのゴールは、WebGLには興味があるけ ど3Dということでハードルが高いと感じている人に WebGLやってみようかな、と思ってもらえればゴー ルだと思っています。
  9. 9. アジェンダ • WebGLはなにができるようになるの?( ́ `) • WebGLはなにをしているの?(Ծ﹏Ծ ) • WebGLの要、GLSL(シェーダ)(☼Д☼) • WebGLの実際の実装の流れ=͟ ͟͞͞(  ω')
  10. 10. アジェンダ • WebGLはなにができるようになるの?( ́ `) • WebGLはなにをしているの?(Ծ﹏Ծ ) • WebGLの要、GLSL(シェーダ)(☼Д☼) • WebGLの実際の実装の流れ=͟ ͟͞͞(  ω')
  11. 11. WebGL[1](ウェブジーエル)は、ウェブブラウザで3次 元コンピュータグラフィックスを表示させるための標準 仕様。OpenGL 2.0もしくはOpenGL ES 2.0をサポート するプラットフォーム上で、特別なブラウザのプラグイ ンなしで、ハードウェアでアクセラレートされた三次元 グラフィックスを表示可能にする。 ! 技術的には、JavaScriptとネイティブのOpenGL ES 2.0 のバインディングである。WebGLは非営利団体の Khronos Groupで管理されている。WebGLはHTMLの canvas要素を使う。 出典:Wikipedia
  12. 12. • ざっくり一言でいうと「ハードウェアでアクセラ レートされた(GPUを使った)高速なレンダリン グ能力を手に入れられる」ということ。 • 三次元グラフィックスと書かれているが、実際のポ イントは「ハードウェアでアクセラレートされる」 という点。 • つまりこれは、二次元の表現であったとしてもその 恩恵を受けられる、ということ。
  13. 13. 3DでWebGL使ったデモ 2DでWebGL使ったデモ
  14. 14. アジェンダ • WebGLはなにができるようになるの?( ́ `) • WebGLはなにをしているの?(Ծ﹏Ծ ) • WebGLの要、GLSL(シェーダ)(☼Д☼) • WebGLの実際の実装の流れ=͟ ͟͞͞(  ω')
  15. 15. WebGL(OpenGL)には パイプラインと呼ばれる 仕組みがあります。 パイプライン(・▽・)
  16. 16. ざっくり言うと
  17. 17. データ(入力)に対して(パイプを 通すように)一連の処理を施し、最 終的な結果(出力)にすること
  18. 18. パイプラインイメージ 入力 出力 処理
  19. 19. 変換パイプライン
  20. 20. 変換パイプライン
  21. 21. 行列?( ̄□ ̄)
  22. 22. こういうやつです
  23. 23. (゚ ゚)!!
  24. 24. モデル座標変換 要は「世界のどこに置くか」の定義( ́ `)
  25. 25. ビュー座標変換 要は「どこから撮影しているのか」の定義( ́ `)
  26. 26. プロジェクション 座標変換 要は「どんなレンズか」の定義( ́ `)
  27. 27. 行列を使うと、これら複雑な座標変換処理を ひとつの行列にまとめて使いまわせる ( ・ ・)イイ!!
  28. 28. グラフィクスパイプライン
  29. 29. グラフィクスパイプライン
  30. 30. アジェンダ • WebGLはなにができるようになるの?( ́ `) • WebGLはなにをしているの?(Ծ﹏Ծ ) • WebGLの要、GLSL(シェーダ)(☼Д☼) • WebGLの実際の実装の流れ=͟ ͟͞͞(  ω')
  31. 31. WebGLで一番大事な シェーダ
  32. 32. OS シェーダのイメージ ?(๑ ⌓ ๑)? シェーダ ブラウザ
  33. 33. GLSL (OpenGL Shading Language) はGLslangとして も知られ、C言語をベースとした高レベルシェーディング 言語である。これはアセンブリ言語やハードウェアに依 存した言語を使わないで、開発者がグラフィックスパイ プラインを直接制御できるようにOpenGL ARBで策定さ れた。 出典:Wikipedia
  34. 34. つまり、シェーダはGPUを 操作する=GPU上で動く
  35. 35. まずはシェーダを 見てみる
  36. 36. 頂点シェーダ // 頂点シェーダソース attribute vec3 position; attribute vec4 color; ! uniform mat4 mvpMatrix; ! varying vec4 vColor; ! void main() { vColor = color; gl_Position = mvpMatrix * vec4(position, 1.0); }
  37. 37. フラグメントシェーダ // フラグメントシェーダソース precision mediump float; ! varying vec4 vColor; ! void main() { gl_FragColor = vColor; }
  38. 38. これなら読めそう(゚ ゚)!!
  39. 39. 覚えておくべき キーワードは
  40. 40. 「attribute、uniform、varying」と 「gl_Position、gl_FragColor」
  41. 41. // 頂点シェーダソース attribute vec3 position; attribute vec4 color; ! uniform mat4 mvpMatrix; ! varying vec4 vColor; ! void main() { vColor = color; gl_Position = mvpMatrix * vec4(position, 1.0); } 変数定義 処理 // フラグメントシェーダソース precision mediump float; ! varying vec4 vColor; ! void main() { gl_FragColor = vColor; } 変数定義 処理
  42. 42. // 頂点シェーダソース attribute vec3 position; attribute vec4 color; ! uniform mat4 mvpMatrix; ! varying vec4 vColor; ! void main() { vColor = color; gl_Position = mvpMatrix * vec4(position, 1.0); } // フラグメントシェーダソース precision mediump float; ! varying vec4 vColor; ! void main() { gl_FragColor = vColor; } attribute(属性) uniform(一定、同質) varying(様々な、異なる)
  43. 43. アジェンダ • WebGLはなにができるようになるの?( ́ `) • WebGLはなにをしているの?(Ծ﹏Ծ ) • WebGLの要、GLSL(シェーダ)(☼Д☼) • WebGLの実際の実装の流れ=͟ ͟͞͞(  ω')
  44. 44. JavaScriptのコードを 見てみる https://github.com/edom18/WebGL-Meetup-sample サンプルを上げておきました( *́▽`)
  45. 45. これだけ書いて、 実は三角形ひとつだけ… まぢか( ;́Д`)
  46. 46. でも分解すると
  47. 47. …① WebGLのセットアップ …② データの準備 …③ 座標変換パイプライン …④ シェーダの準備と    データのアップロード …⑤ レンダリング
  48. 48. 意外と やってることは少ない (゚ ゚)!!
  49. 49. ざっくりと ひとつひとつ見ていきます
  50. 50. WebGLで表示する生のデータ WebGLで表示するための バッファデータ
  51. 51. WebGLShaderオブジェクトの生成
  52. 52. WebGLProgramオブジェクトの生成
  53. 53. WebGLBufferオブジェクトの生成
  54. 54. 行列用変数の 初期化 各種行列を生成
  55. 55. attribute変数の インデックスを取得 頂点位置・色データをWebGLに通知 頂点インデックスデータをWebGLに通知 座標変換行列データをUniformとしてWebGLに通知
  56. 56. レンダリングGo!!٩(ˊᗜˋ*)‫و‬
  57. 57. でもこれだけ・・・((((;゚Д゚))))
  58. 58. 実はほぼ、WebGLと 通信するためのコード
  59. 59. 準備が整ってしまえば、 データを追加するのは簡単 ε-(́ `*)ホッ
  60. 60. DEMO
  61. 61. ライブラリを使う
  62. 62. あまりWebGLを生で 書くことは少ない
  63. 63. ライブラリを使えば 手軽にWebGLで表現できる ktkr(゚ ゚)!!
  64. 64. Three.js
  65. 65. WebGLではデファクトスタ ンダードになりつつある ライブラリ 冒頭のサイコロ給のデモもThree.jsを使っています(ㆆᴗㆆ)
  66. 66. 同じような行数で どこまでできるかやってみた
  67. 67. DEMO
  68. 68. ライブラリいいね (゚ ゚)b
  69. 69. 明日からWebGLで なにか作ろう!!
  70. 70. ご静聴ありがとうございました

×