Is there a way to toggle antialiasing dynamically in three.js? I attempted the code below, but it failed:
var rendererAA = new THREE.WebGLRenderer({{ antialias: true }});
rendererAA.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( rendererAA.domElement );
var rendererNA = new THREE.WebGLRenderer({{ antialias: false }});
rendererNA.setSize( window.innerWidth, window.innerHeight );
rendererNA.domElement = rendererAA.domElement;
var renderer = rendererAA;
function render() {
if (somePredicate) {
renderer = rendererAA;
}else {
renderer = rendererNA;
}
requestAnimationFrame( render );
renderer.render( scene, camera );
}
If rendererNA is active (somePredicate = false), the scene freezes and antialiasing does not change as expected.
I also attempted setting the inactive renderer's domElement to null, but this did not solve the issue. This question served as inspiration:
Dynamically turn on/off antialiasing and shadows in WebGLRenderer
Unfortunately, a definitive solution was not found.