SpiderGL. A JavaScript 3D Graphics for Next-Generation WWW. Visual Computing Lab ISTI CNR. Marco Di Benedetto

Transcription

1 SpiderGL A JavaScript 3D Graphics for Next-Generation WWW Marco Di Benedetto Visual Computing Lab ISTI CNR SIGGRAPH 2010 WebGL BOF 29/07/ Los Angeles

2 Motivations: Bring CG to the WWW WebGL as a link between Web and CG developers But... it s very low-level! Gaps to be filled: Speed, of course Algebraic and Geometric structures & algorithms Asynchronous data fetch facilities Assets loading Ease the use of WebGL SpiderGL aims at filling these gaps Marco Di Benedetto - SpiderGL - SIGGRAPH WebGL BOF - 29/07/2010 Los Angeles 2

3 SpiderGL: 3D Graphics for WWW Lightweight library ( ) provides typical CG data structures & algorithms Relies on WebGL for realtime rendering Goals: Efficiency asymptotic bounds are not the only concern Simplicity & Short Learning Time Key for fast application coding Flexibility Help with common tasks and create a robust middle layer for more complicated designs Marco Di Benedetto - SpiderGL - SIGGRAPH WebGL BOF - 29/07/2010 Los Angeles 3

4 Leading Desing Considerations 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 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 Marco Di Benedetto - SpiderGL - SIGGRAPH WebGL BOF - 29/07/2010 Los Angeles 4

5 SpiderGL Architecture GL: rendering Mesh: editable or renderable 3D model Space: geometric s. & a. Async: asinchronous data requests managing UI: user and html interface Marco Di Benedetto - SpiderGL - SIGGRAPH WebGL BOF - 29/07/2010 Los Angeles 5

6 Case Study: Mesh Rendering How a typical 3D model is represented: A list of vertices (each vertex is a bundle of data) A list of vertex indices, specifying how they are connected to form basic geometric primitives (points, segments, triangles) What we need to draw it POV intrinsic and extrinsic parameters Vertex & Index Buffers Some procedure to make light sources and model material interact to form colors on the final image Shaders & Uniforms Marco Di Benedetto - SpiderGL - SIGGRAPH WebGL BOF - 29/07/2010 Los Angeles 6

7 Meshes in SpiderGL Mesh Structure Set of named vertex attribute streams (position, normal, color, custom,...) with NO predefined semantic Set of named array or indexed primitive streams (points list, triangulated surface indices, wireframe segments,...) Mesh twins: SglMeshJS: an editable data structure SglMeshGL: a renderable graphics resource Unified interface, conversion functions SglMeshGLRenderer: fine-grain mesh renderer Marco Di Benedetto - SpiderGL - SIGGRAPH WebGL BOF - 29/07/2010 Los Angeles 7

8 Create a Renderable Mesh /*******************************************************************/ var mesh = new SglMesh(gl); // add a vertex attribute named position (type is inferred) mesh.addvertexattribute("position", 3, nativepositions); // add a NORMALIZED vertex attribute named color mesh.addvertexattribute("color", 3, nativecolors, true); // add connectivity information named triangles (type is inferred) mesh.addindexedprimitives("triangles", gl.triangles, nativeindices); // add array primitives named vertices mesh.addarrayprimitives("vertices", gl.points, 0, 3); /*******************************************************************/ Marco Di Benedetto - SpiderGL - SIGGRAPH WebGL BOF - 29/07/2010 Los Angeles 8

9 Create a Shader Program /*******************************************************************/ // vertex shader source code string var vertsource = ""; vertsource += uniform mat4 u_mvp; \n"; vertsource += "..."; vertsource += "attribute vec3 a_position; \n"; vertsource += "attribute vec3 a_color; \n"; vertsource += "..."; // fragment shader source code string var fragsource = "..."; // program setup var prog = new SglProgram(gl, [vertsource], [fragsource]); /*******************************************************************/ Marco Di Benedetto - SpiderGL - SIGGRAPH WebGL BOF - 29/07/2010 Los Angeles 9

10 Stream Mapping The mesh has 2 vertex attribute streams (position & color) The vertex shader has 2 input vertex attributes A correspondence between the two sets must be established /**********************************************************/ mesh.addvertexattribute("position", 3, nativepositions); mesh.addvertexattribute("color", 3, nativecolors, true); /**********************************************************/ /**********************************************/ vertsource += "attribute vec3 a_position; \n"; vertsource += "attribute vec3 a_color; \n"; /**********************************************/ Marco Di Benedetto - SpiderGL - SIGGRAPH WebGL BOF - 29/07/2010 Los Angeles 10

