Skip to main content Link Menu Expand (external link) Document Search Copy Copied

Learning the basics

To learn to learn the basics of shader editing I’ve listed the most useul ressources below:


VsCode + glslCanvas

If the ShaderToy interface is not doing it for you, you can easily set up VsCode to code shaders with the glslCanvas extension. It’s quite complete as it allows passing custom uniforms, and textures, and has a lot of useful features like a color picker. It only requires to be installed as a Vscode extension to work.

To display a shader, simply open the shader code file in VsCode and hit ctrl+shift+p and run the command “Show glslCanvas” which will create a new tab containing a WebGL render of your shader.

glslCanvas setup in VsCode

Online editors

Another option is online editors. There are a lot of them, I’ll list a few here.

  • ShaderToy Editor - by Inigo Quilez and Pol Jeremias. It’s probably the biggest and most active community. It’s a great way to get inspiration and feedback. Fragment shaders only
  • glslEditor - by Patricio Gonzalez Vivo, the same person who brought us glslCanvas and The Book of Shaders.
  • GLSL SANDBOX - Not as active as ShaderToy but has an interesting gallery of shaders. Fragment shaders only.
  • Shdr - allows for vertex and fragment shaders.
  • GSN Composer - A code and node system
  • Shader Factory - simple, it allows for vertex and fragment shaders, and texture input.
  • Shader Playground - Allows to manually set compilers

There are a bunch of them.


If you need a more complete approach that allows for vertex, geometry or compute shaders for example, you might want to use either an engine like Unity, a standalone editor. I know of only one: