WebGL Blending Tutorial

How to Use WebGL blendFunc()

Overview How to Use WebGL Blending Functions Free Visual Tools Description Create Translucent Visual Effect Lake & Flowers Photo Blend Texture Links to Free Blending Tools Summary

Overview

This tutorial explains how to use the WebGL blendFunc() for unique and useful effects, visually and 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 the results. You can use the results in your own online projects. WebGL blending selections 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
 

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

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 source color channels are those values already rendered. The destination color channels are those values selected to render next, or over the previous rendered frame.

gl.blendFunc(
 source,
 destination
);

Free Visual Tools Description

Links to Web pages, at the bottom of this page, include WebGL blending option menus. The free tools allow you see see how various blending options apply. The menus on each Web page, 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 Earth WebGL Glow Effect displays a bright translucent VFX. 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. Optionally tap the rendered image to rotate the cube for a better view.

Photographs Texture Map a Cube

Summary

This tutorial explained how to use the WebGL blendFunc() for unique and useful effects, visually and 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 the results. You can use the results in your own online projects. WebGL blending selections 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

Each 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 selections apply a number of algorithms to achieve different visual effects. This tutorial described how to apply blending options in your own Web pages.

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

Blend Examples: Visual Tools

Copyright © 2015 Seven Thunder Software. All Rights Reserved.