A WebGL scene in 30 mins
-
Upload
jens-arps -
Category
Technology
-
view
814 -
download
4
description
Transcript of A WebGL scene in 30 mins
![Page 1: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/1.jpg)
Create an Interactive 3D WebGL Scene
![Page 2: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/2.jpg)
Create an Interactive 3D WebGL Scene
… in half an hour!
![Page 3: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/3.jpg)
http://www.flickr.com/photos/kevlar/5152987233
No Rocket Science!
![Page 4: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/4.jpg)
http://www.flickr.com/photos/kevlar/5152987233
No Rocket Science!
No Danger!
![Page 5: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/5.jpg)
Step 0:
Getting a Model
![Page 6: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/6.jpg)
Step 0: Getting a Model
Where from?
Model Repositories
![Page 7: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/7.jpg)
Step 0: Getting a Model
Where from?
Model Repositories
http://www.turbosquid.com/http://tf3dm.com/
…
![Page 8: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/8.jpg)
Step 0: Getting a Model
Where from?
Convert Game Assets
![Page 9: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/9.jpg)
Step 0: Getting a Model
Format
#1: Lightwave (.obj + .mtl)
![Page 10: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/10.jpg)
Step 0: Getting a Model
Format
#2: COLLADA (.dae)
![Page 11: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/11.jpg)
Step 0: Getting a Model
Format
#2: COLLADA (.dae)
http://sketchup.google.com/3dwarehouse/
![Page 12: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/12.jpg)
Step 0: Getting a Model
Considerations
Size/Complexity
License
![Page 13: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/13.jpg)
Step 0: Getting a Model
Tools
Blender
![Page 14: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/14.jpg)
Step 0: Getting a Model
Tools
Meshlab
![Page 15: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/15.jpg)
Step 1:
Loading into WebGL
![Page 16: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/16.jpg)
Step 1: Loading into WebGL
WebGL Wrappers/Libraries
![Page 17: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/17.jpg)
Step 1: Loading into WebGL
WebGL Wrappers/Libraries
three.js
Babylon.js
GLGE
![Page 18: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/18.jpg)
Step 1: Loading into WebGL
WebGL Wrappers/Libraries
three.js
Babylon.js
GLGE
![Page 19: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/19.jpg)
Step 1: Loading into WebGL
WebGL Wrappers/Libraries
All available on GitHub
![Page 20: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/20.jpg)
Step 2:
User Input
![Page 21: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/21.jpg)
Step 2: User Input
Wrappers/Libraries
three.js controls
![Page 22: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/22.jpg)
Step 2: User Input
Wrappers/Libraries
decoupled-input
![Page 23: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/23.jpg)
Step 2: User Input
Wrappers/Libraries
decoupled-input
https://github.com/jensarps/decoupled-input
![Page 24: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/24.jpg)
Step 3:
Adding some Spice
![Page 25: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/25.jpg)
Step 3: Adding some Spice
Visuals
ClearColor
Fog
Lights
![Page 26: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/26.jpg)
Step 3: Adding some Spice
Technical
Window resize
Pausing
![Page 27: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/27.jpg)
Step 4:
HTML5 Goodness
![Page 28: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/28.jpg)
Step 4: HTML5 Goodness
New APIs
![Page 29: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/29.jpg)
Step 4: HTML5 Goodness
New APIs
Fullscreen
![Page 30: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/30.jpg)
Step 4: HTML5 Goodness
New APIs
PointerLock
![Page 31: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/31.jpg)
Step 4: HTML5 Goodness
New APIs
GamePad
![Page 32: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/32.jpg)
Step 4: HTML5 Goodness
And More:
WebAudio
PageVisibility
SpeechRecognition
…
![Page 33: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/33.jpg)
Step 4: HTML5 Goodness
Tools:
https://github.com/toji/game-shim
![Page 34: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/34.jpg)
Step 5:
Collision Detection
![Page 35: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/35.jpg)
Step 5: Collision Detection
Many Concepts
![Page 36: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/36.jpg)
Step 5: Collision Detection
Many Concepts
Heightmap
![Page 37: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/37.jpg)
Step 5: Collision Detection
Many Concepts
Raycasting
![Page 38: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/38.jpg)
Step 6:
The Aftermath
![Page 39: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/39.jpg)
Step 6: The Aftermath
A Well-Performing Render Loop
![Page 40: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/40.jpg)
Step 6: The Aftermath
A Well-Performing Render Loop
1) Do everything inside of the loop.
![Page 41: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/41.jpg)
Step 6: The Aftermath
A Well-Performing Render Loop
2) Be kind to your memory.
![Page 42: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/42.jpg)
Step 6: The Aftermath
A Well-Performing Render Loop
3) Optimize hot functions.
![Page 43: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/43.jpg)
Step 6: The Aftermath
Read about Entity-Component Architecture
![Page 44: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/44.jpg)
Step 7:
Further
![Page 45: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/45.jpg)
Step 7: Further
Get Inspired!
![Page 46: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/46.jpg)
Step 7: Further
Get Inspired!
Read WebGL around the Nethttp://learningwebgl.com/blog/
![Page 47: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/47.jpg)
Step 7: Further
Get Inspired!
Follow three.js on G+https://plus.google.com/u/0/104300307601542851567/posts
Check out featured projectshttp://threejs.org/
![Page 48: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/48.jpg)
Step 7: Further
Play Around!
![Page 49: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/49.jpg)
Step 7: Further
Play Around!
Check out Jerome Etienne‘s three.xhttp://jeromeetienne.github.io/threex/
![Page 50: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/50.jpg)
Step 7: Further
Play Around!
Go shoot at balls:http://jensarps.github.io/shooting-at-balls/
![Page 51: A WebGL scene in 30 mins](https://reader037.fdocuments.net/reader037/viewer/2022110115/54b723504a7959a00c8b469a/html5/thumbnails/51.jpg)
thanks!
blog: jensarps.decode: github.com/jensarps
social: google.com/+JensArps
the rest: google.com/search?q=Jens+Arps