How Shaders Work (in OpenGL) | How to Code Minecraft Ep. 3

Sdílet
Vložit
  • čas přidán 17. 05. 2024
  • Join the Discord: / discord
    Follow me on Twitch: / gameswthgabe
    In this episode I do a deep dive into the code and concepts behind GLSL shaders. I go over everything from how to construct them, compile and link them, and execute them on the GPU to how to think about shaders conceptually. This is the next episode in the Coding Minecraft tutorial series. In the next episode I will be covering dynamic textures and texture UVs.
    Challenges: github.com/codingminecraft/Mi...
    Planet Shader (HamzaHutchinson): www.shadertoy.com/view/llj3zV
    Plus Shader (Nimitz): www.shadertoy.com/view/4slXW7
    Sierpenski Fractal Shader (Klems): www.shadertoy.com/view/XljSWm
    3Blue1Brown Linear Transformations: • Linear transformations...
    Shader Versions: en.wikipedia.org/wiki/OpenGL_...
    GLSL Builtin Variables: www.khronos.org/opengl/wiki/B...)
    Vector Constructors: www.khronos.org/opengl/wiki/D...
    Vector Types: www.khronos.org/opengl/wiki/D...
    glCreateShader: www.khronos.org/registry/Open...
    glUniform: www.khronos.org/registry/Open...
    Qualifier Order: www.khronos.org/opengl/wiki/T...
    My code: github.com/codingminecraft/Mi...
    Bookmarks:
    0:00 Intro
    1:00 Subscribe!
    1:13 Vertex Shader Transformations
    3:31 Coding the Transformation Matrix
    4:23 Coding the View Matrix
    5:48 Coding the Projection Matrix
    7:04 How GLSL Works
    10:41 GLSL Custom Constructors
    11:15 Vector Swizzling
    12:43 Compiling Shaders
    13:49 Error Checking Compilations
    15:30 Linking Shaders
    16:24 Error Checking Linking
    17:19 GLSL Reflection
    19:56 Uploading Uniforms
    21:11 In/Out/Flat Keywords
    24:00 Shaders Conceptually
    Shaders at the end of the video:
    (by Kali): www.shadertoy.com/view/NlsXDH
    (by knarkowicz): www.shadertoy.com/view/XtlSD7
    (by EvilRyu): www.shadertoy.com/view/Xd3fR7
    Book of Shaders: thebookofshaders.com/
    Music from Music Vine
    Fire (by Raft): musicvine.com/track/raft/fire
    The Gift (by Onsoho): musicvine.com/track/onsoho/th...
    Blue Waltz (by Yoav Ilan): musicvine.com/track/yoav-ilan...
    “The Soft Block” licensed via Music Vine: 5KEXLAZZUKPIVGS2
    Muse (by Braden Deal): musicvine.com/track/braden-de...
    Tell Your Story (by Adi Goldstein): musicvine.com/track/adi-golds...
    “Fickle” licensed via Music Vine: ZX7THVN1L1UQWYD0
    ---------------------------------------------------------------------
    Website: ambrosiogabe.github.io/
    Github: github.com/ambrosiogabe
    Here are some books I recommend if you want to learn about game engine development more thoroughly. I do not profit off any of these sales, these are just some books that have helped me out :)
    My Recommended Game Engine Books:
    Game Engine Architecture: www.gameenginebook.com/
    Game Physics Cookbook (Read this before the next physics book): www.amazon.com/Game-Physics-C...
    Game Physics (Ian Millington): www.amazon.com/Game-Physics-E...
    Game Programming Patterns (Free): gameprogrammingpatterns.com/
    My Recommended Beginning Game Programming Books:
    JavaScript Game Design: www.apress.com/gp/book/978143...
    My Recommended Java Books:
    Data Structures/Algorithms: www.amazon.com/Data-Structure...
    LWJGL (Free, but I haven't read this thoroughly): lwjglgamedev.gitbooks.io/3d-g...

Komentáře • 87

  • @MysteryPancake
    @MysteryPancake Před 2 lety +80

    Looking forward to the 36 hour version for Vulkan

  • @patrickcomden8678
    @patrickcomden8678 Před 2 lety +60

    I really love this series! Very excited to see where it goes.

    • @battosaijenkins946
      @battosaijenkins946 Před 2 lety +2

      @ GamesWithGabe, You made a huge blunder @ 6:52 where glm::mat4 projection = glm::perspective(glm::radians(45.0f)... not just 45.0f!

    • @GamesWithGabe
      @GamesWithGabe  Před 2 lety +7

      Well I wouldn't say it's a huge blunder. Technically 45 radians is the same as 58 degrees, and some people prefer an fov of 60 degrees. And I may have meant 45 radians and not degrees the whole time 😏. In all seriousness good catch though haha, I'll have to update the code for anybody referencing it

    • @ibegream5854
      @ibegream5854 Před 2 lety

      @@battosaijenkins946 bro... You got ratio'd so savagely two times by the same guy, while trying to roast him lmao
      Or feedback

  • @dimi5862
    @dimi5862 Před 2 lety +2

    This is a series I've alway been looking for, but could never find it. Please make more videos, I really enjoy this kind of content!

  • @zeon137
    @zeon137 Před 2 lety +8

    Incredibly informative and well done as always. Great video and thank you for the quality content :)

  • @bxnny0374
    @bxnny0374 Před rokem +1

    Instant sub. This was the first video I’ve ever seen of yours and it is so, so helpful. I’m so excited to binge watch your whole channel!!!

  • @w.t.2905
    @w.t.2905 Před 2 dny

    WHOOOOOW!!! 2:19 mario can go inside a tube!!! Amazing!

  • @EnderKill98
    @EnderKill98 Před 2 lety

    This explained really well how glsl stuff works. I had a course a while ago, but was not quite sure and this video really drove home how it works internally. I also didn't really understand the whole "Shader" vs "Program" stage until now.
    Great explanation!!!

  • @hirzanabqary
    @hirzanabqary Před 2 lety +1

    just when i started going through this series there's a new episode. Nice!

  • @orbyfied
    @orbyfied Před 2 lety +8

    Amazing series. Sad that only 4% of people are subscribe. This is professional course level content for free.

  • @dimitris3sr
    @dimitris3sr Před 2 lety

    Absolutely wonderful! Can't wait for the next one

  • @Destroyer19941995
    @Destroyer19941995 Před 2 lety +8

    Really like how you progressed with your explanations. Feeling like I am watching discovery channel how it works

  • @XxSabergamingxX
    @XxSabergamingxX Před 2 lety +2

    Please keep up this series I love it!

  • @merlang7
    @merlang7 Před 2 lety +1

    This is best explanation of shaders I've ever seen.

  • @6px
    @6px Před 2 lety

    i was waiting for this for 2 weeks! lets gooo

  • @mrCetus
    @mrCetus Před 2 lety +1

    Nice! Wish there were more content like this!

  • @SB-pq8dp
    @SB-pq8dp Před 2 lety

    Incredible! You have such a great talent for explanation :^)

  • @joewilliams4390
    @joewilliams4390 Před 2 lety

    This is a great video! Wish I had this to hand when learning

  • @RonnyRun
    @RonnyRun Před 6 měsíci +1

    I'm impressed by your ability to explain such things o.o ❤

  • @lobotomiepraktikant1128
    @lobotomiepraktikant1128 Před 2 lety +1

    Good video for everybody who wants to learn about shaders! :)

  • @Dasedandconfused314
    @Dasedandconfused314 Před 2 lety +1

    Dude top notch! I feel like I’m back in college! Thank you!

  • @georgeelsham
    @georgeelsham Před 2 lety

    This series has given me motivation to try out GPU programming with Metal (not OpenGL, but each to their own), thank you!

    • @MehOccor
      @MehOccor Před 2 lety

      Please, make sure to use Metal Debugger as much as you can when learning. It's an awesome tool and it will help you understand all sorts of issues. Watch some WWDC videos to see how to use it, and good luck, started GPU programming with Metal too and it's sick.

  • @louitdev5540
    @louitdev5540 Před 2 lety

    Dude your channel is so underrated!

  • @ricardohnn
    @ricardohnn Před 2 lety

    AMAZING CONTENT! Totally subscribing

  • @junkokonno
    @junkokonno Před 2 lety +1

    shaders is really daunting the first time I learned about it, it still is.

  • @mo-s-
    @mo-s- Před 2 lety

    Thanks I wondered how that stuff works for way to long! :D

  • @kurciqs8355
    @kurciqs8355 Před 2 lety

    this gotta be the best opengl tutorial

  • @doodle173_
    @doodle173_ Před 2 lety +5

    Not sure if you'll ever see this, but I just wanted to say that I think this series is really cool!
    I tried doing this "Code a Minecraft clone" type project a while ago but never got far past rendering a few cubes - mostly due to confusion and lack of understanding in terms of OpenGL coding.
    If I'm being honest though, I think this explains a lot of neat concepts that helped me understand some of the issues I had in the past, though.

    • @GamesWithGabe
      @GamesWithGabe  Před 2 lety +2

      Thanks for the comment! Even if I don't respond I try to read all the comments and I always appreciate encouragement like this :)
      And coding minecraft is definitely a hard project haha. I also tried coding it unsuccessfully 2-3 times before I came up with a solution that I like :D

  • @oglothenerd
    @oglothenerd Před rokem +1

    [3:50] What font are you using for that code editor window? I really like it!

  • @RiccardoBocci
    @RiccardoBocci Před 2 lety

    can't wait for next ^_^

    • @GamesWithGabe
      @GamesWithGabe  Před 2 lety

      Thanks! I'll be releasing a devlog in the next week or so. Unfortunately that means the next tutorial will probably be coming out mid-late March, but I'll be working on it in my spare time :D

  • @shehryarmahmood5020
    @shehryarmahmood5020 Před 2 lety

    Good man!

  • @PLANKCTON
    @PLANKCTON Před 2 lety +5

    La vidéo est vraiment cool !
    C'est bien expliquer est vraiment intéressant pour les gens qui débute comme moi ;)

  • @Gibus21250
    @Gibus21250 Před rokem

    Hello! nice video! What is the background music at 7:38 ? :D

  • @stavanmehta9218
    @stavanmehta9218 Před 2 lety +1

    Hey in your rasa nlu tutorial which rasa version did you use cause in the new one (Downloaded on Feb 16 2022)almost everything is changed like the model files now have no nlu and core and the interpreter is not being imported although rasa shell works just the same.
    Thank you

  • @KozelPraiseGOELRO
    @KozelPraiseGOELRO Před rokem +1

    Kozel thing in head hurt.
    Maybe this info and tutorial would be usefull to me if I was wanting to learn how to do it.

  • @quentinquadrat9389
    @quentinquadrat9389 Před 2 lety +2

    Nice video, a cool syntax trick to pass data from vertex shader to fragment shader without confusing namess is to use structures. For example fragment side: out struct v2f_s { vec2 UV; } v2f; and fragment side: in struct v2f_s { vec2 UV; } v2f; and you can access as v2f.UV of course structures can be more complex.

    • @GamesWithGabe
      @GamesWithGabe  Před 2 lety +2

      Nice! I haven't messed around with structs in shaders too much, but this is something I've been meaning to try :)

  • @abdoemr3436
    @abdoemr3436 Před 2 lety

    Hi gabe thx very much but I really hope that u make a dedicated course for computer graphics (opengl) then reference this course in the upcoming series

  • @VictorGordan
    @VictorGordan Před 2 lety +3

    Very nice video, it reminds me of 3Blue1Brown! :)

    • @GamesWithGabe
      @GamesWithGabe  Před 2 lety +1

      Yea, 3blue1brown's animation library is super awesome:D

  • @WatchInVR1
    @WatchInVR1 Před 3 měsíci

    Hi. I was typing "understanding registers in shaders" in the search bar in CZcams and got to your video.
    r1, r2 etc are temporary registers;
    o0, o1 etc are output register;
    v1, v2 etc are input register (for vertex shaders 3.0).
    I would really like to understand this because I want to stereorise shaders in games. This means I want to edit shaders of games through DLL wrappers.
    Do you have any videos or sources that explains what these registers do and what they mean in ASM or HLSL language..?

  • @immanuelcharles2875
    @immanuelcharles2875 Před 2 lety +2

    Is your library open source? If so I would love to see some of its code! Also you have thought me to a lot about graphics programming through the Java Mario game engine series. I feel like I have enough knowledge about shaders and general graphics api stuff to maybe implement these concepts in another graphics api like vulkan or directx! I just want to say thank you for keeping this free for everyone😀.

    • @GamesWithGabe
      @GamesWithGabe  Před 2 lety +2

      Yep it's open source! There's no license but I can add an MIT license just to make it clear :)
      github.com/ambrosiogabe/CppUtils

    • @immanuelcharles2875
      @immanuelcharles2875 Před 2 lety

      @@GamesWithGabe thanks!

  • @shivanshuraj7175
    @shivanshuraj7175 Před 2 lety

    can you do compute shader?for beginners

  • @rayenhamdaoui
    @rayenhamdaoui Před rokem

    This video clarifies how easy to use game engines are

  • @user-ks9fh2gv3r
    @user-ks9fh2gv3r Před 2 lety +1

    Реально крутой туториал. Это не то, что я искал, но то, что мне было нужно.
    Однако я слишком тупой и ограниченный в понимании всего этого сразу.
    Поэтому увидимся через парочку лет и тогда посмотрим, если эта инфа влезет в меня.

  • @OleKristianElns
    @OleKristianElns Před 2 lety

    Funny that this showed up in my recommendations. I started learning OpenGL some months ago and I am currently making a minecraft clone myself (without following any tutorials as a challenge). So far I have been able to make a 3d world with minecraft blocks and infinite terrain generator that utilizes a perlin noise-like algorithm that makes the terrain look minecraft-esque. It's fun but also frustrating.

    • @GamesWithGabe
      @GamesWithGabe  Před 2 lety

      I completely understand. I've been working on a MC clone for the past 8ish months that I plan to turn into my own game. Like you said, it's fun, but it can be very frustrating at times haha. Good job on the progress so far though! And I'm sure you'll learn a ton of new stuff throughout the process :)

  • @KiroHayashi
    @KiroHayashi Před rokem

    When CZcams recommend this video when minecraft shaders is not a thing anymore in bedrock, I wish they are adding it back.

  • @GVal98
    @GVal98 Před 2 lety +3

    Why am I watching this at 4am. I don't even make games

    • @zokalyx
      @zokalyx Před 3 měsíci

      you could start tho

  • @xd_joe
    @xd_joe Před 2 lety

    Always wondered how shaders were made

  • @noxmore
    @noxmore Před 2 lety

    I'm new at c++ and was wondering why you're using things like GLint instead of int?

    • @GamesWithGabe
      @GamesWithGabe  Před 2 lety +1

      Those are just typedefs that the OpenGL API provides. You can safely use an int most of the time, but it is possible that on some platforms they might use a 16 bit integer or something instead of a 32 bit integer. This would have especially been true around the time OpenGL was created when 32 bit machines were not mainstream. I wouldn't worry about this unless you run into a specific example that requires that though :)

  • @SuperGrimmy
    @SuperGrimmy Před 2 lety

    glProgramUniform* is much nicer in general, but needs GL 4.1... BUT the vast majority of 3.3 implementations support it. No shader binding needed so you can set a uniform at an point in time without worrying.

  • @mobcont8335
    @mobcont8335 Před 2 lety

    Excellent tutorial and presentation.
    However i can't help but feel that opengl functions in general are way more overcomplicated than they should be, and i really don't know why.
    I wanted to take a look at vulkan and other libraries but i think thos will be even worse.

  • @chonkychungus
    @chonkychungus Před 2 lety

    love these videos but pleaaasee no music :c I want to put my own music on in the background whilst I watch c:

  • @joysaha3927
    @joysaha3927 Před 2 lety

    ❤️❤️👌👌👏👏

  • @dr_nyt4041
    @dr_nyt4041 Před 2 lety

    3:45 glm::scale requires another parameter. You should probably do "glm::mat4 transform = glm::scale(glm::mat4(1.0f), scale);"

    • @GamesWithGabe
      @GamesWithGabe  Před 2 lety

      That's equivalent to what I did in the video :). Glm overload all those functions so that you can construct the matrix either way

    • @dr_nyt4041
      @dr_nyt4041 Před 2 lety

      @@GamesWithGabe For me it required me to do it this way. Maybe I have an older version of glm or something

  • @zdspider6778
    @zdspider6778 Před 9 měsíci

    3:42 This is wrong. Scaling should be done last. Otherwise, let's say you're scaling it by 0.001. That means whatever translation you apply AFTER, will be scaled by 0.001. The translation itself will be scaled. You won't move it 10 units (for example), you'll move it 10 * 0.001 => 0.01 units. Same goes for rotation. Am I the only one to point this out? 🤔 Am I wrong?
    And the glm::scale() function takes 2 parameters, not 1. You'd have to use it as: 'glm::scale(glm::mat4(1.0f), scale)' otherwise it won't even compile. You can see for yourself the function definition on GH: /g-truc/glm/blob/master/glm/ext/matrix_transform.inl

    • @GamesWithGabe
      @GamesWithGabe  Před 9 měsíci +1

      Hey thanks for finding the glm error, it should have that glm::mat4(1.0f) as the first parameter. And in regards to the order, you definitely scale first. You may be confused because of how glm applies the multiplication. In this code github.com/ambrosiogabe/MathAnimation/blob/0b85d45f492a5647db989fac295731350e0fe906/Animations/src/math/CMath.cpp#L780 you can see that the scale is the last thing multiplied. However it’s actually multiplied right to left, so the order is scale, rotate, translate.
      You have the reasoning correct but backwards if that makes sense. If you translate then rotate then scale, the scale will effect the rotation and translation. That’s why you have to scale before you do the other two operations. Hopefully that clears up the confusion, but let me know if you need any other clarification :)
      For more info you can check out this great learn OpenGL article. Towards the middle they explain it like this:
      > When multiplying matrices the right-most matrix is first multiplied with the vector so you should read the multiplications from right to left. It is advised to first do scaling operations, then rotations and lastly translations when combining matrices otherwise they may (negatively) affect each other.
      learnopengl.com/Getting-started/Transformations

  • @AstralSnowstorm6157
    @AstralSnowstorm6157 Před 2 lety

    1:00 Just give me a sec to start planning a video right quick.

  • @icesentry
    @icesentry Před 2 lety

    You forgot to add a link to the book of shaders. It's easy to google, but just letting you know it's missing.

    • @GamesWithGabe
      @GamesWithGabe  Před 2 lety

      Thanks for letting me know! I had a feeling I might have missed something haha

  • @Larkinchance
    @Larkinchance Před rokem

    i'm having an anxiety attack....

  • @bonenaut7
    @bonenaut7 Před 2 lety +1

    > How to code minecraft
    > Minecraft usually not using shaders, and even not using such simple things as Vectors, Matrices, Quaternions and etc
    🤨

    • @bonenaut7
      @bonenaut7 Před 2 lety

      ​@@lolguy91wastakenbyanidiot author says in the title "How to code Minecraft", but minecraft not using shaders by default as i know(1.7.10> absolutely zero shaders)

    • @GamesWithGabe
      @GamesWithGabe  Před 2 lety +4

      Maybe I should retitle series to, "How to code minecraft well" ;)

    • @bonenaut7
      @bonenaut7 Před 2 lety

      @@GamesWithGabe and you will be right, fair enough lol
      Maybe someone sometime will make something really good after your videos
      (Cant just even look at minecraft after their gameloop in old versions lmao)

    • @zokalyx
      @zokalyx Před 3 měsíci

      shaders are the backbone of graphical programming, so it's really good overall to include them in the series. you could potentially use them in your minecraft clone too.

  • @elgatoxd-ki2bo
    @elgatoxd-ki2bo Před 2 měsíci

    En español no hay piipippipi

  • @cali4484
    @cali4484 Před 2 lety

    Dislike 👎

    • @cali4484
      @cali4484 Před 2 lety

      @@lolguy91wastakenbyanidiot so much advertisement made it bad

  • @tarck333333rrrr
    @tarck333333rrrr Před 2 lety

    Nice! Wish there were more content like this!