Pixelation Shader in Godot 4.0 (Beginner's Perspective)
HTML-код
- Опубликовано: 2 ноя 2024
- An attempt to recreate @t3ssel8r pixel art shader in Godot 4.0
I'm pretty new to shaders, so this is a very noobish attempt. Happy to hear how others would do this!
☕ Download the Shader Project
ko-fi.com/s/c4...
🛒Amazon Affiliate Links
If you feel like shopping and supporting me, here are some of my essential buys
Productivity Mouse - amzn.to/3pqQjjN
Low Profile Productivity Wireless Keyboard for Multiple Devices - amzn.to/43YtenR
The BEST Office Chair - amzn.to/3NLbrKW
Graphics Tablet for Your Game Assets - amzn.to/46zlNoX
HDMI Extender - amzn.to/3NLDcTN
🏅🏅Attributions🏅🏅
Assets Used
Skybox - artstn.co/m/1LgWz
Models - quaternius.itc...
References
docs.godotengi...
Music
'Permafrost' by Scott Buckley - released under CC-BY 4.0. www.scottbuckley.com.au
Absolutely love this, please do more tutorials like this. Sometimes you really do want a tutorial that is short and straight to the point.
Thanks for the kind words! Are there any specific tutorials you want to see?
thank god you made this, because of some guy in unity you basically saved me alot of time to remake my game in godot
Glad you find this helpful!
Ayy welcome to Godot brother, it's a good time to switch over
Hands down the best godot tutorial i've seen. Straight to the point, clear explanation. No time wasted. Keep it up !
00:40 me always when I have to make an important decision
Found you on my RUclips feed at random, I must say im impressed and I was searching for this for a long time, thank you.
as a beginner diving into game development, this is amazing!
This is just perfect. thank you!
Thanks for the kind words, glad you find this useful!
You can also just set the project settings -- Godot will do pixel perfect with pixels larger than normal without any of this. Project Settings > Display > Window > Stretch > Scale, Mode, Aspect adjustments. Have a play with them.
thanks for the insights!
i love you so much for this
Not when you want to render the UI at a "normal" resolution. Or have a way for the player to disable the pixelation.
THANK YOU!!! This was so helpful! right to the point and it had exactly what I needed. The explanation was also handy for making my own, and it was so modifiable! This video was exactly what I needed!
I have been trying to wrap my head arround shaders in godot for a week or two, this helped me more than any other tutorial
This is a God-send. I thank you deeply.
loved the video,
the time - information ratio is amazing,
but i loved the way you explain so i wouldn't mind longer videos if it ever feels like a burden,
take it easy, much love
Thanks for the kind words, it really meant a lot to me!
thank you SO much! been looking for this for ages!
another element of the original implementation is the use of outlines using the depth and normal buffers
Thanks for the insights, will be exploring those two next!
How to fix the fact that the brightness of the screen with the shader changes depending on the directional light?
have you figured it out?
This is amazing!
Nice video. It's crazy how no one has fully figured out how t3ssel8r did his 3d pixel art. There are so many videos referencing his and trying to figure it out.
Thanks! Yeah, t3ssel8r done some amazing works!
you saved my life, i was struguling to make something like this, thank you
Thanks for the video, it has served me a lot
love the video! im new to shaders and this helped me understand them a bit more. Cool voice as well. Like a movie trailer of something, lol
thanks for the kind words, glad you find this video useful!
I like the dramatic voice over, feels like I'm listening to an audiobook
Thanks for the kind words, glad you like this!
My thinking exactly! It could just as well have been about that time a cave diver got stuck and had to be rescued. Same intensity :-)
Thanks a lot! Can you please tell me if you know a way to display 3d text whilst this is running? I don't want the text to be pixelated
This channel is a gold mine!
Glad that you feel that way! :)
Awesome! Really cool tutorial
Thanks for the kind words, glad you enjoyed it!
Very nice!
Thanks!
Wow this is great, thanks!
I'm new to Godot... and I'm surprised how easy some stuff can be.
This can be great for a 2D pixel game as well to make the cast shadows all pixely so the style doesn't suffer ^_^
Its all great, but i cant see any particles in blend mode mix. Do you have any workaround for that?
render_mode unshaded; at the start fixes the gray/black square when rotating the camera
that really helped me thank you
Thanks a ton, dude! :D
YOOOOO thx soo much!
fucking finally, ik its the generic thing to say but every other tutorial on this was so long and skipped stuff, this was right to the point
I remember that video lol. It's was interesting to watch how you solved this with Godot.
Thanks! I don't think I've fully solved it yet, but I do think the Pixelation shader gets most of the job done.
Subbed and activated notifications! Thanks a bunch man!
Thanks for the support!
It's free behind the pay wall?
This method of pixelation is popular but not very optimized. Your GPU is doing all the work of a higher resolution and you're just throwing it away using a nearest neighbor filter that's more expensive than an actual nearest neighbor filter. It's much better to render the scene at a lower resolution
Thanks for the insights! Would like to hear more about this. I'm very new to shaders, so this is my best attempt at trying to replicate t3ssel8r's showcase given that I can't find any detailed breakdown for that.
I tried rendering the scene at a lower resolution, but my UI elements becomes unreadable. Curious to learn how you managed to resolve that?
@@gamedevaki
1. make your 3d scene - including a camera
2. make a 2d scene w/ the GUI
3. In the 2d scene:
a) include a subviewport and add instance of your 3d scene under that -- now the 3d content is being drawn to an offscreen buffer!
b) add a TextureRect with layout to fill the (2d) scene view and set its texture to be a ViewportTexture -- which you point at the Subviewport for its content
4. tweak the SubViewport settings to make the render size small - thus pixelizing content.
Your project view settings remain 'normal' for default resolution / stretching / etc. Thus the GUI is rendered at target resolution. The SubViewport + TextureRect gives you a scaled & stretched view of the 3D scene but you position it just like any other 2d component in your GUI.
Screenshot of the effect: imgur.com/a/QOV8ZpU
Am I correct in assuming that if I were to use subviewport and set stretch shrink to 3/8/16 I'd get the same exact effect as this shader?
Obviously subviewport stretches everything including UI whereas spatial shader works only on the in game geometry, but otherwise it is the same right?
Thank you so much!
I got mine working in every aspect except the mesh is blocking the camera with a black rectangle. I can hardly see the filter working through it but i can't figure out how to get the filter without the darkening from the mesh
it seems to have something to do with rotation. if i rotate the mesh, the filter applies correctly, but as i continue rotating it, it starts to fade back to black. this includes real time rotations when running the game. any idea how to fix this?
it's because it's receiving light, you need this at the start of your code "render_mode unshaded;"
@@1234567890135792468 This solved the light issue I was having, thank you so much, the problem was when you rotate the player so the sun was hitting the mesh, your quick fix was exactly what I was looking for.
@@1234567890135792468 ayyy you fucking king you fixed it for me thanks
thank you so much
Great explanation
Thanks!
just what i was looking for 🤝
Glad you find it useful! 🤝
i hade the same problem but finaly its fixed thx!
glad to help
Can you add a dithering effect? Often, pixel art uses certain amount of colors, this will be very helpful and more stylistic.
Great idea, let me look into this
Ah, obvious question: Why not just render at a lower resolution in the first place?
Instead of rendering at 1920*1080 and post-processing in a shader, just render at 240*135 and do a nearest-neighbour resize to 1920*1080. Would be way faster as you're only rendering 1/64 of the pixels and nearest-neighbour scaling is about as fast as you can get.
Heh. I just realised that you'd be getting a lower resolution than I do when playing old games in DOSBox. They typically run at 320*200.
That said, I have used the approach in the video, but it was for a video filter in Media Player Classic (which can run shaders over the video) back when I was still on Windows. Unfortunately, there doesn't seem to be a cross-platform equivalent and MPC is strictly Windows-only, despite being open-source (and no, it doesn't work properly with WINE, I tested it out just yesterday).
I initially tried rendering at lower resolution, but my UI elements and skybox also ended up pixelated. I was experimenting with this shader for use with a HD-2D game, so rendering at low resolution don't really meet my use case.
Sounds cool to apply this to a video filter!
@@gamedevaki Don't render everything at the same resolution. There's lots of precedent for it in old games. Plenty of old FPS games had a low-resolution option that would render the world at half-resolution to get a bit of speed out of a slow machine, while drawing the UI at full resolution. Even more common was the option to shrink the view down and add borders (because 320*200 was as low as you could go and still have 256 colours (hacking text-mode could get you 160*100 with 16 colours)). You could play Doom in a postage stamp if you wanted (or had a computer slow enough that it was necessary to get the game playable).
Render the world in one resolution, resize it up to the running resolution, and draw the UI over the top. You may even be able to skip that last step if the view is strictly rectangular and just replace the world view's contents. Okay, that's probably penny-pinching for performance these days, but it would have been worthwhile back in 1993 if it saved you redrawing the lower quarter of the screen.
As for the skybox, also doable with this kind of approach. Draw that first, then when doing the low-res render of the world, mark the space for the sky transparent and make use of that when putting down the world, then do your UI last. High-res sky, low-res world, and high-res UI.
Thanks so much for the insights!
Thanks a lot!!
Pretty cool video. Just wondering, if it would be possible to do this as a canvasitem instead of using a meshintance?
thanks! canvas_item is possible, but the pixelation will be applied to all elements visible in the camera. I choose a mesh_instance to make it apply pixelation on select elements
Everything works perfectly, except my Particle Emitters (a rain effect in my game) doesn't project through the mesh, is there anyway to resolve that?
The music and the voice made it so dramatic!
Interesting video, do you know if any resource that goes through step by step what are the different parts that build up a shader like you started doing in this video?
Thanks for the comment! The closest I've found are the Godot documentation. Admittedly, I haven't done much research into shaders yet.
Thank you so much
yo! awesome. i seem to be having troubles wih transparent/translucent textures
I applied this directly the the camera of a first-person character, and the screen gets darker as I look further up to the sky. Is there a way to fix this?
AWESOME
Why does shader make everything darker?
Thanks!
neat tutorial
thanks!
So I'm also quite new to shaders, but I think there is a significant problem with this approach.
From my understanding, this method renders the scene at full resolution, and then 'scales' that render down to the target resolution. However, this means you are still using the GPU resources required for rendering at full resolution, even though you are later throwing away a lot of that information. It is better if you render the scene in the lower resolution first and then scale that result up, instead of the other way around.
I've never done this in Godot so couldn't suggest a method, but thought I should add in case anyone has a solution.
Thank you
Thank you very much for the video! What kind of a performance hit does this make?
Thanks for watching, this was my first attempt at shaders, so the performance definitely wasn't optimized.
I'm currently learning about pre-render and baked mesh to try creating pixel models with better performance. Still experimenting, so no real answer for that yet.
Great tutorial and explanation. Could you make a tutorial on how to make a ground telegraph that has a gradient fill over time like with certain abilities in Albion Online or Wildstar?
Thanks for the positive feedback. I haven't played both of those games. Do you have any specific abilities names that I can reference?
@@gamedevaki thanks for the reply! There is a video called “Wildstar: Warrior telegraphs with a suggestion” about 2 mins in you will see the light blue telegraph on the ground and it fills with a gradient based on how long it takes to cast the ability
@@vellendev ah I get what you mean now. feels like you don't really need a shader to do something like that though. let me see if I can make a video about that. thanks for the suggestion!
@@gamedevaki of course! Looking forward to it :)
@@vellendev I'm currently experimenting with simple fill over time effect for telegraphing attacks. Will take a while to clean up and make a tutorial, but here's a link to the experimental code if you are still figuring it out.
ko-fi.com/s/4c1129668c
Anything that has a material with transparency enabled becomes completely invisible. Is there any way to fix this?
You need to change the transparency from Alpha to Alpha Hash or Alpha Scissors. Hope it helps.
Hi, I'm trying to use this shader for a 3D fps project. I have 2 cameras with different fov, one for player vision (layer 1) and one to overlay hands and weapons (layer 2). When I enable this shader mesh for layer 2 it pixelates the hands/weapons but makes the rest of the world invisible with just environmental background active. Would you know a solution or a workaround?
Think this shader might be too limited for this use case.
tysm
Thanks great tutorial, But if I would be picky I guess make it less conspicuous it's a shader/camera effect, like I mean as the light flickers, say the trunks and branches increases/decreases by a few pixels. There are some literal pixel assets and low poly assets and dynamic lights don't act this way. Maybe I'll make an example.
How like some 2D art or Ghibli 2D style are inconspicuous even tho they are 3D.
Thanks for the feedback! Yeah, definitely agree that the shader have some limitations that I'm currently not well equipped to resolve.
Indeed, the ideal scenario is to handle the lighting differently from the models. Would be great if I can someday incorporate even a fraction of Ghibli 2D style into my works!
Can i use on a 2D project?
legend
thanks!
Hiya its a great tutorial and wanna attempt on godot 3(cause 4 is not allowing vulkan for some reason) but I cannot find the code on Kofi
Hi, I don't have support for Godot 3 at the moment
Can this boost your fps?
Can a shader like that work with a 2d scene. What if you have a rigged character and you use skeleton animation with it and you want to make him pixelated.
it should technically work, you would probably need to apply the shader to a canvas layer instead of a quad mesh, and set the canvas layer between the rigger character and your 2d camera
how do i do it in 2d though
Does this mean people on high resolution monitors will have smaller pixels than those playing on low resolution monitors? (is there a way to prevent this?)
yeah, I didn't consider the different monitors resolution previously. we should be able to add a function to figure out the different monitor resolution and divde it accordingly.
God bless you
Is the voice in the video yours or is it some kind of text-to-speech thingy? Seriously asking!
It's a text-to-speech voice
@@gamedevakiwhich tool?
@@zeektm1762 I'm using tortoise-tts by neonbjb
How different for Godot 3.5
Haven't try implementing it in Godot 3.5 yet. I think the syntax might be different, but the principles should be the same.
I dont know shader coading, actually I dont like it ... I usaly use vidual shader. Is there any way..? That i can use to manipulate shader propertise .. lets say change color of a object from gdscript. (godot 4)..
Thanks in advance.
I haven't really tried visual shader, mainly because I get overwhelmed by all the information the visual shader presents.
Let's break things down, if we want to change the color of object, then we would likely need to update the albedo of the material.
Depending on what object you are making changes to, modulate might also be another option.
anyone know if this could hypothetically work in 2d?
it should technically work, you would probably need to apply the shader to a canvas layer instead of a quad mesh
Спасибо брат
Why not just render at 320x200 and stretch?
I initially tried rendering at lower resolution, but my UI elements and skybox also ended up pixelated. I was experimenting with this shader for use with a HD-2D game, so rendering at low resolution don't really meet my use case.
it has no way of showing textures
why does this guys voice sound ai generated
I'm using Tortoise TTS
First! 😎
Thanks for the support!
AI voice
it's not free and you hardly explained anything
wtf is that fragment math lol, i dont think you should be teaching others if youre that new
Just make the game a lower resolution
Thanks for the suggestion! I tried rendering the scene at a lower resolution, but my UI elements becomes pixelated as well. Curious to learn how you managed to resolve that?
@@gamedevaki I don't use HD ui for low resolution games. Personally I think it looks ugly and a waste of performance if the game is at a "low resolution" tho it really isn't. You could try redrawing ui smaller and Anti-alias it while Conforming to the resolution size to smooth it.
@@FATBOI_GX That's very insightful. Thanks for the advice!