Visual Shader Editor in Godot 3.1: Dissolve Shader (tutorial)

[@avgchoobafan]

One word: YESSSSSSS I've been searching for visual shaders tutorials for like months Thank you gdquest

[@marcosroberto3576]

Oh my god. Yes!!!! MORE OF THIS, PLEASEEEEE!!!!

[@pm1234]

Thanks, I didn't know it was so easy on Godot. Next tutorial, convert Blender to Godot shader :)

[@0.Andi.0]

That would be great

[@soapspangledgames2444]

This is an excellent beginner's tutorial. It's clear, concise, and easy to follow and duplicate.

[@hardcoding_games]

this still works on godot 4.3 thank you so much, it is amazing!

[@TheOneWhoHasWallnuts]

thanks a ton this is the only resource i could find explaining how to get noise into the visual shading editor

[@toddbozeman3587]

Hey Guys if your in Godot 4.2, I needed to set the shader flag to Alpha to coverage to checked, otherwise I would a very light left over emission of the color used to highlight after the disappearing edges.

[@selgesel]

Wow, so concise and well explained that it's way better than anything I've recently watched on the subject.

[@tommiemartin1596]

Very cool. Would be nice if you could see what this looks like as code as you go. Would make it easier to translate code based shaders, get ideas from sources such as shadertoy, etc.

[@BetaTester704]

Im so happy you made this I have been looking for a way to do this in godot for close to a month now with no success.

[@LucasPossatti]

Very impressive effect. And the tutorial is so concise and complete. Thank you very much!

[@MattiasHolmgren]

Excellent tutorial, love the development of Godot! Really interesting engine!

[@hidemat5141]

Nice. Thanks so much. Plz make more visual shader tuts! These are great.

[@NycroLP]

kinda wish all the shaders for tutorial purposes were made this way. It's way easier to learn from this than from code.

[@Gdquest]

This is code! It's mostly visual. One issue is Godot's visual shader editor is a bit slow to use. So for a simple shader like this one it's fine but imagine that this whole graph is just for maybe 3 lines of written code. So it doesn't make for great videos. Also, the output code from the shader graph isn't optimized so for a complex shader you'll want to rewrite it into something that runs fast.

[@ekaterinavalinakova2643]

What you just saw in the video is what we'd call "Visual Scripting", which is a type of computer programming. There are instances where it's easier to code it the normal way. But for shaders, I find visual scripting to be easier on people with not a lot of computer programming experience. You can think of visual scripting as auto complete on steroids since behind each node there is quite a lot of code behind it. I believe in 4.0, they are going to be optimizing shaders so maybe the output code for 4.0 maybe will be optimized enough. Don't know though, someone should do a bench test on this.

[@skrypciarz5974]

Thanks for the clear explanation. I have just made it and the effect is awesome.

[@chonkusdonkus]

Thanks, the timing on this is literally perfect

[@hishamsayd9909]

Was waiting for this! Thank you so much!

[@smilodon9349]

Great tutorial. i hope you do a complete series on visual shader

[@tobia88]

Custom Post Processing Effects Please~

[@Speed-TV]

Thank you for this amazing tutorial!

[@jlewwis1995]

What is the performance like between visual shaders and normal written shaders? Are they the same/similar or is there a noticable difference

[@BartoszBielecki]

The whole node tree is converted to a single shader (that you can of course preview) and basing on the relatively simple nodes, you can easily imagine that everything will be collapsed to simple code blocks which will be as efficient as the tree itself. Sure, in some cases you might do some tricks to optimize here and there, but I doubt you can much better.

[@ekaterinavalinakova2643]

From what I've read, the core team in Godot will be making even more optimization changes to the shaders, so I doubt we would get a substantial boost in performance by doing shaders the normal way by coding it manually by ourselves in 4.0. I'm not even sure if you would get much performance gains by coding it manually today. Maybe someone should do a test. But even if there is no noticeable difference in speed, still worth learning to learn to write shaders. Since you may want to make your own custom nodes or modify existing ones, having the knowledge to write shaders goes a very long way.

[@lukostello]

ok but how do you tie it in to your object? I imagine the object would have a var dissolve which would replace the time in this example.

[@jlewis_yt]

When clamping the value of the time sin wouldn't it be better performancewise to take the absolute value instead of dividing and adding? The absolute value of a sin will always be between 0 and 1

[@Carkoon]

Interesting and easy to follow. More would be great.

[@firezacerick]

Amazing tutorial! Can you, pls, show how to use the uniform at the visual shader to import GDScropt variables? I can't find it in anywhere. :/

