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

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.

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

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.

Architecture

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.

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.

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

ASYNC Asynchronous loading done by XMLHttpRequest and appropiate callbacks

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

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)

Community Most spiders live lonely... Help 3 Topics | 0 Replies | Last Action: :24:09 UTC Open Discussion 7 Topics | 6 Replies | Last Action: :51:26 UTC

Documentation 12 documented files 40+ classes

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