spidergl a javascript 3d graphics for next …...for next-generation www marco di benedetto visual...

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


http://spidergl.org/

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


SpiderGL Architecture


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


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



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);

/*******************************************************************/


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]);

/*******************************************************************/


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);

… … …

/**********************************************************/


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


/*********************************************************/

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


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


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


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, ...


What can be done with SpiderGL


I’m tired up here...

Let’s see some demos!

http://spidergl.org/code.php

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


http://spidergl.org/meshade/index.html

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



Thank You!

[email protected]

http://spidergl.org

http://spidergl.org/

spidergl a javascript 3d graphics for next …...for next-generation www marco di benedetto visual...

Documents