Using .frag and .vert (ESSL | GLSL) Files In WebGL For Syntax Highlighting

Image stolen from Geeks 3D

This is a quick tip for anyone who wants to include ESSL files in a WebGL based project with all the glories of syntax highlighting. I have only tested this on Sublime I’m sure this can work for any IDE.

Save shaders as .essl files:

shader.frag

As shown we’ve wrapped the ESSL code as a JavaScript template literal string. If you don’t like globals use const. I am using: Sublime GLSL to highlight ESSL syntax.

Source as HTML scripts to be executed as JavaScript:

We omit the type to execute as the default text/javascript.

Update the MIME type definition on the server:

Yep, you need a bit more than this one line

Use the variables defined in your .frag & .vert files!

Browser Support:

Support for template literal strings is solid with the exception of …Internet Explorer (How shocking)

Peace!