NeHe Lesson 19 – Particle Engines

Introduction to Particle Engines
Two particle engines in action

Two particle engines in action

This post is part of ongoing series on implementing the legacy NeHe lessons (originally done in C++ with OpenGL 1.x) using the three.js library. This post covers  Lesson 19, which covers particle engines.  Two implementations are discussed:

  • Using the three.js particle engine
  • Creating a custom particle engine which uses three.js

Particle engines are pretty cool. They allow you to do very cool effects from snow drops to flames to flocks of birds, Anything that is composed of groups of object that obey some rules.  There are many good implementations of particle engines using three.js, including implementations by three.js, Stemkoski  and squarefeet.

The three.js Particle Engine

The three.js implementation of a particle engine is fairly simplistic one.  For all that, there is a lot one can do with it.  The usage in this lesson is very simple, just some softly falling snowflakes. One aspect to note about the three.js implementation is that each “particle” is a sprite.  In three.js sprites are rendered as Canvas2D objects. So they are effectively parallel to the surface on which the 3D space is projected.  The result is that sprites are always “facing the camera” so you can’t have 3D objects as sprites.  The plus side of using sprites in this way is that the three.js implementation can handle VERY large numbers of particles before performance is significantly impacted.

A Custom Particle Engine in JavaScript

The second implementation is one I wrote just for this series.  It is not terribly sophisticated, but it does support 3D objects. In this case, little colored spheres being shot out of a cannon. The spheres then bounce and roll to the edge of a checkerboard, where they fall off  and fade away.

The physics of the cannon and the bouncing balls is crude, but it looks kind of cool (if I do say so myself). It serves to illustrate the basic principles, which is the goal. It also demonstrates how to manage a system with many objects without having to create and destroy objects all the time (thus wasting memory and performance).

The Lessons and Source

You can find the Lesson 19 at Geo-F/X here,    As always, the sources are on github here. Feel free to contact me at rkwright@geofx.com or comment on this article directly below.

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.

Quadrics
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 rkwright@geofx.com or comment on this article directly below.

NeHe Lessons 14 and 15 – Vector Fonts

Vector Font with Custom Shader

A Vector Font with Custom Shader

Introduction

This post is a “twofer” – it’s about vector fonts, but we cover them in two steps.  First, a simple vector font with solid colors (Lesson 14), then using a vector font and mapping a texture onto the font with a custom shader (Lesson15).  This is the first foray into shaders, but won’t be the last. So let’s take a look.

A Simple Vector Font

Using vector fonts with three.js is very simple:

  • Get a JSON-based vector font
  • Load the font with the three.js font-loader
  • Construct a FontGeometry, specifying a bunch of parameters
  • Create a mesh with the geometry and a material

Now let’s take a look at each of them.

Getting JSON-based Fonts

You can convert fonts to the necessary JSON format at facetype.js.  Facetype doesn’t provide any fonts – so you need to upload your fonts (in OpenType, TrueType or WOFF format) to the site and they will convert them to JSON so you can download them.

Getting fonts is easy.  There are many places to get “free” fonts.  You can go to  Google fonts (all of which are free of licensing) or Fonts101.com.   Do not simply upload the fonts on your system as most of those are protected fonts which, though they might be converted by facetype, are protected fonts in the sense that the font foundries (.g. MonoType, Adobe, etc.)  have invested a LOT of time and money in them and they are licensed to your system – not you. So go get some free fonts.

Loading the Font

Loading the font is easy, as three.js provides a “font loader”.  See the lesson for more information.

Constructing a Font Geometry

Constructing a font geometry in three.js is pretty trivial.  Here is a typical call:

var loader = new THREE.FontLoader();
loader.load( fontName, function ( font ) {

    textGeom = new THREE.TextGeometry(text, {
        size: size,                    // actually the height of the font, in user-space
        height: height,                // THICKNESS of the extruded font, in user-space
        curveSegments: curveSegments,
        font: font,                    // the THREE.font object
        bevelThickness: bevelThickness,
        bevelSize: bevelSize,
        bevelEnabled: bevelEnabled
    });

    var textMaterial = new THREE.MeshFaceMaterial(materialArray);
    var textMesh = new THREE.Mesh(textGeom, textMaterial);
}

Note that the FontLoader takes the name of the font and calls back to the load() method when the font has been loaded.  Finally, three.js uses  the outline of the glyph (letter) as a shape and they extrudes it to form the 3D shape.

Note one misleading wackiness – what three.js calls the size of the font is the font height and what it calls the height is the thickness of the extruded font.

Then one creates a mesh with an array (the example above uses an array so the face and sides are different colors but that’s a detail.

Creating a Shader Material for the Font

Finally, the second example, Lesson 15, uses a custom shader to map two different textures onto the font.  Nothing spectacular here – about the most basic  shader one could create, but it does constitute and introduction to the world of shaders.  Lots more details in the lesson itself.

You can find the Lesson 14 at Geo-F/X here.   Lesson 15 is here.  As always, the sources are on github here. Feel free to contact me at rkwright@geofx.com or comment on this article directly.