Web GL

Examples

  • 2012/01/13: fixed Text, Terrain, Skinning, Hierarchy, AAM, Instancing [Issues with Volumetric]
  • 2010/01/20: fixed shaders of text for compatibility. Tested under Mac OS X, works except game of life in FBO.
  • 2010/01/14: updated text with more massive text from Romeo and Juliet. Also updated skinning with textures
  • 2010/01/12: first experiment of volumetric rendering and updated instancing2 with rotations
  • 2010/01/08: new text section based on quad per char
  • 2010/01/07: character skinning demo works with FF
  • 2010/01/05: with Game of Life under FBO section
  • 2010/01/04: with hierarchical and skinning
  • 2010/01/01: with instancing

These are some examples of usage WebGL from the first version of the specification. Every example is self standing. In some cases I have written Next as interesting possible improvements.

Vertex Modification with Shaders and Textures

terrain1 - Terrain based on fixed grid. Separate texture with color and height (16bit color encoded). Please wait for loading of color texture. demoTerrain1

Future: geometry clipmaps for improving resolution and reducing grid size, based on GPU Gems2 chapter 2

See this great Google Experiment: craftscape

FBO

Moved to FBO Section.

Meshes

demoAAM - This is a simple example of rendering multiple meshes loaded from a JavaScript source. Using JS code (or JSON) it is a very fast way of encoding models, although it requires a conversion. In this case I have used a converter for XVR AAM models.

Updated: model can be with separate data channels or interleaved (vertex,normal and optional textures).

Updated: AJAX for loading the model file

Note this avatar is the one used in the SKILLS ROWing trainer

Hierarchical Meshes

demoHierarchy - objects are now hierarchical and we have to propagate transformation matrices

Character Skinning

Moved to Skinning section.

Pseudo-Instancing

Instancing is a technique of sending vertex data only once to the driver for representing many similar objects. Instancing is supported in OpenGL through specific extensions (draw_instanced and instanced_arrays) that identify each instance by means of a shader variable gl_InstanceIDARB. There are anyway some pseudo-instancing techniques when these extensions are not available. One of these approaches uses a vertex attribute to identify the instance.

The behavior of the instance is usually controlled by means of a matrix of uniforms indexed by the instance identifier.

These are two examples:

  • instance1 - a matrix of 10x10 cubes is being created as a single object, and the shader uses the (x,y) identifiers for positioning. This is introductory to the following.
  • instance2 - an array of 100 cubes is being created as a single object, and a vertex attribute lookups a uniform containing the object position, scale and rotation. Production code should check the parameter MAX_FRAGMENT_UNIFORM_VECTORS for sizing correctly the uniform array and consequently the number of cubes (getParameter is not implemented in FF at date). demoInstance2

Text Rendering

See: text

Issues with WebGL

These are some issues using WebGL implementation and standard.

  • Texture DDS: provided by means of extension
  • Loading binary models (ex. this, not really efficient): addressed by JavaScript binary arrays
  • Empty Textures for texImage2D require empty array (being fixed)

See also (see also [1])

Code

You can use some of my code if you think it is interesting. From the above examples:

  • plane.js - textured plane with variable number of segments
  • fbo.js - FBO setup with dual FBO support

External Resources

See my links about WebGL from del.icio.us

Khronos.org Help for WebGL setup in Browsers

Great examples:

Libraries

These are libraries useful for working with WebGL:

  • Sylvester for vector and matrix manipulation in JavaScript
  • WebGLU
  • GLGE another library for easily creating WebGL applications