I want to simulate effect of old pc low resolution like atari or commodore in webgl is there a way to draw image and then some how make pixels bigger ?
I'm new to webgl so how should I start doing this effect?
I found this there is mosaic effect but it usses three.js and i want to do it without frameworks.
There are many ways to do it. The easiest is just to render to a low res texture by attaching it a framebuffer and then render that texture to the canvas with texture filtering set to
If you're new to webgl I'd suggest starting here
It's also common to render to a texture (like above) but a higher resolution texture, then filter it down using a shaders, mips, and/or linear filtering. The advantage being you'll get more anti-aliasing
In 2020 possibly the easiest thing you can do is just make a canvas the resolution you want, for example 32x32 and set it's CSS size to be larger and then use the
image-rendering: pixelated CSS setting to tell the browser not to smooth it as it scales the image
<canvas width="32" height="32" style=" width: 128px; height: 128px; image-rendering: crisp-edges; /* for firefox */ image-rendering: pixelated; /* for everything else */ "></canvas>