[@mayronen9643]

how do I get the Shader Material preview there in the top right. (I'm using Godot 3.4.3)

[@ZoidbergForPresident]

That's really nice for most Game Engine to implement graphical creation of shaders. Shader languages may be hard to grasp and even to read so this helps a lot. (I guess, because I don't program shaders :P) For the "magic numbers" and the emission colour, I guess it's possible to make them parameters of the shader? Or at least it's planned to?

[@Tdoshok]

That's just pure awesome! - Yann

[@Cosmozaure]

Great tuto ! Thanks a lot

[@andrewmartin8612]

Great tutorial, thanks.

[@mrgamerkingdonb3931]

Nice tutorial man

[@Bananeisafree]

Yeah no ... As far as I'm concerned, all of that is just black magic. (Thank you for your videos and hard work !)

[@stevo728822]

Shaders scare the life out of me. It's like learning the Dark Arts. But I appreciate the visual shader toolset.

[@pvpworld]

Now if i want to activate this effect with code, how would i do that? i need to add a ScalarUniform in the visual shader right? but where do i add it?

[@ravanin]

please help how do i make it stay visible after materializing, I used time only but it looks weir

[@rudrakpatra6579]

how can I use visual shader editor to create a smooth 2d polygon by decreasing alpha at the edges>>>>please help

[@neodream1379]

Thank you soooo much! This is amazing. Could you please do a detailed tutorial about visual scripting (call methods... ) ?

[@Gdquest]

Guilherme is working on an intro tutorial now

[@qubitx64]

hats off

[@dookiexfilms]

Noob question about shaders: the effect shown here seems to be repeating forever. Is it possible to switch the regular shader of an object for this one as a sort of transition effect? Or is that not performance friendly?

[@avgchoobafan]

Try changing the Sin function with a float, so you can control it

[@nikhilkadiyan4847]

Cant we just use he abs scalar function to give absolute(modulus) values of sin? 3:50

[@Lumpiluk]

Wouldn't that make the transition less smooth and result in a higher average value over time than sin(x)/2+.5 because there's a non-zero slope whenever the sine transitions from positive to negative and vice versa?

[@Lumpiluk]

sin(x) mod 1 (is that what you were thinking of?) would abruptly jump from black to white: www.wolframalpha.com/input/?i=sin(x)+mod+1

[@petertarany2313]

Hi, how would you add a shader effect (like this) only when an enemy dies or spawns? would you change the shader of the object at runtime?

[@petertarany2313]

For those wondering: just change the time input to a shader parameter scalar (ScalarUniform) and then you can change that property in code, animate it, etc

[@pvpworld]

@@petertarany2313 I'm having trouble with this, i want to use this as a death effect but don't understand how to apply it in code with ScalarUniform

[@Thkaal]

is there no way to use nodes to make perlin?

[@reversamente]

how can i add this shader to a 2d img/sprite?

[@BuiLderBroz]

More tutorials plz

[@DarkeyPro]

can you make a custom node with this

[@andrewdavid308]

where can I learn shader development?

[@arturkarlov3000]

this is crazy cool! a stupid question: is it possible to export the cycles node trees from Blender into Godot?

[@avgchoobafan]

You can't, but try to convert it by searching the nodes with same function in godot

[@josephbrandenburg4373]

I think there is basic support for Principled BSDF in gltf expprter... not sure though.

[@ekaterinavalinakova2643]

The way to do this would be by trying to imitate what you created in blender but with godot shader nodes (both core and addons). I'm currently in the process of trying to figure it out, starting with planet textures. In terms of performance, it is several times faster than blender eevee for a similar amount of shader details, so trying to make a procedural game in blender game engine wouldn't be a good direction, trying to recreate the node tree in godot would be. This is especially true of you like permissive licenses and dislike GPL. I will upload a tutorial on this when I'm done.

[@ghostwarrior-ni1xb]

how to duplicate shader nodes

[@kgaming7599]

10:37 No... They're Vector2??

[@Wisdawms]

each operator is a Vector3

[@chiboreache]

Visual nodes are definitely needs some padding around as well as scale and free space to the colored labels, it even more obvious in Visual Scripting graph, it's just harmful for eyes and this tinkering with option menu looks a little annoying, it would be better to have dedicated buttons for a such important things, or even better - to have opportunity creating noise texture inside shader editor and yeah, you can also use tangent /watch?v=hQ_FAnZ-4-c ;-)

[@me2beats313]

👍

[@jamesheasman1594]

Thanks for pinning me :)

[@incaroads001]

Dooplicate. ;)