index previous next

Introduction

• General view of WebGL 1.0
• A word about resources
• How it works? - quick peek how to display a triangle
• What are shaders?
• vertex shader
• fragment shader
• What is GLSL?

General view of WebGL 1.0

WebGL is a 3D graphics API heavily based upon OpenGL ES 2.0. They share most (all?) of the functions so knowing one of them is like knowing them both. Thus if you need to find something about WebGL and you cannot find it, try looking for the same thing inside OpenGL ES 2.0. Even WebGL 1.0 specification redirects you to OpenGL ES 2.0 specification when it comes to details.

A word about other resources

From the material, I higly recommend:

• OpenGL ES 2.0 Programming Guide by Aaftab Munshi, Dan Ginsburg and Dave Shreiner thanks to which I finally got it
• Fundamentals of Computer Graphics by Peter Shirley, Michael Ashikhmin and Steve Marschner for theory about used mathematics.
• http://www.khronos.org/webgl/ WebGL official webpage
• https://www.khronos.org/registry/webgl/specs/1.0/ is a specification of WebGL 1.0 on its creator's webpage
• http://learningwebgl.com can give you ideas how to use different features of WebGL

How it works?

Everything is displayed inside HTML5 Canvas element, from which you get a webgl context. This context is your gateway to using WebGL as it exposes all WebGL functions. Next you need to create some data to display - namely triangle vertices. Then you allocate buffer and put that triangle data inside this buffer. The buffer is a memory on your GPU.

Next step is to write shaders - vertex shader and fragment shader. You then mangle them together into shading program which will be used by your graphics card to display whatever it will get. As its input you plug in that buffer with vertices of the triangle.

Shaders ready, buffer plugged in - time to do the final drawing call. And thats it.

So summarizing:

1. Get webgl context from canvas
2. Create vertex data
3. Put data into GPU buffer
4. Create vertex shader
5. Create fragment shader
6. Create shading program from vertex and fragment shader
7. Plug in buffer into shading program
8. Draw

What are shaders?

Shaders are programs executed on your graphics card, responsible for processing vertices and additional data into pixels that are displayed on your screen. There are two types of them (in fact more, but we don't care).

Vertex shader

Responsible for processing vertices (you have read preconditions, right?). By doing this, objects can be moved inside world, rotated, squeezed etc. Any transformation that deals with shape or position is done here. You can of course choose not to do any transformations and just pass data further (as we will do).

Fragment shader

Responsible for computing color that the output pixel will have. If you need some lights, shades or reflections this is the place. Also textures are applied here.

Why this one is called a fragment shader and not a pixel shader?

It's output is a color that *may* be display if it will not be truncated or otherwise rejected eg. it's outside of the screen so nobody will see it anyway. That's why there is a distinction made. Pixel is a piece of image that is displayed on the screen. Fragment is a piece of image that perhaps will be displayed on the screen.

What is GLSL?

Full name of this one is OpenGL Shading Language and it is used for.. writing shaders. Its syntax is very C like with some flavour of vector data types and operations. It has some nasty limitations, at least in a version used with WebGL 1.0 (eg. no i=2*i expression for loop counter, no transform feedback, no 32bit float output image format, ...). But overall it's a very powerful thing if you know how to use it.

index previous next