Schlagwort: JavaScript

A simple WebGL Tutorial

Screenshot of the WebGL example
Screenshot of the WebGL Example

To get something visible on the Screen with WebGL, more work is necessary than it was with classic OpenGL. This is due to the fact, that WebGL dropped the Fixed-Function Pipeline and we now have to provide shaders to calculate the vertex transformation and the lighting on our own. The missing lighting, material and projection functions make it harder to get started with WebGL. I hope to make this easier with the following post that tries to cover the most basic WebGL aspects.


WebGL Demo of animated Character

I finally finished my WebGL demo to render an animated character. To create the JSON File, I changed my ParrotEngine Blender Export Script to output a JSON file instead of XML.

The demo was tested on Firefox 7 and 8, Opera 12 and Google Chrome 15 – each was running fine. Internet Explorer does not support WebGL – and probably never will, so you have to use another browser to see the demo…

The JSON object contains the

  • vertices
  • faces
  • skeleton structure (bone hierarchy)
  • vertexgroup definitions (weighted assignment of vertices to bones)
  • animations stored in channels (can be quaternion and/or position bezier curves)

The skinning and lighting is done entirely within the vertex and fragment shaders. Just the pose matrices are calculated in JavaScript – they are then passed to the shader where the actual skinning takes place.