JSON-Based Scene Graph Engine for WebGL

1. Introducing SceneJS WebGL Camp #2 Lindsay Kay [email_address] December 14, 2010 SceneJS.org

3. Learn 3D concepts

4. Data/model visualisation

5. Have fun SceneJS.org

7. Benefits

8. Architecture

9. Usage Examples

10. Show off a couple of features

11. Internal Tricks

12. Future Work SceneJS.org

14. JSON-based API

15. Inspired by JavaFX and jQuery

16. Open source

17. Work in progress SceneJS.org

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!

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 SceneJS.org

31. JSON API

32. Message system

33. Misc. utilities library

34. Service container 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:

41. NodeLoader service loads symbols on demand SceneJS.org Scene Graph http://scenejs.wikispaces.com/SceneJS.BoundingBox I 1 I 2 WWW http://my-server.com Service Container NodeLoader

43. View and locality intersection tests

44. Useful with instancing SceneJS.org http://scenejs.wikispaces.com/SceneJS.BoundingBox

47. Multi-Materials

48. Render-to-Texture

49. GPU Picking

50. Interpolators

51. Spatial queries on scene elements

52. Fog, Transparency, Branching, Animated Textures...

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

55. Hashed for re-use at similar states SceneJS.org Scene Graph

58. Asset Server: http://assets.scenejs.org SceneJS.org

60. WebWorkers

61. User-defined shaders

62. NaCl 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 SceneJS.org