WebGL Glow Effect Overview Tutorial

Sphere with Glowing Earth Map

Introduction Glow Effect on Earth Example Earth Map and WebGL Earth Model JavaScript Initialize WebGL Properties Render the Scene Summary

Introduction

This tutorial briefly explains how to render a glow effect with WebGL. The 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 JavaScript doesn't have to change programs during rendering. Use of one shader usually speeds both development and rendering time. Just enable and disable the WebGL 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 WebGL blend functionality which generates the light glowing effect.

Spherical Earth Map

The following earth map was created by NASA. Seven Thunder Software modified the image with Photoshop. The 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 3D Translator app for display with WebGL. You may download the WebGL Earth Model with Earth Map.

Earth Map for Sphere

JavaScript WebGL Glow

The following JavaScript with WebGL source code 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'){
 this.viewGetWebGL();
}

// 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);

// Instantiate a
// new controller.

Create the Controller

Seven Thunder Software uses a controller class named GLControl, defined in the JavaScript file GLControl.js. Class GLControl initializes most of the WebGL examples on this Website. 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 computers. The e-book WebGL Textures & Vertices: Beginner's Guide explains class GLControl in detail. However the book's not necessary to apply WebGL blend functionality.

Most Web developers probably use their own routines or prepared libraries such as Three.js. 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;
}

};

Initialize WebGL Properties

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. Second pass gl.ONE as the source parameter and gl.ONE_MINUS_CONSTANT_COLOR as the destination parameter to the WebGL blendFunc(). The variable gl is a reference of WebGLContext.

//Enable blending.
gl.enable(
 gl.BLEND
);

// Semi transparent
// rendering.
gl.blendFunc(
 gl.ONE,
 gl.ONE_MINUS_CONSTANT_COLOR
);

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 e-book WebGL Scenes: Responsive Web Design explains class GLResponsive in detail. However the e-book's not necessary to understand how to apply the semi-transparent glow effect.

/**
 Responsive interactive Web design.
*/
var responsive = new GLResponsive(
 controller,null
);

if(responsive == null){
 controller.eDebug.innerHTML = "GLResponsive == null";
}
},

Error Messages

The following method displays an error message if WebGL isn't implemented within the current Web browser.

/**
 Display an error message
 if the Web browser
 can't render WebGL.
*/
viewGetWebGL:function(){
var cv= document.getElementById('cv');

cv.width = 0;
cv.height = 0;

var image = document.createElement("IMG");
image.src = "http://www.SevenThunderSoftware.com/assets/ss-gl-get.png";

image.onclick= function(){
 window.location='http://get.webgl.org';
};
image.className="ex";

var eGraphic = document.getElementById('eGraphic');

eGraphic.innerHTML = "Your browser might not support WebGL.<br/>";
eGraphic.innerHTML += "For more information see ";
eGraphic.innerHTML += "<a href='http://get.webgl.org' ";
eGraphic.innerHTML += "title='Determine browser support of WebGL'>";
eGraphic.innerHTML += "http://get.webgl.org</a>";

eGraphic.appendChild(image);
},

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 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 JavaScript doesn't need to change programs during rendering. Use of one shader usually speeds both development and rendering time. Just enable and disable the WebGL 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 WebGL blend functionality which generates the light glowing effect.

Have fun and love learning!

More WebGL Lighting Examples!

WebGL Scenes: Responsive Web Design Screen Shots
Copyright © 2015 Seven Thunder Software. All Rights Reserved.