Opacity Problem

by lutymane

HTML

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/shaders/CopyShader.js"></script>

<script src="https://threejs.org/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/ShaderPass.js"></script>

<script src="https://threejs.org/examples/js/postprocessing/UnrealBloomPass.js"></script>
<script src="https://threejs.org/examples/js/shaders/LuminosityHighPassShader.js"></script>

<div class="split">

<canvas class="c" id="c1">
</canvas>

<canvas class="c" id="c2">
</canvas>

</div>

CSS

body {
	  margin: 0;
    background: rgb(104,227,237);
  background: radial-gradient(circle, rgba(104,227,237,1) 20%, rgba(226,95,205,1) 80%, rgba(255,72,72,1) 100%);
  
 
}

.split {
  display: flex;
}

.c {
  flex: 0 0 50%;
  background: rgb(68,68,68);
background: linear-gradient(90deg, rgba(68,68,68,1) 0%, rgba(0,0,0,1) 100%);
}

JavaScript

const {
  DoubleSide,
  Mesh,
  MeshBasicMaterial,
  OrthographicCamera,
  PlaneBufferGeometry,
  Scene,
  SphereBufferGeometry,
  Vector2,
  Color,
  NoBlending,
  WebGLRenderer, EffectComposer, RenderPass, ShaderPass, UnrealBloomPass} = THREE;
  
  const OpacityShader = {
  uniforms: {
    tDiffuse: { value: null },
    opacity: { value: 1.0 },
  },

  vertexShader: `
varying vec2 vUv;
void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
  `,
  fragmentShader: `  
  uniform sampler2D tDiffuse;
  uniform float opacity;
  
  varying vec2 vUv;
  
  void main(){
      vec4 texel = texture( tDiffuse, vUv );
      //texel.a = vUv.x * opacity;
      texel.a = smoothstep(0.25, 0.75, vUv.x) * (texel.r + texel.g + texel.b) / 3.0;
      gl_FragColor = texel;
  }
  `,

  //glslVersion: GLSL3,
}

class App {
  constructor() {

    let r1 = this.createRenderer("c1");
    let r2 = this.createRenderer("c2");

    let [s, c] = this.createScene();

    let cp1 = this.createComposer(r1, s, c);
    let cp2 = this.createComposer(r2, s, c);
    cp2.renderToScreen = false;

    r1.setAnimationLoop(() => {
      //   r1.clear();
      //   r1.render(s, c);
      cp1.render();
    });

    let renderMeshCamera = new OrthographicCamera(-1, 1, 1, -1, -1, 100);
    let renderMesh = new Mesh(
      new PlaneBufferGeometry(2, 2),
      new MeshBasicMaterial({
        //side: DoubleSide,
        transparent: true,
        //opacity: 0.25,
        //depthWrite: false,
        //depthTest: false,
        //blending: NoBlending,
        //blending: CustomBlending,
        //blendEquation: MaxEquation,
        // blendSrc: SrcAlphaFactor,
        // blendDst: OneMinusSrcAlphaFactor,
      })
    );


    r2.setAnimationLoop(() => {
      cp2.render();

      renderMesh.material.map = cp2.readBuffer.texture;

      r2.render(renderMesh, renderMeshCamera);
    });
  }

  
    createRenderer(canvasRef) {
      let renderer = new WebGLRenderer({
 ...