Unity PIXELATED RENDERING in URP Using Custom Renderer Features (Code Walkthrough)

แชร์
ฝัง
  • เผยแพร่เมื่อ 13 มิ.ย. 2024
  • Today I'm walking you through my new pixelated rendering code. I opted for this new approach to solve a couple issues I had with the old one.
    This is NOT a tutorial: I've got plenty to learn about this subject and I don't feel qualified to talk about it in detail. I just felt like I should update you on this topic since I've outgrown my older tutorial myself.
    Follow me on Twitch to support me: / whateep
    Code: github.com/itsPeetah/unity-si...
    Twitter: / punkpebble_
    Discord Server: / discord
    Itch.io store page: punkpebblestudio.itch.io/
    Video Resources:
    Custom render passes (by @alexanderameye): alexanderameye.github.io/note...
    Custom render passes: learn.unity.com/tutorial/cust...
    Create a custom renderer feature: docs.unity3d.com/Packages/com...
    SamplerStates in shader lab: docs.unity3d.com/Manual/SL-Sa...
    If you liked this video, you might also like these from other creators:
    I Made Among Us, but it's 3D, by Dani: • I Made Among Us, but i...
    Game Dev: The Week Before Launch (Devlog) by Jonas Tyroller: • Game Dev: The Week Bef...
    HOW TO DRAW PIXEL ART GAME CHARACTERS IN PS - TUTORIAL by Blackthornprod: • HOW TO DRAW PIXEL ART ...
    5 Steps to Start Making Games by Thomas Brush: • 5 Steps To Start Makin...
    Video Timestamps:
    0:00 Effect Preview
    0:06 Intro (What, Why and How)
    1:24 Renderer Feature Code Walkthrough
    2:43 Render Pass Code Walkthrough
    5:33 Image Effect Shader Code Walkthrough
    7:22 Editor Setup (How to use it)
    9:20 Extra
    9:46 Outro
    Video Tags:
    #indiegame #gamedev #unity #indiegames #gamedevelopment #programming #3dgame #3dmodeling #lowpoly #blender #photoshop #unrealengine #godot #devlog #indiedev #tutorial #retro #postprocessing
  • วิทยาศาสตร์และเทคโนโลยี

