Graphics Shaders for hobby programmers: Newest Video: LUT maps

Discussion in 'Tutorials' started by The Reverend, Oct 8, 2017.

  1. Intuition

    Intuition Member

    Joined:
    Apr 10, 2018
    Posts:
    8
    wow nice work Reverend. your a genius!
     
    The Reverend likes this.
  2. The Reverend

    The Reverend Member

    Joined:
    Sep 8, 2016
    Posts:
    552
    Far from that. But thanks alot :)
     
    Rukola likes this.
  3. The Reverend

    The Reverend Member

    Joined:
    Sep 8, 2016
    Posts:
    552
    New video uploaded: Bloom with multiple render targets so we can set bloom uniforms per layer instead of blooming the finished application surface.

    preview_frame.gif
     
  4. The Reverend

    The Reverend Member

    Joined:
    Sep 8, 2016
    Posts:
    552
    Just added a new Video.
    This time is about creating a dissolve shader with luma masks. In follow up videos I'll add UV-remapping for more flexibility and colour ramps for a more complex effect.
    preview_luma_v1_animated.gif
     
    Energy Engine and rIKmAN like this.
  5. Joe Ellis

    Joe Ellis Member

    Joined:
    Aug 30, 2016
    Posts:
    909
    I found you can't read a surface that you're writing to, ei.

    surface_set_target(Hello_guys)

    meanwhile in shader:

    uniform sampler2D Hello_guys;

    Color = texture2D(Hello_guys, vvtexcoord)


    Can't remember if it crashed or just returned 0, but not good either way
     
  6. mog-frarol96

    mog-frarol96 Member

    Joined:
    May 13, 2018
    Posts:
    7
    Oooh, this is really nice. I'm working on a project and looking for a shader like this one. Nice work, I'll have to come back here when we reach that stage of devlopment!
     
    The Reverend likes this.
  7. The Reverend

    The Reverend Member

    Joined:
    Sep 8, 2016
    Posts:
    552
    Just added a new Video.

    Ever wondered how the heck you can use v_vTexcoord to get samples from a second texture on a different mixed texture page?
    This time is about remapping UVs from one sprite to another to solve that problem and using vertex buffers as another approach.

    Kinda long, kinda boring, quite important though :)
     
  8. The Reverend

    The Reverend Member

    Joined:
    Sep 8, 2016
    Posts:
    552
    Just added a new Video.

    This time we'll add a 2-coloured rim to our luma mask shader.

    luma_mask_19c_forum_preview.gif
     
    Bart and Energy Engine like this.
  9. Energy Engine

    Energy Engine Member

    Joined:
    Jun 23, 2016
    Posts:
    76
    Awesome tutorials Reverend!

    Just had a quick question. I skimmed thru the vids and noticed that the base sprite you used in the tutorials did not have any transparent regions. A square like sprite like that of a menu box may have different outcomes than a sprite of a non-square character, which would have transparent areas. Just wondering if the same results could be achieved with both types of sprites. In past experience with shaders, this has been an important distinction.

    Thanks and looking forward to the burning dissolve style luma tutorial!
     
  10. The Reverend

    The Reverend Member

    Joined:
    Sep 8, 2016
    Posts:
    552
    Not sure if you're referring to the luma mask video, but if so: the shader will respect the base sprites alpha and in video 19b I'm showing how different shaped sprites can be used without stretching the mask:

    Example mask:


    Example mask & base (by kenney https://opengameart.org/content/jumper-pack):
    spr_mask_blobs_wide-small.png bunny1_ready.png


    Result:
    luma_mask_19c_forum_preview-jumper.gif
     
    Energy Engine likes this.
  11. The Reverend

    The Reverend Member

    Joined:
    Sep 8, 2016
    Posts:
    552
    And it woprks with semi transparent bases as well:
    luma_mask_19c_forum_preview-transparent.gif
     
  12. Energy Engine

    Energy Engine Member

    Joined:
    Jun 23, 2016
    Posts:
    76
    Damn that looks nice!

    Yes, I meant to say about the luma masks. Glad to hear it works with sprites containing not only transparent regions but semi transparent as well.
     
  13. The Reverend

    The Reverend Member

    Joined:
    Sep 8, 2016
    Posts:
    552
    Just added a new Video.
    This time we'll add a colour-ramp to our luma mask shader using a ramp texture:

    preview_luma_v3_animated_small.gif
     
  14. The Reverend

    The Reverend Member

    Joined:
    Sep 8, 2016
    Posts:
    552
    Just added a new Video.


    This time we'll learn how to create luma masks. This is not as simple as it might sound. I struggled at first and this video should provide a good start.

    19e-draw_luma_masks-preview2.gif
     
    jackquake, sylvain_l, Bart and 3 others like this.
  15. Felipe Rybakovas

    Felipe Rybakovas Member

    Joined:
    Apr 12, 2017
    Posts:
    267
    Man, thanks for all that knowledge!
     
    Rukola and The Reverend like this.
  16. The Reverend

    The Reverend Member

    Joined:
    Sep 8, 2016
    Posts:
    552
    Just added a new Video.


    In this video we will create our first distortion shader. We're distorting the fragments of an image so it looks like it's the back wall of a tunnel - similar to the spinning tunnel in Castlevania IV.

    preview-tunnel_distortion-static.jpg

    [​IMG]
     
    chirpy, NWC1990, Posh Indie and 7 others like this.
  17. Shut

    Shut Member

    Joined:
    Jun 21, 2016
    Posts:
    183
    Whoa, awesome work! Thanks a lot for sharing, the dissolve shader looks really cool. I might use it for some transition effects in Kontrakt.
     
    The Reverend likes this.
  18. gnysek

    gnysek Member

    Joined:
    Jun 20, 2016
    Posts:
    1,302
    If you could use different colors in posts, as some of text is unreadable...:
    upload_2018-8-19_15-51-57.png
     
  19. The Reverend

    The Reverend Member

    Joined:
    Sep 8, 2016
    Posts:
    552
    Didn't think about bright backgrounds - sorry :)
    Any better now?
     
    gnysek likes this.
  20. DeathandGrim

    DeathandGrim Member

    Joined:
    Jun 26, 2016
    Posts:
    17
    Awesome thank you! I was driving myself nuts going through all those documents trying to piece it all together.
     
    The Reverend likes this.
  21. The Reverend

    The Reverend Member

    Joined:
    Sep 8, 2016
    Posts:
    552
    Finally made a video on how to add lights to the day and night shader:

    [​IMG]

     
    jackquake, Biosyn, rIKmAN and 3 others like this.
  22. 00.Archer

    00.Archer Member

    Joined:
    Jul 24, 2018
    Posts:
    56
    Hey, those look pretty nice!
    How compatible are the Day-Light tutorials with GMS1? I took a look at your video and it seems you make heavy use of layers.
     
    The Reverend likes this.
  23. The Reverend

    The Reverend Member

    Joined:
    Sep 8, 2016
    Posts:
    552
    The shader code stays the same.
    As for layers, just think of them as depth. If you know your way around in GMS 1 you'll see you need to make only a few changes. The gpu functiins are named differently and the two layer scrpts can be replaced with objects at a slughtly higher andvslightly lower depth than the depth of the tile set.
     
    00.Archer likes this.
  24. NWC1990

    NWC1990 Member

    Joined:
    Sep 3, 2018
    Posts:
    3
    The Reverend likes this.
  25. rIKmAN

    rIKmAN Member

    Joined:
    Sep 6, 2016
    Posts:
    4,442
    I haven't checked this thread for a while - awesome work @The Reverend!

    Some of these shader effects look amazing, thanks for sharing the knowledge.
     
    Last edited: Oct 15, 2018
  26. The Reverend

    The Reverend Member

    Joined:
    Sep 8, 2016
    Posts:
    552
    Thanks for the thanks :)
     
    Joe Ellis, Biosyn, Rukola and 2 others like this.
  27. Biosyn

    Biosyn Member

    Joined:
    Oct 17, 2017
    Posts:
    37
    Great job with adding the lights to the day and night shader.

    Really curious on how you'd tackle normals if you do them.
     
  28. The Reverend

    The Reverend Member

    Joined:
    Sep 8, 2016
    Posts:
    552
    Just added a new Video.

    This time we will create a magnifying glass distortion shader and add some chromatic aberration and colour adjustments.

    preview_magnifying_glass_jpg_large.jpg
     
    IndianaBones and Rukola like this.
  29. kagiol94

    kagiol94 Member

    Joined:
    Feb 3, 2019
    Posts:
    6
    Awesome stuff Reverend! Bloom is definitely one of those must have shaders imo.

    Thanks for the tutorial!
     
    The Reverend likes this.
  30. Dunkelheit

    Dunkelheit Member

    Joined:
    Dec 8, 2016
    Posts:
    10
    Very thanks and it's very helpful. Keep it up.
     
    The Reverend likes this.
  31. samspade

    samspade Member

    Joined:
    Feb 26, 2017
    Posts:
    1,980
    Just want to say that I've been working my way through these for several months now and its one of the best tutorial series there is for game maker, and not just for shaders (though they are also great and I've been using a number of them). There are a lot of other things you pick up along the way ranging from things like working in strictly typed languages and math to incredibly helpful things in the room editor (learning how to alt select has probably saved me hours by itself and it works in other platforms as well). The videos or portions of videos that work through how to learn things are also very good. I've taken many concepts form the test project itself and used them to create similar in game editors for my own projects. Overall, just very good work and I appreciate it a lot.
     
    rIKmAN and The Reverend like this.
  32. The Reverend

    The Reverend Member

    Joined:
    Sep 8, 2016
    Posts:
    552
    samspade and Dunkelheit like this.
  33. The Reverend

    The Reverend Member

    Joined:
    Sep 8, 2016
    Posts:
    552
    Just added a new Video.

    preview_heat_haze_medium.jpg

    This time is about a heat haze distortion effect using a distortion map instead of maths.
     
  34. Sn3akyP1xel

    Sn3akyP1xel Member

    Joined:
    Mar 13, 2018
    Posts:
    58
    Amazing stuff Reverend, do you have any tutorials on radial distortion, like a shockwave effect?
    Would like to distort some explosions, but no idea where to start.
     
  35. The Reverend

    The Reverend Member

    Joined:
    Sep 8, 2016
    Posts:
    552
    Not yet. I do have a shockwave video in planning but it'll take probably 6 weeks til i get to that. It does look pretty cool though :)
     
    NeZvers likes this.
  36. Sn3akyP1xel

    Sn3akyP1xel Member

    Joined:
    Mar 13, 2018
    Posts:
    58
    Just reflecting what has already been said above, hats off.
    Look forward to the next tutorial, and massive respect for sharing work of this quality.
     
  37. The Reverend

    The Reverend Member

    Joined:
    Sep 8, 2016
    Posts:
    552
    Just added a new Video.

    flag_distortion_preview_01_short.gif

    In this video we will create a shader to distort a flag image to make it look like waving in the wind.
     
  38. Edwin

    Edwin Member

    Joined:
    Jul 15, 2018
    Posts:
    417
    You are a genius.
     
    The Reverend likes this.
  39. Ali Al - Mosawi

    Ali Al - Mosawi Member

    Joined:
    Jun 20, 2016
    Posts:
    50
    Thank you for great work i was viewed some videos its
    I have issue with alpha or alpha blend on png transparnt textures such : tree when i draw trees model with shader or default pass through shader the alpha its missed and draw with out alpha this issue was happened with me on android and ios platform but on windows its work fine btw iam talking about 3d mode iam used gms1.4 do you have video dealing with alphablend and shader on android or ios in 3d mode .sorry for long comment and thanks
     
  40. The Reverend

    The Reverend Member

    Joined:
    Sep 8, 2016
    Posts:
    552
    Unfortunately I can't help you there. I have absolutely no experience with 3D stuff. But if you create a new post on the programming forum and provide a good description of your problem and images, there's a good chance you'll get help. There are a few really great 3D cracks around.
     
  41. The Reverend

    The Reverend Member

    Joined:
    Sep 8, 2016
    Posts:
    552
    Just added a new video.

    flame_preview_ultra_small.gif

    This time is about distorting a flame image to make it look like a flickering flame like on a torch.
     
  42. Ali Al - Mosawi

    Ali Al - Mosawi Member

    Joined:
    Jun 20, 2016
    Posts:
    50
    Thank you fore replay I have this issue since two years ago and I post in old forum but I do not get solution
    I will post new with full detail as soon thanks
     
  43. TheMagician

    TheMagician Member

    Joined:
    Jun 20, 2016
    Posts:
    57
    Fantastic work. Thank you very much for your work in preparing this series!
     
    The Reverend likes this.
  44. The Reverend

    The Reverend Member

    Joined:
    Sep 8, 2016
    Posts:
    552
    Just added a new Video.

    water_side_final_01_screenshot.png

    In this video we will create a water shader for side-scroller games by reflecting the application surface and distorting and colouring that reflection.
     
    HayManMarc and IndianaBones like this.
  45. Walky

    Walky Member

    Joined:
    Oct 13, 2018
    Posts:
    89
    Thank you very much for all these videos!
     
    The Reverend likes this.
  46. The Reverend

    The Reverend Member

    Joined:
    Sep 8, 2016
    Posts:
    552
    Just added a new Video.

    preview_04.png

    This time is not about coding a shader but about what normal maps for 2D games are so we're pepared for the next video where we'll create a shockwave shader with normal maps.

    After the video you can alo have a look at the interactive explanation. It'lll help really understanding normal vectors:
    https://reverend-greg.itch.io/normal-maps-explained

    But just to make that clear: I don't plan to create a lighting shader using normal maps.
     
    rIKmAN, IndianaBones and Biosyn like this.
  47. Biosyn

    Biosyn Member

    Joined:
    Oct 17, 2017
    Posts:
    37
    Thank you for the video on the normal map explanation. Looking forward to the shock wave tutorial.

    I know you've said you don't plan to create a lighting shader with normal maps, but I hope you will reconsider sometime down the line.

    Thanks for all your tutorials thus far!
     
    Last edited: Apr 7, 2019
  48. Edwin

    Edwin Member

    Joined:
    Jul 15, 2018
    Posts:
    417
    Hello, can you please explain how pixel interpolation / image scaling works? I can not find the answer for a long time.
     
  49. The Reverend

    The Reverend Member

    Joined:
    Sep 8, 2016
    Posts:
    552
    Its really simple with one light. Way more difficult to have multiple lights, make it look good and add shadows and a nice blending and and and ...
    The reason why Im not persuing this is because even if you get the technical part going, creating normal maps for every asset is extremely time consuming and so I dont plan to use normal lighting in any game and thus its something I dont plan to spend time on :)

    What do you mean exactly?

    Edit:
    @Biosyn : If you want to create a normal lighting shader yourself though, this might be a good place to udnerstand how it works: https://github.com/mattdesl/lwjgl-basics/wiki/ShaderLesson6
    But farther than that I can't help. I simply don't now how to add more features :)
     
    Last edited: Apr 8, 2019
    Biosyn likes this.
  50. Edwin

    Edwin Member

    Joined:
    Jul 15, 2018
    Posts:
    417
    I always wanted to make a shader that makes pixels smoother but don't know how they work. You know, the filters in some 8 bit consoles emulators.
    [​IMG]
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice