So here’s just a quick one. Since these days pixelated “retro” graphics are hot, there’s a way you can turn your uncool Full HD browser game into a cool retro game. The key is changing how the browser handles upscaling of images. By default linear filtering is used to upscale lower resolution images. With the CSS property “image-rendering” you can control this (source):
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) *All you need to do is take your (WebGL) canvas, set the resolution down to something retro-y (e.g. 320×240 px), scale it up to the full window size and apply the aforementioned styles to the canvas element.
-
- This is how my test scene looked before, using the full available screen size effectively rendering at Full HD.
-
- This scene was rendered at 320×240 via WebGL and then upscaled to Full HD by the browser using standard filters.
-
- In this case the 320×240 version was upscaled with the CSS property “image-rendering” set to “crisp-edges”.
-
- The comparison of all three versions: Full Scale (left), Upscaled (middle) and pixelated (right).
Bunkernetz 
Reblogged this on Dinesh Ram Kali..
Thanks for sharing it! 🙂