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

1. ことはじめ

2. 比留間 和也
の

3. 2月頭に突然の
iOSチーム異動

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

5. マイQiita
っていうアプリ出しました

6. 作ったもの

7. Canvas 2D
CSS3D
WebGL
iOS8でカヤックサイト見るとロゴが3Dに！(ﾟ ﾟ)！

8. 今日のゴール
今回話すことのゴールは、WebGLには興味があるけ
ど3Dということでハードルが高いと感じている人に
WebGLやってみようかな、と思ってもらえればゴー
ルだと思っています。

9. アジェンダ
• WebGLはなにができるようになるの？( ́ `)
• WebGLはなにをしているの？(Ծ﹏Ծ )
• WebGLの要、GLSL（シェーダ）(☼Д☼)
• WebGLの実際の実装の流れ=͟ ͟͞͞( ω')

10. アジェンダ
• WebGLはなにができるようになるの？( ́ `)
• WebGLはなにをしているの？(Ծ﹏Ծ )
• WebGLの要、GLSL（シェーダ）(☼Д☼)
• WebGLの実際の実装の流れ=͟ ͟͞͞( ω')

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

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

13. 3DでWebGL使ったデモ
2DでWebGL使ったデモ

14. アジェンダ
• WebGLはなにができるようになるの？( ́ `)
• WebGLはなにをしているの？(Ծ﹏Ծ )
• WebGLの要、GLSL（シェーダ）(☼Д☼)
• WebGLの実際の実装の流れ=͟ ͟͞͞( ω')

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

16. ざっくり言うと

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

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

19. 変換パイプライン

20. 変換パイプライン

21. 行列？(￣□￣)

22. こういうやつです

23. (ﾟ ﾟ)!!

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

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

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

27. 行列を使うと、これら複雑な座標変換処理を
ひとつの行列にまとめて使いまわせる
( ・ ・)ｲｲ!!

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

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

30. アジェンダ
• WebGLはなにができるようになるの？( ́ `)
• WebGLはなにをしているの？(Ծ﹏Ծ )
• WebGLの要、GLSL（シェーダ）(☼Д☼)
• WebGLの実際の実装の流れ=͟ ͟͞͞( ω')

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

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

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

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

35. まずはシェーダを
見てみる

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. フラグメントシェーダ
// フラグメントシェーダソース
precision mediump float;
!
varying vec4 vColor;
!
void main() {
gl_FragColor = vColor;
}

38. これなら読めそう(ﾟ ﾟ)!!

39. 覚えておくべき
キーワードは

40. 「attribute、uniform、varying」と
「gl_Position、gl_FragColor」

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. // 頂点シェーダソース
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. アジェンダ
• WebGLはなにができるようになるの？( ́ `)
• WebGLはなにをしているの？(Ծ﹏Ծ )
• WebGLの要、GLSL（シェーダ）(☼Д☼)
• WebGLの実際の実装の流れ=͟ ͟͞͞( ω')

44. JavaScriptのコードを
見てみる
https://github.com/edom18/WebGL-Meetup-sample
サンプルを上げておきました( *́▽`)

46. これだけ書いて、
実は三角形ひとつだけ…
まぢか( ;́Д`)

47. でも分解すると

48. …① WebGLのセットアップ
…② データの準備
…③ 座標変換パイプライン
…④ シェーダの準備と
データのアップロード
…⑤ レンダリング

49. 意外と
やってることは少ない
(ﾟ ﾟ)!!

50. ざっくりと
ひとつひとつ見ていきます

52. WebGLで表示する生のデータ
WebGLで表示するための
バッファデータ

53. WebGLShaderオブジェクトの生成

54. WebGLProgramオブジェクトの生成

55. WebGLBufferオブジェクトの生成

56. 行列用変数の
初期化
各種行列を生成

57. attribute変数の
インデックスを取得
頂点位置・色データをWebGLに通知
頂点インデックスデータをWebGLに通知
座標変換行列データをUniformとしてWebGLに通知

58. レンダリングGo!!٩(ˊᗜˋ*)‫و‬

59. でもこれだけ・・・((((；ﾟДﾟ))))

60. 実はほぼ、WebGLと
通信するためのコード

61. 準備が整ってしまえば、
データを追加するのは簡単
ε-(́ ｀*)ﾎｯ

62. DEMO

63. ライブラリを使う

64. あまりWebGLを生で
書くことは少ない

65. ライブラリを使えば
手軽にWebGLで表現できる
ktkr(ﾟ ﾟ)!!

66. Three.js

67. WebGLではデファクトスタ
ンダードになりつつある
ライブラリ
冒頭のサイコロ給のデモもThree.jsを使っています(ㆆᴗㆆ)

68. 同じような行数で
どこまでできるかやってみた

70. DEMO

71. ライブラリいいね
(ﾟ ﾟ)b

72. 明日からWebGLで
なにか作ろう！！

73. ご静聴ありがとうございました