Antialiasing not working in Three.js

javascript three.js webgl render antialiasing
zaidi92 picture zaidi92 · Jun 21, 2013 · Viewed 39.1k times · Source

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!

Answer

iBorg picture iBorg · Jul 12, 2013

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.

Related questions

How to stop a requestAnimationFrame recursion/loop?

I'm using Three.js with the WebGL renderer to make a game which fullscreens when a play link is clicked. For animation, I use requestAnimationFrame. I initiate it like this: self.animate = function() { self.camera.lookAt(self.scene.position); self.…

Read More
How to detect collision in three.js?

I am using three.js. I have two mesh geometries in my scene. If these geometries are intersected (or would intersect if translated) I want to detect this as a collision. How do I go about performing collision detection with …

Read More
Three.js - Change Material on Runtime

I have some .js files exported from Blender and load them with THREE.JSONLoader(); my callback: var callback = function( geometry ) { createMesh(geometry); my loading: loader.load( "Models/sculp.js", callback ); my create method: function createMesh(geometry){ inArr[id] = new THREE.…

Read More