Composer.render() function making error

Questions
1

I am using composer for postprocessing to reduce aliasing effect. I am using following codes under init section to set the effects

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

                renderer.setPixelRatio( window.devicePixelRatio );

                renderer.setSize( window.innerWidth, window.innerHeight );

                renderer.shadowMap.enabled = true;

                renderer.shadowMap.type = THREE.VSMShadowMap;

                container.appendChild( renderer.domElement );

                renderer.toneMapping = THREE.ACESFilmicToneMapping;

                renderer.toneMappingExposure = 1;

                renderer.outputEncoding = THREE.sRGBEncoding;

                composer = new EffectComposer( renderer );

                composer.addPass( new RenderPass( scene, camera ) );

                pass = new SMAAPass( window.innerWidth * renderer.getPixelRatio(), window.innerHeight * renderer.getPixelRatio() );

                composer.addPass( pass );

                effect = new ShaderPass(THREE.SepiaShader);

                composer.addPass(effect);

                effect.renderToScreen = true;

and I am using following lines under animate section

requestAnimationFrame( animate );
				if(controls!==undefined){
					controls.update();
				}				
				renderer.render( scene, camera );
				if(composer!==undefined){
					composer.render();
				}

it produce following error message in console
Uncaught TypeError: Cannot read property ‘autoUpdate’ of undefined
at WebGLRenderer.render (three.module.js:25486)
at RenderPass.render (RenderPass.js:60)
at EffectComposer.render (EffectComposer.js:139)
at animate (index_audi_loader.html:1077)

following is the screenshot of the aliasing effect.

Screenshot (25)

how to solve this.

2

It does not make sense to call render() with the instance of WebGLRenderer and EffectComposer. Calling composer.render(); is sufficient for your use case.

It’s not necessary anymore to set the renderToScreen. The last pass in the pass chain is automatically rendered to screen.

When using FX, tone mapping should not be performed inline but with a separate post-processing pass at the end of your pass chain (but before AA).

Why are you using SMAA and not FXAA?

3

I am sorry @Mugen87. I am new to three js . I even dont know what is FXAA and What is SMAA. Just I need to reduce the aliasing effect. Can you please say one suggestion to achieve this. what should I do?

4

Start with FXAA, it only requires a single pass (whereas SMAA requires three).

5

Oh. Okay. So should I change any renderer settings like tone mapping for this

6

Yes. And replace it with an additional shader pass using ACESFilmicToneMappingShader.

7

I can’t understand. What should be replaced with which one? and still the following error is being there.

      at WebGLRenderer.render (three.module.js:25486)
      at RenderPass.render (RenderPass.js:60)
      at EffectComposer.render (EffectComposer.js:139)
      at animate (index_audi_loader.html:1104)```
while using composer.render() in animate function
8

Can you please check if the scene object you pass into RenderPass is not null or undefined? Is it actually of type THREE.Scene?

9

You are awesome @Mugen87. That is the problem, I declare the THREE.Scene after to the renderpass line. So only it returns that undefined error. Now now errors in console. But still some aliasing is being there. and now the orbit control also get slow down.