28

I am new to three.js and have starting working with it a lot recently. I really enjoy it and I have created some incredible things. However, I'm unsure why but when setting antialiasing to true I see no difference. 

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

I have searched for possible solutions, yet I can't seem to find or understand why this doesn't work. Is there something I am missing or need to in order to get antialiasing to work?

EDIT:

Links that helped me fix this issue: https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_normalmap2.html https://github.com/mrdoob/three.js/tree/master/examples/js

It took some digging but the developers for three.js have it covered!

Wilt
  • 41,477
  • 12
  • 152
  • 203
zaidi92
  • 355
  • 1
  • 3
  • 11

6 Answers6

108

The property name you are using in the argument object of the WebGLRenderer constructor is incorrect. According to the documentation, the name of the property should be 'antialias', not 'antialiasing'.

I tested it in Google Chrome for Mac OS and there was a noticeable smoothing in the rendering of edges in a demo featuring a spinning cube.

Tushar Gupta - curioustushar
  • 58,085
  • 24
  • 103
  • 107
tborzecki
  • 1,196
  • 1
  • 7
  • 3
  • 3
    furthermore this [blacklist/whitelist page](https://www.khronos.org/webgl/wiki/BlacklistsAndWhitelists) is interesting. If you use chrome on mac for instance you'll see antialiasing is disabled for all GPU. – Fluxine Oct 25 '14 at 17:32
  • 1
    @TusharGupta your documentation link is not alive anymore, maybe you prefer to point to: https://threejs.org/docs/index.html#api/en/renderers/WebGLRenderer – juagicre Mar 06 '19 at 22:26
22

The property is called antialias and It is activated like this:

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

Doesn't work for all browsers, check this issue for more information.

Note:
The property is NOT publicly accessible, so setting antialias after construction like this:

renderer.antialias = true; // <-- DOES NOT WORK

will not work.

Wilt
  • 41,477
  • 12
  • 152
  • 203
  • Thanks for the note. I assume that this is also the reason why anti-aliasing in THREE can't be dynamically switched on and off on an active renderer, while properties like setSize can be dynamically changed after construction of the renderer. – noviewpoint May 01 '17 at 13:49
  • @noviewpoint exactly, this value can only be set on initialization of the renderer. – Wilt May 01 '17 at 15:18
  • This was the key for me! Thanks for that note – spacorum Nov 08 '18 at 14:01
4

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

The above works with my desktop computer, but it doesn't seem to work with my laptop.

Keet Sugathadasa
  • 11,595
  • 6
  • 65
  • 80
potomek
  • 672
  • 7
  • 4
4

In case your computer does not support default WebGL AA, resizing the renderer size and canvas width gives me much better result than FXAA. Mind you the CSS holds the real width and height values.

var w,h = [your prefs];

renderer.setSize(window.innerWidth*2, window.innerHeight*2);

renderer.domElement.style.width = w;
renderer.domElement.style.height = h;
renderer.domElement.width = w*2
renderer.domElement.height = h*2
the_bluescreen
  • 3,126
  • 2
  • 18
  • 31
MrX
  • 41
  • 2
  • [setSize](https://threejs.org/docs/index.html#api/renderers/WebGLRenderer.setSize) actually has an updateStyle parameter, and I've made this pattern work with just a call like `renderer.setSize(width * 2, height * 2, false);`, but then setting the actual dimensions with CSS is still necessary as well. – nnyby Jul 23 '18 at 14:37
1

I believe that this depends on the browser and system you are using. As far as i know, Firefox doesn't support antialiasing right now at all. Also it may be dependant on your graphics card and drivers. For example, i don't get antialiasing in Chrome on my old mid 2009 MacBook Pro, but i do get antialiasing on my newer late 2012 machine.

Also, you may consider using the FXAA shader to do the antialiasing as a postprocessing step. You can read about postprocessing here.

angryobject
  • 418
  • 2
  • 7
  • Actually Firefox (latest) does support antialising. You should try your code on other machines before you resort to the FXAA shader. – gaitat Jun 21 '13 at 12:36
  • I'm currently working in chrome. I did some digging and found the three.js files for FXAA but still no changes. I've been using this example as reference, https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_normalmap2.html, but I still see no changes. There's probably something simple I'm missing but this is all new to me. – zaidi92 Jun 21 '13 at 16:26
0

Some browsers(especially mobile) don't support antialiasing out of the box but the same browsers support manual MSAA. What's interesting this is the same type of antialiasing as { antialias: true } only requires more setup:

https://threejs.org/examples/webgl2_multisampled_renderbuffers

Why is easy { antialias: true } disabled in mobile browsers? Probably because MSAA is historically considered to be expensive. I don't think it matters anymore with the kind of GPUs phones have these days.

The lack of { antialias: true } may cause the developers to use the easiest workaround, setting the canvas to a higher resolution than the screen using width and height attributes and setting its dimensions back to the screen size with CSS. That's the worst thing that can be done for the performance and "expensive" MSAA would be much faster.

Pawel
  • 16,093
  • 5
  • 70
  • 73