Upload
others
View
17
Download
0
Embed Size (px)
Citation preview
SpiderGL
A JavaScript 3D Graphics
for Next-Generation WWW
Marco Di Benedetto
Visual Computing Lab – ISTI – CNR
SIGGRAPH 2010 – WebGL BOF – 29/07/2010 - Los Angeles
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 2010 - WebGL BOF - 29/07/2010 Los Angeles 2
SpiderGL: 3D Graphics for WWW
Lightweight library ( http://spidergl.org )
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 2010 - WebGL BOF - 29/07/2010 Los Angeles 3
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 2010 - WebGL BOF - 29/07/2010 Los Angeles 4
SpiderGL Architecture
Marco Di Benedetto - SpiderGL - SIGGRAPH 2010 - WebGL BOF - 29/07/2010 Los Angeles 5
GL: rendering
Mesh: editable or renderable
3D model
Space: geometric s. & a.
Async: asinchronous data
requests managing
UI: user and html interface
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
Some procedure to make light sources and model material
interact to form colors on the final image
Marco Di Benedetto - SpiderGL - SIGGRAPH 2010 - WebGL BOF - 29/07/2010 Los Angeles 6
Vertex & Index Buffers
Shaders & Uniforms
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 2010 - WebGL BOF - 29/07/2010 Los Angeles 7
Marco Di Benedetto - SpiderGL - SIGGRAPH 2010 - WebGL BOF - 29/07/2010 Los Angeles 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 2010 - WebGL BOF - 29/07/2010 Los Angeles 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 2010 - WebGL BOF - 29/07/2010 Los Angeles 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
/**********************************************/
… … …
vertSource += "attribute vec3 a_position; \n";
vertSource += "attribute vec3 a_color; \n";
… … …
/**********************************************/
/**********************************************************/
… … …
mesh.addVertexAttribute("position", 3, nativePositions);
mesh.addVertexAttribute("color", 3, nativeColors, true);
… … …
/**********************************************************/
Marco Di Benedetto - SpiderGL - SIGGRAPH 2010 - WebGL BOF - 29/07/2010 Los Angeles 11
Rendering
/*******************************************************************/
// <name : string> connect shader attr “name” to mesh attr “string”
var streamMapping = {
a_position : "position",
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);
/*******************************************************************/
"texcoord"
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
Marco Di Benedetto - SpiderGL - SIGGRAPH 2010 - WebGL BOF - 29/07/2010 Los Angeles 12
/*********************************************************/
var textureOpts = {
minFilter : gl.LINEAR_MIPMAP_LINEAR,
generateMipmap : true,
onload : function () { ... }
};
// create texture from remote image
var tex = new SglTexture2D(gl, "image_url", textureOpts);
/*********************************************************/
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 2010 - WebGL BOF - 29/07/2010 Los Angeles 13
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 2010 - WebGL BOF - 29/07/2010 Los Angeles 14
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 2010 - WebGL BOF - 29/07/2010 Los Angeles 15
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 2010 - WebGL BOF - 29/07/2010 Los Angeles 16
What can be done with SpiderGL
Marco Di Benedetto - SpiderGL - SIGGRAPH 2010 - WebGL BOF - 29/07/2010 Los Angeles 17
I’m tired up here...
Let’s see some demos!
http://spidergl.org/code.php
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!
http://spidergl.org/meshade/index.html
Marco Di Benedetto - SpiderGL - SIGGRAPH 2010 - WebGL BOF - 29/07/2010 Los Angeles 18
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 2010 - WebGL BOF - 29/07/2010 Los Angeles 19
Marco Di Benedetto - SpiderGL - SIGGRAPH 2010 - WebGL BOF - 29/07/2010 Los Angeles 20
Thank You!
http://spidergl.org