1. SpiderGL 0.1.1 Marko Leppänen WebGL Seminar Tampere University of Technology, Finland

2. SpiderGL a JavaScript 3D Graphics LGPL library which relies on WebGL for realtime rendering provides typical structures and algorithms for realtime rendering to developers of 3D graphics web application, without forcing them to comply with some specific paradigm (i.e. it is not a scene graph) nor preventing low level access to the underlying WebGL graphics layer.

3. Design principles Efficiency Simplicity using a third-party library should be easy Do not impose any design choice a priori Avoid over-abstraction In CG simple and self-contained types works very well Flexibility Users must be able to reuse as much as possible of their former knowledge on the subject All the entities have de-facto standardized names and behavior Experienced users often want fine control -> low-level access

4. Components GL : Low/high level WebGL resources access, rendering. MATH : Math routines, low/high level linear algebra functions and classes. SPACE : Geometric structures and space-related classes and algorithms. MESH : Editable and renderable meshes, importers, rendering. UI : User interface event handling, interactors. DOM : JS/HTML utilities, asynchronous content loading.

5. Architecture

6. GL WebGL is a low level API Typical usage patterns may be identified (creating a shader or a FB object) To ensure all controls that are possible in WebGL, SpiderGL allows default parameter overriding with options For every type of WebGL object, there is a possibility to call a corresponding SpiderGL creation function returning a SglObjectTypeInfo object with no methods Every WebGL object has a high-level wrapper in SGL.

7. MESH Mesh is a set of vertices and their connectivity information. Mesh twins: SglMeshJS : an editable data structure, client scope SglMeshGL : a renderable graphics resource, GPU memory Struct-of-arrays architecture for vertex storage. Homogenous arrays more efficient Adding and removing attributes is easy Connectivity may be implicit or indexed.

8. MESH cont. Indexed primitives have max 2^16 -1 index SpiderGL splits large meshes transparently SglMeshGLRenderer helper class does all steps needed to render a mesh Importers for COLLADA, Alias|Wavefront OBJ and JSON

9. ASYNC Asynchronous loading done by XMLHttpRequest and appropiate callbacks

10. UI GLUT type event handling Canvas element raises events which are intercepted by the UI module and dispatched to the registered object Methods with predefined names

11. MATH Matrixes and vectors with basic operations Functions that operate on JavaScript arrays as parameters and return types No overloading, unique names for different input types Hierarchical frustrum culling A tree-like description of the scene Matrix stack for matrix transformation (projection, viewing and modeling)

12. Community Most spiders live lonely... Help 3 Topics | 0 Replies | Last Action: 2010-10-01 22:24:09 UTC Open Discussion 7 Topics | 6 Replies | Last Action: 2010-12-13 18:51:26 UTC

13. Documentation 12 documented files 40+ classes

14. Material SpiderGL: A JavaScript 3D Graphics Library for Next-Generation WWW http://vcg.isti.cnr.it/Publications/2010/DPGS10/spider gl.pdfhttp://vcg.isti.cnr.it/Publications/2010/DPGS10/spider gl.pdf WebGL Surfing through the third dimension http://movesinstitute.org/video/Web3D2010/MarcoD iBenedetto.ppthttp://movesinstitute.org/video/Web3D2010/MarcoD iBenedetto.ppt SpiderGL Home http://spidergl.org/