├── LICENSE └── README.md /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Iván Juárez Núñez 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # The art of the Shade 2 | 3 | ## About this list 4 | 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. 5 | 6 | ## Contents 7 | * [Tutorials](#tutorials) 8 | * [Sites](#sites) 9 | * [Editors](#editors) 10 | * [Articles](#articles) 11 | * [Books](#books) 12 | * [Tools](#tools) 13 | * [People](#people) 14 | 15 | ## Tutorials 16 | * [The book of Shaders](https://thebookofshaders.com/) - Gentle step-by-step guide through the abstract and complex universe of Fragment Shaders. 17 | * [ An introduction to Shader Art Coding](https://youtu.be/f4s1h2YETNY) - Video tutuorial showing the basics of creating art with shaders. 18 | * [CG from Scratch!](http://www.scratchapixel.com/lessons/3d-basic-rendering/introduction-to-shading/) - Learn Computer Graphics From. 19 | * [Tutorial inside Shadertoy](https://www.shadertoy.com/view/Md23DV) - Tutorial Series made inside Shadertoy GLSL editor 20 | * [Shader School](https://github.com/stackgl/shader-school) - A workshopper for GLSL shaders and graphics programming 21 | * [Shaders Chapter](http://antongerdelan.net/opengl/shaders.html) - Chapter that focuses on shaders with OpenGL 22 | * [TyphoonLabs](https://www.opengl.org/sdk/docs/tutorials/TyphoonLabs/) - 5 PDF chapters from Jacobo Rodriguez Villar that go from history to advanced topics. 23 | * [Shaders with lwjgl](https://github.com/mattdesl/lwjgl-basics/wiki/Shaders) - 6 brief but comprehensive lessons by Matt DesLauriers 24 | * [TutsPlus Series](https://gamedevelopment.tutsplus.com/categories/shaders) - A series of articles featuring implementations with WebGL and live code examples. 25 | * [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. 26 | 27 | ## Sites 28 | * [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. 29 | * [Stack.gl](http://stack.gl/) - Site that approaches Shaders from WebGL 30 | * [Reddit Beautiful Shaders](https://www.reddit.com/r/shaders/) - General discussion and showcase for shaders. 31 | * [Reddit Two Triangles](https://www.reddit.com/r/twotriangles/) - General discussion and showcase for shaders. 32 | 33 | ## Editors 34 | * [Shadertoy](http://shadertoy.com) - Build and share your best shaders with the world and get inspired. 35 | * [GLSL Sandbox](http://glslsandbox.com) - Fullscreen editor with preview as the background and galleries. 36 | * [GLSLbin](http://glslb.in) - A fragment shader sandbox. 37 | * [Vertex Shader Art](https://www.vertexshaderart.com) - Vertex shader's gallery and coding playground. 38 | * [ShaderFrog](https://shaderfrog.com/) - Design shaders without writing code. 39 | * [Babylon CYOS](https://cyos.babylonjs.com/) - Create Your Own Shader. 40 | * [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) 41 | * [Shdr](http://shdr.bkcore.com/) - An online ESSL (GLSL) shader editor, viewer and validator powered by WebGL. 42 | * [PixelShaders](http://pixelshaders.com/) - An Interactive Introduction to Graphics Programming. 43 | * [The Force](https://shawnlawson.github.io/The_Force/) - Open Source IDE by Shawn Lawson 44 | * [Kick.js Shader Editor](http://www.kickjs.org/tool/shader_editor/shader_editor.html) - Formal Tool the WebGL engine Kick.js 45 | * [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). 46 | * [KodeLife](https://hexler.net/kodelife) - Desktop and mobile GLSL real-time editor. 47 | * [Vertex Shader Art](https://www.vertexshaderart.com/) - Vertex Shader online gallery and editor. 48 | 49 | ## Articles 50 | * [Intro Three.js](https://www.airtightinteractive.com/2013/02/intro-to-pixel-shaders-in-three-js/) - Introduction to Shaders in Three.js 51 | * [Primer:Shaders](https://notes.underscorediscovery.com/shaders-a-primer/) - Brief and comprehensible introduction to shaders. 52 | * [WebGL Shaders Intro](https://gamedevelopment.tutsplus.com/tutorials/getting-started-in-webgl-part-1-introduction-to-shaders--cms-26208) - A fliendly introduction. 53 | * [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 54 | * [Color Correction](https://timseverien.com/posts/2020-06-19-colour-correction-with-webgl/) Great expanation about how colour manipulation works by Tim Severien 55 | * [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. 56 | 57 | ## Books 58 | ## Tools 59 | * [RenderDoc](https://renderdoc.org/builds) - Stand-alone graphics debugger. 60 | * [Shader Designer](https://www.opengl.org/sdk/tools/ShaderDesigner/) - TyphoonLabs' OpenGL Shader Designer 61 | * [Synthclipse](http://synthclipse.sourceforge.net/index.html) - Synthclipse is a GLSL shader prototyping tool. 62 | * [GLSLViewer](https://github.com/patriciogonzalezvivo/glslViewer) - Live GLSL coding render for MacOS and Linux. 63 | * [GLSLScene](https://github.com/jwurzer/glslScene) - Provides an environment for testing and developing GLSL shader programs (Windows). 64 | 65 | # Videos 66 | * [Greg Tatum](https://www.youtube.com/playlist?list=PLxaZqnd-OQM7Y0lfe7h2cjlQAm5O9_6UL) - 5 videos explaining how to implement lighting from scratch in WebGL. 67 | * [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) 68 | 69 | ## People 70 | * [Patricio Gonzales Vivo](http://patriciogonzalezvivo.com/) - Main contributor for the magnificent learning site "The book of shaders" 71 | * [Íñ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) 72 | * [Anatole Drupat (XT95)](http://www.aduprat.com/) - Recognized shader artist with a big trajectory [ST Profile](https://www.shadertoy.com/user/XT95) 73 | 74 | ## Related Lists 75 | * [awesome-webgl](https://github.com/sjfricke/awesome-webgl) - A curated list of awesome WebGL libraries, resources and much more. 76 | * [awesome-opengl](https://github.com/eug/awesome-opengl) - A curated list of awesome OpenGL libraries, debuggers and resources. 77 | * [awesome-computer-vision](https://github.com/jbhuang0604/awesome-computer-vision) - A curated list of awesome computer vision resources. 78 | * [awesome-vulkan](https://github.com/vinjn/awesome-vulkan) - A curated list of awesome Vulkan projects and ecosystem. 79 | * [gamedev](https://github.com/ellisonleao/magictools) - A awesome list about game development. 80 | * [graphics-resources](https://github.com/mattdesl/graphics-resources) - A list of graphic programming resources. 81 | 82 | --------------------------------------------------------------------------------