GLSL Syntax Highlighting in Visual Studio Express 2013

I have been working primarily with OpenGL and C++ recently. Like many people I discovered the wonderful world of shaders through websites like Shadertoy created by Inigo Quilez and GLSL Sandbox created by Ricardo Cabello aka Mr Doob. These websites and other similar websites use WebGL which is based on the OpenGL ES 2.0 standard, and naturally after becoming familiar with webGL it just makes sense to keep working with openGL.

I started to learn C++ only recently and the first thing I did was to download Visual Studio. Since I had no previous experience with C++, or programming for a windows environment or even programming on a modern computer for that matter…. I simply downloaded the latest version of visual studio which was 2013. I am not entirely sure of the differences between it and the older versions, I assume at least the more recent versions would be similar in many ways. Hopefully some of my advice will also apply to people using older versions, if not then I am sorry!

Something you notice immediately when trying to work with openGL shaders in Visual Studio is that there is no native support for openGL. Not surprising considering visual studio is a microsoft product and DirectX is microsofts graphics API. So when it comes time to deal with GLSL language it can start to look a little messy.

One way to include a GLSL shader into your program is to store it as a string or character array. Although this works perfectly fine it is not a very elegant solution, you have to either try to work on your shader code in string or char array format within visual studios text editor, or keep a separate copy of the shader in a plain text format and convert it to a string or char array every time you make a change. The other way is to keep your shader permanently in a plain text file and make a small routine in your main program code to load and compile plain text shader files. This is a relatively easy thing to do and opens up more options for editing your shader code without having to worry about keeping it wrapped up in quotation marks and manually including line breaks and other such annoying things. It also means you can edit your shader code only and not have to recompile your entire program each time, you can even implement a way to recompile just the shaders within your program while it is running.

Now that we have made the decision to keep our GLSL shaders in plain text format the next problem is that there is no formatting or syntax highlighting for plain text in visual studio. There are two main solutions to this, either using an external text editor that offers support for GLSL language or using an extension or plugin for visual studio to do the same.

If the decision is made to use an external text editor then there of course are several options. One way would be to try and use one of the webGL shader editors, however the problem with this is they only support webGL standard and they generally only work with hard coded uniforms. So if you are making a shader that uses openGL features beyond version 2.0 or you are using your own specific inputs to send control parameters and textures to the shader then the online editors won’t be much use. The other option is to use a text editor that has GLSL support either built in or as a plugin. I have not personally looked into this much myself so far but it is something I plan to look at in the future. I do know there are text editors such as Sublime Text and Notepad++ for which there are plugins available that offer GLSL syntax highlighting.

But what if we want to work entirely in the visual studio environment and not have to rely on external editors? Well if you are lucky enough to have visual studio professional or better there are extensions available to enable support for various shader languages. The best example I am aware of for this is NShader created by Alexandre Mutel (another demoscener).

But what if we are using Visual Studio Express version? Many amateur or hobby programmers like myself can’t justify the expense of the professional visual studio versions, and hey the express version does almost everything you need and it is free! One thing you can’t do with express is use extensions or plugins, which means we are very limited in features which are not supported by default. I will now show you my solution to GLSL support in Visual Studio Express 2013 even though it is by no means perfect.

The first thing you want to do is give your plain text shader code files an extension which identifies them as shader code. Really these can be anything you want but some commonly used ones for GLSL which are recognised in other software are .glsl .frag .vert for example.

The next step is to go to the Tools menu in visual studio then select Options. In the options window we want to go to Text Editor then choose File Extensions. Now what you want to do is add any file extension that you wish to be associated with GLSL code. Type the name into the Extension box then select Microsoft Visual C++ as the editor to be used with those file types and hit apply.

 

Now hit ok and restart visual studio. You should now some basic formatting for your shader files based on C++ language. This means you get indenting and bracket handling which means you can use automatic document formatting (Edit menu -> Advanced -> Format Document) and you will also have highlighting of comments and keywords which are common between the languages such as if, then, while, return, void, float, etc…

This instantly makes your shader code much easier to read and work on but we can go a little bit further and add support for GLSL specific syntax. It is possible even in Visual Studio Express to add basic user defined syntax highlighting. I made a list of GLSL shader specific keywords to highlight, it is by no means complete or up to date since I could not find a complete list anywhere on the internet when I looked. It is in fact a compilation from several sources that I found, however it should cover the most common keywords and of course it is easy to add your own. If you do manage to improve the list then let me know!

My GLSL keywords can be found here. Follow the link and copy the entire text then paste it into a new plain text file on your computer and save it as “usertype.dat”. You then need to copy this file to the visual studio IDE directory, for VS2013 in most cases this can be found at “C:/Program Files (x86)/Microsoft Visual Studio 12.0/Common7/IDE”. If you have trouble finding where your usertype.dat file needs to go you can refer to the documentation on the microsoft website about how to define your own keywords in visual studio.

Once you have made your usertype.dat file and put it in the correct directory you need to start up visual studio or restart it if it is already open. Again go to the Tools menu and select Options, now you want to look at the Environments tab and select Fonts and Colors. You need to look at the settings for Text Editor (which should be the default selection) then you need to scroll through the Display Items until you find “C/C++ User Keywords”. Here you can change the font, size and colour for all the user defined keywords which were added in the usertype.dat file.

Of course it is personal preference how you want your keywords to look but personally I chose a red colour which contrasts with all the default colours and makes it easy to see when you are looking at GLSL syntax. If you don’t like the contrast between the custom GLSL keywords and the default C/C++ keywords then simply leave the User Keywords colour as the default blue.

It’s not perfect, you do get basic formatting but it lacks intelligent syntax highlighting and of course has no semantic checking etc.. but it is much nicer to look at and far more readable than a wall of plain white text. As far as I can tell it is the best solution available for the Express versions of Visual Studio.

I hope this helps some people out. If there are any mistakes or improvements please let me know!