I've been working on a three.js project that involves 3D models, a ground, and a grid. The 3D models are outlined using outlinePass ().
With TransformControl (), I can move objects, and OrbitControls () allows me to change the camera position.
However, I'm facing an issue with poorly rendered graphics as shown in these screenshots: https://i.sstatic.net/QxjrZ.jpg
I'm unsure about which settings to adjust:
renderer = new THREE.WebGLRenderer();//{ antialias: true } ); With antialiasing or without?
//antialiasing is only needed when not using fxaa, right??
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.gammaOutput = true;
renderer.physicallyCorrectLights = true;
camera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, 0.001, 1000 );
camera.addEventListener( 'change', render ); //Is this necessary? Seems like it has no use
FXAA is likely needed for outlinePass (as seen in the outlinePass example linked above).
composer = new EffectComposer( renderer );
var renderPass = new RenderPass( scene, camera );
composer.addPass( renderPass );
effectFXAA = new ShaderPass( FXAAShader );
effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
effectFXAA.renderToScreen = true;
composer.addPass( effectFXAA );
orbitControls = new OrbitControls( camera, renderer.domElement );
orbitControls.update();
orbitControls.addEventListener( 'change', render );
function render(){
renderer.render(scene, camera);
//composer.render(); // don't know if needed
}
I admit that I'm a bit lost on how to resolve the rendering issue and which settings need adjusting to optimize my project. Any guidance or suggestions would be greatly appreciated so I can address this problem. Thanks in advance!