The Reverend
Member
GM Version: GM:S 1.2+ | GMS 2
Target Platform: All
Download: N/A | Video Tutorial
Link | Playlist: https://www.youtube.com/playlist?list=PL0kTSdIvQNCNE-BDKOlYu628AalMmXy_P
Summary:
The series is mainly for hobby programmers who are new to shaders or struggle understanding shaders. I don't intend to just deliver finished shader code for you to implement or I'd just make a marketplace asset. Instead I want the viewers to understand shaders and then be able to create their own effects in the end. So this series is most likely going to be a bit slow paced for people who are really good at programming already or people who are really good at maths - or viewers who just want the code.
I will explain how the GPU works on a basic level and how to think in GLSL. After that I'll gradually, video for video, add more functions and tools to use by showing and explaining sample code. The first few videos will be very slow paced so everyone can keep up, but after that I'll speed up a (little) bit.
Currently I plan to release one video per week but I'm not sure how long I can keep that pace when the lessons get more complicated.
I'll also provide a base project file to import into GMS2 (not GM:S1 though) with a basic setup to test shaders more quickly by providing sliders for the test room. Although convenient, this base project is not absolutely necessary to follow the series:
Contents:
1. Shader Tutorial:
These videos cover pretty much every important function in shaders. Afterwards you should be able to create your own effects without too much trouble.
2. More shader effects:
The previous videos covered shader basics. From now on the videos will focus on specific effects.
3. Tutorials in preparation:
4. Planned (unsure yet):
5. Not covered:
Target Platform: All
Download: N/A | Video Tutorial
Link | Playlist: https://www.youtube.com/playlist?list=PL0kTSdIvQNCNE-BDKOlYu628AalMmXy_P
Summary:
The series is mainly for hobby programmers who are new to shaders or struggle understanding shaders. I don't intend to just deliver finished shader code for you to implement or I'd just make a marketplace asset. Instead I want the viewers to understand shaders and then be able to create their own effects in the end. So this series is most likely going to be a bit slow paced for people who are really good at programming already or people who are really good at maths - or viewers who just want the code.
I will explain how the GPU works on a basic level and how to think in GLSL. After that I'll gradually, video for video, add more functions and tools to use by showing and explaining sample code. The first few videos will be very slow paced so everyone can keep up, but after that I'll speed up a (little) bit.
Currently I plan to release one video per week but I'm not sure how long I can keep that pace when the lessons get more complicated.
I'll also provide a base project file to import into GMS2 (not GM:S1 though) with a basic setup to test shaders more quickly by providing sliders for the test room. Although convenient, this base project is not absolutely necessary to follow the series:
Contents:
- Shader Tutorial
- More shader effects
- Tutorials in preparation
- Planned (unsure yet)
- Not covered
1. Shader Tutorial:
These videos cover pretty much every important function in shaders. Afterwards you should be able to create your own effects without too much trouble.
- Primer: Introduction P1: Explaining the GPU Pipeline and GLSL basics
You will learn what the GPU does and how shaders are built.
- Primer: Introduction P2: Working with vectors in GLSL
You will learn how easy it is to work with vectors in GLSL. Vectors are extremely important to understand important since absolutely every shader works with them.
- Primer: Base Project
Aquick overview of the base project file for this tutorial series
- Primer: First simple shaders
A good starting point to explain a few important concepts about shaders.
- Colours: Brightness, Saturation, Gamma & Contrast
In many shaders you will need to understand brightness, saturation, gamma and contrast. An invaluable foundation for every shader programmer and a good opportunity to teach some more functions in GLSL.
- Colours: Duotoning
Time to exercise what we learned so far. Colours are so important in fragment shaders it's vital to know how they work by heart. And while learning that we'll again cover more functions in GLSL.
- Colours: Sin City Effect & Reading Shader form Other People
This is mainly about reading a shader written by someone else for another engine and even in another shader language.
- Colours: Day & Night cycle
The final 2 videos on colours in GLSL. Here we'll build a day and night cycle using GMS and GLSL.
- Repetition 1
A short video on the most important things learned so far for those who skipped several lessons with references to the videos a topic was taught.
- Coords: gl_FragCoord & in_Position
Finally it's time to learn about coordinate systems in GLSL.
Many shaders use coordinate systems for different reasons: To change shape, to distort, to change colour based on position in room, in view, on a texture. This video is all about understanding room space and view space.
- Introducing the new Base Project
I created a new base project file for more flexibility and more options. This video is a short introduction on what's new and how to use some of the new features.
- Coords: gl_FragCoord: Stans Coat (Monkey Island)
Now that we understand gl_FragCoord it's time to put that knowledge to use replicating the Stans Coat effect from Monkey Island.
- Coords: in_Position: Silhouette based on room position
Now that we understand in_Position we'll be able to create a shader based on room space.
- Coords: Vignette with texture coordinates
Time to learn the next coordinate system. Texture coordinates are used in many shaders be it to change colours in specific regions of the image like in a vignette or to distort the image like in a blur.
In this video we'll learn more about texture coordinates (uvs) and how to work with them.
- Coords: Vignette with corner id
Texture coordinates can be very difficult to handle. Sometimes you just want a coordinate system going from 0 to 1. That's where the coordinate system based on corner id comes in handy.
In this video we'll learn what corner ids are and how to use them.
- Blur a: Multiple Texture Samples
This video starts a set of videos where you learn to blur an image. The first version will be very simple but very inefficient. The following videos will build on that knowledge and code to make the blur shader more efficient and finally run full screen on a tablet.
- Blur b: Multiple Render Passes
The first improvement will be something maybe unexpected: The performance greatly increase if we send the image twice to the shader instead of once. A horizontal pass and a vertical pass.
- Blur c: Using the GPUs Linear Interpolation
This improvement is simple in concept and tricky in maths. The idea is instead of taking a sample at the center of a texel we can take a sample between texels and the GPU will blur with linear interpolation at no additional cost nearly doubling the speed to calculate the blur. The tricky part is where exactly to take the sample.
- Blur d: Blur further with scaling
This brings a tremendous final improvement in performance - but at a cost as we will see. By downscaling, blurring and upscaling again we get a huge speed boost but depending on the game we'll also get some nasty flickering pixels if we scale by too much.
- Blur e: Hardcoded blur
Up to here we used a shader capable of changing blur size and quality at any given time. Often you won't needed that flexibility. So to speed up the process we can use hardcoded values. In this video I'll show how to get those values.
- Repetition 2
A short video on the most important things learned since the first repetition video for those who skipped several lessons with references to the videos a topic was taught.
- Bloom 1: Multiple Textures in a Shader
Now that we learned about burring, We can finally create a shader that builds on that knowledge: The bloom or glow shader.
- From GLSL ES to HLSL 11
Before going on with improving the bloom shader we'll need to learn HLSL. This video will show the basics of HLSL for people who know some GLSL ES already.
- Bloom 2: Bloom per layer with multiple render targets (MRT)
Multiple render targets allows a shader to draw to two surfaces with one draw call. We'll use this to create a bloom effect where each layer gets it's own bloom uniforms.
2. More shader effects:
The previous videos covered shader basics. From now on the videos will focus on specific effects.
- Luma Mask: Dissolve Shader basics
How to use a luma mask to create a dissolve shader. This is the basic version. More features will be added in future videos.
- Luma Mask: uv remapping & vertex buffers
Ever wondered how the heck you can use v_vTexcoord to get samples from a second texture on a different mixed texture page? UV-remapping and vertex buffers to the rescue!
- Luma Mask: add a 2-coloured rim
Time to pimp our luma mask shader. In this video we're adding a solid 2-coloured rim.
- Luma Masks: coloured ramp
And another way to add more juice to the luma mask shader: adding a fire effect.
- Luma Masks: how to draw luma masks in gimp
Sounds simple but is kinda tricky. This video will help you avoid the mistakes I made.
- Distortions: tunnel distortion
A distortion shader turning a 2D image into the inside of a tunnel like the spinning tnnel in Castlevania IV. The distortion is based on maths.
- Distortions: magnifying glass 6 chromatic aberration
A distortion shader magnifying an image or surface and colour manipulation like chromatic aberration. This distortion is based on maths.
- Distortions: heat haze
A distortion shader to simulate heat haze. This shader uses a distortion map instead of maths.
- Distortions: Flag
A distortion shader to simulate a flag waving in the wind using a distortion map.
- Distortions: Flame
A distortion shader to simulate a flickering flame using a distortion map.
- Distortions: Side-Scroller Water
A distortion shader to simulate a fore-ground water surface with reflections, distortions and colouring.
- Distortions: Shockwave
A sprite based showckwave distortion effect. Means the shockwave doesn't ned to be a circle.
- Blender: Create normal maps for 2D games
Normal maps for 2D games always use a global coordinate system where the z-axis is pointing out of the view. This video explains how to create a normal map from a 3D mesh in that global coordinate system using blender.
- Recolouring: Gradient Maps
A very simple recolouring technique: gradient maps like in photoshop or gimp & co
- Recolouring: LUT Maps
A very versatile recolouring technique: LUT maps can be created in Photoshop & other image manipulation programs and are used to remap colours.
3. Tutorials in preparation:
- more distortion shaders & techniques
4. Planned (unsure yet):
- A collection of useful shaders like, glitches, holograms, normals, lighting and more - depending on how much time i got available and on my maths and tech limitations
5. Not covered:
- 3D-shaders
Simply because I don't know much about 3D and don't plan to learn it. - Manipulating vertex positions
Because GM Wolf has a great tutorial on that with a waving grass shader:
Last edited: