Godot 4 Post Processing: 3D Pixel Art Shader
Вставка
- Опубліковано 28 лис 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
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)
This resolved all my problems - thank you for taking the time to post this!
absolute hero
Yeah like everyone else has said, this is extremely critical information
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
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 👌
this is amazing!
I've seen many pixel shader tutorial but your explanation is crazy easy to follow.
you put this tutorial out literally at the EXACT time i needed it! awesome stuff!
After so much time and so many tutorials, I found the person who best explains the topic and it also worked perfectly for me.
Thank you! ❤
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
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!
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!
I'm in love with this tutorial! Thank you so much!
After 10 hours searching how to solve this a came here and post a comment. After 40 minutes i posted the comment a finally find what was the problem!
I was modifying the "dark_amount" in the code by multiplying it ("vec3 depth_col = nearest * (darken_amount * 20.0);") to get a softness dark outline. This was causing the glitch.
To solve the problem a just modify the "dark_amount" on the "Shader Parameters" and Vualá!
Thanks again for sharing this masterpiece!
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
Thanks so much for covering this! This effect is insane!
Been waiting for a tutorial like this for months, thanks so much
Awesome tutorial !
Great explanations, thank you for making it.
Have a wonderful day.
found this on reddit, new dev here I will learn and mess around with this on my projects, Really big thanks for the tutorial
Hey man, what a great tutorial and beautiful result. Thank you!
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?
I'd love to see it in action! Even if it's just a gif.
Super informative. Love how you present this kind of material!
Saw this on Reddit as well, such a good looking effect!
golden content! Greatly appreciate you for providing the source code.
I've been trying to do exactly this since 2021!!! Thank you so much for this !!
PSA: if you want to make this shader work with orthographic camera in Godot 4.3 try to tweak the camera Far and Size settings till it shows correctly, it worked for me
Another great tutorial, really well explained.
Liked and subscribed! Very useful information, thanks!
very cool, I got like 10% of it, will come back after a few more steps on my learning shaders journey
I hope we get more videos out of you. Very impressive series :)
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?
'thank u so much.my englis is short. but i want talk to u "really thank u.!!!!
Great effect, and well presented as always! Makes me want to stop what I'm doing and find a project to use it on! 😂
You're great, a nice and clean explanation, well done!
Incredible stuff! This is very helpful, and I greatly appreciate the tutorial.
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!
we'll *NEVER* be able to automate pix.... well okay then. the quality of this effect is awesome, thank you for sharing this.
Incredible work. Exactly what I needed. Would love more insight on this style if you end up working on it.
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!
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.
Hey, I love the tutorial and the pixelization itself works wonderfully!
I was, however, having a problem with the UI. I'm working on a 3D first person game where this method of pixelization is used, and I'm trying to add a "Press "E" to interact" UI element for interactible items when the player looks at them. The way I have this set up is with a CanvasLayer with a BoxContainer and Label containing the text, set to appear when the player's RayCast collides with an interactible object. However, I find that running this code along with the pixelization breaks the camera movement with the mouse, but I'm not sure why.
For reference, here is the code for the first person camera:
const SENSITIVITY = 0.01
func _ready():
Input.set_mouse_mode(Input.MOUSE_MODE_CAPTURED)
func _unhandled_input(event):
if event is InputEventMouseMotion:
head.rotate_y(-event.relative.x * SENSITIVITY)
camera.rotate_x(-event.relative.y * SENSITIVITY)
camera.rotation.x = clamp(camera.rotation.x, deg_to_rad(-60), deg_to_rad(60))
Any help would be appreciated!
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!
amazing tutorial thanks so much!
Святой человек, низкий поклон вам от всего нашего села.
This is awesome. Subbed!
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?
thanks! now i can edge in godot!
Thank you. You really helped me.
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
This is sick
amazing work thank you!
Sign me up for the MasterClass!
Amazing, thanks!
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?
Great vid!!
Hey this is amazing. 🌝😎
You're a hero, what the hell.
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 UA-cam 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
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)
This is awesome. Thank you. I'd happily back you on Patreon, etc. if it meant more great content, even if once a month.
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.
Hi could you go into more detail on how you achieved this?
This is wonderful. Do you know if it's possible to add the edge effect to the rims of the shadows too?
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?
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.
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!
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.
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 = ...
}
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
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 .
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?
For anyone trying to figure this out: Just change the transparency property to "Alpha" on the material that should not be affected by the outline
nice
Thanks for an amazing guide.
Im rinning into some issues with the post processing. It seems like the 'map' is diagonally 'split' into two sides. I dunno if its because of the quad or shader code specifically.
Another thing - if someone knows, how can i make this outline shader not affect specific objects on scene? I have prepared a foliage shader and when viewed via the camera - its black. Is it possible to separate the two, so that the outline doesnt render on specific stuff to not break other shaders?
One thing is a bit confusing for me. I noticed that shader is working when it is outside the camera object, do we need it inside it then?
this is really cool, but is there any way to make it work on an orthographic camera? the effect looks like it's somehow split into two sides of the screen
edit: i didnt expect it to work, but chatgpt gave me the exact code changes to make this work on an orthographic camera
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.
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);
}
thank u.
how to avoid rendering the grass
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
I'm in search of how to do post processing. Everyone seems to do it differently. I don't understand why it would take three nodes to add a shader after the render stage.
It only requires one node. The full screen quad: docs.godotengine.org/en/stable/tutorials/shaders/advanced_postprocessing.html#full-screen-quad
Could you do a video on multiplayer with Steam similar to how unity has FizzySteamworks, connecting via friendlist and invitations and such?
will you make video on motion blur in godot 4+ ?
Could you do a video on conveyor belts like as in a factory game
how do you actually put in a game, like for each player?
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
man i wanna learn how to do this in unreal
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.
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)
Watch in 144p for more pleasure. 🚬
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
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?
will this still work for 4.3
I've been looking at a lot of outline shader videos over the years, as I was interested in using them myself (ua-cam.com/video/J_mJQqbuGac/v-deo.html&ab_channel=niuage), and I gotta say, this one might be the best one in the way you explain things, well done.
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!
Well, I guess that means saying bye bye to Unity!
Is this written in gdscript???
The shader is written in Godot's shader language which is essentially GLSL