One expression of that mission is how we share expertise and experience throughout the office. We discuss tips and tricks as projects follow their natural course. We explore new tools and techniques when something new comes along and catches our attention. And when enough people are interested in a certain topic, we take turns leading workshops to help the whole team appreciate it. Some highlights over the years have been sessions on typography, React, Adobe tips & tricks, photography, and more.

Several people in the office recently expressed curiosity over how and when to use WebGL shaders. In a nutshell, shaders are special programs that work closely with your computer’s graphics hardware. For the web, WebGL is the standard for working with shaders, and most major browsers have come to support it in the past few years.

A couple of recent projects in which we’ve used shaders to represent data in finance + healthcare.

Because shaders work closely with your computer’s hardware, they are very powerful and are useful for image processing and rendering 3D shapes. On the downside, this makes them finicky in the way that — sigh — only computers can be finicky. Think specialized syntax and unfamiliar jargon, inflexible sequences of commands, and unreliable and unintelligible error messages. Like most programming languages, it makes sense once you get into it, but the standards largely grew out of the computer graphics community and aren’t immediately intuitive to newcomers.

All together, the steep learning curve can create strong barriers to entry, and also makes shaders a perfect subject for a workshop. Our internal audience can be tricky though — some of the Fathom crew spends their days up to the elbows in code, others dabble with the occasional project. Therefore, our workshops need to be multi-layered. For any given topic, we want to convey the high points without getting too bogged down in technicalities. For those who want to dive deeper, the details have to be accessible and clearly presented.

We decided the best approach would be to set up a bunch of examples that emphasize the different possibilities of shaders. The examples start simply (rendering images, changing textures), and slowly build to more interesting techniques (twisting shapes in space) and complex examples (representing data on a 3D globe). Furthermore, the code is set up to reward exploration: with just a few quick changes, new features can be revealed. During the workshops, everyone is encouraged to poke around to see what they can create with a few tweaks.

We initially created the examples as resources for our internal workshop, but have also decided to make them public. You can view the suite of examples here, but we encourage you to download the entire code base and tweak it on your own.