NeHe Lesson 11 – A Waving Texture

A Waving Texture


This post is  little more interesting than some of the earlier posts as it took me a couple of  tries to get it right. Initially, I patterned the code after the original NeHe implementation. I knew that would suffer from poor performance, which it did. I then tried realized the solution was to build a single vertex buffer object (VBO) in JavaScript and pass that to the GPU.  The VBO was created by three.js using a parametric surface mesh.

Initial Go

The first try simply replicated the original NeHe C++ code directly by building a grid in JavaScript and then updating all of those vertices  in JS and passing that mesh to the GPU.  This was of course thrashing the memory and choking the memory pathway to the GPU.

Using the Vertex Buffer

Instead the solution was create a parametric surface by allocating a THREE.ParametricMesh.  The constructor takes a small callback (in JS) which returns a 3-element vector, which three.js uses to create the surface.  Those vectors are not used as-is, but are used to fill out a  VBO which is then passed to the GPU.  However, the JavaScript Mesh object has member variable (a uniform) that points to the VBO via a shader interface.  One can then update the vertices via that member variable. This updates the vertices in the VBO, which is all done on the GPU so it is very efficient.

Shader Implementation?

I looked at a shader-side implementation but, at least in WebGL this doesn’t seem possible.  It may be possible to in GL-4 to access adjacent vertex coordinates, but not in WebGL.  But the solution as-is works well.

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

NeHe Lessons 9 and 10 – A Blaze of Stars and The House of Sammy


This post is pretty simple. Lesson 9 is about masking textures. Pretty simple. You have a PNG and you want to use it for  masking, add some color and animate them on the screen. All basic functionality that three.js supports out of the box.

Lesson 10 is also very simple. It is about building a structure from some coordinates in a file. Back when this lesson was written, the “worlds” being built were very simple. Today of course the worlds are very complex ranging from relatively simple Unity worlds to productions that rival major motion pictures. But it was one of the NeHe lessons, so I included it.

However instead of the mud-styled picture of the original author, I used an image of our puppy, Sammy who was 4 months old at the time (weighing about 55 pounds). Sadly, Sammy was born under a bad sign and had several birth defects making his shoulders weak. Worse at the age of only 3 years old, he developed abdominal cancer and had to be put to sleep in January 2017. Poor guy, poor us. RIP Sammy.


One aspect of this lesson is the introduction of the GFX.Scene object.  This is a wrapper for the various basic objects in a three.js Scene.  Why bother one would wonder.  In a series of demos like the NeHe items, there is a LOT of boiler plate: allocating and initializing the scene itself, setting up the camera,  setting up the lights, adding stats, maybe some axes, etc. etc.  So I wrote an object that makes it pretty easy in a few lines to initialize all of that. As we go through the lessons will see some more functionality added (multiple cameras, etc.).

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

Forward into the Past!

NeHe and three.js

This is the first of a series of blogs on the implementation of the old NeHe demos in three.js. I’ll try to cover 2 or 3 of them a week, but there are 48 of them so it will take a while.

I got started with 3D a long time ago. Back in the days when OpenGL was just starting. Support was terrible. The hardware was all over the place, mainly proprietary. The APIs varied from platform to platform. The only part that was consistent was the inconsistency. But when you got something to work it was cool! So we persevered. Jeff Molokee therefore came up with a series of demos called NeHe on I was buried in writing PostScript interpreters in those days, but it was fun to read what others were doing and dabble a little on the side.

The Evolution of OpenGL

Fast forward to the present day (mostly anyway) and here comes OpenGL 3, then 4 and then WebGL. As it happens, I was doing a bunch of JavaScript in conjunction with Readium and EPUB, so the new WebGL and an open-source effort called three.js by mrdoob (Ricardo Cabello) was very interesting. I dabbled with it a little and ran across an effort by Johannes Raida where he was porting the NeHe demos to three.js. I thought that was kind of cool so I pitched in. As it turned out, Johannes got pulled into other work and ended up stopping after the first 8 demoes. As often happens with me, I got the bit in my teeth and couldn’t stop. I have now done all 48 of the demos. Well, 40 of them. The other 8 are not interesting for various reasons (obsolete, not relevant, etc.).

The first 8 NeHe Demos

Here are the first 8, mainly done by Johannes – These first ones are pretty straightforward ports. A few were trivial since three.js did all the heavy lifting, but some were more interesting. I’ll talk about some of the more interesting parts in subsequent blogs.

The Lessons

1 – Getting Started
2 – Your First Shapes
3 – Adding Some Color
4 – Adding Some Depth
5 – Putting It in Motion
6 – Using Textures
7 – Introduction to Filters
8 – Introduction to Blending

Any comments or feedback is welcome!

All the sources for the demos can be found on github here. I can be reached at or you can comment on the article directly.

Graphics explorations: three.js, WebGL and Digital Publishing


This is the first blog from my new site (host). The intent is to provide some outlines of the wacky graphics explorations (WebGL, three.js) I have been trying out. During the day I manage a large open-source project ( and do some consulting in digital publishing. Not much scope for playing with graphics. At the same time, in the distant past I was a university professor, specializing in hydrology, permafrost and GIS. Don’t do much of that anymore either… 🙂 So I spend my spare time playing with scientific visualization of some of my experiments (when I am not in my woodshop). My website is here, my github account here, and my LinkedIn profile here.


The intent of the blog is to provide some color and explanations of the details, motivations and experience in some of the graphics and digital publishing explorations I have been doing. On my website Geo-F/X I’ll post the result of my explorations on my website. Here in the blog I’ll look at and discuss how and why they came to be.

Three.js and NeHe

I’ll start out the blogs with a recent project of mine, implementing the legacy NeHe demos with three.js and WebGL. I did a lot of work in OpenGL at one point, back in the early days of OpenGL (when little worked correctly) and the NeHe demos were nice cool intros. I was busy writing PostScript interpreters (for Eicon and QMS) so OpenGL was just a hobby. More recently, after a number of excursions (GIS, SVG, working at Adobe then eBooks and digital publishing, I decided to look into WebGL as the browser support was getting pretty good.

I came across three.js and it looked cool, so I decided to amuse myself by implementing the NeHe demos in three.js. Turned out to be more work than I expected, but the code is all done and most of the “tutorials” are as well. Hope to complete them very soon. In the meantime, I am going to start blogging about the first couple of dozen which are all done. You can see the results here and the sources are on Github here.

Feel free to contact me at or comment on this article directly.