4 ms·
The Art of Dithering and Retro Shading for the Web (2024)
- ggm 2y agoI 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.
- nelsonfigueroa 2y agoAside from the interesting read, I really like the design of this site. Specially the code blocks.
- snickmy 2y agoplus 1! Really well done website, where the 3d bits are not detracting from the overall experience.
- rezmason 2y agoThe article's author, this Maxime Heckel, has got an excellent online portfolio of shader work! https://maximeheckel.com https://maximeheckel.com
- hanspf 2y agoThis is a fantastic blog post! Did not understand all the math, but the nostalgia trip was awesome. Thank you!
- HelloUsername 2y agoRelated? Ditherpunk: The article I wish I had about monochrome image dithering 2021 https://news.ycombinator.com/item?id=25633483 https://news.ycombinator.com/item?id=25633483 200 comments 2023 https://news.ycombinator.com/item?id=36023706 https://news.ycombinator.com/item?id=36023706 37 commments
- GuB-42 2y agoAlso this: https://news.ycombinator.com/item?id=42808889 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 :)
- biercarsten 2y agoAh, thats from runevision. I recently whatched his youtube video on this (https://youtu.be/HPqGaIMVuLs https://youtu.be/HPqGaIMVuLs) and "Return of the Obra Dinn" was also the first thing I thought of.
- bazzargh 2y agothere's an approach missed in that article lying between ordered dither and diffusion approaches - low discrepancy sequences https://web.archive.org/web/20180830004622/https://extremelearning.com.au/unreasonable-effectiveness-of-quasirandom-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.
- Syzygies 2y agoMy 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.
- jak6jak 2y agoVery 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
- esquevin 2y agoGo 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 =)
- chrismorgan 2y agoTo 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 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 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).
- pastage 2y agoThough I found a use for the "kill sticky" bookmarklet. https://news.ycombinator.com/item?id=42902395 https://news.ycombinator.com/item?id=42902395
- Flow 2y agoI 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 https://www.youtube.com/watch?v=P5E6z7AMxIU
- pengaru 2y agoIs that real-time dithering the demo authors implemented though? It seems like a static image they could use any graphics program to produce...
- danwills 2y agoThis 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.
- deleted 2y ago[deleted]
- bazzargh 2y agoI wondered why the page was full of blank areas, it's because of this: https://caniuse.com/hevc 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)
- tomxor 2y agoShameless plug: Return to Castle Floyd Wolfensteinberg https://www.dwitter.net/d/27957 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)
- AndrewStephens 2y agoI 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-accurate_atkinson.html https://sheep.horse/2023/1/improved_web_component_for_pixel-...