# RenderPass clearing prior Shader Pass' renders

**URL:** <https://discourse.threejs.org/t/renderpass-clearing-prior-shader-pass-renders/6215>\
**Category:** Questions\
**Tags:** post-processing\
**Created:** [February 20, 2019, 3:37am UTC](https://discourse.threejs.org/t/renderpass-clearing-prior-shader-pass-renders/6215 "2019-02-20T03:37:42Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ProcStack](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/procstack/32/57538_2.png) [@ProcStack](https://discourse.threejs.org/u/ProcStack)\
**Post date:** [February 20, 2019, 3:37am UTC](https://discourse.threejs.org/t/renderpass-clearing-prior-shader-pass-renders/6215/1 "2019-02-20T03:37:42Z")

</div>

Not sure if this is a bug or just my naivety.  
I upgraded from r97 to r102 today and my EffectComposer would clear prior render pass data.  
I saw in the Migration notes that the renderer needs to be cleared before hand. Reverted back based on the xxdiff lines between new-old RenderPass.js files, and got my render passes comping correctly again. (So my fix in RenderPass.js IS working… but…) Am I doing something wrong?

What it looks like visually–

 ![](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/c/c11cea5148b59643a12d9188e63753036740ec20.jpeg)

I’m rendering the main scene first then rendering the custom ShaderMaterial pass overtop the given main scene render–  
How I’m setting up my composer-

```
mainMenuShader=new THREE.ShaderMaterial({
	uniforms:{
		"tDiffuse":{type:"t",value:0,texture:null},
		"flicker":{type:"f",value:0},
		"time":{type:"f",value:0},
		"cropTop":{type:"f",value:.3},
		"cropBottom":{type:"f",value:.5},
	},
	vertexShader:document.getElementById("anchoredObjectVert").textContent,
	fragmentShader:document.getElementById("tempMainMenuFrag").textContent
});
mapTempMenuComposer = new THREE.EffectComposer(mapEngine);
mainMenuPass=new THREE.RenderPass(mapScene,mapCam);
mainMenuShaderPass=new THREE.ShaderPass(mainMenuShader);

mapTempMenuComposer.addPass(mainMenuPass);
mapTempMenuComposer.addPass(mainMenuShaderPass);
mainMenuShaderPass.renderToScreen=true;

```

Fragment shader-

```
<script type="x-shader/x-fragment" id="tempMainMenuFrag">
	uniform sampler2D tDiffuse;
	uniform float flicker;
	uniform float time;
	uniform float cropTop;
	uniform float cropBottom;
	varying vec2 vUv;
	void main(){
		vec4 Cd=vec4(0.158,0.11,0.0,1.0);
		vec4 offset=vec4(flicker*0.009,flicker*0.005,0.0,1.0);
		if(vUv.y<cropTop && vUv.y>cropBottom){
			Cd=texture2D(tDiffuse, vUv);
		}else{
			float timer=time/1000.0;
			float noise=((vUv.y+ sin(vUv.x*90000.0+vUv.y*26012.0)*.006*(.7+flicker*.5)+cos(vUv.x*40234.0+vUv.y*10000.0)*.006*(.7+flicker*.5))*1.2-.25);
			if(vUv.y>=cropTop){
				Cd*=(cropTop)/(noise*1.4);
			}else if(vUv.y<=cropBottom){
				Cd*=noise/cropBottom;
			}
			Cd*=sin(vUv.x*3.141592);
			Cd+=offset;
		}
		gl_FragColor=Cd;
	}
</script>

```

Checking the output of the tDiffuse alone reveals a black screen–

From `threejs\examples\js\postprocessing\RenderPass.js` r101 - Line 51-

> renderer.setRenderTarget( this.renderToScreen ? null : readBuffer );  
> if ( this.clear ) renderer.clear();  
> renderer.render( this.scene, this.camera );

From `threejs\examples\js\postprocessing\RenderPass.js` r97 - Line 51-

> renderer.render( this.scene, this.camera, this.renderToScreen ? null : readBuffer, this.clear );

I changed the 3 lines back to the original line and it’s rendering just fine again. But does that mean I’m setting my composer’s shader passes wrong?

Any help would be appreciated!! Thanks in advance!

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [February 20, 2019, 11:01am UTC](https://discourse.threejs.org/t/renderpass-clearing-prior-shader-pass-renders/6215/2 "2019-02-20T11:01:24Z")

</div>

Can you please demonstrate the issue with a live example? The third and fourth parameter of `WebGLRenderer.render()` will be removed with `R102` so I would like to debug your code to understand what’s happening. Note that the official post-processing examples work with the current `dev` version:

[https://raw.githack.com/mrdoob/three.js/dev/examples/index.html?q=post](https://raw.githack.com/mrdoob/three.js/dev/examples/index.html?q=post)

Besides, can you please test if your app works with `R101`(the latest stable version)?

---

<div class="post-metadata">

**Author:** ![ProcStack](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/procstack/32/57538_2.png) [@ProcStack](https://discourse.threejs.org/u/ProcStack)\
**Post date:** [February 20, 2019, 3:17pm UTC](https://discourse.threejs.org/t/renderpass-clearing-prior-shader-pass-renders/6215/3 "2019-02-20T15:17:28Z")

</div>

Aghh, sorry, I’m an idiot, I was looking at the migration notes showing changes for r102 but I WAS using r101.  
Thanks Mugen! Let me strip down my site to just the composer parts. I’ll do that later today and post the side by side sites to my host.