Home > Articles

  • Print
  • + Share This
From the author of Working with Image Effects

Working with Image Effects

We'll also use glfx.js (an image-effects library using WebGL) to apply various effects to our images. WebGL is a technology that brings 3D graphics to the browser; it's a hardware-accelerated graphics context that leverages the canvas tag. Like its desktop computing counterpart, OpenGL, WebGL allows you to interact directly with the graphics pipeline, using a specialized language called GLSL. Knowing the ins and outs of GLSL isn't pertinent to this task. You only need to know that GLSL shaders interact with the vertices and pixels in an image to create the desired effects.

glfx.js has a large number of filters that we can apply to images to control brightness, contrast, noise, and so forth. In this article, we'll use only a few of the filters; you can implement the others as an exercise on your own.

We begin our work by instantiating a canvas in code:

var canvas = fx.canvas();

fx.canvas creates a canvas object and wraps it with method calls for the filters provided by glfx.js.

  • + Share This
  • 🔖 Save To Your Account