How To: Realistic Puddles with SSR in ROBLOX. (Screen Space Reflections)

Поделиться
HTML-код
  • Опубликовано: 25 дек 2024

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

  • @blaux
    @blaux  7 месяцев назад +51

    Notes I forgot to mention:
    For this effect to work, you need to have your studio graphic settings high. You won't achieve the reflection if your graphics are too low, so I always keep it at 21.
    The highlight limit is 31. You can't have any more than that. To get around it, you can group all of the items you wish to highlight in a single folder, and then insert a highlight in the folder itself. This will apply the effect to all the objects in the folder, so you don't need a highlight for every part.

    • @nuclearsu
      @nuclearsu 5 месяцев назад +2

      why is there a highlight limit? ;(

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

      @@nuclearsu Robloxs built in limiters are for memory reasons. Wouldn't wanna melt something trying to render 10k highlights, reflections etc, and do physics calculations not including in game calculations ran from scripts etc etc etc.

    • @uremi.
      @uremi. 4 месяца назад

      ​@@nuclearsu performance reasons, but for making playable games and stuff like that, we can get around it with scripting and such

  • @BlakeLindsay-v6p
    @BlakeLindsay-v6p 5 месяцев назад +212

    Why is penguinz0 so good at making games

    • @jlboss_ps4751
      @jlboss_ps4751 4 месяца назад +2

      That was the first thing I thought lol

    • @The_BlackGoose
      @The_BlackGoose 4 месяца назад

      Maybe he's trying to make a place for himself on this kids platform to found something he likes .

    • @localscripted
      @localscripted 4 месяца назад +3

      @@The_BlackGoosemake you sense no

    • @n_popcat
      @n_popcat 4 месяца назад +1

      @@localscriptedthe penguinz situation is crazy

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

      @@The_BlackGoose I've looked at this comment for like three minutes and I still can't understand what it's trying to say

  • @asimo3089
    @asimo3089 4 месяца назад +78

    This is an excellent video, thank you.

    • @decision3066
      @decision3066 4 месяца назад +3

      taking notes

    • @lossycompressed
      @lossycompressed 4 месяца назад +2

      will you be trying volumetric effects? i went down a roblox graphical glitch rabbithole

    • @pepoxd3yt
      @pepoxd3yt 4 месяца назад +1

      Woah 22 hours ago o_O

    • @FuroskiGoRawr
      @FuroskiGoRawr 4 месяца назад +2

      @@lossycompressed where

    • @localscripted
      @localscripted 4 месяца назад +1

      i’ll 3089 your asimo

  • @solisti
    @solisti 4 месяца назад +28

    Im glad to see charlie doing development on roblox

  • @TrueColonel
    @TrueColonel Месяц назад +5

    its always the channels with low subs that are good thank you so much for this tutorial bro keep it up!

    • @blaux
      @blaux  Месяц назад +1

      @@TrueColonel thanks G I'll have a follow up video soon showing all the lighting hacks and reflection methods I find to be best

  • @jso1
    @jso1 5 месяцев назад +8

    i love hacky tricks like these. i knew ab the transparent glass thing but learned something about the other stuff

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

      btw the game ur making looks similar to mine 😭

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

    thats actually super cool i knew about the highlight and glass reflection but i didnt think of putting a part above it to make it look more see thru

  • @KimWon-Il
    @KimWon-Il 5 месяцев назад +24

    glad to see you found the forest megascans I uploaded! (back in 2021 when I had no idea of copyrighted materials LOL) make sure to only use them in studio and dont publish them since they're not supposed to be allowed to be used outside of unreal engine.

    • @blaux
      @blaux  5 месяцев назад +9

      @@KimWon-Il haha oops

  • @LiterallyWize
    @LiterallyWize 4 месяца назад +3

    i have an idea to get across the weird effect when you're not looking directly forward or only slightly down/up
    in a function binded to renderstep (camera priority + 1 ofc) change the transparency of the glass depending on the y axis of the player camera's lookvector, since the glass is pulled down the higher it's transparency is (past 1), i'm gonna try and do it rn

    • @blaux
      @blaux  4 месяца назад

      Dang I got to try that

  • @zombie-2358
    @zombie-2358 4 месяца назад +1

    I never knew about this technique and thanks cuz I will use in my future games.
    Before knowing this, I used to make reflections by using a whole Reflections Module that worked inside a ViewportFrame inside a SurfaceGui locally. It worked but was pixelated and caused lag since it literally duplicated the map.

  • @araresu
    @araresu 4 месяца назад +1

    This is really sick I hope they don't patch this, I will definetly use this on my upcoming game, thank you!

    • @araresu
      @araresu 4 месяца назад

      I ran into a small issue, When trying to download a texture, It just saved the image right away when I pressed enter instead of being able to change the name and stuff, any ideas?

    • @14A013
      @14A013 4 месяца назад

      @@araresuI don't have any ideas, but did the glass work for you? For me, it didn't work. Again, sorry for not being able to help.

    • @araresu
      @araresu 4 месяца назад

      @@14A013 Yeah it works, you need to change your studio settings though, theres a setting called editor quality level, set it to 16

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

      @@araresu just rename the file after it has been downloaded. adding ".png" to the file name is simply a way of telling an OS/any other system what the file extension is without having to check it in the actual file itself

  • @wallacefromfamilyguy
    @wallacefromfamilyguy 5 месяцев назад +2

    the slate part's transparency goes on top of any transparency in the puddle's image

  • @SkipStone-sd4oj
    @SkipStone-sd4oj 3 месяца назад

    I'm so impressed with your creativity.

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

    Took my time to test out your game and voer all I'm impressed! Tho the weapons won't go up to high that makes it a little unrealistic. Other then that, it was fire!

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

      @@hamodiiskan1237 Much appreciated! The issue with the weapons not facing or pointing the right direction actually has a lot to do with the avatar of the user, and they will be much more streamlined when I finish the game. The game will have a character creation sequence, rather than using custom avatars, and doing so will solve a lot of the immersion breaking visual bugs

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

    there is another way that has its upsides and downsides, and that is using terrain water combined with the transparent texture method you described in the video. however you may need to actually move your map to align with the terrain, as terrain voxels are 4x4x4. you should then also configure water wave size and speed to 0, and set water reflectance to 1 and transparency to 0. the upside is that the reflections are actually upside down, however the downside is that the normal map of the water cannot be changed and thus the reflections themselves look very unnatural to puddles

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

      the only way to delete the normal map of the water is to manually delete the texture from the roblox player files. this is the closest thing to actually good ssr puddles but unfortunately theres nothing else to do until roblox adds the ability to retexture the water.

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

      @@exolyne. Yeah, I've seen this method, and it is unfortunate that we have to resort to such things just to get a cool effect. Honestly, everything will change if they ever add water as a material you can just use.
      The only other issue I can think of with that method is the performance cost. I ran into huge FPS dips when trying to use water instead of glass

  • @damian-ps3jz
    @damian-ps3jz 4 месяца назад +3

    If one day Roblox adds RT to Roblox Studio, I'm going to enjoy it like you can't imagine.

    • @blaux
      @blaux  4 месяца назад +1

      @@damian-ps3jz we can only hope

  • @defenestratorr
    @defenestratorr 5 месяцев назад +6

    This looks so out of place lmao, reflections in roblox aren't too common
    I really hope they don't patch this. Great video and demonstration

    • @lambdadelta821
      @lambdadelta821 4 месяца назад

      there was something like this for a long time now. back then people just use terrain water just thinly layered over the surface to actually reflect stuff (but its best used only if the map is like one flat floor). also this glass bug is not ssr, its a buggy refraction

    • @defenestratorr
      @defenestratorr 4 месяца назад

      @@lambdadelta821 Yeah I know it’s not true SSR, but it’s pretty goddamn convincing if you don’t look too close. It adds a lot to little things like water

    • @lambdadelta821
      @lambdadelta821 4 месяца назад

      @@defenestratorr yea true, this bug actually works really well on some maps

  • @livyanna
    @livyanna 4 месяца назад

    hey this is an awesome video!! i love love love how your game looks and i was wondering if i could get advice on general visual lighting for a nighttime scenery! i noticed on the roads in your builds, there was a slight reflectance from the blade's light source (besides the puddles) and i love the dark atmosphere you created. do you have any advice on how to create this realistic visual for roblox studio?? tysm!!

    • @blaux
      @blaux  4 месяца назад

      @@livyanna I actually just started this project messing around with the city template you can get on Roblox when you make a new place. As for the wet look, you can accomplish that by using a surface appearance with a high-contrast texture set for the roughness map. I actually just play around with random images until I get my desired effect. I appreciate the kind words and can't wait for you to see the end results 🙏🏻

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

    i didn't know penguinz0 could cook in roblox studio

  • @FRACTAVERSE-roblox
    @FRACTAVERSE-roblox 4 месяца назад

    I would rather call it lens, it is probably focusing surrounding light in smaller space and transparency decreases focal lenght but i aint no scientist.

  • @myzticals
    @myzticals Месяц назад

    when i make the transparent holes and put it in roblox studio it makes the edge sharp idk why my roblox studio is at max graphics too

  • @mrtns.dav10
    @mrtns.dav10 6 месяцев назад +1

    BRO YOU ARE A HERO THANK YOU

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

    charli upload new video

  • @wobox7982
    @wobox7982 6 месяцев назад +1

    how did you tile the puddle in your game?? when i try to make it big, it just stretch instead of tiling- can you make a example for more large scale version of this?? or make uncopylocked example please

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

      The road is built in segments rather than stretching parts. You can find the exact assets by creating a new game and selecting the city template. The city template is what I started messing around with when I made this project.

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

    LIFE SAVER!

  • @DarkBalls-dn8yt
    @DarkBalls-dn8yt 4 месяца назад

    I tried your game and it looks very good. The performance is kinda bad but it's probably due to roblox limitations. Oh and I think it would be better if you could play it in first person.

  • @luxor4804
    @luxor4804 6 месяцев назад +1

    hey, im wondering how you got the entire road to have the effect? did you make separate textures for sections of the road or one big seamless puddle texture overlap for the entire road?

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

      I did it for each unique texture. The intersection and the main roads were the only two textures, and they are repeated. The textures were designed to be seamless, so they can connect

    • @luxor4804
      @luxor4804 6 месяцев назад +1

      @@blaux thanks a lot for the quick response and information!! I can't wait to see how your project ends up looking like!

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

      Thanks man! It'll be a while before an official release, but there's going to be a ton of stuff to do​@@luxor4804

  • @bloodbonnieking
    @bloodbonnieking 4 месяца назад

    USING THIS FOR SCHOOL BATHROOM SIMULATOR 🤩🤩🤩

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

    amazing tutorial thanks

  • @giri5698
    @giri5698 4 месяца назад +1

    This lagoon cost 70k.

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

    Unfortunately, apparently this has been fixed, the glass does not become reflective, or I am doing something wrong, what other ways are there to do something similar

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

      @@VladoZ_official Might have to change studio render quality in settings.

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

      @@blaux i select 21

    • @pessima_rbx
      @pessima_rbx 4 месяца назад

      @@VladoZ_official still works

    • @VladoZ_official
      @VladoZ_official 4 месяца назад

      @@pessima_rbx Can you tell me more about how to implement this?

  • @felix-zp4ie
    @felix-zp4ie 4 месяца назад

    this is really cool

  • @patishere3135
    @patishere3135 4 месяца назад

    How would i do this with pbr?
    Is there any better way than doing it with every png and have it be imperfect?

    • @blaux
      @blaux  4 месяца назад

      I'll be working on an update that makes this trick more versatile, but given the limitations of the engine I think this is currently the best you can get. If you want to do this with nice PBR textures, I recommend taking existing ones and just modifying the color map to add the empty space for the puddles

    • @patishere3135
      @patishere3135 4 месяца назад

      @@blaux what about the other texture parts tho like roughness

  • @user-unavailable
    @user-unavailable 4 месяца назад

    is there any way to just have the puddle itself and still have it look like a puddle

    • @blaux
      @blaux  4 месяца назад

      @@user-unavailable I'll be trying to find a way to do that, so far no luck since the glass bug doesn't play nice with meshes

    • @user-unavailable
      @user-unavailable 4 месяца назад

      @@blaux ok

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

    WOW

  • @aaabatteries5728
    @aaabatteries5728 4 месяца назад

    soon we'll get roblox pathtracing 🙂

  • @blixoon7403
    @blixoon7403 4 месяца назад

    i have my rendering at level 21 and it still doesnt work

    • @blaux
      @blaux  4 месяца назад

      @@blixoon7403 Make sure you're using a part when making glass, not a mesh part.

  • @傷跡-b6b
    @傷跡-b6b 7 месяцев назад +1

    love you bro

  • @fantasti3620
    @fantasti3620 4 месяца назад

    doesnt work, graphics level is at max, tried direct x and oppen gl doesnt work.

    • @blaux
      @blaux  4 месяца назад

      @@fantasti3620 must be something on your end unfortunately. My game is currently up and playable and it's not broken there.
      Make sure you check the steps thoroughly to make sure you didn't miss something.

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

      Just add the highlight to the part and it will work. It doesn't work when clicking because you're using the "Bounding Boxes" selection style in the "View" tab.

  • @universalgames2901
    @universalgames2901 4 месяца назад

    How do you not have more subscribers???

  • @tordev5
    @tordev5 4 месяца назад

    Wow nice

  • @GamerTheMexican
    @GamerTheMexican 4 месяца назад

    it doesnt work for me

  • @garlfin
    @garlfin 4 месяца назад

    Lagoon.

  • @zachariestudio
    @zachariestudio 4 месяца назад

    It’s not making the miror effect

    • @blaux
      @blaux  4 месяца назад

      @@zachariestudio Make sure your studio quality settings are set to 21. A friend of mine had this setting reset and he thought it was patched, but after changing that setting quickly returned.

    • @zachariestudio
      @zachariestudio 4 месяца назад

      @@blaux I Did, but it’s not like a mirror, it stays as the same effect at the start

  • @jamesbuckybarnes9290
    @jamesbuckybarnes9290 4 месяца назад

    thanks

  • @BoomMadeInChina
    @BoomMadeInChina 4 месяца назад

    Omg GTA 6 in roblox leaked

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

    Nice

  • @toysRrobloxYT
    @toysRrobloxYT 4 месяца назад +1

    Nope doesnt work. Its still invisible

    • @blaux
      @blaux  4 месяца назад +2

      @@toysRrobloxYT Raise your studio render graphics settings. They need to be at least 17 or 18 I believe. So setting it to 21 should work

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

      Wait, so if you create it at 21 setting, will others even see it? Like mobile players?

  • @handle-isnt-available-001
    @handle-isnt-available-001 4 месяца назад

    tf is penguinz0 yapping about

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

    You sound like penguinz0 + obama

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

      @@sos_one bruh

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

      to me he sounds like Gabe Newell

  • @blomproductions
    @blomproductions 4 месяца назад +1

    We got realistic Roblox before GT6

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

    Still working?

    • @GamerTheMexican
      @GamerTheMexican 4 месяца назад

      it doesnt work for me idk y

    • @gatoosas238
      @gatoosas238 4 месяца назад

      @@GamerTheMexican It works for me now, You just have to set the graphics level to 16 ahead

  • @windex4
    @windex4 4 месяца назад

    are you gaben

  • @JoopsDesing
    @JoopsDesing 4 месяца назад

    its pached

    • @blaux
      @blaux  4 месяца назад +1

      @@JoopsDesing just did it. Check your studio quality settings. Make sure they are at 21, otherwise you won't get the reflection

    • @JoopsDesing
      @JoopsDesing 4 месяца назад

      @@blaux Thanks now it works.