I know it’s possible to set antialiasing on the renderer when creating it:
renderer = new THREE.WebGLRenderer( { antialias: true } );
But I am unable to change it after it’s been generated:
renderer = new THREE.WebGLRenderer( { antialias: true} );
// If low framerate detected
renderer.antialias = false;
Is it possible to change aliasing settings on the fly after the renderer has been created? I see that this is set when the renderer performs canvas.getContext('webgl', {antialias: true});, so is there a way to change this attribute after the WebGL context has been created?
To change this setting you need to create a new WebGL context (or a new renderer). This applies to all WebGL context attributes. You can see all of them listed here:
I have so far unable to fix this. I don’t know how should I use getContext() mentioned in the above reply.
Two questions remain is shall I keep two webgl contexts (wouldn’t it be bad for memory, specifically for low end computers)? and how should I dispose of the other renderer while keeping the scene and cameras to use with the new renderer?
Can’t you detect underpowered systems before you create the renderer? I’ve been using detect-gpu recently and it’s great. Allows you to classify a client and construct the canvas accordingly.
What are you trying to do, are you trying to toggle antialias on/off by creating a new context? If so, I suggest you pick one option before initializing your renderer and keep your WebGL context that way for the remainder of the visit. Discarding a context and starting a new one would require a lot of asset re-uploading to the GPU, and it would be terribly bad for memory consumption.
If you really need to use and toggle the built in AA because a postprocessing approach like FXAA or SMAA isn’t good enough and you don’t want to make a new context every time it’s toggled (which is expensive) you can render to an MSAA Render Target (which is only available in WebGL2, see example here) and then copy that buffer to the canvas.
I wish all Anti-aliasing examples would use the same scene as that WebGL2 MSAA demo so people could compare apples to apples across all AA options.
I remember thinking “Hey this FXAA looks pretty good!” but when I tried it on my project it still looked pretty jagged. It was actually the triangle rotation that gave the impression of smoothness; when you look at a single frame you can still see the steps:
Yeah that will render the base scene with an MSAA target. Just keep in mind that that won’t just work in all cases, though, when using some postprocessing effects. Some effects rerender the scene to get a depth or normals buffer for things like SSAO or outlines and the effect can depend on using non AA buffers. So while the base color of the scene might look nice you could still get some “jagged” edges from postprocessing passes that are composited on top of the original render.
