Some exercises in WebGL written a long time ago.
- 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.
Future: geometry clipmaps for improving resolution and reducing grid size, based on GPU Gems2 chapter 2
See this great Google Experiment: craftscape
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
demoHierarchy - objects are now hierarchical and we have to propagate transformation matrices
Moved to Skinning section.
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).
Issues with WebGL
These are some issues using WebGL implementation and standard.
- Texture DDS: provided by means of extension
- Empty Textures for texImage2D require empty array (being fixed)
See also (see also )
You can use some of my code if you think it is interesting. From the above examples:
See my links about WebGL from del.icio.us
Khronos.org Help for WebGL setup in Browsers
These are libraries useful for working with WebGL: