Learning WebGL

<< Lesson 14
Welcome to my number fifteen in my series of WebGL tutorials! In it, we’ll take a look specular maps, which give your scenes greater realism by making it easy to specify how reflective an object is at every point on its surface, just as normal textures allow you to specify its detailed [...]

<< Lesson 13Lesson 15 >>
Welcome to my number fourteen in my series of WebGL tutorials! In it, we’ll introduce the last bit of the Phong reflection model that we introduced in lesson 7: specular highlights; the “glints” on a shiny surface, which make a scene look that little bit more realistic.
Here’s what the lesson [...]

<< Lesson 12Lesson 14 >>
Welcome to my number thirteen in my series of WebGL tutorials! In it, we’ll cover per-fragment lighting, which is harder work for the graphics card than the per-vertex lighting we’ve been doing so far, but gives much more realistic results. We’ll also look at how you can switch the [...]

<< Lesson 11Lesson 13 >>
Welcome to my number twelve in my series of WebGL tutorials, the second one that isn’t based on the NeHe OpenGL tutorials. In it, we’ll go through point lighting, which is pretty simple, but is important and will lead on to interesting things later. Point lighting, as you might [...]

<< Lesson 10Lesson 12 >>
Welcome to my number eleven in my series of WebGL tutorials, the first one that isn’t based on the NeHe OpenGL tutorials. In it, we’ll show a texture-mapped sphere with directional lighting, which the viewer can spin around using the mouse.
Here’s what the lesson looks like when run on a [...]

<< Lesson 9Lesson 11 >>
Welcome to my number ten in my series of WebGL tutorials, based on number 10 in the NeHe OpenGL tutorials. In it, we’ll load up a 3D scene from a file (meaning that we could easily switch the file out and extend the demo), and write some simple code so [...]

<< Lesson 8Lesson 10 >>
Welcome to my number nine in my series of WebGL tutorials, based on number 9 in the NeHe OpenGL tutorials. In it, we’ll use JavaScript objects so that we can have a number of independently-animated objects in our 3d scene. We’ll also touch on how to change the colour [...]

<< Lesson 7Lesson 9 >>
Welcome to my number eight in my series of WebGL tutorials, based on number 8 in the NeHe OpenGL tutorials. In it, we’ll go over blending, and as a useful side-effect run through roughly how the depth buffer works.
Here’s what the lesson looks like when run on a browser that [...]

<< Lesson 6Lesson 8 >>
Welcome to my number seven in my series of WebGL tutorials, based on the part of number 7 in the NeHe OpenGL tutorials that I didn’t go over in lesson 6. In it, we’ll go over how you add simple lighting to your WebGL pages; this takes a bit more [...]

<< Lesson 5Lesson 7 >>
Welcome to my number six in my series of WebGL tutorials, based on part of number 7 in the NeHe OpenGL tutorials. In it, we’ll go over how you can make your WebGL page accept keyboard input, and we’ll use that to change the rate and direction of spin of [...]