ความคิดเห็น • 115

  • @Squeazer
    @Squeazer ปีที่แล้ว +55

    Very cool video!
    One suggestion: Don’t completely blur out your other code when you’re walking through it, it makes it super difficult to jump around / understand the context.

  • @StasSHV
    @StasSHV 4 วันที่ผ่านมา

    Great video dude! Seeing as you keep mentioning you're just learning, I'd love to see what you found out about this method since releasing this!

  • @dicony3427
    @dicony3427 ปีที่แล้ว +45

    Hello, if you are facing a problem with a black screen or freezing scenes in the build, then you need to open the player settings, then go to the Graphics section and add the pixelation shader to the list of shaders that are always included.😉

    • @dcry1003
      @dcry1003 ปีที่แล้ว +1

      question do you have any idea about the error (object reference not set to an instance of an object) in pixelizePass:36?
      if it helps the only thing i did for now was copy the codes into a script and added the pixelize feature in the urp renderer

    • @huntiault7660
      @huntiault7660 ปีที่แล้ว +1

      @@dcry1003 did you ever figure this out?

    • @AbachiriProduction
      @AbachiriProduction ปีที่แล้ว

      thanks

    • @StasSHV
      @StasSHV 8 วันที่ผ่านมา

      @@dcry1003 Ever found out the problem?

  • @a1a3a5
    @a1a3a5 ปีที่แล้ว +6

    I've been wanting to do a game with this style.
    Thank you for giving this out for free with a chill video!

    • @whateep
      @whateep  ปีที่แล้ว +1

      I glad you enjoyed this :D

  • @user-dd9is6iy9m
    @user-dd9is6iy9m ปีที่แล้ว +6

    I know you said it wasn't a tutorial but it sure felt like one and was SUPER HELPFUL!

    • @whateep
      @whateep  ปีที่แล้ว

      Thank you for your comment! Glad you liked this :)

  • @peplms
    @peplms ปีที่แล้ว +3

    Yo ! Thank you so much for this Video. I didn't know anything about Renderer Feature, it seems to be a really powerful tool.
    Also i love the rythm of your tutorial. Going straight to the point but still giving a lot of details.
    I will now have to dig a little bit into what else is possible with this approach.

    • @whateep
      @whateep  ปีที่แล้ว

      I appreciate this comment. I was really insecure about this video. Glad you liked it

  • @pengoo1933
    @pengoo1933 ปีที่แล้ว +1

    Actually thank you so much! There is no reason not to call this a tutorial, super helpful!

  • @theoneandonlylg3824
    @theoneandonlylg3824 ปีที่แล้ว +1

    Damn this is like the proper way of doing it, Thank you, love it

  • @SantiagoIsAFK
    @SantiagoIsAFK ปีที่แล้ว

    Bro. thanks you, this is exactly what I was needing

  • @user-qx3tb3gj5u
    @user-qx3tb3gj5u 8 หลายเดือนก่อน +1

    Nice video! That's exactly what I want. Thanks a lot!🥰

  • @dcry1003
    @dcry1003 ปีที่แล้ว +1

    yooooooo! i love your new style (still miss the green hair tho) also its good be back to your videos thank you as always!

    • @whateep
      @whateep  ปีที่แล้ว +1

      I appreciate the support! Thank you!

  • @ULTRADARKSETH
    @ULTRADARKSETH ปีที่แล้ว +3

    Subscribed! Love your content and how you present it. This helped me allot. I do have one question for you on this. How can we change this to apply only on one layer. Similar to the "Render Object ( Experimental )" Option. If you can add that this would be something only one other person managed to do and didn't share.

  • @inxendere
    @inxendere ปีที่แล้ว +1

    I literally love you. Thank you so much. Sub earned

    • @whateep
      @whateep  ปีที่แล้ว

      I really appreciate that! Thanks!

  • @carni7866
    @carni7866 ปีที่แล้ว +1

    Thank you! This is super helpful

  • @whateep
    @whateep  ปีที่แล้ว +6

    Hey everyone! I have not been feeling like I can get myself to do anything creative so here you go with a 2020-whateep-code-walkthrough kind of video.
    I've left a lot of detail out so I'll just leave some notes here.
    1) You can check out the code in my GitHub repo (link in the description)
    2) URP renders overlay-mode UI on top of everything, so we don't have to worry about the effect pixelating our UI and rendering it unreadable
    3) Use the frame debugger (Window > Analysis > Frame Debugger) to explore the rendering steps you're game is going through
    EDIT: Some people have been having issues with the effect resulting in a black screen in builds. I believe this is due to the automatic generation of the material in the renderer feature/pass. If you're experiencing this issue, please make sure to expose a new Material field to the Custom Pass Settings and create the Material in the project window manually. This will not have any impact on how the effect works, will just fix the issue at the expense of having to manually setup the material once. Alternatively, you could implement the solution in @dicony3427 's comment below :) (Thanks DICONY)
    This is NOT a tutorial: I've got plenty to learn about this subject and I don't feel qualified to talk about it in detail. I just felt like I should update you on this topic since I've outgrown my older tutorial myself. If you find it difficult to follow because you don't know some of the things I'm talking about take your time and study the code, and perhaps check the resources linked in the description.

    • @justadevlog1667
      @justadevlog1667 ปีที่แล้ว

      i want to learn more about creating custom render do i have a good tuts or code walkthrough i can learn from since im new to scriptiablerender
      also nice video keep it up

    • @whateep
      @whateep  ปีที่แล้ว

      @@justadevlog1667 well, there’s some resources in the description, you can start there and make your way around the wiki

  • @BLANKdev
    @BLANKdev ปีที่แล้ว +3

    Now this looks awfully familiar 👀 I cannot wait to see how this works!

    • @whateep
      @whateep  ปีที่แล้ว +1

      using the effect in not a golf game made me realize it could actually be improved with some new tech that has come out since my previous video on the topic

    • @thewanderingone679
      @thewanderingone679 ปีที่แล้ว

      what do you mean?

  • @simeonj.5035
    @simeonj.5035 ปีที่แล้ว

    Awesome tutorial!

  • @vexedev
    @vexedev 9 หลายเดือนก่อน +4

    Hi there, getting deprecated errors on the Blit lines, "Use RTHandles for source and destination" but I wasn't quite sure the right way to alloc these handles and release them. Any ideas?

  • @margotlinne
    @margotlinne ปีที่แล้ว +1

    thank you for sharing this, this shader is amazing. But do you have any idea how to add vertex colour?

  • @chrisheld8463
    @chrisheld8463 ปีที่แล้ว

    Thank you. Very nice video.

  • @infokubarcade
    @infokubarcade 6 หลายเดือนก่อน

    Amazing. I subscribed.

  • @-vanitas5229
    @-vanitas5229 ปีที่แล้ว +3

    The key is using point filter instead of linear filter when we change the render scale

  • @SquishysAdventure
    @SquishysAdventure ปีที่แล้ว +2

    Very informative tutorial man, great work! When only moving left and right while being in the orthographic camera, you would think that the shapes of the objects would stay the same, leading to the pixels staying in the same position, but that does not seem to be the case unfortunately. The pixels seem to be "swimming", with lots of erratic movements, if that makes sense I've been trying to solve this problem of pixel artifacting for a while, but I have no clue how to ):
    EDIT: I think the issue is called "pixel creep". It seems to be caused by the camera not snapping to the pixel grid or something, but I'm honestly not sure.

    • @whateep
      @whateep  ปีที่แล้ว +2

      First of all: thank you!
      Secondly: I believe you’re on the right track. Look up sub pixel camera movement. It’s a way of achieving a pixel perfect effect that should remove the artifacts you are noticing right now

  • @shikkuu8295
    @shikkuu8295 ปีที่แล้ว

    THANK YOU VERY MUCH, you're a G

  • @mings2994
    @mings2994 ปีที่แล้ว

    Hello! I really like this video and thank you for make this video. So I have a question. I tried add Pixelize Feature click URP-Renderer -> Add Renderer Feature and i can't find Pixelize Feature just three options Renderer Ojects, Decal, and Screen Space Shadows that's it. What should i do?

  • @icantdraw3783
    @icantdraw3783 ปีที่แล้ว

    Where do I find those Rendersettings? I dont have a folder with Settings nor Renderers??

  • @carriganreilly
    @carriganreilly 11 หลายเดือนก่อน +6

    EDIT: I found that you can clear the error using
    pixelBuffer = RTHandles.Alloc(
    new RenderTargetIdentifier(pixelBufferID));
    but the effect still does not work and it creates a whole bunch of other issues
    Hey! Quick question! Currently working in URP 14.0.8 and RenderTargetIdentifier has been marked as obsolete and should be replaced with RTHandle
    So then retrofitting the two variables gets
    "RTHandle colorBuffer, pixelBuffer". (pixelizepass line 10)
    While this fixes the issues with Blit(), but it breaks the creation of a new RenderTargetIdentifier/RTHandle
    "pixelBuffer = new RTHandle(pixelBufferID);" (pixelizepass line 45, changed from RenderTargetIdentifier)
    when replacing that RenderTargetIdentifier with RTHandle it completely collapses and says that RTHandle has no constructors that take an integer.
    RTHandle documentation is pitifully small and I can't really find any information anywhere that is even close to creating a new RTHandle using shader IDs
    Any chance you know how I could fix this? Or should I attempt a different version of this effect?

    • @carriganreilly
      @carriganreilly 11 หลายเดือนก่อน

      its not like you could even change any of the RTHandle attributes either since theyre all read-only :(

    • @carriganreilly
      @carriganreilly 11 หลายเดือนก่อน

      unfortunately, since its completely obsolete, the render effect doesnt work at all unchanged

    • @whateep
      @whateep  11 หลายเดือนก่อน +2

      Hey sorry, I haven’t been able to keep up. I’ll look into it but I don’t have so much time these days. Hope you found a solution

    • @siris5688
      @siris5688 10 หลายเดือนก่อน +1

      Yea Im having the same issue as well

  • @ElmoLovesYou2
    @ElmoLovesYou2 ปีที่แล้ว

    Hi, thanks for great video, but what the best way for downscale resolution on mobile with pixeleted picture(without blurry effect) = for example if mobile have screen 1080p => lets render unity game in 540p on that screen(for integer scaling) = but blurry effect ruined it=(( what the best way to fix it?

  • @user-lk3xp9ot9j
    @user-lk3xp9ot9j ปีที่แล้ว +1

    Hi! It's very cool video.
    Although after this video I've got one more question. Does this method can handle transparent objects or this feature is too complicated to implement?

    • @whateep
      @whateep  ปีที่แล้ว +1

      It does support transparent object as it is applied after everything has been rendered

  • @procinogen
    @procinogen ปีที่แล้ว +1

    Hi! I'm trying to get acquainted with Unity's URP and I figured this video could help me start. Anyways I was wondering why the needs the pixelized output to be rendered to a render texture before it can be rendered with the main camera. Thanks for the great and insightful video!

    • @whateep
      @whateep  ปีที่แล้ว +3

      Ok so, it's not actually doing that. From my understanding, What's happening is that the camera is rendering the texture I store in the colorBuffer variable. This texture has a static assigned ID "_ColorAttachmentA", which is what is later going to be passed to the post processing passes. We need to first re-render the texture to a temporary buffer, and then replace the data in the _ColorAttacmentA buffer with our shader's result to then be drawn to the screen.

    • @procinogen
      @procinogen ปีที่แล้ว +2

      @@whateep Not sure why I didn't get a notification for your reply, so sorry for replying 2 months later. Anyways, thank you for the explanation!

  • @rynab85
    @rynab85 ปีที่แล้ว

    Hey! is there a way to apply the shader to the ui ?

  • @timeSlidrGaming
    @timeSlidrGaming ปีที่แล้ว

    How can get screen height in code so I can animate it?

  • @swiftcreations
    @swiftcreations ปีที่แล้ว +1

    Great video and excellent learning experience. Am I allowed to use this in non-commercial projects? Can't find a license on your Github page.

    • @whateep
      @whateep  ปีที่แล้ว +1

      You’re free to use it wherever! Giving credit is always appreciated but non necessary :)

    • @swiftcreations
      @swiftcreations ปีที่แล้ว

      @@whateep You're awesome man, I used it in a jam! If you want I can send it to ya

  • @-vanitas5229
    @-vanitas5229 ปีที่แล้ว +1

    nice content

  • @RandomPerson-wl5id
    @RandomPerson-wl5id ปีที่แล้ว

    Thank you!!!

  • @relay2358
    @relay2358 ปีที่แล้ว +1

    Hey, thanks for the shader! It works really well in the editor, but it shows a gray screen whenever the render pass is turned on (only in the build). Do you have any idea as to why this might be happening? Thanks!

    • @dicony3427
      @dicony3427 ปีที่แล้ว +2

      Hello, I faced the same problem and found the solution myself! In order for everything to work, you need to open the player settings, then go to the Graphics section and add the pixelation shader to the list of shaders that are always included.

  • @aqg8232
    @aqg8232 10 หลายเดือนก่อน

    thanks a lot

  • @user-hj2jw4dt3d
    @user-hj2jw4dt3d ปีที่แล้ว +1

    Hi, thanks for the video!
    Everything works fine in the editor, but in a build it is only black screen without any objects (2021.3.8f1 LTS). What could you advise on this matter?

    • @dicony3427
      @dicony3427 ปีที่แล้ว +1

      Hello, I faced the same problem and found the solution myself! In order for everything to work, you need to open the player settings, then go to the Graphics section and add the pixelation shader to the list of shaders that are always included.

    • @user-hj2jw4dt3d
      @user-hj2jw4dt3d ปีที่แล้ว +1

      @@dicony3427 Thanks! I'll try this.

    • @chrisheld8463
      @chrisheld8463 ปีที่แล้ว +1

      @@dicony3427 Ha! This saved me. I was runnning into the same issue. Thanks!

  • @mazander_man
    @mazander_man ปีที่แล้ว +1

    It looks awesome, I'm just wondering if it works with post processing...

    • @whateep
      @whateep  ปีที่แล้ว +1

      It currently only works before post processing, but I’m working on updating it to work after post processing too! Update should be out soon, I hope

  • @Paul-to1nb
    @Paul-to1nb ปีที่แล้ว +3

    This is awesome, Great job! For "not being a tutorial", I find it to be one of the most resourceful videos.
    Any idea how you would add a 1 pixel edge detection depth based outline around objects (like a short hike)? I had it working when using RenderTextures, but switching to this method makes either makes edges drop off before they're pixelized or unpixelized if done after pixelization.

    • @whateep
      @whateep  ปีที่แล้ว +1

      Hey, I really appreciate that!

    • @whateep
      @whateep  ปีที่แล้ว +1

      to answer your question, I was gonna make a video about that too but got burnt out while recording it. If you reach out on discord (server invite is in desc.) I might be able to provide you with some code to do that. From your comment I reckon you will be able to figure out how it works :)

    • @literallyjeff
      @literallyjeff ปีที่แล้ว

      @@whateep I hope you do release that video eventually, I would be interested to see it!

  • @Sonnenrot3
    @Sonnenrot3 ปีที่แล้ว +1

    Hello there!
    Has anyone a solution that it does not pixelate my world space UI? :) Im not sure if I'm missing something important here

    • @cheezenuts2357
      @cheezenuts2357 ปีที่แล้ว

      render the ui with a different camera

  • @AmgedAlfakih
    @AmgedAlfakih ปีที่แล้ว +1

    hello bro.
    how to reference render Objects Feature In script, and how to adjust its value like camera POV or Material

  • @rd4603
    @rd4603 ปีที่แล้ว +1

    I copied everything in this video and applied it to all URP-Renderers and tried every one (there are three now).
    However, the edges are blurry and not sharp as they should be.
    Can someone help me please?
    EDIT: I noticed that there is no difference between sampler_point_clamp and sampler_linear_clamp.
    EDIT2: I figured it out. There was Anti Alialising applied in URP-High Fidelity (or the other options).

    • @whateep
      @whateep  ปีที่แล้ว

      Blurry means it was the anti aliasing. Glad you figured it out :)

  • @neozoid7009
    @neozoid7009 ปีที่แล้ว +1

    Perfect timing thanka super awesome 👍. Please can you share the toon shader ?

    • @whateep
      @whateep  ปีที่แล้ว +1

      Sure, I’ll make a short about it tomorrow or the day after!

    • @whateep
      @whateep  ปีที่แล้ว +1

      It basically just interpolates between to colors based on the dot product between the light’s direction and each vertex’s normal with some posterization applied

    • @neozoid7009
      @neozoid7009 ปีที่แล้ว

      @@whateep thanks

    • @whateep
      @whateep  ปีที่แล้ว +1

      Just an update, the video will be coming out tomorrow :)

  • @217tman3
    @217tman3 ปีที่แล้ว

    nice

  • @jayleo500
    @jayleo500 2 หลายเดือนก่อน

    Why does your shader code not use appdata and v2f structs?

    • @whateep
      @whateep  2 หลายเดือนก่อน

      It has those, but are named differently! I wrote this shader based on already existing URP shaders and they use different naming conventions.

  • @alecraigan4568
    @alecraigan4568 ปีที่แล้ว

    Hello, My editor does not have URP Renderer while it has other URP, I realize this is not your problem but I searched on the internet and can't find a solution, any ideas?

    • @whateep
      @whateep  ปีที่แล้ว

      Can you please elaborate on what you mean “it has other URP”?

    • @whateep
      @whateep  ปีที่แล้ว

      If you’re using URP your project should include a renderer. The file’s name in the project window should be the same as the one that is selected in your camera’s inspector, you might also be able to locate it from the camera inspector’s itself

    • @alecraigan4568
      @alecraigan4568 ปีที่แล้ว

      @@whateep You are right! Thank you very much, I'm new to URP so when I saw that I had "URP-Balanced" or "URP-Perfomant" in the setting I got confused why I did not have "URP-Renderer" but I did check the camera as you said and it's called "URP- High-Fidelity-Renderer", will pay more attention next time, again thank you!!

  • @Neekobh
    @Neekobh ปีที่แล้ว

    I don't know if it is just me, but this method breaks my game completely when I build it, while in editor mode it works fine, when I build it, it simply freezes while changing scene, the scene still loads, but the screen just became the last frame of the last scene.

    • @dicony3427
      @dicony3427 ปีที่แล้ว

      Hello, I faced the same problem and found the solution myself! In order for everything to work, you need to open the player settings, then go to the Graphics section and add the pixelation shader to the list of shaders that are always included.

    • @Neekobh
      @Neekobh ปีที่แล้ว

      Interesting.... maybe I will try to use it again and test what you did, I had given up and just used the old render texture method.

  • @kingzinhorr
    @kingzinhorr ปีที่แล้ว

    How do I do to make UI don't be affected by this pixelization effect?

    • @whateep
      @whateep  ปีที่แล้ว

      The way I do it in this video it will not be affect overlay screen space canvases

    • @kingzinhorr
      @kingzinhorr ปีที่แล้ว

      @@whateep Is there any way to make my UICamera (that holds the UI) ignore this pixel rendering? I know you said that it will not affect canvas but its happening in my case, and I guess this is happening with me because i'm using a camera to hold the UI and I need it to be in this way.

    • @whateep
      @whateep  ปีที่แล้ว +1

      , the effect will not affect screen space overlay canvases. You need to rework your ui

  • @aterus69
    @aterus69 3 หลายเดือนก่อน +1

    You can use render texture with single camera setup

    • @whateep
      @whateep  3 หลายเดือนก่อน +1

      You can? This actually seems great info. Can you share how to do that? Thank you!

    • @patek2385
      @patek2385 11 วันที่ผ่านมา

      It doesnt work with raycasting

  • @DonMhylios
    @DonMhylios 5 ชั่วโมงที่ผ่านมา +1

    I've been looking for a solution for weeks! Do you want to marry me? Thank you so much!!

  • @neozoid7009
    @neozoid7009 ปีที่แล้ว

    Can this work in Unity 2D URP ?

    • @whateep
      @whateep  ปีที่แล้ว

      I think you might have to rewrite the shader

  • @juanpabloportilla4491
    @juanpabloportilla4491 ปีที่แล้ว

    Amazing. but I have a problem. When I move objects around , they leave a trail that takes a while to catch up.
    Honestly. I have no idea what the code is doing, but I hope some actual nerd reads me and be like "that is so obvious". (Or someone just tell me this is not meant for moving objects)

    • @whateep
      @whateep  ปีที่แล้ว

      What is the value for your camera’s clear flags?

    • @juanpabloportilla4491
      @juanpabloportilla4491 ปีที่แล้ว

      @@whateep you mean de clipping Panes? 0.3 to 1000

  • @DarkblueIbanez
    @DarkblueIbanez หลายเดือนก่อน

    So I'm having a strange problem with this. I downloaded your code directly from github and added it to my project and it doesn't work. No errors just doesn't pixelate anything. I still get the error on line 22 like you get in your video. I tried making a new project with the urp and just testing it on a basic cube. Still nothing. I'm really baffled I looked through your tutorial several times and I can't find anything you did different. I used your code directly from github with no changes.

    • @whateep
      @whateep  หลายเดือนก่อน

      It’s an old tutorial, so some things might have changed with URP since, I don’t know for sure. My recommendation is to not download the code but try to implement it yourself with the aid of the tutorial so you can spot the issues as soon as they pop up along the process

    • @DarkblueIbanez
      @DarkblueIbanez หลายเดือนก่อน

      @@whateep I'll try. Unfortunately the reason I downloaded it is because I don't really know anything about urp shaders. It'll probably be awhile before I have anything to show for it.

  • @3moliser486
    @3moliser486 หลายเดือนก่อน +1

    受益匪浅

  • @coobbyo
    @coobbyo ปีที่แล้ว +1

    Uh oh, he lost his hair again. Hope you find it my man!

    • @whateep
      @whateep  ปีที่แล้ว +1

      Hahahaha I swear the weather here is too hot for long hair 😭😭😭 I had to do it