SceneJS

1,815 views

Published on

JSON-Based Scene Graph Engine for WebGL

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,815
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
22
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

SceneJS

  1. 1. Introducing SceneJS WebGL Camp #2 Lindsay Kay [email_address] December 14, 2010 SceneJS.org
  2. 2. Motivation <ul><li>Provide easy access to WebGL
  3. 3. Learn 3D concepts
  4. 4. Data/model visualisation
  5. 5. Have fun </li></ul>SceneJS.org
  6. 6. Outline <ul><li>What is SceneJS?
  7. 7. Benefits
  8. 8. Architecture
  9. 9. Usage Examples
  10. 10. Show off a couple of features
  11. 11. Internal Tricks
  12. 12. Future Work </li></ul>SceneJS.org
  13. 13. What is SceneJS? <ul><li>Scene graph for WebGL
  14. 14. JSON-based API
  15. 15. Inspired by JavaFX and jQuery
  16. 16. Open source
  17. 17. Work in progress </li></ul>SceneJS.org
  18. 18. Benefits <ul><li>Easier to get started with WebGL
  19. 19. Training wheels for learning 3D
  20. 20. JSON API integrates into the stack easily
  21. 21. Compact scene definitions – easy to discuss
  22. 22. User-extendable
  23. 23. Now has contributors! </li></ul>
  24. 24. Why a JSON API? <ul><li>Easy to read
  25. 25. Storable - eg. CouchDB
  26. 26. Fits well in the stack – eg. NodeJS
  27. 27. Filterable, generatable
  28. 28. Allows SceneJS to be supported by other languages
  29. 29. Maybe “run” a scene graph server-side </li></ul>SceneJS.org
  30. 30. SceneJS Architecture <ul><li>Scene engine
  31. 31. JSON API
  32. 32. Message system
  33. 33. Misc. utilities library
  34. 34. Service container </li></ul>SceneJS.org http://scenejs.wikispaces.com
  35. 35. Usage: Define a Scene http://scenejs.wikispaces.com/JSON+Scene+Graph+API SceneJS.org
  36. 36. Usage: Update a Scene http://scenejs.wikispaces.com/JSON+Scene+Graph+API SceneJS.org Move the viewpoint: Add a sphere:
  37. 37. Usage: Bind a Listener http://scenejs.wikispaces.com/SceneJS.bind SceneJS.org Listen for pick:
  38. 38. Usage: Send a Message to a Scene http://scenejs.wikispaces.com/ClipBox+Plugin SceneJS.org Move viewpoint:
  39. 39. Usage: A User-Defined Message http://scenejs.wikispaces.com/ClipBox+Plugin SceneJS.org Insert a clipbox:
  40. 40. Feature: Instancing <ul><li>'Instance' node instances library symbols
  41. 41. NodeLoader service loads symbols on demand </li></ul>SceneJS.org Scene Graph http://scenejs.wikispaces.com/SceneJS.BoundingBox I 1 I 2 WWW http://my-server.com Service Container NodeLoader
  42. 42. Feature: Bounding Volumes <ul><li>For traversal culling
  43. 43. View and locality intersection tests
  44. 44. Useful with instancing </li></ul>SceneJS.org http://scenejs.wikispaces.com/SceneJS.BoundingBox
  45. 45. Feature: LOD with Bounding Volumes <ul><li>Bounding volume selects a subgraph for projected canvas-space size </li></ul>SceneJS.org Scene Graph 1 2 3
  46. 46. Some Other Features <ul><li>Library Symbol Instantiation
  47. 47. Multi-Materials
  48. 48. Render-to-Texture
  49. 49. GPU Picking
  50. 50. Interpolators
  51. 51. Spatial queries on scene elements
  52. 52. Fog, Transparency, Branching, Animated Textures... </li></ul>
  53. 53. Internal Tricks: Optimized WebGL Scene Graph Optimized WebGL Calls http://scenejs.wikispaces.com/Rendering+Algorithm SceneJS.org Fast redraw JSON var updates (planned) Render JSON Updates
  54. 54. Internal Tricks: Automatic GLSL <ul><li>Shaders composed for scene state at each geometry
  55. 55. Hashed for re-use at similar states </li></ul>SceneJS.org Scene Graph
  56. 56. Internal Tricks: Lots of Memoization <ul><li>For example: top of matrix stack memoized at each transform node </li></ul>SceneJS.org Scene Graph
  57. 57. Side Projects <ul><li>Collada->JSON Converter: http://scenejs.org/tools/
  58. 58. Asset Server: http://assets.scenejs.org </li></ul>SceneJS.org
  59. 59. Where Next? <ul><li>Serialize Scene to JSON
  60. 60. WebWorkers
  61. 61. User-defined shaders
  62. 62. NaCl </li></ul>SceneJS.org
  63. 63. More Info <ul><li>Home: http://scenejs.org
  64. 64. Docs: http://scenejs.wikispaces.com
  65. 65. Source: http://github.com/xeolabs/scenejs
  66. 66. Email: lindsay.kay@xeolabs.com
  67. 67. Movies: http://scenejs.org/movies.html </li></ul>SceneJS.org

×