Hello WebGL source code

By Eric Grange / June 21, 2012

With SmartMS v1.0.1 out you can now use WebGL!

Download HelloWebGL.zip (51 kB), it contains the first demo (in .opp form and pre-compiled), as well as the initial WebGLScene units which you’ll have to copy to your “Libraries” folder (the WebGL import units should have been delivered in v1.0.1).

  • GLS.Vectors: contains vector manipulations types as well as a collection of helpers to operate on them.
  • GLS.Base: contains Pascal classes to simplify basic OpenGL tasks revolving around buffers and shaders.

 

Quick tour of the demo (or how to setup and use WebGL)

In TForm1.InitializeObject, the WebGL graphic & rendering contexts are created, this will be simplified and wrapped more neatly by a component in the future, currently it just piggybacks a TW3GraphicContext, but it stays rather simple:

canvas := TW3GraphicContext.Create(Self.Handle);

gl := JWebGLRenderingContext( canvas.Handle.getContext('experimental-webgl') );

rc := TGLRenderingContext.Create;
rc.GL := gl;

The TGLRenderingContext is a container class for the JWebGLRenderingContext that the other helper refer, it’s currently quite bare-bones.

In SetupScene, the OpenGL scene is initialized, it begins with classic OpenGL initialization code, which the above mentioned future component should take care off one day:

gl.clearColor(0.0, 0.0, 0.25, 1.0); // Set clear color to black, fully opaque
gl.clearDepth(1.0);                 // Clear everything
gl.enable(gl.DEPTH_TEST);           // Enable depth testing
gl.depthFunc(gl.LEQUAL);            // Near things obscure far things

Note that since gl is exposed by JWebGLRenderingContext as an external class, the function names are case-insensitive as usual in Pascal, you can follow the JavaScript case, but you don’t have to.

Then comes the raw geometry buffer, that uses a TGLArrayBuffer helper, f.i. for the triangle you’ve got

triangleBuffer := TGLArrayBuffer.Create(rc);
triangleBuffer.SetData([
    0.0,  1.0,  0.0,
   -1.0, -1.0,  0.0,
    1.0, -1.0,  0.0
   ], abuStatic);

abuStatic is to indicate a static buffer (can be abuStream or abuDynamic as well).
Next: Setting up the Shaders

Pages: 1 2

Related posts