Godot 3D Spatial Shaders: Getting Started

Поделиться
HTML-код
  • Опубликовано: 27 июл 2024
  • Godot shaders aren't so scary! This quick intro will hopefully get you over your fear of them, and you can start making something awesome! Link to docs below ↓↓↓
    0:00 Intro
    0:19 Add a material
    0:51 Convert spatial to shader material
    1:06 Simple shader material
    1:46 Animating color with sine function
    2:14 Modifying vertices
    2:44 Ripples of colors
    2:55 Saving shaders and materials
    3:21 Setting variables externally/from script
    4:19 Setting a texture on a custom shader
    4:56 Using texture colors to mask
    5:52 Modify UV coordinates.
    6:11 render mode - unshaded/add/multiply
    6:22 Shader documentation
    6:40 Patrons
    Spatial shader reference page: docs.godotengine.org/en/3.4/t...
    Consider supporting me on Patreon if you found this useful. I get nothing from RUclips! / jitspoe
    #GodotEngine #Shaders #GameDev
  • ИгрыИгры

Комментарии • 109

  • @homelessbag
    @homelessbag Год назад +26

    came for the shaders, stayed because of the moustache, and subbed because i learned how to pronounce godot :)

  • @WuCSquad
    @WuCSquad 4 месяца назад +7

    Love all the different pronunciations of Godot.

  • @BastiaanOlij
    @BastiaanOlij 2 года назад +4

    Great stuff Jits!!

  • @MrEliptik
    @MrEliptik 2 года назад +5

    Really cool! Super dynamic and packed with information, awesome!

  • @kitastro
    @kitastro 10 месяцев назад +14

    saying godot different each time XD

  • @jburtson
    @jburtson 2 года назад +3

    This absolutely made me less afraid of shaders, I’ll definitely be gettin’ silly in Gootdoot

  • @akienK
    @akienK 2 года назад +6

    Really nice format, that was really fun and packed with good tips. Goodoo...

  • @J_A_C023
    @J_A_C023 2 месяца назад +6

    I think you covered every single pronunciation of the engine for us all, thank you :P That was EPIC

    • @jitspoe
      @jitspoe  2 месяца назад +1

      Nah, still around 60 more to go.

    • @J_A_C023
      @J_A_C023 2 месяца назад

      @@jitspoe true story

  • @Quandinis
    @Quandinis 2 года назад +3

    i think my favourite part isn't the knowlage i now have about shaders in godot, but that the pronunciation of godot changes everytime. by far the best injection of humor in a tutorial!

    • @jitspoe
      @jitspoe  2 года назад +3

      I've discovered at least 64 possible permutations. Should be able to keep this gag going for a lot of tutorials!

  • @crabsoft
    @crabsoft 2 года назад +3

    Tried a lot of tutorials, this was the first one that didn't abruptly fly off the rails with crazy math. I made a shader. Thanks, yo.

  • @PhilGorley
    @PhilGorley Год назад +5

    In all seriousness, this is a succinct intro to 3D spatial godot shaders. Much of the learnings are transferred to canvas shaders too, so, this tutorial was a tremendous help for getting me to understand shaders. I've kept the tab open to this video for the past two weeks while I've done some shader work. Thanks for the content and cheers!

  • @user-gj6nq1nn1u
    @user-gj6nq1nn1u Год назад +5

    very informative. i like how you made me question my sanity everytime you pronounce godot so that the brain gears dont get rusty

    • @jitspoe
      @jitspoe  Год назад +3

      What? I just said "Godot".

  • @Obeah111
    @Obeah111 2 года назад +4

    Great Gerdoot tutorial! I have don't several game jams, and have still been intimidated by shader---this video presents it in a very approachable manner!

  • @nowherebrain
    @nowherebrain 2 года назад +3

    I love how your pronunciation for godot keeps changing...I get it...greatintro to shaders vid...short, simple and to the point...yet full of info.

  • @wires87
    @wires87 6 месяцев назад +3

    best godot tutorial I've ever seen please keep making these

  • @jeremiahlampkey3137
    @jeremiahlampkey3137 5 месяцев назад +1

    I googled for godot shader tutorials. Saw one that was 22 mins long and then this one for ~ 7 minutes.
    Absolutely pleased with how much, how fast, and how concise the information was presented in this video!

  • @sigterm_
    @sigterm_ Год назад +2

    This was really excellent. The fun step-by-step examples really distilled how to break down the basics for me. Off to experiment!

  • @mr._gear
    @mr._gear 10 месяцев назад +3

    "Scary, black magic and voodoo" was epic😂

  • @the-guy-beyond-the-socket
    @the-guy-beyond-the-socket 11 месяцев назад +4

    dude your videos are hidden gold.

    • @jitspoe
      @jitspoe  10 месяцев назад +3

      Hopefully the gold becomes more discovered in the future! :)

  • @CaptainCarrotzz
    @CaptainCarrotzz 7 месяцев назад +2

    Best intro to shader video I've seen. Thanks.

  • @Nickname-lm7ch
    @Nickname-lm7ch 7 месяцев назад +3

    Thank you man what a cool thing. I am quite keen on the gada engine

    • @jitspoe
      @jitspoe  7 месяцев назад +2

      Yeah, gudoot is pretty neat!

  • @microdavid7098
    @microdavid7098 2 года назад +2

    jits tutorials? Hype!

  • @JulezChilluminati
    @JulezChilluminati Год назад +1

    Finally, a godot shader video that makes sense to me! Thank you so much, funny beard man!

  • @wisconsinwintergreen6296
    @wisconsinwintergreen6296 3 месяца назад +1

    Very well done video. It managed to give just the right amount of information in under 7 minutes. Other videos would have spent well over half the length of this video just regurgitating random boilerplate knowledge about shaders that anyone could guess.
    Much thanks from a beginner and you have earned a subscriber!

  • @Gizrah
    @Gizrah Год назад +3

    I haven't heard someone say godot as godot in so many different ways.
    Thanks for demistifying some of the shader voodoo for me!

    • @jitspoe
      @jitspoe  Год назад +2

      I just called it "Godot".

    • @_-_o-o_-_
      @_-_o-o_-_ Год назад +4

      @@jitspoe Weird. I always pronounce it "Godot"

  • @craniummatter
    @craniummatter Год назад +2

    this video is gold. thanks!

  • @Paruthi.618
    @Paruthi.618 Год назад +2

    one of the best godot shader tutorial

  • @sinecure5
    @sinecure5 2 года назад +1

    Great tutorial, thanks for making this!

  • @sakari.niittymaa
    @sakari.niittymaa 4 месяца назад +1

    Instant sub after watched this video! Really well explained!

  • @spimortdev
    @spimortdev 2 года назад +3

    That's awesome! Thanks for that tutorial 🙂

  • @Failfer
    @Failfer 6 месяцев назад

    Really good explanation and I apprecaite the wave thing as I was able to replicate it before but still don't fully understand how and this helped, thank you

  • @jeffreystephens2658
    @jeffreystephens2658 3 месяца назад +2

    This video contained the answer I needed. Thank you very much. Liked, subscribed, saved.

    • @jitspoe
      @jitspoe  3 месяца назад

      Awesome! Glad it helped!

  • @adrinuk_gamedev
    @adrinuk_gamedev 2 года назад

    I really liked this video :D Thanks a lot for the help!

  • @4.0.4
    @4.0.4 9 месяцев назад +1

    I was worried this tutorial would be too outdated but it's still valid!

    • @jitspoe
      @jitspoe  9 месяцев назад +1

      Fortunately not TOO much has changed regarding shaders between Godot 3 and 4. Godot 4 has a lot of new nice things like includes, defines, and other preprocessor stuff, too!

  • @D.E.Nicolas.Goncalves
    @D.E.Nicolas.Goncalves 8 месяцев назад +2

    You made it simple for me! thanks!

    • @jitspoe
      @jitspoe  8 месяцев назад +2

      Glad I could help!

  • @herrwoland3500
    @herrwoland3500 2 года назад

    Thank you so much for this!

  • @moffwings
    @moffwings 8 месяцев назад +1

    thank you! very fun

  • @michaelorlev9925
    @michaelorlev9925 Год назад +4

    Dude, you're like the Ian hubert of Godot..! Just found your channel, subbed liked, and now commented

    • @jitspoe
      @jitspoe  Год назад +1

      Haha, that's the best complement I could receive! That's definitely what I'm going for. Bothers me when people take 10 minutes to explain something that could be done in 15 seconds! Just wish I had the time to make more tutorials.

  • @ClokworkGremlin
    @ClokworkGremlin 9 месяцев назад

    One of the things I love about shaders is they're INCREDIBLY powerful for procedural asset creation. Because the shader runs on the GPU, ideally entirely within the span of a single frame, you can set some parameters as Uniforms which the Godot UI will let you play with in the editor and see the results of those tweaks in realtime, instead of having to wait for the CPU to process your changes and send them to the GPU (which can sometimes take a few seconds, especially with very large datasets)

    • @jitspoe
      @jitspoe  9 месяцев назад +1

      Material Maker basically takes that to the extreme. 😁

  • @mch43856
    @mch43856 Год назад +1

    thank you, amazing!

  • @PenguinMaths
    @PenguinMaths Год назад +1

    perfect tutorial

  • @SLSat
    @SLSat Год назад +1

    This was a really helpful

  • @fahadhasn
    @fahadhasn Год назад +2

    Gruda, Garuda, Grudo. I am groot. XD Nice Tut Mate

  • @davidmurphy563
    @davidmurphy563 2 года назад +1

    Could I request a further tutorial to get me over the fear of your mustache? ;))
    Great little tutorial, thanks!

  • @GameFactsSpecial
    @GameFactsSpecial 7 месяцев назад +1

    thanks even though I'm using godot 4 this was still helpful

  • @crispyghoul
    @crispyghoul Год назад +1

    Wow, this was a great tutorial. I could think of a way to use the uv method to make a moving gore texture for creatures in my.project.

    • @jitspoe
      @jitspoe  Год назад

      You can create a lot of cool effects by simply animating UV's!

  • @ruthmoreton6975
    @ruthmoreton6975 8 месяцев назад +2

    I'm glad you pronounce it correctly - "Godot" as in the Samuel Becket play "Waiting for Godot" to which the name is a reference ( Developer stated this ) and not "G'doh" as some people pronounce it.
    Ahh crap. Seriously dude? Gadoot and Go Dot? I will assume you are trolling people and I just fell for it.

  • @NonUnknownDev
    @NonUnknownDev 2 года назад +2

    what a tutorial bro, what a tutorial.....

  • @Combine7355
    @Combine7355 2 года назад +1

    Goodness gracious... 6:11

  • @ez1170
    @ez1170 Год назад +1

    epic

  • @PaperMouseGames
    @PaperMouseGames 5 месяцев назад

    This is absolutely fantastic. I wonder if there's any way to create more than 3 color masks though. Rather than using rgb from a texture could you specify certain colors to be identified by the shader and then changed to new colors?

    • @jitspoe
      @jitspoe  5 месяцев назад +1

      Technically you can do 4 with RGBA textures. You could potentially use ranges of colors, like first half of red maps to one color and the second half of red to another, but keep in mind you'll have less precision with this (unless using a high precision image format, but that takes more memory), and you might run into some poor quality or glitches, especially if you're using texture compression.

    • @PaperMouseGames
      @PaperMouseGames 5 месяцев назад

      @@jitspoe Thanks much for the reply! I'm working with pixel art textures, so each color is very clearly defined and I think it could work, but what I need to figure out is if there's a way to pick up a texture's individual pixel color in 3D the way you can in 2D, I'll keep experimenting 🤞

    • @jitspoe
      @jitspoe  5 месяцев назад

      @@PaperMouseGames Shouldn't be a problem, but keep in mind that, by default, the albedo texture gets converted from sRGB to Linear, then everything gets converted from linear to sRGB back in the end, so you might not get the exact values you expect. You could take the texture value and multiply it by 255 and round it to an integer to pick exact values, though.

  • @perfredelius
    @perfredelius 3 месяца назад +1

    I love the condensed format! The next thing I'd want to learn here is how to bend the mesh along a 3d curve or something like that. I.e. how to use a bit more complex external "non-mesh" data in the shader. And then see how the mesh changes as the curve is interacted with.

    • @jitspoe
      @jitspoe  3 месяца назад

      In the end, it's all math! Just have to figure out what the math is to generate the curve you want. Alternatively, you can actually use an image if you want to do something more elaborate. You can read a texture within the vertex() function and use that to alter the vertex positions. Great for making leaves rustle in the wind and such with a noise texture.

    • @perfredelius
      @perfredelius 3 месяца назад

      ​@@jitspoe Ah, yeah that's true. I suppose you only need to send in the control points and then calculate the curve from inside the shader. That's probably how to do it.

  • @JRHainsworth
    @JRHainsworth 10 месяцев назад +2

    Has the spacialmaterial been replaced with StandardMaterial3D in godot4?

    • @jitspoe
      @jitspoe  10 месяцев назад +1

      Yep! The also added another one called ORMMaterial which reads ambient occlusion, roughness, and metallic all packed into a single texture to be more optimal.

  • @nyuh
    @nyuh 2 года назад

    nice moustache
    oh and nice vid too i guess :^)

    • @jitspoe
      @jitspoe  2 года назад +3

      Thanks, I grew it myself!

  • @lucazfc
    @lucazfc 2 года назад

    Hi.
    Do you know how to simulate lighting using a spatial shader?
    For example, f I'm using 'render_mode unshaded' or 'render_mode ambient_light_disabled' and then I want to simulate the effects of a directional light using only the shader. How can I achieve that?

    • @jitspoe
      @jitspoe  2 года назад +3

      In short, you need to do the dot product of the surface normal with the direction to the light, make sure it's not less than 0 (ex: max(0.0, dot(light_dir, normal)) and multiply that by the albedo to get some super basic lighting. If you want parts of the shader to be lit and other parts unaffected by light, though, you're probably better off not using unshaded and using EMISSION for the parts you don't want impacted by lighting instead.

  • @7fantasy7
    @7fantasy7 5 месяцев назад

    Thank you! This video made me believe, I can do complex shaders one day... After losing confidence from another tutorials

  • @jonmoore3486
    @jonmoore3486 7 месяцев назад +1

    waiting for guh-dough

  • @user-nd9qj8pm4d
    @user-nd9qj8pm4d 9 месяцев назад +1

    You actually spooked me at 6:11 haha

    • @jitspoe
      @jitspoe  9 месяцев назад

      😆 Forgot I even had that in there.

  • @fahrulrozy7838
    @fahrulrozy7838 10 месяцев назад +2

    Shader in godot use glsl or hlsl?

    • @jitspoe
      @jitspoe  10 месяцев назад +2

      GLSL, but with a bit of a Godot wrapper so there's some built-in functionality.

  • @ClaudioCavalcanteTonha
    @ClaudioCavalcanteTonha 10 месяцев назад +1

    Does someone knows the difference set color by using COLOR or ALBEDO?

    • @jitspoe
      @jitspoe  9 месяцев назад

      COLOR is used for 2D canvas item shaders and can include alpha. ALBEDO is just the diffuse color (lighting and such will be applied if it isn't unshaded).

    • @ClokworkGremlin
      @ClokworkGremlin 9 месяцев назад

      COLOR is used for Canvas shaders, and Vertex shaders if you want to set the vertex color. ALBEDO is used for Fragment shaders. Basically that's the whole thing, ALBEDO is the pixel color, COLOR is the vertex color.
      Godot will yell at you if you try to set COLOR in the Fragment shader, so it's not a mistake you're likely to make for long.

    • @jitspoe
      @jitspoe  9 месяцев назад

      @@ClokworkGremlin Oh, right, forgot about the vertex color!

  • @cucubob9535
    @cucubob9535 13 дней назад

    Im getting this error: "Cannot call method 'set_shader_param' on a null value' when i try to change the parameter value.

    • @jitspoe
      @jitspoe  11 дней назад

      Might be because "onready" was changed to "@onready" in Godot 4. Try adding the @ before it.

  • @creationsmarko
    @creationsmarko 2 года назад +6

    Great video but it kills me when he says "Godoot" lmao

  • @mineralbrewer2289
    @mineralbrewer2289 Год назад

    is it possible to add shaders to a glb file?

    • @jitspoe
      @jitspoe  Год назад

      I'm not sure if the glb specification allows for that. I'm pretty sure you can store basic materials in them, but I don't know if you can do any sort of programming with them.

  • @Arthur-jg4ji
    @Arthur-jg4ji Год назад

    do you know how to have shadow with the shader in 3D ?

    • @jitspoe
      @jitspoe  Год назад

      Just don't put "unshaded" in the render_mode and it should have lighting and shadow applied.

    • @Arthur-jg4ji
      @Arthur-jg4ji Год назад

      @@jitspoe thx you for the reply. But i have found a solution with the scatter plugin.

  • @x1expert1x
    @x1expert1x 10 месяцев назад +1

    with the final downfall of Unity at least your channel will get a lot more attention. I am not gonna lie, I loved Unity and spent a lot of time learning it. But I love open source more. Like my dad always says, there's a pony under that pile of sh*t!

  • @ChristopherYabsley
    @ChristopherYabsley 8 месяцев назад +2

    It's pronounced Godot.

  • @bobsondugnut4179
    @bobsondugnut4179 2 года назад +1

    gadort

  • @decqyd
    @decqyd Год назад +13

    its pronounced godot smh

  • @moonlightblue9196
    @moonlightblue9196 8 месяцев назад +1

    voodoh lol

  • @computer9764
    @computer9764 2 года назад +4

    Almost didn't watch because the mustache.
    You're lucky I did 😉

    • @jitspoe
      @jitspoe  2 года назад +7

      *Whew* I'd hate to think of what might happen if you didn't.

  • @MrDoboz
    @MrDoboz 8 месяцев назад +1

    it's still black magic. you can make pointless unsensible whacky things in a few minutes, but making anything realistic or actually useful will take a shitton of time and knowledge

    • @jitspoe
      @jitspoe  7 месяцев назад

      Fortunately, the way Godot shaders are set up with the PBR (physically based rendering), really all you have to worry about is setting things like ALBEDO, ROUGHNESS, METALLIC, etc. It's typically just a matter of scrolling UV's or blending different textures together. You don't have to do all the math to make a realistic looking render.
      Is there something specific you're struggling with?

  • @everlastingmedia
    @everlastingmedia 10 месяцев назад +3

    gadoot... stahp it