WebGL API description

Apr 12 2011 12:26
Tags: webgl 3d

In this post we are going to dive more deeply into the WebGL library methods that are included in the LimeJS WebGL branch. Those methods are used while making the lime.Renderer.WEBGL renderer and are available for developers to create custom WebGL games.

What it is about:

  • Cleaned up workflow. No more multiline inlining shaders.
  • Object oriented API. C style turned into JavaScript style.
  • Complete handling of format conversions. No need to convert something to another format before sending to WebGL.
  • Debugging support. Get error messages for invalid inputs, instead of black screen.
  • Make it easier to work with big models.
  • Math utility helpers
  • Getting out of your way and letting you concentrate on your shaders.

What it’s not about:

  • A simplified or alternative way of making 3D
  • A higher level abstraction layer.
  • You still have to know how OpenGL works. You just have to code less and get your work done quicker.
  • If you need a Closure port of something like three.js of GLGE this is not it.

The API:

lime.webgl.GLController

GLController is front controller object for your 3D Canvas context. You can use controller object for storing data you need persistent for your context. It also provides method for resizing the viewport. Only real reason for this class existence is that we don’t want to modify the context object itself.

Static Methods:

  • GLController.forCanvas(element) - returns GLController instance for Canvas element. Always returns same object for same element.

Methods:

  • getSize() - get current canvas and viewport size.
  • setSize(size) - resize canvas to new values and also resize WebGL viewport to same size.
  • makeProgram() - Return new Program object for the context.
 
1
2
3
4
var glc = lime.webgl.GLController.forCanvas('mycanvas'),
    gl = glc.gl;

glc.setSize(480,320);

lime.webgl.Program

Program connects the shaders to your code. You use it to initialize your shaders, set shaders properties and draw. Program object accepts data in almost any reasonable form and converts between formats if necessary. When you pass in data in wrong format it will let you know about the error and …

WebGL is coming

Mar 30 2011 15:24

WebGL is a new open technology for building HTML5 games. I enables developers access to lower level graphics APIs allowing high performance and 3D transformations. All fully hardware accelerated. WebGL is based on OpenGLES 2.0 and it basically works in three steps. First you write small shader programs and send them to be run on your graphics card. Then combine your vertex/color/texture/etc data to the data buffers and send the buffers to the graphics card. And finally tell your graphics card to draw the data inside the buffers using the shader programs. Good introduction to OpenGL ES 2.0 can be found from Jeff LaMarche blog. Luckily you don’t have to know everything about WebGL to use it in LimeJS. The WebGL renderer can be used as a simple on/off switch with no further knowledge needed. As an extra we will include Closure Library style WebGL framework methods that we use for writing the renderer so you can use it for your custom WebGL related work.

You can follow along WebGL related development in the WebGL branch on Github. Its not in any way stable or feature complete at the moment but may be interesting for you to follow along when features appear. This also means that we are very open to suggestions about all aspects what it should do, what it should not and how it should be implemented. As there is no features yet marked ready there is a very good change your own idea can make into it.

The main benefit WebGL gives is …