THREE.js Custom Shader Doesn't Antialias Properly

Question

Even if I enable { antialias: true } when I initialize my renderer, the lines are not multisampled and still appear to have sharp edges. I have recreated by problem on JSFiddle that you can view here.

I suspect that the problem happens because the lines are generated by the fragment shader and are not part of the geometry itself. If that's the case, is there anything I can do to make it work the way I want?

Thanks!

Answer 1

This page may help. The antialiasing in WebGL isn't terribly good to begin with. I ended up using FXAA in THREE.js to get better scene quality.