Effect composer not properly render in a scene

Questions
,
1

hello guys,
I am using effect composer to generate AO of a object on a plane so I create 2 scenes in which first 3D model is loaded and second for a plane in which I need to generate an AO map, but effect composer creates lines on a plane when we rotate our camera I don’t know the issue. I am using SAOPass

2
22143×719 42.6 KB

5
51932×798 38.5 KB

Below is the code snippet-:

const geometry = new THREE.PlaneGeometry( 3, 3 );
geometry.rotateX( - Math.PI / 2 );

const material = new THREE.ShadowMaterial();
material.opacity = 0.2;

const plane = new THREE.Mesh( geometry, material );
scene1.add( plane );

const renderer = new THREE.WebGLRenderer({antialias: true,
 preserveDrawingBuffer:true, logarithmicDepthBuffer:true});

//renderer.shadowMap.enabled = true;
renderer.autoClear=false;
//renderer.outputEncoding = THREE.sRGBEncoding;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);


composer = new EffectComposer( renderer );
scene1.add( new THREE.DirectionalLight() );
    
postprocessing.enabled=true;
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);
const SAO = new SAOPass(scene1,camera,true,true);
SAO.resolution.set(8192, 8192)
SAO.renderToScreen = true;
SAO.enabled=true;    
SAO.params.saoIntensity = 0.04
SAO.params.saoScale = 0.7
SAO.params.saoKernelRadius = 40
SAO.params.saoMinResolution = 0
   
composer.addPass(SAO);

// In render func
if ( postprocessing.enabled ) {     
        
        composer.render();

    } else {

        renderer.render( scene, camera );

    }