WebGLハンズオンを行った時の資料です。 http://connpass.com/event/25563/

1. WebGL入門ハンズオン
with Three.js

2. 面白法人カヤック 技術部
比留間 和也
@edo_m18 @edom18

3. UnityやWebで
VRコンテンツ作ってます

4. WebGL Tokyo Meetupを不定期で開催しています

5. WebVRについての記事書きました

6. ゴール

7. • WebGLを実際にやってみよう！と思ってもらうこと
• WebGLを使ったコンテンツを作ろうと思ってもらうこと
• WebGLをどう使ったらいいかのヒントを掴んでもらうこと

8. アジェンダ

9. • WebGLってそもそもなんなの！？ by @doxas
• Understanding Three.js by @yomotsu
• Three.jsを使ったハンズオン
• 3Dの基礎知識
• チームごとでWebGL x UIのアイデア出し
• もくもくタイム

10. いざハンズオン！

11. の前に、
少しだけ説明

12. Three.jsのイメージ

13. 突然ですが質問です

14. 映画撮影に必要なものは？

15. • 役者
• カメラ
• ライト
• シーン
• 再生機

16. • 役者
• カメラ
• ライト
• シーン
• 再生機
→オブジェクト
→カメラ
→ライト
→シーン
→レンダラー
Three.jsで考えると・・・

17. シーンのイメージ
イメージ

18. シーンのイメージ
イメージ

19. シーンのイメージ
イメージ

20. シーンのイメージ
イメージ

21. シーンのイメージ
シーン
イメージ

22. シーンのイメージ
THREE.PerspectiveCamera
THREE.Mesh
THREE.DirectionalLight
THREE.Scene
THREE.Mesh
イメージ

23. Mesh

24. THREE.Meshは
「形」と「材質」で決まる

25. 形 ･･･ Geometry
e.g. THREE.BoxGeometry,
THREE.PlaneGeometry, etc.
材質 ･･･ Material
e.g. THREE.MeshLambertMaterial,
THREE.MeshPhongMaterial, etc.

26. おまけ

27. 座標系を理解する

28. 右手・左手

32. ベクトル

34. 3Dで言えば
(x, y, z)で表される値
のこと

36. ベクトルの加算

38. ベクトルの減算

46. ベクトルの長さ

48. ベクトルの正規化
Normalize

50. ベクトルのスカラー倍