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%);

background: black;
}

JavaScript

const {
  DoubleSide,
  Mesh,
  MeshBasicMaterial,
  OrthographicCamera,
  PlaneBufferGeometry,
  Scene,
  SphereBufferGeometry,
  Vector2,
  Color,
  NoBlending,
  AdditiveBlending,
  NormalBlending,
  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;
      
      	//texel.a = sqrt(0.299 * pow(texel.r, 2.0) + 0.587 * pow(texel.g, 2.0) + 0.114 * pow(texel.b, 2.0) * 1.0);
        //texel.a = (texel.r + texel.g + texel.b) / 3.0;    
      	//texel.a = texel.r;
      
      float maxc = max(texel.r, max(texel.g, texel.b));
      texel.a = maxc * 1.0;
      
      texel.rgb /= maxc;
      
    
        
      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, false);
    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({
        transparent: true,
        //blending: NoBlending,
        
      })
    );


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

      renderMesh.material.map =...