WebGL Camp 4 - A3 3D Engine

734 views

Published on

This is the talk I gave at WebGL Camp 4 on my 3D engine, A3

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

WebGL Camp 4 - A3 3D Engine

  1. 1. A Simple 3D Engine
  2. 2. Who am I?
  3. 3. Who am I?• My name is Paul
  4. 4. Who am I?• My name is Paul• I’m a developer with about 10 years of experience
  5. 5. Who am I?• My name is Paul• I’m a developer with about 10 years of experience• I work for HUGE in London
  6. 6. Who am I?• My name is Paul• I’m a developer with about 10 years of experience• I work for HUGE in London• Findable on Twitter as @aerotwist
  7. 7. Who am I?• My name is Paul• I’m a developer with about 10 years of experience• I work for HUGE in London• Findable on Twitter as @aerotwist• Findable on the interwibble at http://aerotwist.com
  8. 8. “I know, I’ll make a 3D engine!”
  9. 9. Why bother?
  10. 10. Why bother?• There are already loads: Three.js, J3D, PhiloGL, etc
  11. 11. Why bother?• There are already loads: Three.js, J3D, PhiloGL, etc• A great opportunity to learn
  12. 12. Why bother?• There are already loads: Three.js, J3D, PhiloGL, etc• A great opportunity to learn• An even better opportunity to share
  13. 13. Why bother?• There are already loads: Three.js, J3D, PhiloGL, etc• A great opportunity to learn• An even better opportunity to share• ... and Bartek Drozdz suggested it
  14. 14. “I have no idea howto make a 3D engine.” :(
  15. 15. “I’ll try anyway!”
  16. 16. Elevator Pitch
  17. 17. Elevator Pitch• Make a simple 3D engine
  18. 18. Elevator Pitch• Make a simple 3D engine• Make it feature-limited... feature-selective ;)
  19. 19. Elevator Pitch• Make a simple 3D engine• Make it feature-limited... feature-selective ;)• Make it Open Source and available on GitHub
  20. 20. Elevator Pitch• Make a simple 3D engine• Make it feature-limited... feature-selective ;)• Make it Open Source and available on GitHubhttp://github.com/paullewis/a3
  21. 21. Goalz
  22. 22. Goalz• Try and write a 3D engine a developer can use
  23. 23. Goalz• Try and write a 3D engine a developer can use• Get API documentation “for free”
  24. 24. Goalz• Try and write a 3D engine a developer can use• Get API documentation “for free”• Keep it lean and mean
  25. 25. Goalz• Try and write a 3D engine a developer can use• Get API documentation “for free”• Keep it lean and mean• Record videos explaining the process
  26. 26. Developer APIs
  27. 27. Developer APIs• Really difficult
  28. 28. Developer APIs• Really difficult• You know your own code
  29. 29. Developer APIs• Really difficult• You know your own code• You don’t know what a developer wants to do
  30. 30. Developer APIs• Really difficult• You know your own code• You don’t know what a developer wants to do• You may screw it up a bit :)
  31. 31. Developer APIs• Really difficult• You know your own code• You don’t know what a developer wants to do• You may screw it up a bit :)• Advice: get help
  32. 32. For your Renderer class why did you go with a shortcut namespace of A3.R instead of A3.Renderer?That tripped me up initially because it was inconsistent with how you shortcut namespaced your other class files. - Joshua Perez, via email
  33. 33. Free Documentation
  34. 34. Free Documentation• Really easy
  35. 35. Free Documentation• Really easy• With JavaScript just use JavaDoc comments
  36. 36. Free Documentation• Really easy• With JavaScript just use JavaDoc comments• Run jsdoc-toolkit against it as part of the build
  37. 37. Free Documentation• Really easy• With JavaScript just use JavaDoc comments• Run jsdoc-toolkit against it as part of the build• Automagic wonders will follow
  38. 38. Keeping It Small
  39. 39. Keeping It Small• Really hard
  40. 40. Keeping It Small• Really hard• Functionality is either core or addon
  41. 41. Keeping It Small• Really hard• Functionality is either core or addon• Core is always included, addon toggled in the build
  42. 42. Keeping It Small• Really hard• Functionality is either core or addon• Core is always included, addon toggled in the build• 99% right now is core
  43. 43. Keeping It Small• Really hard• Functionality is either core or addon• Core is always included, addon toggled in the build• 99% right now is core• The engine is about 13KB gzipped (53KB normal)
  44. 44. Videos
  45. 45. Videos• Really time consuming
  46. 46. Videos• Really time consuming• Hard to distil knowledge in a meaningful way
  47. 47. Videos• Really time consuming• Hard to distil knowledge in a meaningful way• Hard to work out how useful they are
  48. 48. Videos• Really time consuming• Hard to distil knowledge in a meaningful way• Hard to work out how useful they are• I’m running behind
  49. 49. Features
  50. 50. Features• Geometry abstraction
  51. 51. Features• Geometry abstraction• Phong and Lambert shading
  52. 52. Features• Geometry abstraction• Phong and Lambert shading• Lighting
  53. 53. Features• Geometry abstraction• Phong and Lambert shading• Lighting• Cameras
  54. 54. Features• Geometry abstraction• Phong and Lambert shading• Lighting• Cameras• Scene graph
  55. 55. Features• Geometry abstraction• Phong and Lambert shading• Lighting• Cameras• Scene graph• Cube mapping
  56. 56. Features• Geometry abstraction• Phong and Lambert shading• Lighting• Cameras• Scene graph• Cube mapping• Texturing
  57. 57. http://lab.aerotwist.com/webgl/a3/samples/07
  58. 58. http://lab.aerotwist.com/webgl/strange-attractor
  59. 59. http://lab.aerotwist.com/webgl/undulating-monkey
  60. 60. Conclusion
  61. 61. Conclusion• Have goals
  62. 62. Conclusion• Have goals• Be willing to refactor and change things
  63. 63. Conclusion• Have goals• Be willing to refactor and change things• Ask a few people to help you
  64. 64. Conclusion• Have goals• Be willing to refactor and change things• Ask a few people to help you• Write plenty of samples
  65. 65. Conclusion• Have goals• Be willing to refactor and change things• Ask a few people to help you• Write plenty of samples• Share and be open
  66. 66. but mainly...
  67. 67. if you have a crazy idea...
  68. 68. DO IT! :)
  69. 69. Cheershttp://aerotwist.com/a3

×