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.
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
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!
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
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 ^_^
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.
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?
@@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!
@@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
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!
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?
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 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.
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
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.
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.
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.
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?
@@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.
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! 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
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?
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?
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.
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?
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!
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 :-)
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 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
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?
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
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!
This is a God-send. I thank you deeply.
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!
Thanks for the video, it has served me a lot
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!
you saved my life, i was struguling to make something like this, thank you
thank you SO much! been looking for this for ages!
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!
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 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
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 ^_^
This is amazing!
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.
This channel is a gold mine!
Glad that you feel that way! :)
thank you so much
It's free behind the pay wall?
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
Wow this is great, 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.
Subbed and activated notifications! Thanks a bunch man!
Thanks for the support!
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
tysm
Thank you so much!
just what i was looking for 🤝
Glad you find it useful! 🤝
Great explanation
Thanks!
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!
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?
Thanks a lot!!
Thanks!
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!
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.
neat tutorial
thanks!
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.
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
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 i use on a 2D project?
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.
Спасибо брат
legend
thanks!
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.
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
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.
why does this guys voice sound ai generated
I'm using Tortoise TTS
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!
it's not free and you hardly explained anything
First! 😎
Thanks for the support!
wtf is that fragment math lol, i dont think you should be teaching others if youre that new
00:40 me always when I have to make an important decision
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!
Hands down the best godot tutorial i've seen. Straight to the point, clear explanation. No time wasted. Keep it up !
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
Found you on my UA-cam feed at random, I must say im impressed and I was searching for this for a long time, thank you.
Its all great, but i cant see any particles in blend mode mix. Do you have any workaround for that?
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!
Can this boost your fps?
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
it has no way of showing textures
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.
how do i do it in 2d though
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?
AI voice
The music and the voice made it so dramatic!
Very nice!
Thanks!
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
yo! awesome. i seem to be having troubles wih transparent/translucent textures
Thank you so much
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.
God bless you
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.
AWESOME
i hade the same problem but finaly its fixed thx!
glad to help
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
Awesome! Really cool tutorial
Thanks for the kind words, glad you enjoyed it!