WebGL Glow Effect Overview Tutorial

Sphere with Glowing Earth Map

Introduction Glow Effect on Earth Example Earth Map and WebGL Earth Model JavaScript Setup Blendng Render the Scene Summary

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.

A number of initialization details were left out, to focus on the main topic. Most WebGL projects initialize as described in the WebGL e-book series. However information in this tutorial should apply to other WebGL projects, such as those that use Unity or three.js, as well.

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 the free WebGL 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 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);

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";
}
},

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 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.

Tags

learn to code, Web GL, 3D Programming, 3D Development, 3D Media, 3D Web, 3 D Websites, 3D Development, 3D Web Design, 3D Web Development, Web Development, free tutorials, online learning, learn coding, create 3D website, 3D Media, JavaScript, html5, html 5, Web GL, 3D rendering software, GLSL, 3D Graphics Engine, 3D rendering software, html tutorial, how to code, programming websites, learn computer programming, learn to code for free, learning coding, stem, 3D images, webgl simple example, webgl basics,
Learn 3D Programming Learn 3D Programming
Copyright © 2015 Seven Thunder Software. All Rights Reserved.