This is a complete and Free intro series to shaders. Watch the playlist: bit.ly/intro-to-shaders-godot (more videos to come) Be sure to go get the open source project and star the repository on GitHub! github.com/GDquest/Godot-engine-tutorial-demos/ (It is in the /2018/06-16-intro-to-shaders-2d-water subfolder and you can use minhaskamal.github.io/DownGit to download folders from github as ZIP files) This series is possible thanks to the people who support GDquest. It was funded by Kickstarter backers, who accepted that we make it free for everyone. Big thanks to them :). And big thanks to Baastian for the collab and for his insights on shader programming!
20:34 => This problem seems to happen when the 'A' in the get_shader_param() is capital. My, explanation would be to use the exact spelling with the correct letter case to avoid this problem. Remember, Godot always capitalizes the first letter in the Editor so don't relay on it. Use what you wrote on the shader and script.
18:17 video skipped how you deal with changed label. As label gets changed, then saved, on re-open you will add another value to the label, like so: "X Amplitude: 20 20". How to make editor ignore the change?
I had the same Problem. Basically the label_start_text is added in front of your new value. And in the project files the Label already has a 20 at the end of it. So "X Amplitude : 20" and the code puts your "amplitude_value" at the end of that. If you do this in your code you will see what I mean. $Label.text = label_start_text + str("test") So go into your AmplitudeController and under the Inspector change the Text from "X Amplitude: 20" to "X Amplitude: " took me way to long to figure out
it's a topic for a different tutorial, that's general programming basics. If you put all your code in one place, it can have many reasons to change: it's harder to remember what each script or node does, and it's harder to fix bugs. In the case of the sprite and the UI element: if you have one script to control both the sprite and the UI, when you change something on the UI the sprite can break, and when you change something on the sprite the UI can break. And it will break! Sooner and more often than you would expect. That's why so many developers use programming paradigms, philosophies and sets of roles and constraints to organize and separate code. The most common paradigm we used to that end in game development is object-oriented design. I have a tutorial series planned on this, but it will take some time to finish preparing it: it's a big and an important topic. I want to get it right.
A bit of (I hope) constructive criticism. The tutorial is about shaders, but you spend most of the time building a (very simple) interface to just use the shader.
Is it possible to set texture proportionally to the figure? It is imperceptible, but the texture is "splitted" into two triangles. It becomes detectable, when you move just single verticle. For example: if (UV == vec2(0.0, 0.0)) { VERTEX+=vec2(100.0, 0.0); }
I really wonder if and when Godot will have shader nodes (like Blender nodes or Godot visual scripting) for those of us who don't want to code in GLSL. I could have sworn I saw a shader node editor long ago, but for the older version of Godot.
it's planned to come back in version 3.1. The team rewrote the UI system for graphs in version 3.0 so they had to redo the entire visual shader system. I think Juan planned to work on it after the animation blending graph, probably next week or in two weeks.
Is explained in the beginning of this video.. It is closely resembling glsl, which uses a c-style-syntax. I didn't look that up, so don't take my word for it, but i guess the language in which you write shaders in godot internally gets compiled into glsl.
Very cool! My GLSL skills are a bit weak, but I can't figure out why this line: VERTEX.xy += vec2(cos(VERTEX.x + VERTEX.y + TIME)*20.0, sin(VERTEX.x + VERTEX.y + TIME)*20.0); should run so much slower than these 2 lines: VERTEX.x += cos(VERTEX.x + VERTEX.y + TIME)*20.0; VERTEX.y += sin(VERTEX.x + VERTEX.y + TIME)*20.0; I'm running in Godot 3.0.2, and the first line runs way slower than the second set of lines. Am I missing something?
Indeed - this was the discrepancy - silly coding logic on my part. When I assign to a temporary variable first, I get the same results as when I have the single line: temp_x = VERTEX.x + cos(VERTEX.x + VERTEX.y + TIME*speed)*20.0 ; VERTEX.y += sin(VERTEX.x + VERTEX.y + TIME*speed)*20.0; VERTEX.x = temp_x; Thanks for pointing this out!!
Is it possible to somehow give the shader a dynamic set of values? (for example positions of certain objects so that the shader could create some kind of ripples etc)
Can somebody tell me how i can change the texture via shader( want to animate a sprite inside a tileset). there is a video on someone who does this with "uniform texture frame1"... but that doesnt work for me since i get a " Expected Datatype" error. Can someone help me pls?
Seems so convoluted be to change timer and amplitude by drilling down into Materials. Is there a simple way to expose the shader uniforms vars in the properties of DancingGodot inspector
Use an exported variable and a setter to update the shader's uniform from code: docs.godotengine.org/en/3.0/getting_started/scripting/gdscript/gdscript_basics.html#setters-getters
You start WAY later than people who are in expere4inced with this program like me, would like. When I open a new project, my UI doesn't look like yours.
When trying to save the shader, it fails and shows a warning: "This resource can't be saved because it does not belong to the edited scene. Make it unique first."
I solved it by saving the parent first, then switching back to shader (found exactly on top of the "Filter properties' " search bar), reset the Path property, and finally hit save.
Hello But you know using " _ " (Underline) make problem in some cases, for some GPU for example cellphones, try to not use " _ " underline in your shader code, I already tried that :)
underscores should not cause issues. Dashes can because that's the minus sign, but underscores should really not. Have you had this issue with Godot 3's ShaderScript? The language is specific to Godot although it looks like GLSL
GDquest Actually once I wrote a shader it work fine for my pc and android phone but not for my friend android phone we delete the underline and it work fine other also have same issue look this link github.com/godotengine/godot/issues/12880
Pixel shaders only process pixels that are in view normally, or at least within the viewport's bounds. It shouldn't make a difference if your water plane is the size of the screen or 5000 screens big. Depending on the visual style you're going for though, animated tilemaps can be a better fit
Not about the actual shader, but I really frowned when you explained the thing about properties and the self keyword. I don't think it's a good idea to have "self" change semantics so drastically. I mean, you literally call a function if you use "self", while you just write to the member without "self". It's also not obvious whatsoever and can lead to stupid and hard to find bugs. IMHO someone should rethink this.
It's just about using a setter through the same script. Self is implicit in GDscript but inside the class's code it needs to be explicit so you can bypass the setter at times. You can also use self all the time explicitly if you want, as in e.g. python
So the idea is the API let's you use properties since Godot 3, and the engine uses setters and getters on the back end. It applies the same default in GDscript when you use a custom node, but gives you the flexibility of mutating properties however you want in your own script. Instead of using self.property, you can instead call the setter and getter directly
I do get all of that, my point was that using "self" for that is imho a bad idea. Take C# for example, where you do have properties but a "raw" member variable is holding the actual value. So when you access the member, nothing special happens. The property which includes getters and setters is its own thing. There's no potential confusion about that. Here though, you have to be very careful to use self because it can have different semantics depending upon whether you're accessing a simple member or a property. Firstly, you have to just KNOW that (not obvious, as I said), secondly, even if you know it, you have to keep it in mind all the time. If you don't, bugs will happen that might be hard to find.
2D water shader? YES PLEASE. You are a legend. Thank you for this!!
I never really understood what shaders were before watching this video. They look super cool!
This is a complete and Free intro series to shaders. Watch the playlist: bit.ly/intro-to-shaders-godot (more videos to come)
Be sure to go get the open source project and star the repository on GitHub! github.com/GDquest/Godot-engine-tutorial-demos/
(It is in the /2018/06-16-intro-to-shaders-2d-water subfolder and you can use minhaskamal.github.io/DownGit to download folders from github as ZIP files)
This series is possible thanks to the people who support GDquest. It was funded by Kickstarter backers, who accepted that we make it free for everyone. Big thanks to them :). And big thanks to Baastian for the collab and for his insights on shader programming!
NB: sorry for the 3 fades on the audio around the start. A little mistake, but hopefully it's only there
This is fantastic! Thanks for going so in depth on how to connect gdscript and shaders together.
TOP TIER COLLAB
19:15 "material" doesn't work now (3.1.1). Have to write "self.material"
Seems to work again in 3.2.1
same problem for me: how do i gett access to a parameter inside a shader via code?
Me after watching 50 shader tutorials:
* confused unga bunga *
very much the same
Oh! now I understand, finallly. Thank you very much! May God bless you and your family!
20:34 => This problem seems to happen when the 'A' in the get_shader_param() is capital.
My, explanation would be to use the exact spelling with the correct letter case to avoid this problem. Remember, Godot always capitalizes the first letter in the Editor so don't relay on it. Use what you wrote on the shader and script.
Thanks GDQuest!! Great tutorial
"Oh man Nathan sounds really differ-- oh."
18:17 video skipped how you deal with changed label. As label gets changed, then saved, on re-open you will add another value to the label, like so: "X Amplitude: 20 20". How to make editor ignore the change?
I had the same Problem.
Basically the label_start_text is added in front of your new value. And in the project files the Label already has a 20 at the end of it. So "X Amplitude : 20" and the code puts your "amplitude_value" at the end of that.
If you do this in your code you will see what I mean.
$Label.text = label_start_text + str("test")
So go into your AmplitudeController and under the Inspector change the Text from "X Amplitude: 20" to "X Amplitude: "
took me way to long to figure out
Didnt understand the WHY you dont want to ""couple the interface and the sprite"" 16:44
if you could please explain
it's a topic for a different tutorial, that's general programming basics. If you put all your code in one place, it can have many reasons to change: it's harder to remember what each script or node does, and it's harder to fix bugs.
In the case of the sprite and the UI element: if you have one script to control both the sprite and the UI, when you change something on the UI the sprite can break, and when you change something on the sprite the UI can break.
And it will break! Sooner and more often than you would expect. That's why so many developers use programming paradigms, philosophies and sets of roles and constraints to organize and separate code. The most common paradigm we used to that end in game development is object-oriented design. I have a tutorial series planned on this, but it will take some time to finish preparing it: it's a big and an important topic. I want to get it right.
Would be nice if this series would be ''specifically'' for GD
Thank you so much for sharing all of this !
Thank you so much. This video was a HUGE help! It sort of just made some things click for me that I wasn't understanding about shaders.
You are a GREAT teacher! Thank yu for this video!!!
This is what I'm looking for! Thanks
"get_shader_param" doesnt' work for me, maybe because is In 4.3? how do i get access to a custom shader parameter via code?
Thank you for another great video and initiative !
do you have an updated version of this video? a lot has changed since Godot 4 came out.
A bit of (I hope) constructive criticism. The tutorial is about shaders, but you spend most of the time building a (very simple) interface to just use the shader.
It is indeed constructive criticism. I kept learning as a teacher too over the past 6 years since that video was made.
@@Gdquestreaaally should've checked the date. I'm usually watching your recent releases, and this one appeared on my timeline. Sorry about that :)
Not at all! It's really welcome and gives me time to rewatch things and reflect on them.
@@Gdquest great attitude!!!! and great teacher!!!! thanks!!!!!
wow youree like a vlogggger, seattle squaaad
Any tutorials on doing this with visual shaders?
Thanks my friend
Is it possible to set texture proportionally to the figure? It is imperceptible, but the texture is "splitted" into two triangles. It becomes detectable, when you move just single verticle. For example:
if (UV == vec2(0.0, 0.0))
{
VERTEX+=vec2(100.0, 0.0);
}
I really wonder if and when Godot will have shader nodes (like Blender nodes or Godot visual scripting) for those of us who don't want to code in GLSL. I could have sworn I saw a shader node editor long ago, but for the older version of Godot.
it's planned to come back in version 3.1. The team rewrote the UI system for graphs in version 3.0 so they had to redo the entire visual shader system.
I think Juan planned to work on it after the animation blending graph, probably next week or in two weeks.
Wonderful news! Can't wait for this feature to return. Thanks.
Is there any tutorial for general purpose shader programming?
Yes, this one! Doesn't matter if it's water or anything else that get you started, the techniques are the same.
th-cam.com/video/Lk-N-Ej0DDg/w-d-xo.html this one presents some basic stuff really well
А на каком языке пишуться эти шейдеры? Немного напомнило С++ , нет?
What language are these shaders written in? Slightly reminded C ++, no?
Is explained in the beginning of this video..
It is closely resembling glsl, which uses a c-style-syntax.
I didn't look that up, so don't take my word for it, but i guess the language in which you write shaders in godot internally gets compiled into glsl.
Very cool! My GLSL skills are a bit weak, but I can't figure out why this line:
VERTEX.xy += vec2(cos(VERTEX.x + VERTEX.y + TIME)*20.0, sin(VERTEX.x + VERTEX.y + TIME)*20.0);
should run so much slower than these 2 lines:
VERTEX.x += cos(VERTEX.x + VERTEX.y + TIME)*20.0;
VERTEX.y += sin(VERTEX.x + VERTEX.y + TIME)*20.0;
I'm running in Godot 3.0.2, and the first line runs way slower than the second set of lines. Am I missing something?
If it slows down it's probably you have a syntax error and the shader can't recompile.
the VERTEX.x updated first in the second set of lines
Indeed - this was the discrepancy - silly coding logic on my part. When I assign to a temporary variable first, I get the same results as when I have the single line:
temp_x = VERTEX.x + cos(VERTEX.x + VERTEX.y + TIME*speed)*20.0 ;
VERTEX.y += sin(VERTEX.x + VERTEX.y + TIME*speed)*20.0;
VERTEX.x = temp_x;
Thanks for pointing this out!!
5:30 - you diagram the mesh as quads. Internally, is Godot storing a 2D mesh as quads or triangles?
From what I've saw so far, Godot isn't very friendly to quad-containing models...
Оу! я в экстазе!
Is it possible to somehow give the shader a dynamic set of values? (for example positions of certain objects so that the shader could create some kind of ripples etc)
How would I go about making a fisheye lens camera shader?
Can somebody tell me how i can change the texture via shader( want to animate a sprite inside a tileset). there is a video on someone who does this with "uniform texture frame1"... but that doesnt work for me since i get a " Expected Datatype" error. Can someone help me pls?
Seems so convoluted be to change timer and amplitude by drilling down into Materials. Is there a simple way to expose the shader uniforms vars in the properties of DancingGodot inspector
Use an exported variable and a setter to update the shader's uniform from code: docs.godotengine.org/en/3.0/getting_started/scripting/gdscript/gdscript_basics.html#setters-getters
You start WAY later than people who are in expere4inced with this program like me, would like. When I open a new project, my UI doesn't look like yours.
this is... haard...
i think some more introductory stuff like dealing with color and alpha would be more easy to grasp
can one add a noise shader to a Light2D to simulate the small particles of dust in the air ( or equivelant ) ? thanks
if i were you i would search for the shader documentation
When trying to save the shader, it fails and shows a warning: "This resource can't be saved because it does not belong to the edited scene. Make it unique first."
I solved it by saving the parent first, then switching back to shader (found exactly on top of the "Filter properties' " search bar), reset the Path property, and finally hit save.
ok cool but what's a cosine
How to save the material/shader resources in godot 3.1 ?
Godot 3.1 isn't even in alpha yet, if the save resource button is missing it may be a bug
stable is for pussies . thx man :)
Hey, happened the same to me. In 3.1, the save button is moved on the tool icon on the right.
PS: Thanks for your awesome videos, GDquest!
Hello But you know using " _ " (Underline) make problem in some cases, for some GPU for example cellphones, try to not use " _ " underline in your shader code, I already tried that :)
underscores should not cause issues. Dashes can because that's the minus sign, but underscores should really not. Have you had this issue with Godot 3's ShaderScript? The language is specific to Godot although it looks like GLSL
GDquest Actually once I wrote a shader it work fine for my pc and android phone but not for my friend android phone we delete the underline and it work fine other also have same issue look this link github.com/godotengine/godot/issues/12880
Okay it's a bug, but that's with leading underscores, that's a little different.
Thanks for letting me know!
Somehow my preview rendering is iterating much slower than yours. Did I miss someting?
If it's choppy, there's most likely a syntax error in your shader
GDquest yeah, i missed some semicolons. I guess switching between gdscript python syntax and c syntax on the fly was the culprit. :D THANKS!
Is this a good methode for huge bodies of water? (think top down oceans)
Pixel shaders only process pixels that are in view normally, or at least within the viewport's bounds. It shouldn't make a difference if your water plane is the size of the screen or 5000 screens big.
Depending on the visual style you're going for though, animated tilemaps can be a better fit
@@Gdquest thx for the reply, as far as I know, godot doesn't support animated tiles yet
A pronúncia "certa" é 'perfórmances'.
I engineered a boat with cosine waves.
is this compatible with Godot 3?
This is Godot 3 shader code
im doing this right now... hahah
Not about the actual shader, but I really frowned when you explained the thing about properties and the self keyword. I don't think it's a good idea to have "self" change semantics so drastically. I mean, you literally call a function if you use "self", while you just write to the member without "self". It's also not obvious whatsoever and can lead to stupid and hard to find bugs. IMHO someone should rethink this.
It's just about using a setter through the same script. Self is implicit in GDscript but inside the class's code it needs to be explicit so you can bypass the setter at times. You can also use self all the time explicitly if you want, as in e.g. python
So the idea is the API let's you use properties since Godot 3, and the engine uses setters and getters on the back end. It applies the same default in GDscript when you use a custom node, but gives you the flexibility of mutating properties however you want in your own script. Instead of using self.property, you can instead call the setter and getter directly
I do get all of that, my point was that using "self" for that is imho a bad idea. Take C# for example, where you do have properties but a "raw" member variable is holding the actual value. So when you access the member, nothing special happens. The property which includes getters and setters is its own thing. There's no potential confusion about that. Here though, you have to be very careful to use self because it can have different semantics depending upon whether you're accessing a simple member or a property. Firstly, you have to just KNOW that (not obvious, as I said), secondly, even if you know it, you have to keep it in mind all the time. If you don't, bugs will happen that might be hard to find.
10/10
This shader language seem very similar to opengl. It has to be...
The syntax is the same for the most part but Godot's shader script is simpler, it automates a few things for you
Oh, okay cool!
Nice
Great tutorial. Your accent is mad.
cOnsole
If I could dance for two lines of code ............
Oh, I thought it was pronounced "oleege"
You say manipulate a lot
Shaders make me want to die