Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/vanrez-nez/awesome-glsl

:sparkler: Compilation of the best resources to learn programming OpenGL Shaders
https://github.com/vanrez-nez/awesome-glsl

List: awesome-glsl

computer-graphics creative-coding fragment-shader glsl glsl-shader graphics-programming html5 opengl vertex-shaders webgl

Last synced: about 2 months ago
JSON representation

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

Lists

README 

        
# 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.

* [ An introduction to Shader Art Coding](https://youtu.be/f4s1h2YETNY) - Video tutuorial showing the basics of creating art with 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

* [WebGL Image Processing](https://maximmcnair.com/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](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.