Lesson 44 - 3D Lens Flare

 

Introduction

This final lesson (the last 4 NeHe lessons, 45-48 are irrelevant to WebGL) covers lens flare, which three.js again makes very easy. The lens flares are created by compositing one or more flare-like images onto the scene. It's a little more complex than that, but not much.

Initialization

The setup is very simple. We create a scene, same as usual but there is one additonal variable. We must pass the alpha enabled flag (alphaBuffer) when the renderer is created:

var gfxScene = new GFX.Scene( {
    cameraPos : [-13, 10, 30],
    alphaBuffer: true,
    defaultLights: false,
    controls:true,
    clearColor:0x4444aa,
    shadowMapEnabled:true,
    displayStats: true
});

gfxScene.addLight( 'ambient', { color:0x1c1c1c, intensity : 1 });
gfxScene.addLight( 'directional', { color:0xffffff, intensity:0.75,  position:[-40,60,10],
    castShadow:true  });

In the initDemo function we simply allocate a large plane (and cover it with grass), add a mysterious black monolith with dancing icosahedrons. All the real work is done in addFlare.

The Flare

Using the Flare object is very simple. First one allocates the light which is supposed to be creating the flare on your lens:

var flareLight = new THREE.DirectionalLight(0xffffff);
flareLight.position.set(30, 20, -1000);
flareLight.target = plane;
flareLight.distance = 0;

gfxScene.add(flareLight);

Then load the images which are going to be blended into the scene to simulate the lens flare and set the color of the flare.

var textureFlare0 = THREE.ImageUtils.loadTexture("images/lensflare0.png");
var textureFlare3 = THREE.ImageUtils.loadTexture("images/lensflare3.png");
var flareColor = new THREE.Color(0xffaacc);

The first flare image looks like this:


lens flare


The other flare image looks pure black at first, but if you look very closely you'll see that it isn't, threre is a very faint circular area of non-quite-black.

Then allocate the actual lens flare object using the first flare image as the texture.

var lensFlare = new THREE.LensFlare(textureFlare0, 350, 0.0, THREE.AdditiveBlending, flareColor);

Note that the second parameter is the size of the resulting flare (in pixels) while the third is the apparent distance from the position of the lens flare. It is set to 0 so the flare image will be composited right on the spot of the lens flare - which we will set at the same spot as the flare light we added before.

Then add some more flare images. The second parameter is the size of the flare and the third is the apparent distance from the flare's position.

lensFlare.add(textureFlare3, 60, 0.6, THREE.AdditiveBlending);
lensFlare.add(textureFlare3, 70, 0.7, THREE.AdditiveBlending);
lensFlare.add(textureFlare3, 120, 0.9, THREE.AdditiveBlending);
lensFlare.add(textureFlare3, 160, 1.1, THREE.AdditiveBlending)

Finally, we position the flare at the same location as the flare-light itself.

lensFlare.position.copy(flareLight.position);
gfxScene.add(lensFlare);

There's nothing new in the animate function, just animation of the dancing icosahedrons.

And that's it! Click on this link to see the actual rendered demo in all it's flaring glory!

As always, the original sources are on github here.



About Us | Contact Us | ©2017 Geo-F/X