Tag Archives: edge

RenderLoupe: the art and science of real-time computer graphics

I decided at some point in the last couple of weeks that I wanted to put together a site that would look at some of the real-time computer graphics gems that I’ve either created or come across in my work. RenderLoupe is the culmination of this desire.

Why “RenderLoupe”?  Well two reasons:

  1. To anyone knowledgeable about computer graphics, there’s an obvious play on words here with “render loop”.
  2. Since we’re going to be looking at things, and perhaps scrutinizing them, the idea of looking at things through a loupe really appealed to me.

To start off with, just to whet your appetite, I have links to a couple of sites that allow you to write GLSL in the browser:

  1. ShaderToy (a lot of times this is a very slow loading site, so be patient!)
  2. GLSL Sandbox Gallery

On ShaderToy, I wrote a couple of simple shaders to get started – if you’re interested in seeing “what is possible” in the browser, there are a lot of great examples.  The first one I wrote is an edge detection shader, which uses matrix convolutions, such as the Sobel kernel, to highlight places in the image where there is a significant change in luminance from one pixel to another.  I decided to include a number of other kernels as options.  The shader source is documented, so here you go:

Click on the image to see the “Real-time edge Detection” shader

I also wrote a shader that casts rays at a sphere in real time.  You can drag the mouse and the eye/viewpoint will update accordingly:

Click to see the “Simple sphere ray casting” shader (trace with no bounce)