Scenejs
Upcoming SlideShare
Loading in...5
×
 

Scenejs

on

  • 1,100 views

 

Statistics

Views

Total Views
1,100
Views on SlideShare
1,100
Embed Views
0

Actions

Likes
0
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Scenejs Scenejs Presentation Transcript

  • Introducing SceneJS WebGL Camp #2 Lindsay Kay [email_address] December 14, 2010 SceneJS.org
  • Motivation
    • Provide easy access to WebGL
    • Learn 3D concepts
    • Data/model visualisation
    • Have fun
    SceneJS.org
  • Outline
    • What is SceneJS?
    • Benefits
    • Architecture
    • Usage Examples
    • Show off a couple of features
    • Internal Tricks
    • Future Work
    SceneJS.org
  • What is SceneJS?
    • Scene graph for WebGL
    • JSON-based API
    • Inspired by JavaFX and jQuery
    • Open source
    • Work in progress
    SceneJS.org
  • Benefits
    • Easier to get started with WebGL
    • Training wheels for learning 3D
    • JSON API integrates into the stack easily
    • Compact scene definitions – easy to discuss
    • User-extendable
    • Now has contributors!
  • Why a JSON API?
    • Easy to read
    • Storable - eg. CouchDB
    • Fits well in the stack – eg. NodeJS
    • Filterable, generatable
    • Allows SceneJS to be supported by other languages
    • Maybe “run” a scene graph server-side
    SceneJS.org
  • SceneJS Architecture
    • Scene engine
    • JSON API
    • Message system
    • Misc. utilities library
    • Service container
    SceneJS.org http://scenejs.wikispaces.com
  • Usage: Define a Scene http://scenejs.wikispaces.com/JSON+Scene+Graph+API SceneJS.org
  • Usage: Update a Scene http://scenejs.wikispaces.com/JSON+Scene+Graph+API SceneJS.org Move the viewpoint: Add a sphere:
  • Usage: Bind a Listener http://scenejs.wikispaces.com/SceneJS.bind SceneJS.org Listen for pick:
  • Usage: Send a Message to a Scene http://scenejs.wikispaces.com/ClipBox+Plugin SceneJS.org Move viewpoint:
  • Usage: A User-Defined Message http://scenejs.wikispaces.com/ClipBox+Plugin SceneJS.org Insert a clipbox:
  • Feature: Instancing
    • 'Instance' node instances library symbols
    • 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
  • Feature: Bounding Volumes
    • For traversal culling
    • View and locality intersection tests
    • Useful with instancing
    SceneJS.org http://scenejs.wikispaces.com/SceneJS.BoundingBox
  • Feature: LOD with Bounding Volumes
    • Bounding volume selects a subgraph for projected canvas-space size
    SceneJS.org Scene Graph 1 2 3
  • Some Other Features
    • Library Symbol Instantiation
    • Multi-Materials
    • Render-to-Texture
    • GPU Picking
    • Interpolators
    • Spatial queries on scene elements
    • Fog, Transparency, Branching, Animated Textures...
  • 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
  • Internal Tricks: Automatic GLSL
    • Shaders composed for scene state at each geometry
    • Hashed for re-use at similar states
    SceneJS.org Scene Graph
  • Internal Tricks: Lots of Memoization
    • For example: top of matrix stack memoized at each transform node
    SceneJS.org Scene Graph
  • Side Projects
    • Collada->JSON Converter: http://scenejs.org/tools/
    • Asset Server: http://assets.scenejs.org
    SceneJS.org
  • Where Next?
    • Serialize Scene to JSON
    • WebWorkers
    • User-defined shaders
    • NaCl
    SceneJS.org
  • More Info
    • Home: http://scenejs.org
    • Docs: http://scenejs.wikispaces.com
    • Source: http://github.com/xeolabs/scenejs
    • Email: lindsay.kay@xeolabs.com
    • Movies: http://scenejs.org/movies.html
    SceneJS.org