WebGL Blending Tutorial

How to Use WebGL blendFunc()

Overview How to Use WebGL Blending Functions Free Visual Tools Description Create Translucent Visual Effect Links to Free Blending Tools Summary

Overview

This tutorial explains how to use Seven Thunder Software's free visual blending tools. Menus provide WebGL blending option selections. Each page displays a different set of graphics. The visual tool provides the opportunity to see how WebGL methods blend() and blendFunc() work with different graphical effects and parameters. Blend selections apply a number of algorithms to achieve different visual effects. The following section describes how to apply blending options in your own Web pages.

How to Use WebGL Blending Functions

The WebGL blendFunc() method blends the incoming source colors with values already in the frame buffer destination. In other words blendFunc() determines how to process color channels already rendered with color channels yet to render.

Blend example links at the botttom of the page have already implemented blend functionality. 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 WebGLContext.

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 source color channels are those values already rendered. The destination color channels are those values to render next.

gl.blendFunc(
 source,
 destination
);

Free Visual Tools Description

Links to Web pages at the bottom of this page include WebGL blending option menus. The menus on each Web page link 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 calls blendFunc() as follows.

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

Create the Translucent Effect

The bright translucent effect for the Star of David and Earth WebGL Glow Effect were generated with the following WebGL blend parameters.

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

Summary

This Web page links to visual tools for selecting WebGL blending options. Learn WebGL programming effects with this simple tool and tutorial. Blend selections apply a number of algorithms to achieve different effects. The tool enables you to see the difference with various blending options and graphics.

Hopefully you enjoy this free tool. Have fun and love learning!

Blend Examples: Visual Tools

Copyright © 2015 Seven Thunder Software. All Rights Reserved.