A WebGL scene in 30 mins
0 likes2,248 views
The document outlines the steps to create an interactive 3D WebGL scene, detailing the process from acquiring 3D models to implementing user input and enhancing visuals. It suggests tools like Blender and libraries such as Three.js and Babylon.js for development, encouraging users to explore HTML5 features and optimize rendering. Additionally, it provides links for resources and further inspiration to aid in learning WebGL.
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