The Art of Dithering and Retro Shading for the Web (2024) | Hacker News Reader

The Art of Dithering and Retro Shading for the Web (2024)

blog.maximeheckel.com

155 pointsmatthberg20 comments

I like good pixel dithering. The C64 demo scene has become really good at it. Just look at the girl picture in the frozen start pic. That shows really good taste in picking colors from the weird palette too.

https://www.youtube.com/watch?v=P5E6z7AMxIU

Is that real-time dithering the demo authors implemented though?

It seems like a static image they could use any graphics program to produce...

This would've been meticulously dithered by-hand by the artist to achieve a particular look and the quality of that is what gp was praising iiuc.

Related?

Ditherpunk: The article I wish I had about monochrome image dithering

2021 https://news.ycombinator.com/item?id=25633483 200 comments

2023 https://news.ycombinator.com/item?id=36023706 37 commments

Also this: https://news.ycombinator.com/item?id=42808889

It is a new approach to dithering in 3D, inspired by "Return of the Obra Dinn". After 2018, when someone talks about dithering, it is always the Obra Dinn, except for the submitted article it seems :)

Ah, thats from runevision. I recently whatched his youtube video on this (https://youtu.be/HPqGaIMVuLs) and "Return of the Obra Dinn" was also the first thing I thought of.

there's an approach missed in that article lying between ordered dither and diffusion approaches - low discrepancy sequences

https://web.archive.org/web/20180830004622/https://extremele...

I'm not sure how much use that is for "modern" systems where blue noise textures are cheap enough but for dithering on retrocomputing devices I find it useful - smoother than random, less expensive than error diffusion.

That page is still up, I linked to an archive because right now for me I see some of the images get blocked at the source.

My father (Bryce Bayer) was known for the Bayer filter, which survives to this day as the dominant approach to capturing color images in all digital cameras, and Bayer dithering, which didn't. Last time I saw it used was as decoration on DEC computer boxes.

In grad school, I went "down the street" to MIT to hear him speak. I overheard some students disparaging this dithering as primitive. Hey, you try living in the past and seeing the future!

I love HN for its healthy love of history.

Shameless plug: Return to Castle Floyd Wolfensteinberg

https://www.dwitter.net/d/27957

for(c.width&=i=8320;i;C=C-64+S|0)(S/64R-R+C/3e6^R+3t)%7?R=1.02:x.fillRect(S=i>>6,Y=i&63,q=0|(p=(x[--i]+=7T)+(Y/32R-R|0?Y/128:1-1/R)),Y?1:R=1,T=(p-q||0)/16,x[u]+=3T,x[u=i-64]+=5*T,x[u-1]=T)

I really like this writeup.

A shameless link to my own dithering web component, which uses Atkinson dithering which I think looks cool but cannot be done on a GPU.

https://sheep.horse/2023/1/improved_web_component_for_pixel-...

I very much enjoy N64 era games, and do wonder if the emulation/upscaling is subtracting from the experience. The problem is modern pixels are so tiny, without things like this, It would be a tiny image.

Other people want the game post-rendered into modern feel. I guess we're all different: For me, the blocky-ness is the point.

The article's author, this Maxime Heckel, has got an excellent online portfolio of shader work! https://maximeheckel.com

I wondered why the page was full of blank areas, it's because of this:

https://caniuse.com/hevc

... the videos are hevc-encoded and don't work for me in eg firefox. (I can see them if I switch to chrome)

per ffmpeg:

    Stream #0:0[0x1](und): Video: hevc (Main) (hvc1 / 0x31637668), yuv420p(tv, bt709, progressive), 1080x656, 1219 kb/s, 60 fps, 60 tbr, 15360 tbn (default)

Very pretty website. I really like the transparency for the nav bar. I would like to emulate this style in my own website. I wish I knew how to add texture to a website that makes it feel unique and not flat. Perhaps I should look into 3d postprocessing effects and how to apply that to a 2d website

Go look at the code! it's just a right click > inspect away.

And you'll see you just needs a single CSS property `backdrop-filter: blur(8px);` to achieve this effect nowadays =)

To do it properly, you need a bit more than just `backdrop-filter: blur(8px)`; see <https://www.joshwcomeau.com/css/backdrop-filter/#the-issue-2> for a clear demonstration of the problem, and the rest of that article for the solution (with further relevant details and discussion in <https://news.ycombinator.com/item?id=42302907>; in this particular case, the backdrop blur needs to be able to access 15px more of the backdrop than it can unless you go out of your way to give it that).

Though I found a use for the "kill sticky" bookmarklet. https://news.ycombinator.com/item?id=42902395

Aside from the interesting read, I really like the design of this site. Specially the code blocks.

plus 1! Really well done website, where the 3d bits are not detracting from the overall experience.

This is a fantastic blog post! Did not understand all the math, but the nostalgia trip was awesome. Thank you!

Reply on news.ycombinator.com