CODEWITHSUNDEEP
javascriptthree.jswebglrenderantialiasing
zaidi92
zaidi92

Reputation: 355

Antialiasing not working in Three.js

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!

Upvotes: 28

Views: 51388

Answers (6)

Pawel
Pawel

Reputation: 18222

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.

Upvotes: 0

potomek
potomek

Reputation: 742

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

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

Upvotes: 4

tborzecki
tborzecki

Reputation: 1196

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.

Upvotes: 108

Wilt
Wilt

Reputation: 44356

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.

Upvotes: 24

MrX
MrX

Reputation: 41

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

Upvotes: 4

angryobject
angryobject

Reputation: 418

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.

Upvotes: 1

Related Questions