/awesome-glsl

:sparkler: Compilation of the best resources to learn programming OpenGL Shaders

MIT LicenseMIT

The art of the Shade

About this list

The following is a compilation of the best resources I have found in my way to learn how to program the amazing GLSL. If you are planning to take shaders from a broader aproach you might find this compilation for webgl or this one for opengl more useful.

Contents

Tutorials

Sites

Editors

  • Shadertoy - Build and share your best shaders with the world and get inspired.
  • GLSL Sandbox - Fullscreen editor with preview as the background and galleries.
  • GLSLbin - A fragment shader sandbox.
  • Vertex Shader Art - Vertex shader's gallery and coding playground.
  • ShaderFrog - Design shaders without writing code.
  • Babylon CYOS - Create Your Own Shader.
  • Fragment - Desktop Application that utilizes GLSL and live coding to allow anyone to create spectacular imagery with math(s)! (No longer available)
  • Shdr - An online ESSL (GLSL) shader editor, viewer and validator powered by WebGL.
  • PixelShaders - An Interactive Introduction to Graphics Programming.
  • The Force - Open Source IDE by Shawn Lawson
  • Kick.js Shader Editor - Formal Tool the WebGL engine Kick.js
  • Shader Gif - ShaderGif is a free and open source home for art made with code. Make sure not to miss the gallery.
  • KodeLife - Desktop and mobile GLSL real-time editor.
  • Vertex Shader Art - Vertex Shader online gallery and editor.

Articles

  • Intro Three.js - Introduction to Shaders in Three.js
  • Primer:Shaders - Brief and comprehensible introduction to shaders.
  • WebGL Shaders Intro - A fliendly introduction.
  • Ray Marching Jamie Wong gives a great introduction to Ray Marching and Signed Distance Functions
  • Color Correction Great expanation about how colour manipulation works by Tim Severien
  • WebGL Image Processing - Covers a range of Image Processing algorithms in WebGL such as Color Correction, Blend Modes, Thresholding, Dithering, Convolution and Film Grain.

Books

Tools

  • RenderDoc - Stand-alone graphics debugger.
  • Shader Designer - TyphoonLabs' OpenGL Shader Designer
  • Synthclipse - Synthclipse is a GLSL shader prototyping tool.
  • GLSLViewer - Live GLSL coding render for MacOS and Linux.
  • GLSLScene - Provides an environment for testing and developing GLSL shader programs (Windows).

Videos

  • Greg Tatum - 5 videos explaining how to implement lighting from scratch in WebGL.
  • Steven Wittens - Full Stack Fest 2015: The Pixel Factory (Great visuals to gain insights into what's going on with concepts such as UV's, and Rastering)

People

Related Lists