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
Downsampling
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