Godot 4 Post Processing: 3D Pixel Art Shader
Vložit
- čas přidán 23. 08. 2024
- A tutorial on how to use custom post processing shaders in Godot 4.0 to create a 3d pixel art shader.
Link to GitHub repo:
github.com/CBe...
Resources used:
docs.godotengi...
• Outlines - Devlog 2
• Creating Pixel Perfect...
Temple model seen in video:
sketchfab.com/...
Village scene:
sketchfab.com/...
As a pixel artist I'm kind of shocked that you can recreate such a nice edge highlighting effect with shader code :O
Something to consider is that an even better pixel art effect is achieved by changing the camera to orthogonal because the 3D perspective slightly screws up the atmosphere that is trying to be achieved with this script. Fantastic tutorial by the way. thank you!
Hi, I didn't fully understand why its the case. Can you please provide more detail?
@@PP-ss3zf Ortho maintains the right angles better than standard camera modes.
Absolutely stunnng. I'm sad that that there's no Unreal Engine tuts of Tesslr8r's pixel style. Anyway....Please do more with this and don't let this die as a demo project
this is amazing!
I've seen many pixel shader tutorial but your explanation is crazy easy to follow.
Absolute hero! You're one of the few tutorial makers that not only explains what is happening, but why you're doing it and what the alternatives are! Wish more tutorials were like this, great job.
Also, those models and this shader are lookin fresh 👌
you put this tutorial out literally at the EXACT time i needed it! awesome stuff!
Oh I was trying so long to find a node setup that allows me to pixelize the scene while still having a crisp UI! Great stuff!
I was waiting for the customisable render pipeline but this gives me a huge heads up, thank you!
I
Been waiting for a tutorial like this for months, thanks so much
Amazing tutorial, simple and straight to the point while still showing good progress along the way. I just implemented this in my game, but in my case I had to mess with render priority of my assets/players etc. Somehow they get confused in certain areas/camera angles. But if I set them to a higher priority then the ViewPort, it works.
t3ssel8r talks in one of his videos how the effect is best sold with an orthographic camera at a fixed angle. On top of that he orientates objects with sharp edges only in 45 degree increments. It's not apples to apples since he's in Unity but I think keeping those design choices in mind could help keep the instances of confusion down.
@sainmanstanding Thanks! I'll make sure to take a look at that. I had a massive core change in my game, the post-processing part I left to work later. But it won't hurt to already research about it! Again, thank you!
Hey man, what a great tutorial and beautiful result. Thank you!
found this on reddit, new dev here I will learn and mess around with this on my projects, Really big thanks for the tutorial
Awesome tutorial !
Great explanations, thank you for making it.
Have a wonderful day.
Thanks so much for covering this! This effect is insane!
As an artist this is quite a bit above my head, which means there's a ton for me to learn here. Thanks for teaching!
That subviewport is genius
we'll *NEVER* be able to automate pix.... well okay then. the quality of this effect is awesome, thank you for sharing this.
golden content! Greatly appreciate you for providing the source code.
Saw this on Reddit as well, such a good looking effect!
I hope we get more videos out of you. Very impressive series :)
Another great tutorial, really well explained.
Great effect, and well presented as always! Makes me want to stop what I'm doing and find a project to use it on! 😂
To anyone having problems with the new update,
Godot 4.3 stealth introduced reverse Z, which means the only thing you should have to change for the shader to work again is replace void vertex() with this:
void vertex() {
POSITION = vec4(VERTEX.xy, 1.0, 1.0);
}
Legend! I was wondering why the first stage of the effect wasnt working. (this needs to be pinned)
I've been trying to do exactly this since 2021!!! Thank you so much for this !!
Super informative. Love how you present this kind of material!
This breakdown is a great resource for the community! I managed to get a tweaked shader form Godotshaders working like this last year, but there were some weird artefacts I couldn't figure out - most likely due to trying to use orthographic projection. Great to have everything broken down in this manner! Not that I know much about shaders, but I heard that branching (if-statements) are quite slow. I think you might be able to replace some of them with step functions if you find it runs slowly, particularly the edge_mix.
Yeah my original shader doesn't have an if statement there, it just made it easy to explain the logic with the statements split up. Maybe I'll commit the cleaner version to the repo.
please do! @@crigz
thanks for all your work!!!
@@JahznCentral Committed a couple tweaks to the repo, cleaned up the if statement a touch and made a tweak to clean up the edges where depth and normal edges overlap.
@@crigz how come quads dont get drawn with the shader unless you're very close to the camera?
Incredible stuff! This is very helpful, and I greatly appreciate the tutorial.
You can set the Render Priority lower than all the other transparent objects in your scene to make them visible again.
But it only works in Forward+.
Sadly I was trying to add it to my project on the Mobile renderer but meh, I'll use it on another project (?
You're a life saver!
Liked and subscribed! Very useful information, thanks!
You're great, a nice and clean explanation, well done!
'thank u so much.my englis is short. but i want talk to u "really thank u.!!!!
I improved your shader just a tiny bit :)
To your SubViewportContainer add two things:
- Color ramp or mapping each pixel to color palette from 1px high texture allowing use of dynamic lighting where shader will "clamp" color values to nearest one out of palette.
- Posterization which removes need to use for example toon shaders for lighting and allows use of regular shading methods.
I will be happy to see updated video with those changes :) Try it, effect is even better :)
Hey do you have an example of this change, I would love to see it?
Incredible work. Exactly what I needed. Would love more insight on this style if you end up working on it.
Exactly what i was looking for, thank you!
I've got TONS of models I 3D sculpted for printing and i am looking forward to do something (anything) in Godot with that, but after writing my own shaders I feel lik there were some limits in the approach. This might just solve that, thank you!
Boy pls doing this for a long time, you real doing AMAZING THINGS... One day may enternal gratitude is be one game... So now... my sub and like ... My potato don't run godot
Awesome! Thanks!
amazing tutorial thanks so much!
Aewsome work!
I just remembered that you are the one who made the Active Ragdoll video for Godot 4.0
Do you plan on revisiting that video (because of the spring constraints issue)
Yes! I plan on updating it to use Jolt instead.
@@crigz Sweet!
This is awesome. Subbed!
Amazing, thanks!
Very clear and thorough tutorial, ty!
It's always nice to have the option of course, but to anyone who may be designing a game; _please_ don't mix vector art menus/dialogues and pixel art content unless you have a very good reason. It's in so many games and it's such a faux pas. It's like if you decided to make a stylized black and white noir film and just randomly left the intro and outro credits in a some arbitrary range of colors for no reason.
Loved the video, I have one question, using this Godot "hack" with a quad mesh due to it being processed before the transparency all objects with transparency are hidden, is there an way to fix this? Like a parameter or is this a limitation of the "hack"?
Unfortunately there isn't a parameter to make transparent objects appear in the screen textures Godot provides, this is due to a limitation in the renderer. The two options currently are; use separate viewports to capture the screen textures instead, or dive into the engines rendering code and add the feature ourselves.
You can read more about the issue here: github.com/godotengine/godot/issues/28628
Hey this is amazing. 🌝😎
thanks! now i can edge in godot!
Thanks super useful, thanks for sharing!
Awesome, and also an incredible format. That aside, what would be the usecase? background for 2D game or something like that?
amazing work thank you!
Thank you. You really helped me.
Very nice tutorial
Thank you so much for this tutorial, I'll admit it was above my current understanding of Godot but it was fun to follow along and to get such a nice effect. Is there a way to exclude elements from this render? Say I wanted a sprite to not be effected by the subviewportcontainer, can I set it to a layer that is excluded so it is not effected by the outline?
This is awesome. Thank you. I'd happily back you on Patreon, etc. if it meant more great content, even if once a month.
This is sick
Great vid!!
You're a hero, what the hell.
Святой человек, низкий поклон вам от всего нашего села.
This is wonderful. Do you know if it's possible to add the edge effect to the rims of the shadows too?
Sign me up for the MasterClass!
This is awesome! Would it be possible to prevent specific objects from receiving an outline?
I don't know if this is achievable but maybe you could edit these objects so they do not appear when getting the screen-texture?
Can I make this shader/node tree structure show my Sprite3D and Label3D nodes not pixelize or apply the shader to them? I have some floating UI elements above certain characters that I'd like to keep as clean as the UI.
holy shit i was literally like "hm i wonder how i can do THIS EXACTLY" like an hour ago
Amazing shader thanks so much for sharing this - I implemented this into a simple scene with a moving camera and I am noticing some flickering/movement of pixels on the edges of objects as the camera/character moves, do you know of any ways that this can be minimised/removed? i.e. Keep the pixels static if a moving isometric camera views them from a consistent angle?
Yes, you'll need to make a script to make the camera movement pixel perfect, I've just done a quick search on CZcams and there's some tutorials on how to do this. Searching "godot pixel perfect 3d camera" should get you some results :)
Sweet, thank you so much for the quick reply!@@crigz
I was testing this just for fun, and this shader causes a lot of flickering for me. Even just moving my mouse over the viewport in the editor causes the rendering to look like it's wiggling 1 pixel around. It seems to be caused by the one line of code in vertex(), I've commented pretty much everything else up
Why's this?
SubViewportContainer has a problem that different resolutions get stretched to different end results, 4k vs 1080p end up in different resolutions. Maybe I'm overthinking this, but I ended up using both a fixed viewport resolution in Godot project settings, stretch mode to viewport and aspect to expand, and then ALSO using the SubViewportContainer to stretch it further down. Now I have full control on what resolution the end product is rendered in and I can have larger resolution for UI but smaller for 3D, and for example 4k and 1080p have the same look.
love the video.
can you make one on lens flare. i tried to convert the one on godot shader to spatial shader but failed also do you know how to make a geometry mask using depth texture .
How'd you do the grass in your scene? If I use a MultiMeshInstance3D for grass, the outline effect is applied and it looks a bit rough.
The trick was enabling transparency on the grass shader to hide it from the screen buffer textures.
@@crigz Thanks for your response! Did you write the grass shader yourself? If so, how did you enable it as transparent?
@@RugbugRedfern Yep! It was as simple as setting the ALPHA property in the fragment function like this: "ALPHA = 1.0;"
@@crigz Thanks! I was stuck on that :P
@@crigz Were there any other steps involved? When I do this, the grass disappears in play mode. Increasing the render priority on the grass makes it appear in play mode but any edges on objects in front of the grass mostly (but not 100%) disappear.
Hey, novice here. I was wondering if its possible to make an object in scene uneffected by the shader (All other objects are effected, but one.)
I succeeded making it by making the object material transparent with alpha, but object disappears if Im too far away (~5m). I know it has something to do with the shader as it does not disappear with post processing hidden, but I really cant find what is causing it.
Hey! To make an object unaffected, I've been doing the same thing by enabling transparency.
I just recreated your issue locally, I was able to resolve it by increasing the render priority of the transparent object. Hope this helps!
@@crigz First of all, thanks for answering!
Secondly, could you provide information where can i change render priority as only option I see is "priority" under "Node" class witch does not fix the issue. Sorry of its a stupid question, but never had issues like this before.
Thanks in advance!
Forget it, AI figured it out.
@@aqua_cat_ I also can't find render priority anywhere :(
@@sventomasek so its in the material propeties right on top. Just set it as one.
@@aqua_cat_ Thank you!! I thought it would show up by searching for it but I guess it not
can you make videos about character movement and possibly more advanced ways to do it in the latest version of godot
in a 3D space
- basic movements similar to most games
- click to move
- multiple complex inputs to move(like rapidly clicking two buttons to move,or a unique combination of different inputs such as a eye tracker or foot pedal etc)
Hello! This is a fantastic effect, thank you for making this video! One question I have--I'm trying out the shader and trying out different aesthetics, but right now the outline shader is being applied to everything including the grass I have. Is there a way to prevent the outline from applying on specific objects? Thanks again!
Do you have any recommendations on how to limit the shader's effect to a certain distance which I could control? I ask because after implementing it, when looking at objects far from the camera, the shader becomes very noisy regardless of the "Stretch Shrink" ratio. Any suggestions would be much appreciated : )
you can apply a smoothstep to the linear depth, and use the result as a mask.
Some (pseudo)code:
...
void fragment() {
...
float fade_start_dist = 50.0;
float fade_end_dist = 60.0;
float mask = smoothstep(fade_end_dist, fade_start_dist, linear_depth);
// assuming highlight edges; modify accordingly for shadow edges.
highlight_edge *= mask;
ALBEDO = ...
}
Hello there, is there a way with this method to include normal 2D Sprites in the 3D environment, without pixelating them? I'm still a beginner and I was wondering if there is a way to apply the pixelation only to certain objects (like the environment) and not the whole screen.
nice
This shader made my game look much better, thank you ! But now that 4.3 is out it broke :(
Do you know a way to fix it ?
try this:
void vertex() {
POSITION = vec4(VERTEX.xy, 1.0, 1.0);
}
Could you do a video on conveyor belts like as in a factory game
will you make video on motion blur in godot 4+ ?
Watch in 144p for more pleasure. 🚬
how do you actually put in a game, like for each player?
Could you do a video on multiplayer with Steam similar to how unity has FizzySteamworks, connecting via friendlist and invitations and such?
how to avoid rendering the grass
man i wanna learn how to do this in unreal
Is there any way to get this to work with an Orthogonal camera? I've been trying to sample the depth texture & then convert to an orthogonal projection but it has been a long time since I have done any shader code like this
This doeanst seem to recognize multimeshes as all my grass disapeared... i have no clue how to bring them back... any ideas?
a little late but the meshes might have alpha applied to them, and you can't render outlines to transparent objects, I had this problem with transparent rain that I ended up moving in front of the rendering of the shader in my render priority to have it not be applied and it became visible again
what about one for comatibility?
im currently trying to write shader that doing the same thing but per choosen object via material. unfortunately godot still doesnt support stencil buffer method. :(
This shader should work with some modifications as an object level material!
Make sure you remove the vertex part of the shader, and set it as a second pass in the material for the object.
And yeah, stencil buffer access can't come soon enough!
This kind of outline shader shouldn't require the stencil buffer, it's just that currently, accessing depth/normal buffers in a shader will force the object into the transparent pipeline, which may be undesirable for aesthetic and performance reasons. I thought that enabling depth-prepass would solve this, but it doesn't (bug?), but it's actually very little code changes to Godot's source to get it working, so maybe I'll open an issue...
@@denovodavid You can also run the outline shader as a second pass to a standard material and that seems to work fine. Not done a lot of testing though.
@@crigz yeah, that's an option. But that second render will still be in the transparent pipeline. Since I had outlines on most objects in my scene, it really limited the quality of volume/fullscreen VFX, as outlines may or may not appear due to transparency ordering, and might not be in the screen texture.
Just for your information the github repo has a bug, the depth function has a /= instead of a *= somewhere
I know because I copy pasted it while following the tutorial and I had to read through it all and make sense of it to find what was wrong, specifically what I was avoiding by copy pasting.
Lesson learned: If you can type fast, just type it yourself
Are you referring to "view.xyz /= view.w"? If so, that is not a bug, it is from the official godot documentation: docs.godotengine.org/en/stable/tutorials/shaders/advanced_postprocessing.html
If it's another line please let me know so I can look into it. Cheers!
I've been looking at a lot of outline shader videos over the years, as I was interested in using them myself (czcams.com/video/J_mJQqbuGac/video.html&ab_channel=niuage), and I gotta say, this one might be the best one in the way you explain things, well done.
Sometimes when the object is large enough to be going past the borders of the screen I'll get some extra shadow edges on the opposite border of the window that the clipping mesh is at.
Do you know of how I could fix this?
You just need to add some logic to make sure our offset UV's don't exceed the 0.0 - 1.0 range and cause wrapping. Something like this:
uvs[0] = vec2(SCREEN_UV.x, min(1.0 - texel_size.y, SCREEN_UV.y + texel_size.y));
uvs[1] = vec2(SCREEN_UV.x, max(0.0, SCREEN_UV.y - texel_size.y));
uvs[2] = vec2(min(1.0 - texel_size.x, SCREEN_UV.x + texel_size.x), SCREEN_UV.y);
uvs[3] = vec2(max(0.0, SCREEN_UV.x - texel_size.x), SCREEN_UV.y);
@@crigzThanks for that, it worked! (as expected)
is anyone else getting a few pixels of screen wrapping with this shader applied?
An easy fix for this, when creating the UV offsets, apply a clamp so the values don't exceed the 0 - 1 range.
e.g. uvs[0] = vec2(uv.x, clamp(uv.y + texel_size.y, 0.0, 1.0));
@@crigz thanks so much!
Also for anyone else, for some reason I ended up having to clamp a little earlier at 0.999
Well, I guess that means saying bye bye to Unity!
Could it be that this PostProcessing shader makes Sprite3d nodes not visible?
To make Sprite3D nodes visible, increase the render priority under Flags in the Sprite3D's inspector.
Be sure to also set the Texture Filter to Nearest for clean pixels.
@@crigz Thank you very much!
Another question, how do I make an object ignore this effect?
Is this written in gdscript???
The shader is written in Godot's shader language which is essentially GLSL
I'm trying to get anti-aliasing working with this, ideally without drastically increasing hardware demands 😅😅.
I have been playing with T3ssel8rs Smooth Pixel ( czcams.com/video/d6tp43wZqps/video.htmlsi=l1PQ-sz_5LEnINUF )
script from unity and trying to parse it into your system/godot but I don't know enough about shaders, Godot shaders, or unity to even know if it's possible or if they implement too differently.
Any guidance on either making his system work or implementing your own low-draw AA would be appreciated, if I figure anything out I'll make sure to reply to this.
Hi, are you still trying? I found such a shader and it works for me. I'll send it to you if you want ;)