• Choose a category
• All
• Classic-Fiction

Shaders

Shaders are pieces of code that run directly on a graphics card. They describe how a scene—how you refer to a 3D canvas when working with WebGL—should be rendered. Many of these little programs perform mathematical transformations that would otherwise run very slowly in JavaScript. In fact, we are pointing these out because they are not JavaScript; they are written in a way that WebGL can understand. These sections of code will be read in like text files and passed to the graphics hardware. Full discussions of topics like shaders are far out of scope for this little section of the book, but we will tell you a bit about each one of them to help set the tone for what comes next.

The first shader below is a fragment shader, which tells the graphics card that we will be using floating-point numbers and blended colors. The second shader is the vertex shader. It works with the vertices (defined points in 3D space used to create 3D objects) and will be used for every vertex we draw onto the Canvas 3D context:

Testing for WebGL support with Modernizr

The structure of the code in this example is much like the other applications we have written in this book. However, it has been modified to work with the specific needs of the 3D context. In the canvasApp() function, we need to test to see whether the browser has WebGL support. This is easily accomplished by using the Modernizr.webgl static constant in Modernizr 1.6:

if ( !webglSupport()) {

alert("Unable to initialize WebGL");

return;

}

function webglSupport() {

return Modernizr.webgl;

}

Initialization in canvasApp()

In canvasApp() we still get a context, but this time it is the experimental-webgl context. Also, just like in our other apps, we still call drawScreen() on an interval to render the canvas:

var theCanvas = document.getElementById("canvasOne");

webGLContext = theCanvas.getContext("experimental-webgl");

setInterval(drawScreen, 33);

However, there is additional code in canvasApp() required to set up the application to rotate the cube. A couple of the most important initialization steps are the calls to initShaders() and initBuffers():

initShaders();

initBuffers();

The initShaders() function itself calls a function named getShader() to load in the text of the shader programs we have already defined. You can see the code for these functions in the code listing a bit later in Example 11-1.

NOTE

You can learn about the shaders used in this program in “Lesson 2—Adding colour” on the LearningWebGL website: http://learningwebgl.com/blog/?p=134.

Once we have loaded the shader programs, we need to create the buffers. Buffers refer to space in the video card’s memory that we set aside to hold the geometry describing our 3D objects. In our case, we need to create buffers to describe the cube we will rotate on the canvas. We do this in initBuffers().

The initBuffers() function contains a lot of code, but we’ll discuss only a couple very interesting sections. The first is the Vertex Position buffer, which describes the vertices that make up the sides of the cube:

webGLContext.bindBuffer(webGLContext.ARRAY_BUFFER, cubeVertexPositionBuffer);

vertices = [

// Front face

-1.0, -1.0, 1.0,

1.0, -1.0, 1.0,

1.0, 1.0, 1.0,

-1.0, 1.0, 1.0,

// Back face

-1.0, -1.0, -1.0,

-1.0, 1.0, -1.0,

1.0, 1.0, -1.0,

1.0, -1.0, -1.0,