Color Quantization and Dithering

Поділитися
Вставка
  • Опубліковано 24 лис 2024

КОМЕНТАРІ •

  • @Acerola_t
    @Acerola_t  2 роки тому +968

    Please let me know if this video is too shitpost-y lmao

    • @_zurr
      @_zurr 2 роки тому +154

      Never

    • @gonderage
      @gonderage 2 роки тому +293

      no, it's shitposty enough. i freaking love the windows movie maker montage of a sheik rendered in different ways

    • @Acerola_t
      @Acerola_t  2 роки тому +174

      @@gonderage thanks I really peaked with that

    • @dawnrock2391
      @dawnrock2391 2 роки тому +55

      Yeah the meme cut-ins are funny af, needs more shitposting

    • @TavishMcEwen
      @TavishMcEwen 2 роки тому +6

      It's great, loving it

  • @Gymomanen
    @Gymomanen 2 роки тому +1456

    The windows movie maker montage with Blow Me Away was spot on. Thanks for the nostalgia 😂

    • @mou.2
      @mou.2 2 роки тому +55

      All it was missing was some "unregistered hypercam 2" in the corner.

    • @magnushmann
      @magnushmann 2 роки тому +20

      @@mou.2 Except it wouldn't be a screen recording, but a purely windows movie maker production, so that wouldn't really make sense. Unless you for some reason recorded your final video with the screen recorder instead of just exporting it properly.

    • @devRat
      @devRat 2 роки тому +9

      I started laugh crying. I think I made the exact montage when I was in highschool...

    • @2iinfinite
      @2iinfinite Рік тому +2

      Or paralyzer

    • @gigawattsfactory6777
      @gigawattsfactory6777 Рік тому

      The memories you brought back by doing the windows movie maker bit was Insane. Thank you.

  • @stevethe3307
    @stevethe3307 2 роки тому +428

    Thank you soo much, I developed one heck of a headache trying to even find the correct terms to describe what I was attempting to do (restrict all colors on screen after dynamic lights and such to my color pallet). At one point thought I was going to have to go for some out of the box or super inefficient brute force solution but your vid showed me the correct most efficient way in terms I could actually understand! Definitely subbing for that alone, keep up the good work man.

    • @Acerola_t
      @Acerola_t  2 роки тому +59

      Thanks! Dithering is my comfort effect lol I will take any chance I can get to talk about it.

    • @suop1234
      @suop1234 Рік тому

      same, i only just remembered that acerola literally made a whole video on it... thanks acerola!

  • @ddnava96
    @ddnava96 2 роки тому +338

    Fun fact: Madeline (Celeste) is a combination of pixel art and 3D (or actuallh 2D). Her body and face are made of sprites but her hair is actually a flat 3D model

    • @GLEPCHANNEL
      @GLEPCHANNEL Рік тому +2

      source?

    • @ddnava96
      @ddnava96 Рік тому +33

      @@GLEPCHANNEL. I don't have a link for you, but you can easily find videos in UA-cam that show how the game renders certain things, including Madeline's hair, lighting, etc

    • @TheRealAnsontp
      @TheRealAnsontp Рік тому +7

      I love spline 3D animation for hair

  • @fiskurtjorn
    @fiskurtjorn 2 роки тому +243

    10:57 To me, this feels odd with a .5 step in the middle. I would have chosen [0.00] [0.33] [0.66] [1.00], but I also experienced my visual system playing nasty tricks on me.

    • @JoBot__
      @JoBot__ 2 роки тому +5

      I agree.

    • @RosarioLeonardi
      @RosarioLeonardi Рік тому +17

      Is preferable to sample a pixel in the middle most of the time. So pixel 0 become 0.5 and pixel 3 becomes 3.5. Divided by the total number of pixels (4) you get a nice and uniform [0.125; 0.375; 0.625; 0.875].

  • @realastropulse
    @realastropulse 2 роки тому +63

    This is pretty interesting. As an experienced pixel artist, pixel art faker, and pixel art gatekeeper, this is a great description of how it works. I actually put together my own Blender based shader that I use for 3D -> pixel art work. Really cuts down on time, especially for animations. One thing that you can do to improve 3D scenes is actually use the depth buffer to apply some outline/darkening effects. Another trick is to use more solid blocks of color, because anything too detailed creates noise. This is why in games that use this style the objects typically have one color per section of the model.

  • @Purely_Andy
    @Purely_Andy 2 роки тому +18

    4:45 correction, that would be 1-bit. 2-bit would be black, dark gray, light gray, white (00, 01, 10, 11)

  • @sparkymcsparkerton8109
    @sparkymcsparkerton8109 Рік тому +7

    I literally almost never comment on UA-cam. You can fact check that if you like.
    But, I could not resist sending you a message to say I love everything about your videos.
    Like literally everything. It is edutainment [chef finger kiss].
    I didn’t even skip the ads because it’s the literal least amount of “work” I could do to pay you with my attention. And I never don’t skip the ads. I love these videos that much.
    I commented on this one, not because it’s my favourite, but it’s the one I most recently watched and after watching it I said, “you have got to let this person know that their work is appreciated”
    So, yeah, keep it up. You’re winning at UA-cam and I couldn’t be happier for you and everyone that has the pleasure of watching your work.

  • @guitarguyjones
    @guitarguyjones 2 роки тому +16

    Fun fact, the last handful of pixel-art King of Fighters games also used 3D models to create the animations (like Dead Cells and other newer games), but instead of using an automated process to convert the models to sprites, SNK's artists did it all by hand, redrawing everything in 2D, frame by frame.

  • @anthonysilveira6181
    @anthonysilveira6181 2 роки тому +9

    You're videos are fire, it's so interesting actually seeing the math that creates these effects.

  • @SpacerZVEVO
    @SpacerZVEVO Рік тому +2

    1:09 I screamed

  • @Nayckron
    @Nayckron 2 роки тому +62

    I loved the montage section, you have the perfect combination of educational, humourous and good editing.

  • @mrgreenskypiano
    @mrgreenskypiano 2 роки тому +17

    I love the combination of shitposting and still explaining how everything works in enough detail that I understood most of the concepts first try. Great video!

  • @nicholasjones7822
    @nicholasjones7822 2 роки тому +47

    if possible, would be cool to see limited anti-aliasing as well to smoothen out the sometimes sharp edges of the sprite

  • @christianwilliam1167
    @christianwilliam1167 2 роки тому +11

    I made a very similar shader in Blender but I based on PS1 aspects, it's funny to see you came up with pretty much the same solutions.

  • @KingBobXVI
    @KingBobXVI 2 роки тому +122

    The dithering bit is super interesting, I've never actually looked into how to do it on non-ascii-art images before, lol.
    For the pixelization bit though, is there a specific reason to do down-sampling at all? It seems like it would be much easier (and more efficient) to render at, say, 1/4 scale and up-sample it instead (which may also avoid some artifacting you can get from nearest neighbor down-sampling).

    • @Acerola_t
      @Acerola_t  2 роки тому +58

      Yeah that would be more efficient, I like having it parameterizable in the shader though since then this effect could be used as a photo mode effect for a game that isn't specifically made to look like this. For example, I ported the effect over to ReShade for use in Final Fantasy XIV but if it was reliant on rendering at a lower resolution then the effect wouldn't work there.

  • @SamiTheAnxiousBean
    @SamiTheAnxiousBean 2 роки тому +12

    As a pixel artist this was a extemely Interasting watch
    thank you for the incredible presentation

  • @Cyfrik
    @Cyfrik Рік тому +7

    Having messed around with similar effects in an image editor instead of a game engine, I've noticed you can also get some interesting effects if you give each separate color channel a different dither map.

  • @AutisticYui
    @AutisticYui 2 роки тому +1

    Pretty much just binged all your videos, great stuff. Fun style and approach to the topic. Thanks for stressing the importance of optimization.

  • @JulsGeekPI
    @JulsGeekPI 2 роки тому +2

    very good work for the video, the formulas, the detailed explanation of the algorithm, thanks master Acerola, also the music and the relaxed mode of teaching.

  • @loremaster1253
    @loremaster1253 2 роки тому +6

    Great video! Really helpful given how popular the pixel look is in modern indie design.

  • @Xenthera
    @Xenthera 2 роки тому +3

    7:35 calm down 2007 youtube

  • @razeenag8478
    @razeenag8478 2 роки тому +5

    Your channel is an absolute gem, educative and entertaining!!

  • @dmnkb
    @dmnkb Рік тому +4

    This gave me some fantastic mid-2000 vibes, thanks for that! Kinda reminds me of how much more fun the internet used to be back then. Thanks for your detailed explanations, really inspiring!!

  • @Roxor128
    @Roxor128 2 роки тому +2

    I did something similar to this, but the destination palette was the EGA default. The shader included it as a 16-entry lookup table and found the two closest colours in the palette, then used dithering to decide which of the two to use for the final pixel. Given most of the colours in the EGA palette are so saturated, I had to add an extra stage that significantly increased the colour saturation first in order to get decent-looking results. Without it, most of what came out was greys, as the more realistic source material I was feeding into it just wasn't anywhere near that saturated.

  • @skylarcanode-rhodes9771
    @skylarcanode-rhodes9771 2 роки тому +5

    Just found you yesterday! I'm looking forward to seeing more of your videos, keep up the good work! 😃

  • @lastsipahi
    @lastsipahi Рік тому

    I recently bought ProPixelizer asset and this video gave me the insides of how it's working. Thank you!

  • @microdavid7098
    @microdavid7098 2 роки тому +1

    such a detailed video. I love it. I don't use unity but have learned a lot about how things work from it

  • @feelshowdy
    @feelshowdy 2 роки тому +1

    Great video. I know my way around Photoshop so I'm familiar with these effects, and they're actually so useful for practicing art. What I do is I pass my references through a downsamping filter to reduce the number of colors. When the reference is simplified like that, it helps me a lot with understanding how to shade and color everything.

  • @evgenyaleksandrov1206
    @evgenyaleksandrov1206 Рік тому

    Your fascinating manner of explaining and good taste makes this interesting concept even more amazing. Thanks. I hit a subscribe button after first thing I saw from you.

  • @peppidesu
    @peppidesu 2 роки тому +68

    2:51
    Mipmaps are copies of the original texture scaled down by some factor. Because the pixels being sampled at a large distance change rapidly when the camera moves around, using the original texture would introduce noise to the texture. So instead, a mipmap is used in its place depending on how far away / how small the texture is.
    Switching between mipmaps causes banding artifacts at the distance boundaries, though. to counter that, *trilinear filtering* is used, which fades textures from one mipmap to the next.
    But there is another problem. The copies of the textures are scaled down by the same amount on both X and Y axis, a.k.a. they are scaled isotropically. If a texture were to be scaled down a lot on one axis, but stay the same on the other axis (for example when you stand close to a wall) the texture becomes more blurred than normal because the mipmap used is too small. *Anisotropic Filtering* takes care of that, by making copies for every combination of X and Y scalings.
    Side note: The term anisotropic filtering is actually not correct because it isn't a filtering mode. It is a alternative way of generating mipmaps. In other words, you can use anisotropic mipmaps with point filtering (that is, if your GPU and graphics API support that), they are not mutually exclusive like bilinear and trilinear filtering would be.

    • @fungo6631
      @fungo6631 2 роки тому +6

      There's yet another problem you forgot to mention. Textures consume fillrate. Fillrate doesn't grow on trees. Mimpaps also reduce the fillrate requirements for distant objects that don't require as much fillrate. This allows you to add more detail where it matters with the same performance.

    • @AlphaGarg
      @AlphaGarg 2 роки тому +1

      @@fungo6631 Fillrate?

    • @fungo6631
      @fungo6631 2 роки тому

      @@AlphaGarg Yes, fillrate. What's so strange here?

    • @ShinyVeggie
      @ShinyVeggie 2 роки тому +2

      @@fungo6631 He doesn't know what fillrate is/means and was hoping for you to expand on it instead of googling it himself.

    • @Krilium
      @Krilium 2 роки тому

      Simplified: Mipmaps are a set of images, each half the size of the last. When the camera is far enough away (among other reasons), the lower resolution versions fade in. This is to save memory, and to avoid weird artefacts.

  • @spuryaas
    @spuryaas Рік тому

    I played Persona 3 for the first time about a week ago and now I hear music from it in every second video

  • @DanTDMs-homunculus
    @DanTDMs-homunculus 2 роки тому +2

    you just popped up on my recommended and i gotta say i love your editing, your style is just very cool and nice to look at thanks for making things

  • @filipgaming1233
    @filipgaming1233 2 роки тому

    The montage reminded me of a video montage i watched when I was like 7 years old, just watched it again, good times.. thanks

  • @theseatoad
    @theseatoad 2 роки тому +3

    Using a downsample + dither on 3D looks great, but I always like a nice thick outline around my pixel art. It would be interesting to create a shader that adds outline around Sheik. It always helps distinguish characters from environment.

  • @5alpha23
    @5alpha23 2 роки тому +2

    I don't know why this landed in my recommended videos but boy am I glad it did! - Perfect video for a Sunday afternoon, at least in my case. 😁 Your tongue-in-cheek approach is really refreshing. 🙂

  • @aiden_3c
    @aiden_3c 2 роки тому

    I actually really love this video, also how you actually talk about the math now I understand how I'd do some shader shit like this. Thank you

  • @Crazymoniker
    @Crazymoniker 2 роки тому +3

    That Blow Me Away montage was nostalgiac as hell. I really miss the good old days of playing Halo after school and watching shitty gameplay compilations on youtube.

  • @kwmcgreal
    @kwmcgreal Рік тому

    Very helpful to learn what these functions do!

  • @CaveyMoth
    @CaveyMoth 2 роки тому +16

    0:16 Wait. This isn't Monogatari!
    The downsampling and dithering give the graphics a really nice PS1 vibe. It especially reminds me of Silent Hill's graphics.

    • @ako_0256
      @ako_0256 2 роки тому +1

      My thoughts exactly lol

  • @ShinSpiegel
    @ShinSpiegel Рік тому

    This was a freaking amazing video. Thanks for sharing

  • @theai_1
    @theai_1 10 місяців тому

    I'd love to see an effect like this on larger terains - like for example that ocean simulation. Looks incredible

  • @AndiieRose
    @AndiieRose 11 місяців тому

    I actually used this video to make my own color quantization algorithm, in Scratch of all places!

  • @glitched_code
    @glitched_code Рік тому

    this is very useful, thank you!!

  • @darknessflame101
    @darknessflame101 10 місяців тому

    Love the windows movie maker throwback, absolutely brilliant

  • @rainbowzzzplayzzz
    @rainbowzzzplayzzz 2 роки тому

    Ive never once wondered about any of this. Despite that this was a very fun video and I enjoyed it v much ty for giving me your knowledge.

  • @mr_clean575
    @mr_clean575 2 роки тому +4

    I would love to see what the different color shading effects using the grayscale mapping would look like on the sheik model

  • @thecompl33tnoob
    @thecompl33tnoob 7 місяців тому

    I'm writing up my very first game design documentation and thought just yesterday "damn, I wish there was an Acerola video on converting 3D assets to pixel art, I should stop by the channel." and BOOM the heavens opened and this absolute jewel of a video came soaring down.
    I have no idea how I missed this one, as I've watched nearly everything on your channel. Please keep going man, your content is supremely helpful and immensely entertaining. The nostalgia hit hard on that montage. 😂😂😂

  • @SwifterYT
    @SwifterYT 2 роки тому

    This channel's very addicting, wanting to get into shaders soon so this stuff will be helpful. Thanks!!

  • @samueldavies646
    @samueldavies646 2 роки тому +2

    the dither explination was amazing, I found it super interesting!

  • @BakeBakePi
    @BakeBakePi Рік тому

    That's so cool! Great video!

  • @firedbluex
    @firedbluex 2 роки тому

    the amv in the middle of the video is absolutely captivating

  • @sarerusoldone
    @sarerusoldone 7 місяців тому

    the windows movie maker dithering AMV was *chef's kiss*

  • @fernandaalmeida6670
    @fernandaalmeida6670 2 роки тому

    thanks a lot!!! so nice reverb

  • @Rubyllim
    @Rubyllim 2 роки тому +1

    Thanks, yoinking this for my school project

  • @sampson217
    @sampson217 2 роки тому +2

    This was amazing. Thank you. 👏

  • @qdeqdeqdeqde
    @qdeqdeqdeqde 2 роки тому +1

    the way the colors look remind me of the old game MDK

  • @cyancatnp
    @cyancatnp 10 місяців тому

    I learnt a lot from this video. Thank you

  • @chlorine6539
    @chlorine6539 2 роки тому

    i have no idea whats going on but this showed up on my recommended and Im having a good time

  • @Krilium
    @Krilium 2 роки тому

    I am here to say that I'm happy because I remembered what mipmaps were off the top of my head and I have minor short term memory problems. YAY LEARNING!

  • @WhiteDeVil3
    @WhiteDeVil3 Рік тому

    Appreciate the WMM 2000's vibe montajjjjj, cheers bruv.

  • @jackmiddleton2080
    @jackmiddleton2080 4 місяці тому

    I can't remember the last time I learned so much so quickly.

  • @BickSnarf
    @BickSnarf Рік тому

    7:35 man that hit me in the nostalgia

  • @errantwashere
    @errantwashere 2 роки тому +6

    Errant was here

  • @medj7218
    @medj7218 2 роки тому

    i really apreciate your help with dowloanding this software

  • @badkluster
    @badkluster Рік тому +1

    is this the best and most informative channel in UA-cam?
    maybe

  • @ZX_STH
    @ZX_STH 2 роки тому +2

    The T-pose Sheik color pallet montage would make a great meme.

  • @flamshiz
    @flamshiz Рік тому +1

    the only reason I can think of not to precompute the LUT for the dither pattern would be if you're really pinching each byte of memory for size constraint purposes

  • @blakerussell5538
    @blakerussell5538 Рік тому

    I fucking love this guys taste in video game music. WOH is neat

  • @krawieck
    @krawieck 2 роки тому +1

    very cool video, im gonna now watch every other video on ur channel

  • @ragingdonut
    @ragingdonut 2 роки тому +2

    love the monogatari theme

  • @andershour
    @andershour 2 роки тому +4

    Gonna tell my girl I need her to do a lil dithering on my mixels tonight 😈

    • @Acerola_t
      @Acerola_t  2 роки тому +1

      she downsample my dither make my palette swap

  • @Koplerio
    @Koplerio 2 роки тому

    This video is literally going back in time.

  • @haruki_nyan
    @haruki_nyan 9 місяців тому

    Fun fact: RARE's Donkey Kong Country for Super Nintendo used animated 3D models for it's characters that were converted into 4bpp sprites.

  • @StHappyfaces
    @StHappyfaces 2 роки тому

    Thank you kindly, stranger

  • @aeleequis
    @aeleequis 2 роки тому +3

    Monogatari, persona 3 (if I'm not mistaken) and more references, paired with cool jokes and awesome video editing. You deserve way more followers than you have

  • @sig3363
    @sig3363 Місяць тому

    This is the first video I watched from this guy. I could spot some shitpost humor but when the montage dropped, I lost everything.
    I wanna be his friend.

  • @kayaxiecs
    @kayaxiecs 2 роки тому +1

    bro the music at 4:25 hit way too hard

  • @NihongoWakannai
    @NihongoWakannai Рік тому

    9:49 I was very confused by this section because the shader didn't work and had to go play on shadertoy to fix it.
    It's supposed to be center * (sharpness * 4 + 1) not center * sharpness * 4 + 1

  • @augmentedcamel
    @augmentedcamel Рік тому

    fantastic edit

  • @andrewalvarez1480
    @andrewalvarez1480 Рік тому

    I started cracking up halfway through the video when I realized how hilarious your animations were. truly great video 5/7

    • @cruz6550
      @cruz6550 7 місяців тому

      which software is Acerola using???
      i thought he used blender

  • @nguyenhoangminhtrung2779
    @nguyenhoangminhtrung2779 2 роки тому

    I love these videos!

  • @DigitalCasm
    @DigitalCasm 2 роки тому

    You have a gift for being concise.

  • @DeuxisWasTaken
    @DeuxisWasTaken Рік тому

    Thanks Acerola very cool
    The montage not only made me giggle but also reminded me of the existence of Breaking Benjamin to which I last listened like 10 years ago lol, thanks for the nostalgia

  • @Vallee152
    @Vallee152 2 роки тому

    There was something I saw where a person used actual pixel art, but the texture used was actually a map to a different texture, which then allowed them to swap out that second texture on the fly

    • @catgirlQueer
      @catgirlQueer Рік тому

      astortion?

    • @Vallee152
      @Vallee152 Рік тому

      @@catgirlQueer yeah, that game, I couldn't remember what it was called

  • @STICKOMEDIA
    @STICKOMEDIA 2 роки тому +2

    That montage is beautiful

  • @Zomboik
    @Zomboik Рік тому +1

    200X called, They want their Montage back.

  • @workinglategames7401
    @workinglategames7401 2 роки тому +4

    Nice, but i miss the lab coat

    • @Acerola_t
      @Acerola_t  2 роки тому +1

      irl segments will return but probably not till after the next video since I've got only a few days to make the next vid.

  • @Happ1ness
    @Happ1ness 4 місяці тому

    8:00 the music really resembles something that Smash Into Pieces would make, maybe I should check on them 👀

  • @letronix6243
    @letronix6243 Рік тому

    Huh!? That's exactly what I just thought before I got this video!

  • @peppersaber
    @peppersaber 2 роки тому +1

    I like the monogatari intro

  • @tciddados
    @tciddados Рік тому

    I feel like a good addition to this might be explanation of non-standard palette dithering. The kind explained at the end is neat, but ultimately a fake color picture from greyscale, and the color-choosing algorithm shown before just assumes an RGB palette with equally-spaced items. Would be interesting to go a bit into palette-aware algorithms (like ones with a higher # of greens than blues, to make the night landscape picture show up better).

  • @SporkleBM
    @SporkleBM 2 роки тому

    i have no place to apply this, (as of yet) but this has been really interesting to learn anyway!!! (well. minus the matrices and math in the dithering section of this video- sorry haha!!)
    thank you for putting this out! i think im going to try messing around with this sometime! :]

  • @ciberman
    @ciberman 2 місяці тому

    Came for the dithering, stayed for the montage

  • @mikafoxx2717
    @mikafoxx2717 10 місяців тому

    Fun fact, bilinear (or a somewhat cheaper version of it) was used for the nintendo 64, whereas the PlayStation used point filtering. This is why the 64 textures looked, well, blurry, and the playstation was super blocky. PlayStation also had issues with fixed point math and other things, so it would be interesting to see how good it could be without those. I prefer point filtering when it comes to low resolution textures anyways, as you get a Minecraft instead of blurry N64 look.

  • @Soundy777
    @Soundy777 2 роки тому +3

    UA-cam! light this channel up!

  • @ferenccseh4037
    @ferenccseh4037 2 роки тому

    Very cool

  • @S41L0R
    @S41L0R 2 роки тому +1

    9:15 i prefer that tbh

  • @mandelbro1
    @mandelbro1 Рік тому

    Got a give a like because you use the cheapest most basic Samson mic and frankly I love it. Also, good video

  • @jackmiddleton2080
    @jackmiddleton2080 4 місяці тому

    bruh I didn't know what anti aliasing was for like 20 years until watching 3 seconds of this video.