11 Rendering /*******************************************************************/ // <name : string> connect shader attr name to mesh attr string var streammapping = { a_position : "position", "texcoord" a_color : "color" }; // <name : value> set program uniform name to value value var uniforms = { u_mvp : getmodelviewprojectionmatrix() }; // utility function (full control available through SglMeshRenderer) sglrendermeshprimitives(mesh, "triangles", prog, streammapping, uniforms); /*******************************************************************/ Marco Di Benedetto - SpiderGL - SIGGRAPH WebGL BOF - 29/07/2010 Los Angeles 11

12 Option Parameters The GL module aims at simplifying common WebGL tasks Creation of WebGL objects Textures, programs, framebuffers,... Common sequence of several commands SpiderGL offers reasonable but overridable defaults /*********************************************************/ var textureopts = { minfilter : gl.linear_mipmap_linear, generatemipmap : true, onload : function () {... } }; // create texture from remote image var tex = new SglTexture2D(gl, "image_url", textureopts); /*********************************************************/ Marco Di Benedetto - SpiderGL - SIGGRAPH WebGL BOF - 29/07/2010 Los Angeles 12

13 Dealing with WebGL Objects Contstructors: SpiderGL provides easy-to-use configurable functions to create WebGL Objects Wrappers: each native handle can be wrapped by optimized high-level objects Flexibility: experienced users may want direct low-level control: obj.handle native WebGL object obj.synchronize() update state after low-level usage Marco Di Benedetto - SpiderGL - SIGGRAPH WebGL BOF - 29/07/2010 Los Angeles 13

14 Overcoming Mesh Limitations Ex.: OpenGL ES 2.0 (and so WebGL) does not allow 32 bit vertex indices Limited to 64K vertices per chunk SpiderGL uses packed-indexed primitive stream to seamlessly allow very large meshes Mesh is automatically subdivided into sub-meshes Marco Di Benedetto - SpiderGL - SIGGRAPH WebGL BOF - 29/07/2010 Los Angeles 14

15 On the Math / Geometry Side Support CG-related linear algebra entities 2, 3, 4-dimensional vectors, 2x2, 3x3, 4x4 matrices, quaternions Two choices: operate on native JS arrays or boxing objects Standard geometric entities Planes, spheres, boxes,... Intersection queries Transformation Stack Handles 3 separate stacks (model, view, projection) Editable Mesh (SglMeshJS) Several (and more coming) algorithms on trimeshes Marco Di Benedetto - SpiderGL - SIGGRAPH WebGL BOF - 29/07/2010 Los Angeles 15

16 Assets, Asynchronous Fetch and UI COLLADA, OBJ, JSON (and more coming) importers Every kind of handled document can be loaded with a uniform asynchronous request interface Images, 3D Models, shaders code,... Dynamic priority queues for multiresolution Requests can be interrupted, priority can change, transfer callbacks can be installed Special watcher object for completion of batched transfers GLUT-like interface and Interactors first-person camera, trackball,... Marco Di Benedetto - SpiderGL - SIGGRAPH WebGL BOF - 29/07/2010 Los Angeles 16

17 What can be done with SpiderGL I m tired up here... Let s see some demos! Marco Di Benedetto - SpiderGL - SIGGRAPH WebGL BOF - 29/07/2010 Los Angeles 17

18 SpiderGL to Assist Content Creation Multimedia Web repositories are widespread Images, Video, Audio, Text,... What about 3D Repositories? WebGL will bring HW Accelerated 3D Graphics to WWW Lots of 3D databases We need an effective way to deploy content to users MeShade: a content authoring tool Let s have a look! Marco Di Benedetto - SpiderGL - SIGGRAPH WebGL BOF - 29/07/2010 Los Angeles 18

19 Conclusions SpiderGL as a Geometry processing and Visualization library Do not over-abstract graphics objects, ease the completion of common task, allow low-level access Real-time performances with WebGL with several case studies Future Work: Continuous improvements, growing set of algorithms Toward an automated process to make high-end 3D content to be available to handheld devices Marco Di Benedetto - SpiderGL - SIGGRAPH WebGL BOF - 29/07/2010 Los Angeles 19

20 Thank You! Questions? Marco Di Benedetto - SpiderGL - SIGGRAPH WebGL BOF - 29/07/2010 Los Angeles 20