Search code examples
webglshaderpixel

changing resolution of webGL canvas


I've been reading about scaling and smoothing of webGL contexts, but I haven't been able to find a definite answer to my question. Is webGL able to render at a different (or dynamic) resolution, for example, 640x480, in fullscreen?

A lot of pixelation routines ( http://clockworkchilli.com/blog/32_a_simple_retro_shader_for_webgl_games ) are actually mapping textures. My project isn't using textures, it's just flatshaded (and smoothshaded) primatives. The main problem I have is that scaling the context results in filtering at the edge of my primatives, I assume because webGL has a canvas wrapper. I tried to turn off the filtering (or set it to nearest), but I couldn't get it to work.

Does anyone have experience with this? Thanks!


Solution

  • You have this CSS property

    https://developer.mozilla.org/en/docs/Web/CSS/Image-rendering

    But it seem to have poor/inconsistent support across browsers.

    Otherwise, you can render your content on a low resolution FrameBuffer, then draw it's texture to the full resolution canvas using GL_NEAREST filtering.