0

I'm working on a THREE.js scene that I'd like to render with a pixelated effect. To do so, I'm using renderer.setPixelRatio(...) to draw the scene at a low resolution, which works fine. The problem is that the result seems to be antialiased, maybe even by the canvas' WebGL context.

In the Canvas 2d drawing api, one can set canvas.context.imageSmoothingEnabled = false; to ensure that low-resolution scenes are drawn with a crisp pixelated effect. I tried using this parameter on my renderer.context, with no effect. Is there some other way around this?

Thanks!

mostsquares
  • 834
  • 8
  • 27
  • 3
    maybe this? http://threejs.org/examples/webgl_postprocessing_pixel.html – WestLangley Jun 09 '18 at 16:22
  • 1
    If you can't find a Three.js solution. I've provided an answer to a similar question but in pure WebGL. https://stackoverflow.com/a/50468374/7614070 – Mr. Reddy Jun 12 '18 at 14:24

1 Answers1

0

This can be done with CSS stylesheets. Just add this line to the canvas style:

canvas {
  image-rendering: pixelated;
}
Franco
  • 669
  • 2
  • 8
  • 23
Hamid Bakhtiari
  • 90
  • 9