WebGL Glow Effect Overview Tutorial
Sphere with Glowing Earth Map
Introduction
This tutorial briefly explains how to render a glow effect with WebGL.
The WebGL Glow Effect
example applies an earth texture map to a sphere.
This particular visual effect has at least two advantages.
First there's no need to create special shaders.
Second there's no need change programs during rendering.
Use of one shader usually speeds both development and rendering time.
Just enable and disable blending with the WebGL API method, blendFunc().
The WebGL glow effect over the earth provides semi transparency with generalized lighting over the model. The effect is created with a blend function. The section titled, Initialize WebGL Properties, demonstrates assigning blend functionality to generate the effect.
Spherical Earth Map
The following earth map was created by NASA. Seven Thunder Software modified the image with Photoshop. he map is simply wrapped around a sphere.
The sphere was created in 3ds Max, exported as a Collada DAE file, then converted with
Seven Thunder Software's free 3D Translator
app, for display with WebGL.
JavaScript WebGL Glow
The following JavaScript demonstrates preparing the model for display with WebGL.
/**
* Create the sphere
* with texture map.
* @param s: String path to
* earthmap image.
*/
var GLGlow = function(s){
//Show an error message
//when WebGL's not
//supported.
if(typeof Float32Array == 'undefined'){
new GLControl(0,null,null,null);
return;
}
// Create a Sphere
// with interleaved
// vertices and texels.
// Texels wrap
// the earth map
// around the sphere.
var shapes = new Earth();
var aIm = new Array();
//Initialize the
//entity with earth texture.
var e = new GLEntity(s,0);
e.nOffset = Number(
shapes.aOffset[0]
);
e.matrix[14] = -2.0;
e.nCount = Number(
shapes.aCount[0]
);
aIm.push(e);
Create the Controller
Most WebGL examples, at Seven Thunder Software,
initialize vertices and texels with a controller class
named GLControl,
defined in the JavaScript file GLControl.js
.
GLControl uploads a vertex buffer object (VBO) with interleaved
vertices and texels, along with at least one texture.
The source code was prepared with optimization in mind. Most examples run on WebGL enabled low-end mobile devices, as well as high-end desktop computers.
The following listing creates a new GLControl reference.
Parameters include an array of interleaved vertices with texels, array of indices, array of entities and
a reference to the current project.
var controller = new GLControl
(
new Float32Array(
shapes.aVertices
),
new Uint16Array(
shapes.aIndices
),
aIm,
this
);
if(controller==null){
return;
}
};
Setup Blendng
The following short listing demonstrates how to enable
and assign the WebGL blend function.
Method blendFunc() creates
a glowing semi transparent effect.
First enable WebGL blending for any blend functionality you might want.
Second pass gl.ONE as the source parameter
and gl.ONE_MINUS_CONSTANT_COLOR as the destination
parameter, to the WebGL blendFunc(), for the glow effect.
The variable gl is a WebGLContext.
//Enable blending. gl.enable( gl.BLEND ); // Semi transparent // rendering. gl.blendFunc( gl.ONE, gl.ONE_MINUS_CONSTANT_COLOR );
The rest of this tutorial covers default initialization.
The key to creating the glow effect with blending was just covered.
Enable blending, then assign the blend function.
You can use whatever rendering method you prefer.
Everything will render with blending until you disable blending
with gl.disable(gl.BLEND);
Initialization
The following listing is the initialization routine applied to the WebGL Glow Effect over the earth.
GLGlow.prototype={
/**
Initialize features
for the spinning
glowing earth.
*/
init:function(controller){
var gl = controller.gl;
var glUtils = controller.glUtils = new GLUtils();
//Radians to rotate
//the earth.
controller.N_RAD = Number(0.05);
//Blue-black
//clear color.
gl.clearColor(
0.0,
0.0,
0.2,
1.0
);
//Setup approximately
//45 degree field of view.
glUtils.initFOV(
controller,
glUtils.PROGRAM_CONTROL,
glUtils.MATRIX_P45
);
// Prepare for
// smooth texture
// rendering.
gl.texParameteri
(
gl.TEXTURE_2D,
gl.TEXTURE_MIN_FILTER,
gl.LINEAR
);
gl.texParameteri
(
gl.TEXTURE_2D,
gl.TEXTURE_MAG_FILTER,
gl.LINEAR
);
//Enable blending.
gl.enable(
gl.BLEND
);
// Semi transparent
// rendering.
gl.blendFunc(
gl.ONE,
gl.ONE_MINUS_CONSTANT_COLOR
);
Class
GLResponsive responds to swipe and tap events
over the canvas. The globe rotates when you move your finger over the canvas.
However tap events weren't enabled for the Earth WebGL Glow Effect
example.
/**
Responsive interactive Web design.
*/
var responsive = new GLResponsive(
controller,null
);
if(responsive == null){
controller.eDebug.innerHTML = "GLResponsive == null";
}
},
Render The Scene
Last render the scene.
First clear the color and depth buffer.
Second render the scene interactively.
Class
glUtils method renderInteractiveXY(),
rotates the earth based on swipe motion over the canvas.
Method blendFunc() was assigned
and enabled during initialization. Therefore
WebGL displays the earth with semi transparency.
/**
Render the Scene.
*/
render:function(controller){
var eEarth = controller.aEntities[0];
var glUtils = controller.glUtils;
var gl = controller.gl;
gl.clear(
gl.COLOR_BUFFER_BIT|
gl.DEPTH_BUFFER_BIT
);
glUtils.renderInteractiveXY(
controller,eEarth
);
},
};
Summary
This tutorial briefly explained how to render a glow effect with WebGL.
The WebGL Glow Effect
example applies an earth texture map to a sphere.
This particular visual effect has at least two advantages.
First there's no need to create special shaders.
Second there's no need change programs during rendering.
Use of one shader usually speeds both development and rendering time.
Just enable and disable blending with the WebGL API method, blendFunc().
The WebGL glow effect over the earth provides semi transparency with generalized lighting over the model. The effect is created with a blend function. The section titled, Initialize WebGL Properties, demonstrated assigning blend functionality to generate the effect.
