Originally published on Medium, on Nov 09, 2018

The Book of Shaders is an online book that teaches you the basics of writing fragment shaders. Not only it is completely free, it also comes with a great online shader programming editor.

But, maybe you are like me and want to code along to examples in your favorite code editor (in my case Visual Studio Code) instead, or want to keep track of your learning progress by committing different versions of your code to a dedicated Git repository.

One small problem, since I am mainly a web/video game developer and usually use VS Code for HTML/CSS/JavaScript and C# coding, I didn’t have any syntax highlighting, formatting or preview capabilities for GLSL installed.

If you are in the same boat, let’s see how we can set things up and use our editor more efficiently.

Syntax Highlighting

Let’s start with syntax highlighting since it’s an easy win and it will let us differentiate between parts of our code.

Shader languages support extension is the one we will go with.

Format on Save

For this we can use the Clang-Format extension.

If you never used this extension (or clang-format tool itself) before, you will see this warning after the extension is activated.

In this case, if you are using npm, all you need to do is globally install the tool with npm install -g clang-format (don’t forget to sudo if you are on Mac OS).

If you don’t have npm installed, you can follow the alternative installation instructions here.

And now if you have VS Code’s Format on Save ability enabled, all you need to do is save your code.

Live Preview

Last but not least, you can install GLSL-Canvas to preview and debug your shader realtime

Another alternative to Glsl-Canvas is the Shadertoy extension, which does the same job but if you decide to follow along The Book of Shaders by using Shadertoy, be warned that it will not recognize the uniforms in the book,like u_vector, u_time etc. but will expect you to express them like they are written in Shader Toy itself like iTime, iMouse etc. You can find more information about the differences between uniforms here.

Thanks for reading, and let’s have some shader fun!