Drawing lines in three.js using CanvasRenderer makes smoother lines than WebGLRenderer

Question

I've been stuck with an issue with three.js' CanvasRenderer rendering lines a lot smoother than the WebGLRenderer. It appears as if the WebGLRenderer doesn't apply antialiasing.

When I take the three.js canvas - lines - random example from http://mrdoob.github.io/three.js/examples/canvas_lines.html, I see this using the CanvasRenderer:

When changing the following line

renderer = new THREE.CanvasRenderer();

to

renderer = new THREE.WebGLRenderer({antialias: true});

, I see this:

As you can see, the WebGL clearly has inferior quality. What am I doing wrong?

Answer 1

renderer = new THREE.WebGLRenderer({antialias: true});

Answer 2

I have been looking at the same problem, and it appears to be that the CanvasRenderer in Three.js makes use of CanvasRenderingContext2D, which does not use WebGL at all. All line-projections are done in software, and then the output is rendered as 2D lines using a regular 2D canvas. As painting is done in software, your browser will more likely be able to handle stroking with antialias.

In my experience, antialias for GL_LINES in WebGL is not widely supported right now, which explains the difference. Antialias only seems to work for triangles. The only workaround is to render to an FBO that is at a higher resolution than your screen, and then perform the antialias yourself.

Hopefully this will be better in the future as I feel that rendering smooth lines in WebGL should be a default feature for all browsers and machines.