Chapter Overview:
This chapter explains the <canvas> element and the core functions of WebGL by taking
you, step-by-step, through the construction of several example programs. Each example
is written in JavaScript and uses WebGL to display and interact with a simple shape on
a web page. The example WebGL programs will highlight some key points, including:
(1) how WebGL uses the <canvas> element object and how to draw on it; (2) the linkage
between HTML and WebGL using JavaScript; (3) simple WebGL drawing functions; and
(4) the role of shader programs within WebGL.
2.2 HelloPoint1 - read note below if you have problems with this
2.3 HelloPoint2
2.4 ClickedPoints
2.5 ColoredPoints
Note: Even if your browser displays WebGL, HelloPoint1 and the other examples in this chapter may not work correctly with all Graphics board/Browser combination - for example AMD (ATI) boards and Firefox. It is the first example of the functionality of shaders and it doesn’t use an attribute variable described later in Chapter 2. For some reason, perhaps due to optimizations by the shader compiler, the sample program displays nothing on certain boards. In actual application development, this is no problem because you always use the variable attribute – as do the rest of the examples in the book.
If you don't seen anything displayed for these examples (other than the black blank canvas) then please try the examples in chapter 3 before assuming you need to buy a new graphics card :-)