[HN Gopher] The Art of Dithering and Retro Shading for the Web (...
___________________________________________________________________
The Art of Dithering and Retro Shading for the Web (2024)
Author : matthberg
Score : 143 points
Date : 2025-02-02 23:58 UTC (23 hours ago)
(HTM) web link (blog.maximeheckel.com)
(TXT) w3m dump (blog.maximeheckel.com)
| ggm wrote:
| 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.
| nelsonfigueroa wrote:
| Aside from the interesting read, I really like the design of this
| site. Specially the code blocks.
| snickmy wrote:
| plus 1! Really well done website, where the 3d bits are not
| detracting from the overall experience.
| rezmason wrote:
| The article's author, this Maxime Heckel, has got an excellent
| online portfolio of shader work! https://maximeheckel.com
| hanspf wrote:
| This is a fantastic blog post! Did not understand all the math,
| but the nostalgia trip was awesome. Thank you!
| HelloUsername wrote:
| 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
| GuB-42 wrote:
| 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 :)
| biercarsten wrote:
| 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.
| bazzargh wrote:
| 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.
| jak6jak wrote:
| 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
| esquevin wrote:
| 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 =)
| pastage wrote:
| Though I found a use for the "kill sticky" bookmarklet.
| https://news.ycombinator.com/item?id=42902395
| Flow wrote:
| 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
| pengaru wrote:
| Is that real-time dithering the demo authors implemented
| though?
|
| It seems like a static image they could use any graphics
| program to produce...
| bazzargh wrote:
| 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)
| tomxor wrote:
| 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/64 _R-R+C /3e6^R+3_t)%7?R
| _=1.02:x.fillRect(S=i >>6,Y=i&63,q=0|(p=(x[--i]+=7_T)+(Y/32
| _R-R|0?Y /128:1-1/R)),Y?1:R=1,T=(p-q||0)/16,x[u]+=3_T,x[u=i-64]+=
| 5*T,x[u-1]=T)
| AndrewStephens wrote:
| 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-...
___________________________________________________________________
(page generated 2025-02-03 23:02 UTC)