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
• Articles
• Books
• Tools
• People

Tutorials

• The book of Shaders - Gentle step-by-step guide through the abstract and complex universe of Fragment Shaders.
• CG from Scratch! - Learn Computer Graphics From.
• Tutorial inside Shadertoy - Tutorial Series made inside Shadertoy GLSL editor
• Shader School - A workshopper for GLSL shaders and graphics programming
• Shaders Chapter - Chapter that focuses on shaders with OpenGL
• TyphoonLabs - 5 PDF chapters from Jacobo Rodriguez Villar that go from history to advanced topics.
• Shaders with lwjgl - 6 brief but comprehensive lessons by Matt DesLauriers
• TutsPlus Series - A series of articles featuring implementations with WebGL and live code examples.
• 3D Game Shaders For Beginners - A step-by-step guide on how to implement SSAO, depth of field, lighting, normal mapping, and more for your 3D game.

Sites

• Khronos wiki reference - The official wiki that describes in a very formal way how GLSL works.
• Stack.gl - Site that approaches Shaders from WebGL
• Reddit Beautiful Shaders - General discussion and showcase for shaders.
• Reddit Two Triangles - General discussion and showcase for shaders.

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)!
• 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.

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

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

• Patricio Gonzales Vivo - Main contributor for the magnificent learning site "The book of shaders"
• Íñigo Quílez - Hardcore math applied to computer graphics, one of the best shader makers out there. ST Profile
• Anatole Drupat (XT95) - Recognized shader artist with a big trajectory ST Profile

Related Lists

• awesome-webgl - A curated list of awesome WebGL libraries, resources and much more.
• awesome-opengl - A curated list of awesome OpenGL libraries, debuggers and resources.
• awesome-computer-vision - A curated list of awesome computer vision resources.
• awesome-vulkan - A curated list of awesome Vulkan projects and ecosystem.
• gamedev - A awesome list about game development.
• graphics-resources - A list of graphic programming resources.