Your SlideShare is downloading. ×
A WebGL scene in 30 mins
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

A WebGL scene in 30 mins

935

Published on

The slides from my talk given at CologneJS and FrosCon in 2014. …

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
935
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Create an Interactive 3D WebGL Scene
  • 2. Create an Interactive 3D WebGL Scene … in half an hour!
  • 3. No Rocket Science! http://www.flickr.com/photos/kevlar/5152987233
  • 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
  • 20. Step 2: User Input
  • 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
  • 27. Step 4: HTML5 Goodness
  • 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
  • 34. Step 5: Collision Detection
  • 35. Step 5: Collision Detection Many Concepts
  • 36. Step 5: Collision Detection Many Concepts Heightmap
  • 37. Step 5: Collision Detection Many Concepts Raycasting
  • 38. Step 6: The Aftermath
  • 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

×