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