:sparkler: Compilation of the best resources to learn programming OpenGL Shaders
# 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](https://en.wikipedia.org/wiki/OpenGL_Shading_Language). If you are planning to take shaders from a broader aproach you might find [this compilation for webgl](https://github.com/sjfricke/awesome-webgl) or [this one for opengl](https://github.com/eug/awesome-opengl) more useful.

## Contents
* [Tutorials](#tutorials)
* [Sites](#sites)
* [Editors](#editors)
* [Articles](#articles)
* [Books](#books)
* [Tools](#tools)
* [People](#people)

## Tutorials
* [The book of Shaders](https://thebookofshaders.com/) - Gentle step-by-step guide through the abstract and complex universe of Fragment Shaders.
* [CG from Scratch!](http://www.scratchapixel.com/lessons/3d-basic-rendering/introduction-to-shading/) - Learn Computer Graphics From.
* [Tutorial inside Shadertoy](https://www.shadertoy.com/view/Md23DV) - Tutorial Series made inside Shadertoy GLSL editor
* [Shader School](https://github.com/stackgl/shader-school) - A workshopper for GLSL shaders and graphics programming
* [Shaders Chapter](http://antongerdelan.net/opengl/shaders.html) - Chapter that focuses on shaders with OpenGL
* [TyphoonLabs](https://www.opengl.org/sdk/docs/tutorials/TyphoonLabs/) - 5 PDF chapters from Jacobo Rodriguez Villar that go from history to advanced topics.
* [Shaders with lwjgl](https://github.com/mattdesl/lwjgl-basics/wiki/Shaders) - 6 brief but comprehensive lessons by Matt DesLauriers
* [TutsPlus Series](https://gamedevelopment.tutsplus.com/categories/shaders) - A series of articles featuring implementations with WebGL and live code examples.
* [3D Game Shaders For Beginners](https://github.com/lettier/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](https://www.khronos.org/opengl/wiki/OpenGL_Shading_Language) - The official wiki that describes in a very formal way how GLSL works.
* [Stack.gl](http://stack.gl/) - Site that approaches Shaders from WebGL
* [Reddit Beautiful Shaders](https://www.reddit.com/r/shaders/) - General discussion and showcase for shaders.
* [Reddit Two Triangles](https://www.reddit.com/r/twotriangles/) - General discussion and showcase for shaders.

## Editors
* [Shadertoy](http://shadertoy.com) - Build and share your best shaders with the world and get inspired.
* [GLSL Sandbox](http://glslsandbox.com) - Fullscreen editor with preview as the background and galleries.
* [GLSLbin](http://glslb.in) - A fragment shader sandbox.
* [Vertex Shader Art](https://www.vertexshaderart.com) - Vertex shader's gallery and coding playground.
* [ShaderFrog](https://shaderfrog.com/) - Design shaders without writing code.
* [Babylon CYOS](https://cyos.babylonjs.com/) - Create Your Own Shader.
* [Fragment](http://www.syedrezaali.com/store/fragment-osx-app) - Desktop Application that utilizes GLSL and live coding to allow anyone to create spectacular imagery with math(s)! (No longer available)
* [Shdr](http://shdr.bkcore.com/) - An online ESSL (GLSL) shader editor, viewer and validator powered by WebGL.
* [PixelShaders](http://pixelshaders.com/) - An Interactive Introduction to Graphics Programming.
* [The Force](https://shawnlawson.github.io/The_Force/) - Open Source IDE by Shawn Lawson
* [Kick.js Shader Editor](http://www.kickjs.org/tool/shader_editor/shader_editor.html) - Formal Tool the WebGL engine Kick.js
* [Shader Gif](https://shadergif.com) - ShaderGif is a free and open source home for art made with code. Make sure not to miss the [gallery](https://shadergif.com/feed).
* [KodeLife](https://hexler.net/kodelife) - Desktop and mobile GLSL real-time editor.
* [Vertex Shader Art](https://www.vertexshaderart.com/) - Vertex Shader online gallery and editor.

## Articles
* [Intro Three.js](https://www.airtightinteractive.com/2013/02/intro-to-pixel-shaders-in-three-js/) - Introduction to Shaders in Three.js
* [Primer:Shaders](https://notes.underscorediscovery.com/shaders-a-primer/) - Brief and comprehensible introduction to shaders.
* [WebGL Shaders Intro](https://gamedevelopment.tutsplus.com/tutorials/getting-started-in-webgl-part-1-introduction-to-shaders--cms-26208) - A fliendly introduction.
* [Ray Marching](http://jamie-wong.com/2016/07/15/ray-marching-signed-distance-functions/) Jamie Wong gives a great introduction to Ray Marching and Signed Distance Functions
* [Color Correction](https://timseverien.com/posts/2020-06-19-colour-correction-with-webgl/) Great expanation about how colour manipulation works by Tim Severien

## Books
## Tools
* [RenderDoc](https://renderdoc.org/builds) - Stand-alone graphics debugger.
* [Shader Designer](https://www.opengl.org/sdk/tools/ShaderDesigner/) - TyphoonLabs' OpenGL Shader Designer
* [Synthclipse](http://synthclipse.sourceforge.net/index.html) - Synthclipse is a GLSL shader prototyping tool.
* [GLSLViewer](https://github.com/patriciogonzalezvivo/glslViewer) - Live GLSL coding render for MacOS and Linux.
* [GLSLScene](https://github.com/jwurzer/glslScene) - Provides an environment for testing and developing GLSL shader programs (Windows).

# Videos
* [Greg Tatum](https://www.youtube.com/playlist?list=PLxaZqnd-OQM7Y0lfe7h2cjlQAm5O9_6UL) - 5 videos explaining how to implement lighting from scratch in WebGL.
* [Steven Wittens](https://www.youtube.com/watch?v=4NkjLWAkYZ8) - 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](http://patriciogonzalezvivo.com/) - Main contributor for the magnificent learning site "The book of shaders"
* [Íñigo Quílez](http://iquilezles.org/index.html) - Hardcore math applied to computer graphics, one of the best shader makers out there. [ST Profile](https://www.shadertoy.com/user/iq)
* [Anatole Drupat (XT95)](http://www.aduprat.com/) - Recognized shader artist with a big trajectory [ST Profile](https://www.shadertoy.com/user/XT95)

## Related Lists
* [awesome-webgl](https://github.com/sjfricke/awesome-webgl) - A curated list of awesome WebGL libraries, resources and much more.
* [awesome-opengl](https://github.com/eug/awesome-opengl) - A curated list of awesome OpenGL libraries, debuggers and resources.
* [awesome-computer-vision](https://github.com/jbhuang0604/awesome-computer-vision) - A curated list of awesome computer vision resources.
* [awesome-vulkan](https://github.com/vinjn/awesome-vulkan) - A curated list of awesome Vulkan projects and ecosystem.
* [gamedev](https://github.com/ellisonleao/magictools) - A awesome list about game development.
* [graphics-resources](https://github.com/mattdesl/graphics-resources) - A list of graphic programming resources.

