I’m a graphics programmer working in the Games Industry. I’ve always found that well drawn diagrams are essential in explaining concepts to others but also in improving your own understanding. Topics such as lighting, shadows and BRDF equations would be extremely difficult to get across without pretty pictures!

While researching these topics, I found myself needing to draw the same diagrams over and over, or diagrams that shared many components, like lights, surfaces, BRDF lobes, etc. There are some excellent vector drawing packages out there (Corel DRAW being one!) but they don’t quite do the job.

How cool would it be if I could draw a ray and it automatically bounces around the scene a couple of times? How cool would it be if it drew a BRDF lobe at the intersection points? How cool would it be if I could visualize the light path of a point light? And how cool would it be if I could do all this on any machine, without having to install any software?

These and similar questions led me to start working on a Javascript and HTML5 canvas based implementation of some fairly basic components. Almost always my diagrams are in 2D because two dimensions are enough to get the concepts across and easier to understand than 3D.

The purpose of this blog is to document the development of a domain specific diagram creation tool, which will then be used to create diagrams explaining different concepts of rendering and graphics. Where possible I will try to make the diagrams interactive if it is meaningful to do so.

The work here is intended to complement the work done by the many talented authors, researchers and developers out there working on graphics and video games.

You can find most of the code for these diagrams on GitHub. You can also follow me on Twitter @Vassilis3D.