- Organizing the Application Files
- Skinning the Application
- Working with Image Effects
- Loading the Images
- Deployment
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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.