in webgl-threejs

Forward into the Past!

Spinning NeHe Cube

The infamous spinning NeHe cube!

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 gamedev.net. 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 rkwright@geofx.com or you can comment on the article directly.

Write a Comment

Comment