A WebGL scene in 30 mins
?
0 likes?2,246 views
The slides from my talk given at CologneJS and FrosCon in 2014. The example code is available here: https://github.com/jensarps/cgnjs-feb-2014
A WebGL scene in 30 mins
- 1. Create an Interactive 3D WebGL Scene
- 2. Create an Interactive 3D WebGL Scene ¡ in half an hour!
- 4. No Rocket Science! No Danger! http://www.flickr.com/photos/kevlar/5152987233
- 5. Step 0: Getting a Model
- 6. Step 0: Getting a Model Where from? Model Repositories
- 7. Step 0: Getting a Model Where from? Model Repositories http://www.turbosquid.com/ http://tf3dm.com/ ¡
- 8. Step 0: Getting a Model Where from? Convert Game Assets
- 9. Step 0: Getting a Model Format #1: Lightwave (.obj + .mtl)
- 10. Step 0: Getting a Model Format #2: COLLADA (.dae)
- 11. Step 0: Getting a Model Format #2: COLLADA (.dae) http://sketchup.google.com/3dwarehouse/
- 12. Step 0: Getting a Model Considerations Size/Complexity License
- 13. Step 0: Getting a Model Tools Blender
- 14. Step 0: Getting a Model Tools Meshlab
- 15. Step 1: Loading into WebGL
- 16. Step 1: Loading into WebGL WebGL Wrappers/Libraries
- 17. Step 1: Loading into WebGL WebGL Wrappers/Libraries three.js Babylon.js GLGE
- 18. Step 1: Loading into WebGL WebGL Wrappers/Libraries three.js Babylon.js GLGE
- 19. Step 1: Loading into WebGL WebGL Wrappers/Libraries All available on GitHub
- 21. Step 2: User Input Wrappers/Libraries three.js controls
- 22. Step 2: User Input Wrappers/Libraries decoupled-input
- 23. Step 2: User Input Wrappers/Libraries decoupled-input https://github.com/jensarps/decoupled-input
- 24. Step 3: Adding some Spice
- 25. Step 3: Adding some Spice Visuals ClearColor Fog Lights
- 26. Step 3: Adding some Spice Technical Window resize Pausing
- 28. Step 4: HTML5 Goodness New APIs
- 29. Step 4: HTML5 Goodness New APIs Fullscreen
- 30. Step 4: HTML5 Goodness New APIs PointerLock
- 31. Step 4: HTML5 Goodness New APIs GamePad
- 32. Step 4: HTML5 Goodness And More: WebAudio PageVisibility SpeechRecognition ¡
- 33. Step 4: HTML5 Goodness Tools: https://github.com/toji/game-shim
- 35. Step 5: Collision Detection Many Concepts
- 36. Step 5: Collision Detection Many Concepts Heightmap
- 37. Step 5: Collision Detection Many Concepts Raycasting
- 39. Step 6: The Aftermath A Well-Performing Render Loop
- 40. Step 6: The Aftermath A Well-Performing Render Loop 1) Do everything inside of the loop.
- 41. Step 6: The Aftermath A Well-Performing Render Loop 2) Be kind to your memory.
- 42. Step 6: The Aftermath A Well-Performing Render Loop 3) Optimize hot functions.
- 43. Step 6: The Aftermath Read about Entity-Component Architecture
- 44. Step 7: Further
- 45. Step 7: Further Get Inspired!
- 46. Step 7: Further Get Inspired! Read WebGL around the Net http://learningwebgl.com/blog/
- 47. Step 7: Further Get Inspired! Follow three.js on G+ https://plus.google.com/u/0/104300307601542851567/posts Check out featured projects http://threejs.org/
- 48. Step 7: Further Play Around!
- 49. Step 7: Further Play Around! Check out Jerome Etienne¡®s three.x http://jeromeetienne.github.io/threex/
- 50. Step 7: Further Play Around! Go shoot at balls: http://jensarps.github.io/shooting-at-balls/
- 51. thanks! blog: jensarps.de code: github.com/jensarps social: google.com/+JensArps the rest: google.com/search?q=Jens+Arps