A WebGL scene in 30 mins

1,668 views
1,423 views

Published on

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

Published in: Technology, Self Improvement
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,668
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

A WebGL scene in 30 mins

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

×