Don't underestimate the effectiveness of a simple shader like the chromatic aberration effect! Couple this with some other effects and you can implement very nice feedback to the player! I played Soma not too long ago, and they used chromatic aberration to clue the player in on how damaged the player character is - rather than relying on a health bar. Very cool! Thanks for the tutorial!
Fun fact: The human eye doesn't see r,g,b the same way with the same intensity. To get nice "gray" don't take the average by dividing by 3 but use a different measure for each color this way 0.3, 0.59, 0.11 lerp(c.rgb, dot(c.rgb, float3(0.3, 0.59, 0.11)), 1);
This is the new way to get the grayscale shader to work - notice the removal of the f in code below (I suspect this'll work in godot 4 as well) ``` shader_type canvas_item; void fragment(){ vec4 bg = texture(SCREEN_TEXTURE, SCREEN_UV); float avg = (bg.r + bg.g + bg.b) /3.0; COLOR = vec4(avg, avg, avg, 1.0); } ```
This isn't really a chromatic aberration. Chromatic aberration is a radial effect, since it's caused by the curvature of the camera lens's edge. It's more like a RED/CYAN channels offset effect there. I should share my chromatic aberration filter :o
@@BramwellWilliams Slapping CanvasLayer AND ColorRect did the job! 3 hours later first LSD-ish filter has juiced up my game nicely. This definitely goes into my Godot tutorials playlist
@@pojeby dude there's so much cool shit going on I love it! had a couple of playthroughs but couldn't spot the lsd filter sadly. I really like the text animations and the process of exploring in the dark great job on that lighting and shadows. I'd be tempted to add a fainter light around what the flashlight already gives off so it's not pitch black however i did find it quite cool using the gun to temporarily light up a room as well. additionally I'm on a big monitor , so the screen overlay didn't cover everything, I think that can be fixed in settings though: docs.godotengine.org/en/stable/tutorials/viewports/multiple_resolutions.html something like stretch mode 2d or view port. I appreciate at this point in development its probably not worth fixing compatibility issues when theres so much game you could be working on ~ please keep me posted on how this goes though I really like what you have going so far c:
very very awesome tutorials you have Bramwell. Thanks for sharing your knowledge. How do you make the grayscale adjustable? Suppose I wanted to transition to and from grayscale... how would I do that? I tried messing around the 3f and all it does is change the intensity of the grayscale effect.
Indeed! ColorRects have an option for whether or not they block mouse inputs, in the inspector there is a section called mouse, if you set the filter drop-down to be ignore then the layer with the shader won't eat your mouse inputs anymore :)
Fun fact: The human eye doesn't see r,g,b the same way with the same intensity. To get nice "gray" don't take the average by dividing by 3 but use a different measure for each color this way 0.3, 0.59, 0.11
@@loot6 I have an example I made with Unity but it should be similar to Godot Shader "Custom/GrayscaleBump" { Properties { _myDiffuse ("Diffuse Texture", 2D) = "white" {} _myBump ("Bump Texture", 2D) = "bump" {} _myBumpAmount ("Bump Amount", Range(0,10)) = 1 _GrayscaleAmount ("Grayscale Amount", Range (0, 1)) = 0.0 } SubShader { Tags { "RenderType"="Opaque" } LOD 200 CGPROGRAM
Don't underestimate the effectiveness of a simple shader like the chromatic aberration effect! Couple this with some other effects and you can implement very nice feedback to the player! I played Soma not too long ago, and they used chromatic aberration to clue the player in on how damaged the player character is - rather than relying on a health bar. Very cool! Thanks for the tutorial!
Thanks, that's the great intro to shaders! I was just wondering where and how to start learning shaders
Really glad to help! I found shaders very daunting at first but well worth the dive c: I highly recommend the Godot docs and the website bookofshaders
Fantastic! Keep making these please so helpful.
thanks Ryan!
You didn’t disappoint! I’m definitely turning notifications on haha
super stoked to hear it! Cheers George
Very clear and precise. Thank you.
Thanks Ian! That's exactly what I aim for ☺️
Fun fact:
The human eye doesn't see r,g,b the same way with the same intensity.
To get nice "gray" don't take the average by dividing by 3 but use a different measure for each color this way 0.3, 0.59, 0.11
lerp(c.rgb, dot(c.rgb, float3(0.3, 0.59, 0.11)), 1);
This is the new way to get the grayscale shader to work - notice the removal of the f in code below (I suspect this'll work in godot 4 as well)
```
shader_type canvas_item;
void fragment(){
vec4 bg = texture(SCREEN_TEXTURE, SCREEN_UV);
float avg = (bg.r + bg.g + bg.b) /3.0;
COLOR = vec4(avg, avg, avg, 1.0);
}
```
Add the final chromatic aberration shader updated to work in later godot versions properly:
```
shader_type canvas_item;
uniform float offset = 1.0;
void fragment(){
vec4 green_channel = texture(SCREEN_TEXTURE, SCREEN_UV);
vec4 red_channel = texture(SCREEN_TEXTURE, vec2(SCREEN_UV.x + (offset * SCREEN_PIXEL_SIZE.x), SCREEN_UV.y));
vec4 blue_channel = texture(SCREEN_TEXTURE, vec2(SCREEN_UV.x - (offset * SCREEN_PIXEL_SIZE.x), SCREEN_UV.y));
COLOR = vec4(red_channel.r, green_channel.g, blue_channel.b, 1.0);
}
```
Thank you very much for the tutorial!
Amazing tutorial, A++!
This isn't really a chromatic aberration. Chromatic aberration is a radial effect, since it's caused by the curvature of the camera lens's edge. It's more like a RED/CYAN channels offset effect there. I should share my chromatic aberration filter :o
Please do!
When godot 4 stops supporting GLES, will this still work or will we have to learn new ways to work with vulkan?
This is what I couldn't figure out yesterday
Awesome! Super glad I could help :)
@@BramwellWilliams Slapping CanvasLayer AND ColorRect did the job! 3 hours later first LSD-ish filter has juiced up my game nicely. This definitely goes into my Godot tutorials playlist
@@pojeby woowoo awesome dude c: I'd love to see it
@@BramwellWilliams actually, why not? you can find the WIP version here a112.itch.io/escape
@@pojeby dude there's so much cool shit going on I love it! had a couple of playthroughs but couldn't spot the lsd filter sadly. I really like the text animations and the process of exploring in the dark great job on that lighting and shadows. I'd be tempted to add a fainter light around what the flashlight already gives off so it's not pitch black however i did find it quite cool using the gun to temporarily light up a room as well.
additionally I'm on a big monitor , so the screen overlay didn't cover everything, I think that can be fixed in settings though: docs.godotengine.org/en/stable/tutorials/viewports/multiple_resolutions.html something like stretch mode 2d or view port. I appreciate at this point in development its probably not worth fixing compatibility issues when theres so much game you could be working on ~
please keep me posted on how this goes though I really like what you have going so far c:
very very awesome tutorials you have Bramwell. Thanks for sharing your knowledge. How do you make the grayscale adjustable? Suppose I wanted to transition to and from grayscale... how would I do that? I tried messing around the 3f and all it does is change the intensity of the grayscale effect.
Okay. Nevermind. I just realized I could change the opacity of the shader's node. I need to take a break
Great tutorial. Thanks.
This only seems to work in 2D, how do you apply a fullscreen shader to 3D?
I can't quite figure out, how do you configure a global spatial shader on a scene in Godot?
I tried this technique and i noticed that PopupDialogs are not affected by the color rect. I'm not sure how to work around it.
Thanks! Helped me a lot
nice explanation thanks
Thank you, really helpful!
buttery smooth
You bet
Inspirational!
Do you know how to draw connecting lines?, like the visual script. thaks
doesn't really work with GLES2 on a mobile device
the results are awesome but now i cant click the buttons on my scene, any fix?
Indeed! ColorRects have an option for whether or not they block mouse inputs, in the inspector there is a section called mouse, if you set the filter drop-down to be ignore then the layer with the shader won't eat your mouse inputs anymore :)
@@BramwellWilliams awesome! thanks. this definitely changed the feel of my game
cool work!!!
Thankyou!
Fun fact:
The human eye doesn't see r,g,b the same way with the same intensity.
To get nice "gray" don't take the average by dividing by 3 but use a different measure for each color this way 0.3, 0.59, 0.11
That's green...
@@loot6 It's not about this.
Just take whatever RGB you have and multiply R by 0.3, G by 0.59 and B by 0.11 and not just all three by 0.333
@@tomtomkowski7653 Not really sure what you mean, if they're not all the same then they won't be grey. Maybe give a concrete example of what you mean.
@@loot6 I have an example I made with Unity but it should be similar to Godot
Shader "Custom/GrayscaleBump"
{
Properties {
_myDiffuse ("Diffuse Texture", 2D) = "white" {}
_myBump ("Bump Texture", 2D) = "bump" {}
_myBumpAmount ("Bump Amount", Range(0,10)) = 1
_GrayscaleAmount ("Grayscale Amount", Range (0, 1)) = 0.0
}
SubShader {
Tags { "RenderType"="Opaque" }
LOD 200
CGPROGRAM
#pragma surface surf Lambert
sampler2D _myDiffuse;
uniform float _GrayscaleAmount;
sampler2D _myBump;
half _myBumpAmount;
struct Input {
float2 uv_myDiffuse;
float2 uv_myBump;
float3 worldRefl; INTERNAL_DATA
};
void surf (Input IN, inout SurfaceOutput o) {
half4 c = tex2D(_myDiffuse, IN.uv_myDiffuse);
o.Albedo = lerp(c.rgb, dot(c.rgb, float3(0.3, 0.59, 0.11)), _GrayscaleAmount);
o.Normal = UnpackNormal(tex2D(_myBump, IN.uv_myBump));
o.Normal *= float3(_myBumpAmount, _myBumpAmount, 1);
o.Alpha = c.a;
}
ENDCG
}
FallBack "Diffuse"
}
Nice.
thanks!
Doesn't work
Great help, thanks!