Very good explanation of what the shader options do and how to use it. Thanks for putting in the work to put all this together, sure it may have just been gathering everything together and packaging it up. But seeing something working and being able to edit it and see the changes right in front of you is very useful.
O cenário ficou maravilhoso, sombras e luzes também, jogaria fácil com essa estética, ficou muito bonito. Gostei das referências e o tutorial é direto e sem enrolações, ótimo! E ótimo que você fez com outros códigos da comunidade e devolveu com um conteúdo completo pra ela também! Topzera
I already ported it to Godot 4. I'm modeling a scene for a new demo, video and repository coming soon. About your attenuation problem, just use it as float, ATTENUATION is a vec3 with three equal floats anyway, it secretly has always been a float.
Ah I see, I did use it as a float and the shadows came out weird - so maybe the issue comes out from the way I configured the scene. Thank you for the answer! Looking forward to seeing your new demo.
@@morpheus6144 Yeah, my shadows look wrong too, but they're wrong on the base materials as well so I just assumed it's a settings thing. Haven't figured it out yet, I had to do a lot of tweaking with the shadows on the scene for this old video so I imagined the same for godot 4, haven't messed with shadows yet.
I haven't done it but there's nothing that 3.x does that 4.x can't do, so it's just looking at the errors and fixing them. Most of the editor hint stuff changed but it's nothing drastic, the logic will probably remain the same.
I know is discontinued now with Godot 4, but some of the shader doesn't work properly work on GLES2 like the water (it hides object which are over it) i'm on Godot 3.5.2 could you do a port to GLES2? Or explain how to do it to a neewbie, thanks a lot 🙏
It's either the DEPTH_TEXTURE or one of the render modes on the water, but you probably need all of it if you want the water to look exactly like it is in the project. Try removing the effects that use it or messing around with the render modes.
@@rafaelbordoni516 Thanks a lot for the answer! Could you explain me what effect to remove (and how much the aspect of the water will change after removing those) and what do you mean with render modes? Sorry for the question i'm new to Godot and your shader seems the best way to learn how to make stylized graphics, those are truly amazing
@@fieroplayer2334 Just look around the code and search for any mention of the DEPTH_TEXTURE. But to kinda explain, this texture is meant to capture the distance of each pixel from the camera, so if you're sampling it you'll get the distance of whatever is behind the object with the shader. The little lake for example, it's transparency depends on distance: stuff too close should appear crystal clear, so the water gets more transparent to show it, however, things in the deep are less visible. That's a classic example of an effect that uses the DEPTH_TEXTURE. In the case of the sea (and also the lake I think), there's also this water foam around anything that crosses the water surface. In order to detect geometry crossing the water plane, we sample the DEPTH_TEXTURE to see the distance of what's behind it. If it's close enough, we render foam. Not a perfect method since it only renders foam on the geometry of what's crossing the water but it's cheap and works at real time. In the project I built a contraption with viewports to get around this limitation but it's not real time though. The thing about GLES2 is that it doesn't have as many features as GLES3 and I think either the DEPTH_TEXTURE or one of the render modes that make it work is not available. Oh yeah, the render mode is at the top of every shader file. Just look at the second line, you'll see something like "render_mode" and a list of modes. Go to the docs to see what each render mode does.
@@rafaelbordoni516 I just tryied i managed to get the island to render after the sea, but all the object have the color of the sea (no texture or material). I'm learning a lot from this (change render modes didn't work). As far i have understood the DEPTH_TEXTURE determines a sort of z-index (in css lol). Do you have any idea? (also do you have a discord server or stuff like that)
@@fieroplayer2334 If you put DEPTH_TEXTURE or SCREEN_TEXTURE anywhere in your code, that signals Godot to treat it as transparent geometry. It needs to have all opaque geometry in order to even have a DEPTH/SCREEN_TEXTURE in the first place, so it can end up rendering on top of everything if some settings are wrong. My gut tells me it's something wrong with the render modes but if it's not, just remove the effects that need the DEPTH_TEXTURE from the sea material. I know it's disappointing but GLES2 isn't really good for 3D, it lacks the tools to do a lot of those effects. I don't know everything tbh, I might be possible to make it work but I don't know how, I didn't really mess that much with GLES2 in 3D, I only ever used it for 2D.
Acredito que sim, pelo menos a versão mais simples com o mínimo de efeitos eu sei que funciona, tem pouca coisa que funciona no 3.0 que não funciona no 2.0
Hahaha, thanks! I tried as hard as I could to make it look like a traditional 2D animation when I started, but it's just impossible. I realized hand drawn shading looks very unrealistic, every cut it looks different, there's no way you can program a shader and light a scene to look like that. In the end I embraced the CGI-ish lighting and added some nice glow and a moody lighting and left the outlines to do the bulk of the "look like a hand drawn animation" department. The result is this. Doesn't quite look like traditional 2D but looks very unique.
@@lucasbird6367 I did the island on Blender, and the ocean is just a flat plane with a shader that's available on the repo. I think this texture on the ocean I made on Krita. I'm not knowledgeable enough on either Blender nor Krita to do a tutorial on them but there are plenty of tutorials already.
I have done it before by adding an AnimationPlayer node to the light source and animating its position in a couple of different animations and adding a script to it that plays the animations randomly. The greatest hurdle was getting the shadow settings on the light source right. Having beautiful static shadows in Godot is already hard, and moving ones is even harder. I'd say the weakest point in Godot's 3D renderer right now are shadows. You can see in this video some shadows looking like serrated saw blades, and no amount of increased quality in the settings would really change that, even though I would lose some frames per second. I've heard Godot 4 already made them much better. Let's hope for it!
Tanto faz, funciona bem dos dois jeitos. Nessa cena, a fogueira e as tochas estão com sombras habilitadas mas a luz do céu não. Na minha GTX 1050 Ti, a cena inteira rodava no mínimo a uns 100 fps se eu olhasse pra cachoeira e o lago com reflexões planares, mas essa cena é minúscula e sinceramente é muito fácil estourar a performance se você não escrever um sistema pra carregar e descarregar assets da cena. Mas esse tutorial foi de uma época em que a Godot tinha menos recursos que agora. Ainda não testei na Godot 4.
Very good explanation of what the shader options do and how to use it. Thanks for putting in the work to put all this together, sure it may have just been gathering everything together and packaging it up. But seeing something working and being able to edit it and see the changes right in front of you is very useful.
Just found out about this and you are now officially my hero! Wow.
Man, just saw your shader on Godot Shaders, this is AWESOME !!!! THANKS a LOT !!!!
Best godot toon shader tutorial I've seen !
Cara que sensacional, só pelo video da pra ver que tu é gente boa, o video ficou muito bem explicado. continue assim mano! parabens msm!!!!
O cenário ficou maravilhoso, sombras e luzes também, jogaria fácil com essa estética, ficou muito bonito.
Gostei das referências e o tutorial é direto e sem enrolações, ótimo! E ótimo que você fez com outros códigos da comunidade e devolveu com um conteúdo completo pra ela também! Topzera
thanks you , this is awesome , subscribing and hitting bell to follow everything you post
You are a rockstar my friend!
that's incredible man, well done.
Thank you for your great tutorial!
I really wanted the watermelons to have seeds. Otherwise, nice tutorial hahahha
OMG this looks amazing!
Really great demo! exactly what I was looking for.
Sadly it doesn't work properly in Godot 4, because ATTENUATION was changed to be a float.
I already ported it to Godot 4. I'm modeling a scene for a new demo, video and repository coming soon. About your attenuation problem, just use it as float, ATTENUATION is a vec3 with three equal floats anyway, it secretly has always been a float.
Ah I see, I did use it as a float and the shadows came out weird - so maybe the issue comes out from the way I configured the scene.
Thank you for the answer!
Looking forward to seeing your new demo.
@@morpheus6144 Yeah, my shadows look wrong too, but they're wrong on the base materials as well so I just assumed it's a settings thing. Haven't figured it out yet, I had to do a lot of tweaking with the shadows on the scene for this old video so I imagined the same for godot 4, haven't messed with shadows yet.
Wow!!!!!! Really THANK YOU!!!! For share the shader and for this video!!!!!
Will be super nice see the video about the particles , the fire with smoke and the waterfall *o*
saved the video for later! thnx
Awesome ! Amazing job !
very cool , I definitely use this for the thing im building
Awesome! Thank you.
Are you planning to remake the fire shader for Godot 4? I would love to use it but I'm having trouble converting it to godot 4.
I haven't done it but there's nothing that 3.x does that 4.x can't do, so it's just looking at the errors and fixing them. Most of the editor hint stuff changed but it's nothing drastic, the logic will probably remain the same.
Thank you
I know is discontinued now with Godot 4, but some of the shader doesn't work properly work on GLES2 like the water (it hides object which are over it) i'm on Godot 3.5.2 could you do a port to GLES2? Or explain how to do it to a neewbie, thanks a lot 🙏
It's either the DEPTH_TEXTURE or one of the render modes on the water, but you probably need all of it if you want the water to look exactly like it is in the project. Try removing the effects that use it or messing around with the render modes.
@@rafaelbordoni516 Thanks a lot for the answer! Could you explain me what effect to remove (and how much the aspect of the water will change after removing those) and what do you mean with render modes?
Sorry for the question i'm new to Godot and your shader seems the best way to learn how to make stylized graphics, those are truly amazing
@@fieroplayer2334 Just look around the code and search for any mention of the DEPTH_TEXTURE. But to kinda explain, this texture is meant to capture the distance of each pixel from the camera, so if you're sampling it you'll get the distance of whatever is behind the object with the shader. The little lake for example, it's transparency depends on distance: stuff too close should appear crystal clear, so the water gets more transparent to show it, however, things in the deep are less visible. That's a classic example of an effect that uses the DEPTH_TEXTURE. In the case of the sea (and also the lake I think), there's also this water foam around anything that crosses the water surface. In order to detect geometry crossing the water plane, we sample the DEPTH_TEXTURE to see the distance of what's behind it. If it's close enough, we render foam. Not a perfect method since it only renders foam on the geometry of what's crossing the water but it's cheap and works at real time. In the project I built a contraption with viewports to get around this limitation but it's not real time though.
The thing about GLES2 is that it doesn't have as many features as GLES3 and I think either the DEPTH_TEXTURE or one of the render modes that make it work is not available. Oh yeah, the render mode is at the top of every shader file. Just look at the second line, you'll see something like "render_mode" and a list of modes. Go to the docs to see what each render mode does.
@@rafaelbordoni516 I just tryied i managed to get the island to render after the sea, but all the object have the color of the sea (no texture or material).
I'm learning a lot from this (change render modes didn't work). As far i have understood the DEPTH_TEXTURE determines a sort of z-index (in css lol).
Do you have any idea?
(also do you have a discord server or stuff like that)
@@fieroplayer2334 If you put DEPTH_TEXTURE or SCREEN_TEXTURE anywhere in your code, that signals Godot to treat it as transparent geometry. It needs to have all opaque geometry in order to even have a DEPTH/SCREEN_TEXTURE in the first place, so it can end up rendering on top of everything if some settings are wrong. My gut tells me it's something wrong with the render modes but if it's not, just remove the effects that need the DEPTH_TEXTURE from the sea material. I know it's disappointing but GLES2 isn't really good for 3D, it lacks the tools to do a lot of those effects. I don't know everything tbh, I might be possible to make it work but I don't know how, I didn't really mess that much with GLES2 in 3D, I only ever used it for 2D.
Muito massa! Esse shader funcionaria no gles 2 também?
Acredito que sim, pelo menos a versão mais simples com o mínimo de efeitos eu sei que funciona, tem pouca coisa que funciona no 3.0 que não funciona no 2.0
this is an amazing shader, just stunning . . now, import Homer Simpson and, also sponge-bob
Hahaha, thanks! I tried as hard as I could to make it look like a traditional 2D animation when I started, but it's just impossible. I realized hand drawn shading looks very unrealistic, every cut it looks different, there's no way you can program a shader and light a scene to look like that. In the end I embraced the CGI-ish lighting and added some nice glow and a moody lighting and left the outlines to do the bulk of the "look like a hand drawn animation" department. The result is this. Doesn't quite look like traditional 2D but looks very unique.
Any plans on updating this shader for Godot 4.0? Been having some trouble getting it to work.
Definitely! It just came out, finally!
Thanks
Awesome video. Please invest in a good microphone. The audio has static noise which literally hurts the ear.
Hi, can you make a tutorial on how to make the island and ocean please?
@@lucasbird6367 I did the island on Blender, and the ocean is just a flat plane with a shader that's available on the repo. I think this texture on the ocean I made on Krita. I'm not knowledgeable enough on either Blender nor Krita to do a tutorial on them but there are plenty of tutorials already.
Would be cool to make the shadows bounce a little. Can the fire light source jiggle randomly?
I have done it before by adding an AnimationPlayer node to the light source and animating its position in a couple of different animations and adding a script to it that plays the animations randomly. The greatest hurdle was getting the shadow settings on the light source right. Having beautiful static shadows in Godot is already hard, and moving ones is even harder. I'd say the weakest point in Godot's 3D renderer right now are shadows. You can see in this video some shadows looking like serrated saw blades, and no amount of increased quality in the settings would really change that, even though I would lose some frames per second. I've heard Godot 4 already made them much better. Let's hope for it!
Outra dúvida: eu preciso ter sombras habilitadas para o material funcionar como o esperado? Qual é o consumo de recursos na sua máquina?
Tanto faz, funciona bem dos dois jeitos. Nessa cena, a fogueira e as tochas estão com sombras habilitadas mas a luz do céu não. Na minha GTX 1050 Ti, a cena inteira rodava no mínimo a uns 100 fps se eu olhasse pra cachoeira e o lago com reflexões planares, mas essa cena é minúscula e sinceramente é muito fácil estourar a performance se você não escrever um sistema pra carregar e descarregar assets da cena. Mas esse tutorial foi de uma época em que a Godot tinha menos recursos que agora. Ainda não testei na Godot 4.
Ae caralho boa irmao
Thank you