Downsampling (antialiasing via CSS)

This is a quick and simple technique to get anti-aliasing via CSS by rendering at a higher resolution. The renderer method setSize is altered for this and accepts a third parameter for the scale.

For performance reasons FXAA or one of the other post-effect methods are a better option though for most cases, especially at fullscreen resolution. For smaller outputs such as a page element (product viewer) it might be still relevant regarding quality.

https://codepen.io/Fyrestar/pen/LwxjXK

No antialiasing
xnaa
Downsampling
xaa

Notice the axis helper appears slightly faded, this is due line-geometries being always rendered with a thickness of one pixel by default.

3 Likes

I believe Three.js already does this when you call WebGLRenderer.setPixelRatio(2); It tells the canvas to render at twice the resolution of the canvas size. You can see that setPixelRatio calls setSize to do the multiplication width * _pixelRatio; to give you something like this:

<canvas width="800" height="200" style="width: 400px; height: 100px;">

Yes it does basically the same, but i have some mixed experience on different devices with no filtering when scaling down the canvas from higher to lower resolution (nearest neighbour), basically looking like applying image-rendering: pixelated; to the canvas, iā€™m not sure if it still can be the case, but scaling with transform always caused the element to get anti-aliased.

1 Like