# Blending shaders with EffectsComposer & BlendShader

**URL:** https://discourse.threejs.org/t/blending-shaders-with-effectscomposer-blendshader/62967
**Category:** Questions
**Tags:** shaders
**Created:** [March 18, 2024, 4:45pm UTC](https://discourse.threejs.org/t/blending-shaders-with-effectscomposer-blendshader/62967 "2024-03-18T16:45:31Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![FuzzyWobble](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fuzzywobble/32/15221_2.png) [@FuzzyWobble](https://discourse.threejs.org/u/FuzzyWobble)
#### Post date: [March 18, 2024, 4:45pm UTC](https://discourse.threejs.org/t/blending-shaders-with-effectscomposer-blendshader/62967/1 "2024-03-18T16:45:31Z")

</div>

The code below displays an all white screen. Cannot find any documentation on shader blending. Is there a better approach?

```javascript
        this.renderScene = new RenderPass( this.scene, this.camera );
        this.outputPass = new OutputPass();

        this.renderColor = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat} );
        this.renderDither = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat} );

        this.composerColor = new EffectComposer( this.renderer, this.renderColor );
            this.composerColor.rendertoScreen = false;
            this.composerColor.addPass( this.renderScene );
            //this.composerColor.addPass( this.outputPass );

        this.composerDither = new EffectComposer( this.renderer, this.renderDither );
            this.composerDither.rendertoScreen = false;
            this.composerDither.addPass( this.renderScene );
            this.ditherDotShader = new ShaderPass( DotScreenShader );
            this.ditherDotShader.uniforms['scale'].value = 4;
            this.composerDither.addPass( this.ditherDotShader );
            this.ditherRgbShiftShader = new ShaderPass( RGBShiftShader );
            this.ditherRgbShiftShader.uniforms['amount'].value = 0.0015;
            this.composerDither.addPass( this.ditherRgbShiftShader );
            //this.composerDither.addPass( this.outputPass );

        this.blendComposer = new EffectComposer( this.renderer );
            this.blendShader = new ShaderPass( BlendShader );
            this.blendShader.uniforms.tDiffuse1.value = this.renderColor; 
            this.blendShader.uniforms.tDiffuse2.value = this.renderDither; 
            this.blendShader.uniforms.opacity.value = 0.5;
            this.blendShader.uniforms.mixRatio.value = 0.5;
            this.blendComposer.rendertoScreen = true;
            this.blendComposer.addPass( this.renderScene );
            this.blendComposer.addPass( this.blendShader );
            this.blendComposer.addPass( this.outputPass );

```

---

<div class="post-metadata">

### Author: ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)
#### Post date: [March 19, 2024, 7:49pm UTC](https://discourse.threejs.org/t/blending-shaders-with-effectscomposer-blendshader/62967/2 "2024-03-19T19:49:12Z")

</div>

I’m not an expert in this area, but maybe if you share a debuggable CodePen it will be easier for someone to help.

At first glance, are you sure about these two lines:

> [@FuzzyWobble](#):
>
> ```javascript
> this.blendShader.uniforms.tDiffuse1.value = this.renderColor; 
> this.blendShader.uniforms.tDiffuse2.value = this.renderDither; 
> 
> ```

Maybe they should be:

```javascript
this.blendShader.uniforms.tDiffuse1.value = this.renderColor.texture; 
this.blendShader.uniforms.tDiffuse2.value = this.renderDither.texture; 

```

At a second glance, it might be better (if it is possible) to make a custom Pass, instead of using three EffectComposer-s.