in webgl-threejs

NeHe Lessons 16, 17 & 18: Fog, Texture Atlases and Quadrics

Introduction to Fog, Texture Atlases and Quadrics

This post is a continuation of the implementation of the legacy NeHe lessons (originally done in C++ with OpenGL 1.x) using the three.js library.  This lesson is a “three-fer” as I will quickly cover three NeHe lessons:

The reason for three at a time is that each of them is pretty simple as three.js does almost all the heavy lifting.  And there are more interesting lessons down the pike and I’d rather get to them sooner rather than later.

Foggy Bottom
Foggy Checkerboard

A foggy checkerboard in space

Lesson 16 is pretty simple as three.js does all the work and there aren’t a lot of parameters to manipulate. You can set the density of the fog and the color and that’s about it. Not to exciting.  Note that we will also touch on volumetric fog later in Lesson 41.

Texture Atlases
A textured cube

A texture atlas cube

Texture atlases are rather more interesting because they involve texture coordinate mapping, which can be very useful for mapping complex textures onto various shapes.  The example in this case is very simple:  6 different textures, one for each face of the cube.  This is pretty simplistic use-case but it serves to illustrate the basic principles.

A torus knot quadric

A textured torus knot quadric

Quadrics are well-handled in three.js so the lesson largely consists of a large switch statement allowing the user to switch between the various types of quadrics and see how different textures get mapped onto them.  As you’ll see if you view the demo, sometimes the mapping of the textures onto the quadrics is good and other times it is very primitive, resulting in rather strange results.  If you spelunk around in stackoverflow you can find some posts there (notably by westlangley)  that explain how to do a better job of mapping textures onto some of the quadrics (and other shapes).

The Lessons and Source

You can find the Lesson 16 at Geo-F/X here,   Lesson 17  here and Lesson 18 here.  As always, the sources are on github here. Feel free to contact me at or comment on this article directly below.

Write a Comment