This category lists image processing tutorials that provide WebGL source code. The WebGL library provides highly efficient interaction with 2D and 3D images in a web browser. This makes it possible to create advanced graphics algorithms without the need for plugins.
Convolution is a mathematical operation that is an essential part of digital signal processing and computer vision algorithms. This guide will look at what convolution is and how to use it in computer graphics and signal processing. The tutorial provides short examples and code snippets in various programming languages such as: JavaScript, WebGL, C++ and …
This article looks at various algorithms by which we can convert an RGB image to grayscale color. Gray color space is a common image representation that finds application in many graphics tools and tasks. What is the meaning of grayscale image? In computer graphics, a grayscale image contains single component pixels that represent the amount …
This sample source code below shows how to implement Gaussian blur filter in OpenGL (WebGL) shading language. This is a popular algorithm in computer graphics that results in a blurry image. Source Code The GL shader code below implements a separable convolution that we can use for a Gaussian filter image blur effect. The GSLS …
In this article we will describe how to implement a pretty fast image edge detector using OpenGL shader code. Edge detection is a major task in many image processing algorithms and is great if we can get it to work quickly and optimally. As mentioned in our previous articles, we can make Sobel operator online …
A common task in image analysis and recognition is the peak detection. n this article, we will discuss GL shader code, which finds peaks quickly in a 2D array/image. What is peak detection and why we do it? Algorithms such as Hough transform and Harris corners detection often require post-processing to isolate the dominant regions …
In this post, we implement a simple but fast algorithm for image blur filter with WebGL / OpenGL. The GL shader code in this article implements the average or box smoothing using GPU parallel processing. This filter is one of the easiest to understand and apply, but despite this fact it is a good choice …