WebGL Blending Tutorial

Learn to Use WebGL `blendFunc()`

Overview WebGL Blend Constants How to Use WebGL Blending Functions Create Translucent Visual Effect Lake & Flowers Photo Blend Texture Summary

Overview

This tutorial explains how to use the WebGL API method called, blendFunc(), for unique and useful visual effects. Method, blendFunc(), allows software developers to create special effects easily with source code. The following Web pages, WebGL Blending: Lake and Flowers, Colorful WebGL Blending, and Blend Textures with WebGL, include menus to modify blendFunc() parameters. Select options from the menus to see results based on various parameters. You can use the results in your own online projects.

Each example Web page displays a different set of graphics. Menus offer a visual tool which provides the opportunity to see how WebGL methods, blend() and blendFunc(), render different graphical effects based on changes to parameters. Blend parameters calculate effects with a number of algorithms to achieve different visual effects. Select WebGL blend constants to trigger processing of each effect.

WebGL Blend Constants

WebGL blending selections include the following constants:

GL_ONE,
GL_SRC_COLOR,
GL_DST_COLOR,
GL_DST_ALPHA, 
GL_SRC_ALPHA, 
GL_ONE_MINUS_SRC_ALPHA,
GL_ONE_MINUS_DST_ALPHA,
GL_ONE_MINUS_SRC_COLOR, 
GL_ONE_MINUS_DST_COLOR,
GL_CONSTANT_COLOR, 
GL_ONE_MINUS_CONSTANT_COLOR,
GL_CONSTANT_ALPHA, 
GL_ONE_MINUS_CONSTANT_ALPHA,
GL_SRC_ALPHA_SATURATE, 
GL_ZERO

A number of initialization details were left out, to focus on the main topic. Most WebGL projects initialize as described in Seven Thunder Software's Learn WebGL Series. However information in this tutorial should apply to other WebGL projects, such as those that use Unity or Three.js, as well.

The following section describes how to apply blending options in your own Web pages.

How to Use WebGL Blending Functions

The WebGL blendFunc() method mixes the incoming, source, colors with values already in the frame buffer, called the destination. In other words blendFunc() determines how to process color channels already rendered, with color channels yet to render. Copy source pixels over destination pixels. Let WebGL blend functionality mix source and destination pixels.

Color Channels

Color channels represent red, green, blue, and alpha values. Alpha values render as a range between opaque and transparent, depending on the alpha channel's values. Opaque values completely cover images, where they overlap. You can see through transparent areas. Alpha areas inbetween opaque and transparent are translucent.

Every pixel in a WebGL rendered frame includes at least red, green, and blue channels. The three hues combine to create one final color, per pixel. In fact, almost every digital image online displays red, green, blue, and optionally alpha channels, per pixel. WebGL's no exception. However WebGL blend functions combine two overlapping pixels at a time, based on various algorithms, to render an entire section to the display screen or framebuffer, with unique VFX.

To implement blend functions yourself, first enable blending with the WebGL enable() method. Pass the WebGL constant BLEND as follows. The variable gl represents a WebGLRenderingContext.

gl.enable(
 gl.BLEND
);

Second call the WebGL blendFunc() method. Parameters consist of two WebGL constants. The first constant modifies the source color channels. The second constant modifies the destination color channels. The destination color channels are those values already rendered. The source color channels are those values selected to render next, or over the previous rendered frame. The following short listing demonstrates calling blendFunc(). However replace parameters source and destination with WebGL Blend Constants, listed above.

gl.blendFunc(
 source,
 destination
);

Tap for Examples!

Free Visual Tools Description

Try Free Visual Tools which include WebGL blending tools listed here. Additional free tools allow you to see and determine how various other HTML5 and WebGL features work.

WebGL Blend Menus

The menus on the following Web page links, display the names of WebGL constants. For example select GL_SRC_ALPHA, from the source menu with GL_DST_COLOR, from the destination menu. Source code then calls blendFunc() with the following parameters.

gl.blendFunc(
 gl.GL_SRC_ALPHA,
 gl.gl.GL_DST_COLOR
);

Create the Translucent Effect

The Translucent Star of David initializes with a bright translucent special effect. The following WebGL blend parameters generate the visual effect.

gl.blendFunc(
 gl.ONE, 
 gl.ONE_MINUS_DST_COLOR
);

Lake & Flowers Photo Blend Texture

The following image displays the graphic used for the WebGL Blending : Lake and Flowers example. Tap the image to see the project. Gray and white checkers, in the following graphic, represent transparent areas. The graphic wraps horizontally around a cube. Select blend options, from the menus, to see flowers and the lake scene blend with unique special effects. Image areas mapped to portions of the cube in front, render as source graphics. Image areas mapped to portions of the cube behind, render as destination graphics. Optionally tap the rendered image to rotate the cube for a better view.

Tap for Example!

Shapes Texture Map Sides of Cube

Tap the image to see the shape textures project, which applies the following texture.

Tap for Example!

Studio Apartment Texture Maps a Cube

Tap the image to see the apartment project, which applies the following texture.

Tap for Example!

Texture Map

Tap the image to see the blend textures project which applies the following texture.

Tap for Example!

Shapes Texture Map Sides of Cube

Tap the image to see the shape textures project, which applies the following texture.

Tap for Example!

Summary

This tutorial explained how to use the WebGL API method called, blendFunc(), for unique and useful visual effects. Method, blendFunc(), allows software developers to create special effects easily with source code. The following Web pages, WebGL Blending: Lake and Flowers, Colorful WebGL Blending, and Blend Textures with WebGL, include menus to modify blendFunc() parameters. Select options from the menus to see results based on various parameters. You can use the results in your own online projects.

WebGL blend constants include the following options:

GL_ONE,
GL_SRC_COLOR,
GL_DST_COLOR,
GL_DST_ALPHA, 
GL_SRC_ALPHA, 
GL_ONE_MINUS_SRC_ALPHA,
GL_ONE_MINUS_DST_ALPHA,
GL_ONE_MINUS_SRC_COLOR, 
GL_ONE_MINUS_DST_COLOR,
GL_CONSTANT_COLOR, 
GL_ONE_MINUS_CONSTANT_COLOR,
GL_CONSTANT_ALPHA, 
GL_ONE_MINUS_CONSTANT_ALPHA,
GL_SRC_ALPHA_SATURATE, 
GL_ZERO

Hopefully this tutorial helped you learn to code with WebGL blending features.