Your SlideShare is downloading. ×
0
SceneJS
SceneJS
SceneJS
SceneJS
SceneJS
SceneJS
SceneJS
SceneJS
SceneJS
SceneJS
SceneJS
SceneJS
SceneJS
SceneJS
SceneJS
SceneJS
SceneJS
SceneJS
SceneJS
SceneJS
SceneJS
SceneJS
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

SceneJS

1,689

Published on

JSON-Based Scene Graph Engine for WebGL

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

×