WebGL入門ハンズオン資料

WebGL入門ハンズオン資料

1. 1. WebGL入門ハンズオン with Three.js
2. 2. 面白法人カヤック 技術部 比留間 和也 @edo_m18 @edom18
3. 3. UnityやWebで VRコンテンツ作ってます
4. 4. WebGL Tokyo Meetupを不定期で開催しています
5. 5. WebVRについての記事書きました
6. 6. ゴール
7. 7. • WebGLを実際にやってみよう！と思ってもらうこと • WebGLを使ったコンテンツを作ろうと思ってもらうこと • WebGLをどう使ったらいいかのヒントを掴んでもらうこと
8. 8. アジェンダ
9. 9. • WebGLってそもそもなんなの！？ by @doxas • Understanding Three.js by @yomotsu • Three.jsを使ったハンズオン • 3Dの基礎知識 • チームごとでWebGL x UIのアイデア出し • もくもくタイム
10. 10. いざハンズオン！
11. 11. の前に、 少しだけ説明
12. 12. Three.jsのイメージ
13. 13. 突然ですが質問です
14. 14. 映画撮影に必要なものは？
15. 15. • 役者 • カメラ • ライト • シーン • 再生機
16. 16. • 役者 • カメラ • ライト • シーン • 再生機 →オブジェクト →カメラ →ライト →シーン →レンダラー Three.jsで考えると・・・
17. 17. シーンのイメージ イメージ
18. 18. シーンのイメージ イメージ
19. 19. シーンのイメージ イメージ
20. 20. シーンのイメージ イメージ
21. 21. シーンのイメージ シーン イメージ
22. 22. シーンのイメージ THREE.PerspectiveCamera THREE.Mesh THREE.DirectionalLight THREE.Scene THREE.Mesh イメージ
23. 23. Mesh
24. 24. THREE.Meshは 「形」と「材質」で決まる
25. 25. 形 ･･･ Geometry e.g. THREE.BoxGeometry, THREE.PlaneGeometry, etc. 材質 ･･･ Material e.g. THREE.MeshLambertMaterial, THREE.MeshPhongMaterial, etc.
26. 26. おまけ
27. 27. 座標系を理解する
28. 28. 右手・左手
29. 29. ベクトル
30. 30. 3Dで言えば (x, y, z)で表される値 のこと
31. 31. ベクトルの加算
32. 32. ベクトルの減算
33. 33. ベクトルの長さ
34. 34. ベクトルの正規化 Normalize
35. 35. ベクトルのスカラー倍