The coolest shader effect that nobody uses
Vložit
- čas přidán 16. 06. 2024
- So posterization is just so insanely cool and for some reason it's very underused in the gamedev industry. In this video I explain how posterization can be used in some unconventional ways to generate some incredible effects, and even custom color palettes at the end.
0:00 Intro
0:24 Example 1.
0:54 RGB Posterization
1:45 Example 2.
2:26 HSV Posterization
4:18 Palette generation
6:15 Multiple palettes
7:34 Outro
#shaders #gamedev #indiedev - Hry
Simply put, it's ugly.
color banding but on purpose™
Ye it looks like a cheap photoshop filter. Its rly bad imo
Use a low resolution, add a dither matrix, then do the posterization and you can call it "pixel art".
@@JuhoSprite and your opinion is WRONG!!!!!
like anything, it looks good when it's done well.
0:09 is beautiful
fun fact, if you apply the same term "y = round(x * a) / a" to an audio signal, with x being the audio signal and a being the parameter, it becomes what is typically known as a bitcrusher effect
Oooh! I felt like the way the wobble-noodle deformed reminded me of that! Great observation!
Yup! I’ve used this effect both visually *and* sonically to make music that generates animations when put through an oscilloscope
That’s true smooth bitcrushing. True bitcrushing has an equal to a power of 2. (Ironically, using the same formula on the time scale produces the similar effect downsampling, which is often misconstrued or falsely marketed as “smooth bitcrush”)
Those signal processing methods when used on different kinds of media may lead to very interesting results 👍🏻
As a sound designer, wow.
To get optimal (most similar to the original) posterization the OkLAB (OkLCH) should be used.
This is a colorspace designed to be perceptually uniform, which means that if you split your colors in equal intervals neighboring blocks would look equally similar/dissimilar to each other.
Edit: pasteurization -> posterization
I'll look into it thank you for sharing that!
@@nitro-gen-studios acerola has a great video on color selection and OkLAB colors czcams.com/video/fv-wlo8yVhk/video.htmlsi=ZXssbMtmTiO1fpvQ
Mmmm pasteurization - yummy milk 😜😅
@@seannewell397, literally didn't cross my mind they are spelled differently, thanks
In my mother tongue it's the same spelling
Ok lab is super cool and I was wondering if you had seen it or not guess that answers that question
As the son of John Posterization himself, I approve of this video 👍
i am ashamed that i searched up "john posterization"
@@k_otey just wanted to google it too
@@k_otey and I'm proud of you!
It was briefly mentioned that this can be used for accessibility features, I would assume here you meant CVD support (Color Vision Difficiency). In general, filters that shift total screen pixels are filters to assist those who aren't vision impaired to see what we see. However, in practice, it is actually better to _only_ change the colors of things that are important - Pickups, enemy colors, etc.
Unfortunately, the only real reason filters end up being the norm is largely because Accessibility is an after-thought. It becomes a lot easier when you set your base materials up to support this at the beginning of development.
The reason for this is rather simple, but just because we are missing/mixing colors, doesn't mean we can't see bad ones. Purple skies, red grass, it becomes visually harder to see everything else in the game because we have to spend a lot more energy trying to interpret things we know the colors of, to the new palette.
So the advice - Please only change colors, of things that are visually important to the player as gameplay relevant - not the rest of the screen.
That's my little PSA.
Yeah I have to look into how to properly implement accessibility stuff later. It was just a random thing I wanted to show. The real game (as shown in the multiple palettes part) gives different colors to the items and enemies which is probably good for accessibility but I have no clue honestly.
Could be a useful option maybe for games with modding capabilities. It's a lot harder to expect amateurs who just don't know and just getting in to gamedev through modding to know to do this. It might make everything look bad/wrong, but if it can help to discern something _at all_ then it could still be useful in this case.
Dude, using noise and posterization at the same time to create a shadowy effect is sick. Thanks for showing me. I'm totally using this for something in the near future.
Also I think that there is a game called acid knife that I'm now positive uses some form of posterization.
I think Lethal Company uses this effect for their style, I’m not certain
Yes it does! If I remember correctly they posterize Unity's built in volumetric fog in some weird way.
Acerola in one of his videos, analyzed what filters are used in Lethal company
A while ago I experimented with posterizstion by grabbing the closest color of an array, using the euclidean distanve formula. It worked well, allowing me to set custom palettes, but I think your approach will be more flexible and have better results. Looking forwards to future videos!
I did something similar as well before I discovered that posterization exists! It can definitely work better in certain scenarios, but this solution is more flexible and can be adjusted in real time while having a set color palette can't.
I personally use a mix of HSV fiddling and a sampler cube, I think it gives me more control over the color without letting me absolutely destroy the game's visuals by accident.
I'd definitely look into the LAB color spaces (especially OKLAB) if you want to play around with posterizing more. LAB colorspaces, especially with posterization unevenly applied between the three color variables (different amounts for each, for example, or a different offset value (like phase shifting a sine wave, except it changes the points where the posterization starts instead)). It's one of the few that don't look too bad when unevenly posterized, in fact. There's also a set of sibling ofshoots, OKHSV and OKHSL that quantize nicely. But personally I like them better when only quantizing one or two of the variables.
I'll look into those colorspaces soon!
As a video editor, posterization sets off my constant fear of visible banding from running into the limits of the 8-bit color space. :P
That looks way better than i expected. Great technique
Thank you!
in some cases, also using dithering would make a better look. there’s a video in the “HTTP 203” youtube series about dithering, and a companion blog post, which could be interesting to you! I do think though that the banding not using dithering gets you is aesthetically pleasing sometimes, so maybe you’d wanna keep it as-is- just a thought :) great video!
Yes I want to keep my game on the cleaner side, so I'm not going to use dithering as it can potentially look somewhat noisy.
Very cool effect! I will definitely be using this in future games!
As a beginner pixel artist, I learned a lot from this video. I also didn't know of dark=more purple and light=more yellow, which... is a bit too simple for my taste, but it is still helpfull. Besides that, all the different posterizations will serve as inspirations for my color palettes
Good luck with your pixel art journey!
I imagine it's just a broad rule of thumb and not a "you must do this in all your art and it's wrong if you don't", but more an easy means to make something look more interesting and more "sunlit" than just changing brightness and no other parameter. Obviously different styles will call for different methods.
as a mathematician, i think that the distinction between color model and color space is absurd
😢😢😢 finally someone showing some love to posterization!!! Ive been using it consistently with my digital art because discovering how powerful it was literally shaped my art as a whole and managed to make me find my art style!!! Im honestly surprised to see no one talk about it
I think the trick to making this effect look really nice is to ensure all of the banding goes along smooth curves rather than noisy edges.
Completely depends on the artsyle you want. I wanted to make it look a bit less smooth but not as noisy as something like dithering.
Yeah, that's a fair point. I do think a cleaner look is going to be a more popular style though.
Such a cool video. I was playing with posterisation and wondering how I could make it better. Nice and concise video. ❤
i absolutely love posterization, and its something i try to shove into my visuals whenever i can. was actually doing that while looking for something to watch
when I was 9-10 yo I had an HTC mobile that had a lot of cool effects included in built-in camera app, and they all worked in real time, and the posterization was one of those. This video just brings me nostalgia feelengs
7:55 first games that come to mind are Lethal Company, Broken Reality, and ULTRAKILL (ultrakill's posterization is dependent on graphics settings and also has a custom color pallette feature)
I feel like there are very little applications that’ll actually look good with this shader
Banding has its appeal, I personally prefer dithering
Dithering can look noisy sometimes which is why I'm avoiding it here.
imo posterization looks great in brighter visuals like daylight landscapes because there's more color and it's easier for the shader to pick it up. But for visuals that tend to be dark, especially in video games, I really hate it. In scenes that are very dark, even a small difference in value/tint of a certain area of the screen can change your perspective of the dark like "oh, there's something there" but when it's posterized, it gets locked in the closest color allowed by the effect, which makes things harder to look at. So basically, it's a cool shader but most people want to see more color.
extremely underrated video
nah youtube just hasn't given any impressions to it yet
underimpressioned video 😭@@nitro-gen-studios
Agreed
Wow this is magnificient :D Great video
It's used heavily in NieR Automata. The EMP attacks in route B (or C, I forgot) disable parts of your controls and introduce visual glitches. The posterization effect is one of those glitches. Very cool stuff.
So True! great explanation as well!
I've looked many examples of posterization shaders this past month, each using a slight different approach, but the simplicity of converting HSV to posterize instead of RGB sounds so obvious, also perfectly explained
You can find examples of posterization in mapping. Meteorological maps may posterize pressure or temperature regions as an overlay. Same with distribution maps. Topographical maps are basically a map with a z axis rendered via posterized steps.
Enter the spiderverse also simulated animating at differen frame counts (on ones, twos, threes, etc) which is essentially posterizing motion to achieve the effect of accentuating miles initial clumsiness compared to the others.
That's really cool!
really enjoyable showcase and examples. idk why people are saying it's overused. it can look really cool if you add your own twist to it. thanks!
Hah, I actually did this today at work for a certain shader.
Posterisation isn't just for end graphics, but can also be a great tool for generating masks or other elements that make up the final image.
In my case, I used it to create a procedural grid texture by posterising the X and Y axes of a texuture coordinate.
buckshot roulette uses posterization
I love how it makes everything look like old video games graphics
You can get a similar effect on Web pages by playing with the filters in CSS. It's a superset of the CSS metaball effect, but you're also playing with other parameters like colors & filter areas of effect.
Oh I was recently experimenting with just this very idea. I was inspired by how original Doom's palette breaks up levels of depth in to different brightnesses to give the appearance of dark regions having lower detail where you can only maybe see some contours of objects and textures. I added a bit of randomness to the brightness channel per pixel to kinda fake temporal dithering while still keeping the effect of shadowy stuff being low detail and indistinct. Obviously would have to be used in a very stylized kind of game. I know lo-fi horror is kinda overdone but yeah it kinda matches this perfectly. :p
When you render floats into an 8-bit buffer, you automatically get posterization, which is an artifact I've spent plenty of time trying to remove with dithering.
Yeah that's a form of RGB posterization I guess!
example 2 just reminds me of floating point errors when you go too far from 0, 0
Posterization is great for low resolution and low color depth too. If you mess with the parameters you can make images look great while being far smaller
Not my ahh thinking this was going to be a Destiny 2 video💀
Crazy title to have right after lethal company came out lol
Think of "nobody" as "barely anyone" :D
@@nitro-gen-studios still incorrect
Posterization is really cool. Last yeah I wrote a really customizable reshade shader to do it. One thing I found really interesting was applying it to other buffere than just the color output. Posterizing the normal buffer, gbuffer etc. can give some really interesting results
him: no body uses
me: lethal company look even you tube says the same thing
Yes I know, 7:55 bottom right corner
"Posterization" is just a term for "color quantization" that was introduced by Photoshop. Color quantization is THE standard method used by almost every toon shader. So, yeah... Pretty hardcore clickbait going on in that title.
@@accendinet I'd love to see proof of that claim.
@@nitro-gen-studios Not sure what specifically you're referring to when you say "claim," but here are some general references you may find helpful:
en.wikipedia.org/wiki/Cel_shading
en.wikipedia.org/wiki/Color_quantization
en.wikipedia.org/wiki/Posterization
I hope that helps provide clarification. If you still have questions, just let me know! 🙂
i'm gonna use this in my game fr this looks FIRE
I'd love to see that!
The game "SCP:Infohazard" uses this effect and it's really cool-looking
Yeah it looks similar to Buckshot roulette!
Great video!
thanks!
basically rounding, one of the simplest post processing effects you can implement. useful in limited scenarios, quite possibly overused.
Rounding is posterization with the step parameter set to 1. You can do way more than that with this.
@@nitro-gen-studios rounding to the nearest multiple of, defined in steps instead of intervals, sure
Generally speaking its much easer to get good quality visuals by just deciding on and creating a limited pallete, crisp edged art style, then apply a very simple lighting model rather than apply a quantization effect to one of the smooth lighting models and more "realistic" art.
The control of the final scene part is a big part of why special effect shaders like this don't get used as much, since you have to design your assets with this look in mind anyway.
Omg true, i really miss this filter. It looks rly good and stylized, i love it
Didn’t you just say it looks like a cheap photoshop filter and that it was bad?
@@brahillms1374 hahah no i did never say that, I love the effect so much!!
@@JuhoSpriteyou did, it's in the top comment
@@rysuq. show proof
@@JuhoSprite on my (word that starts with c and ends with hannel)
I use posterization to make Minecraft screenshots creepier (Limited colour palette textures do half of the work for me)
Valefisk used a similar effect in his game crypt
Yep that looks to be correct.
I use this with low strength for low res logos to make them blend a bit better
This video is gonna blow up
hopefully :0
wow, i was trying to do the same thing with different pasterization on different objects in godot, but couldn't find a way to do it. thanks for telling how to do it.
btw i recommend watchinf acerola video about colors, he makes pasterization too in this video
You're welcome! I have already seen that video when it released :D
Oh my glob, I'm using a posterizing effect in my unity project but it was looking too crunchy from posterizing the RGB channels, Ill be implementing the HSV posterization as soon as I can!
We use posterisation heavily in our game Ocean Mirror. I solve the multiple color issue by mapping the HSL (i found HSL better than HSV) to a 2D texture LUT where H is X and L is Y. Saturation is just thrown away :)
Your game looks super cool good job!
I feel like posterization was a really popular effect like 20-25 years ago, then dropped out of vogue. A lot of early digital media techniques are back in style, and being used in really interesting and new ways. I think it's cool to see this recur in design with added modern twists.
They did not. It was just a hardware limitation back then.
LOVE COLOR QUANTIZATION
such a great watch, what software did you use for the visualizations?
I made it all in Premiere Pro, with some Godot stuff for the 3D parts.
this is so cool!
Szép munka, Jár a keksz!
Quite a few games use posterization. But it's often just one part of the effects chain because on its own it can be quite overbearing.
Off the top of my head there's A short hike, fight knight, cult of the lamb (in the afterlife scenes)
I'm pretty sure none of them do.
Fight knight very obviously uses an unlit shader and bunch of texture work.
A short hike probably uses some sort of simplified shader model, but most of it is also texture work. It's definitely not posterization because of how smooth the colors look at some places (especially on the fog).
Idk what you mean by the afterlife scenes in cult of the lamb because I've never played it.
@@nitro-gen-studiosYeah I guess I misremembered about a short hike. It uses shading ramps which I guess is technically posterization but not what you meant.
Not sure what you mean about fight knight though? If you look at gameplay you can see the colors pulse while the palette stays fixed. To me this very much looks like: sample black&white texture->oscillate brightness/contrast->posterize->sample palette
@@pokefreak2112 I looked at some gameplay now (I only watched the trailer before). It does look similar to what I did, but keep in mind that you do not need posterization to sample a palette. I've done similar things before without posterization, but I can't really tell what exactly they used now. You'd need to use Nvidia Nsight to tell, but I don't have the game nor really want to spend time on trying to figure out how they did it.
Amazing!
I'd like to see some posterization in OKLAB but HSV is already a great start. It will help lots with my NPR cartoon style shaders.
It has been recommended a bunch of times, I will try it out!
I would like to see if you could make any changes or improve this with OKLAB color space
Already did and it looks great!
I'm going to show it off in the next video (which should be coming the next week)
Personally once you leave the domain of colour I'd use the term "quantization" rather than "posterization", but the latter's Wikipedia page describes "time posterization" (reducing the effective framerate without changing the runtime of the video), so I guess there's precedence for the word being used more metaphorically.
(The term originally derives from the appearance of posters printed using a limited colour palette, as is common with some methods of printing.)
Yeah, I've seen a bunch of people call it "color quantization" when talking about color posterization, but I just didn't really want to confuse the viewers by using multiple words to describe basically the same technique.
@@nitro-gen-studios That makes sense
Imo for this type of effect in a game im frankly of the opinion it would probably be better just to use either specially made greyscale or red+green textures with a lookup table, an upshot to that version would be quite a bit better performance since you have to do less math, i guess the downside though is that it would take a bit longer to make the textures since you have to convert them to the right color format first which would involve mapping the pixel colors in the source image to UV offsets of their corresponding colors in the lookup table and idk if theres a pre existing tool that can do that...
Simply put, no. Sampling a texture is way slower than doing a few simple (stuff that's not trig functions, sqrt, etc.) math operations. Also the palette generation pass is barely noticable in terms of framerate drop, if at all. The only noticable slowdown (0.33ms) is adding more palette layers, as rendering them into their seperate sub-viewport is quite inefficient, but currently there isn't a better way to do it without. Someone recommended the use of stencil buffers, Godot currently doesn't support it yet.
Also the entire point of generating palettes in realtime is that you can change it in realtime. That is simply impossible to do the way I did it with a lookup table.
It's funny how we're writing code now to do what our graphics hardware did by default 35 years ago.
Used to be that we'd use a 16 or 256-colour palette for everything in the game. Now that we haven't had to use that for 25 years, we're coming up with ways to fake the look using systems that don't even know what a palette is in the first place.
Not really. It was more of a hardware limitation back then, rather than a design choice.
@@nitro-gen-studios I'd say hardware limitations are "doing it by default". Hell, our modern graphics cards still support the video modes of the IBM PC's orignal video cards from 1981. You often see a blinking text-mode cursor as the first thing when you power on your computer, right before UEFI goes and shows the manufacturer's logo in a slightly newer video mode.
LETHAL COMPANY - I don’t remember, I think she uses a similar effect.
on the "Acerola" channel there is an analysis of his graphics
Yes, I have seen that video, and if I recall correctly that game uses posterization on volumetric fog in some way.
voices of the void kind of uses posterization
I looked it up, and I really doubt it uses it unless we are talking about different games
Nice video? Did you use motion canvas for the image affects?
Nope, it's just pure Adobe Premiere
I wonder if the results would be better using oklab / oklch colour space
Probably, but so far I haven't managed to implement it yet.
I think the brightness value would technically be gamma but i just learned that today so idk
No, they are two completely different things, just google it.
Good to know thanks@@nitro-gen-studios
I looked it up and brightness affects everything equally while gamma is the curve you showed so maybe we are thinking about different parts of the video
Reminds me a lot of Lethal Company!
That's because LC uses posterization on their volumetric fog!
Using þese techniques as well as a smaller pixel ratio (like 160x144) could be interesting
So.. color banding and bad print contrast as an aesthetic
Stylized rendering™
Yes
Alpha Minecraft lighting effect
A magyar akcentus megcsapott ugyhogy jottem a komment szekcioba :D szuper video, igy tovabb!!
én is egyből kiszúrtam xD
xd
My Flip Phone does this automatically
youtube compression type shader
real
What tool(s) have you used for animations?
Premeire Pro, and Godot for the 3D stuff.
@@nitro-gen-studios Got it, thanks!
You probably want to use a stencil buffer instead of render layers (much cheaper). Similar to how enemy targeting outlines are created.
Godot doesn't support stencil buffers to my knowledge
@@nitro-gen-studios I believe it does in 4.2. I remember reading about it some time ago.
@@SirRebonack Yes I found it except it's not implemented into the main branch yet (?).
github.com/godotengine/godot/pull/80710
I only new this from my 2DS lol
wouldn't using seperate layers for rendering cause things to render over each other as some information might be on seperate layers that that one can't access?
Yes, currently they render over everything, but I'm going to fix that using the depth texture later.
@@nitro-gen-studios cool! can't wait to see the changes :D
it seems you are using linear colors as the final output color, try using gamma correction: pow(finalRGB, vec3(1./2.2))
I'll try it out!
no shot
Whats the didference between this and cell shading
Cel shading is a per object shader and it's basically a way of calculating lighting in a more stylized way.
My posterization filter is a fullscreen post-processing effect, meaning it's ran for every pixel of the screen texture after the base render is done.
Just use windows 3.1 if you want the definitive quantisation experience.
So true
To what extent is this similar to cel-shading? They seem similar to me but I haven't seen anything comparing them. The Wikipedia articles for each don't even mention each other.
They have nothing in common except looks. This is something I'm going to be talking about in the next video because a lot of people seem to be confused.
Lethal Company:
Lethal Company
I think hylics uses this
hey this is my hidden mojo dont popularize now before i exploit it
same :) but also Lethal Company exists so we are kind of late on that
could you please give a link to the shader?, a git hub link or anything, iam new to shaders and i tried to follow but i just cant get it to look even close without it bugging everytime.
which shader and what is the issue?
@@nitro-gen-studios wdym which shader wasn't the whole vid on one shader :D?, am i really that of a rookie to not notice there were multiple shaders?
i was interested in a posterizing shader like that of lethal company and you were the only one explaining the process behind it but i just can't implement it in my game.
i was asking for the project file to read it since the vid never showed the whole code together. ty in advance :3
Here's the palette based one. Create a flat plane mesh in front of your camera and apply the shader to that.
(yes, godot screen shaders are that janky for now)
It shouldn't be hard to modify for the simpler paletteless shader, just find that part in the video and try to copy the code from there.
pastebin.com/0WVvgFPa
(the reason why this code looks different to the one in the video is because that code was made with multiple palettes in mind. This one is made for a single color palette, and is a lot simpler)
Thank you bro, the problem was me applying the shader to the objects instead of the camera lol!
actually excited for new videos.
I haven't watched the video properly yet, but iirc this was pretty common for earlier cell shaded styles so that might have given it somewhat of a bad image? (no pun intended)
I use it!
Hylics by @masonlindroth looks really similar to this
Yes, but I don't think it actually uses posterization. I think they just drew their assets to look that way.
Does using a LUT work for this?
You could probably make it work, but I'm trying to keep it all procedual.
@@nitro-gen-studios yeah I was thinking keeping it procedual would allow for the effect to be changed real time, though I suspect a LUT would be faster (not that it matters with modern day hardware)
@@Scruffysnake Sampling a texture is probably slower than this. Posterization is literally 1 multiplication, 1 division and 1 round function, but yeah it probably doesn't matter.
@@nitro-gen-studios possibly yeah
Isn't that a cell Shader, that is used frequently?
Kind of? cel shading is a material shader generally whereas posterization is a post process effect.
Cel shading kind of uses posterization as a portion of it but it usually only uses 2 values (light and shadow) and the adds an outline afterwards
@@menaced. Correct!
I did add an outline shader in my game because combining the two effects looks really nice.
okay I guessed it wrong lol