Advanced, multi Pass renderTarget mix shader with unexpected opacity

Questions
1

When I mix the two off screen renderers with this shader, result has unusual mix and opacity. I am using the two render passes to create different pixelations for the board and the pieces.

Screenshot 2024-10-07 at 6.54.22 PM
Screenshot 2024-10-07 at 6.54.22 PM1258×830 77.4 KB

setup:

      //Shader pass board
      this.pixelationPassBoard = new ShaderPass(PixelationShader(1));
      this.pixelationPassBoard.uniforms.pixelSize.value = 1;
      this.composerPixelateBoard = new EffectComposer(this.renderer);
      this.composerPixelateBoard.addPass(this.renderScene);
      this.composerPixelateBoard.addPass(this.pixelationPassBoard);
      this.composerPixelateBoard.renderToScreen = false;

      //Shader pass pieces
      this.pixelationPassPieces = new ShaderPass(PixelationShader(3));
      this.pixelationPassPieces.uniforms.pixelSize.value = 3;
      this.composerPixelatePieces = new EffectComposer(this.renderer);
      this.composerPixelatePieces.addPass(this.renderScene);
      this.composerPixelatePieces.addPass(this.pixelationPassPieces);
      this.composerPixelatePieces.renderToScreen = false;

      //mix the two pixelation shaders
      //...there must be a better way to do this :<
      mixPass = new ShaderPass(
        new ShaderMaterial( {
          uniforms: {
            pieceTexture: { value: this.composerPixelatePieces.renderTarget2.texture },
            boardTexture: { value: this.composerPixelateBoard.renderTarget2.texture }
          },
          vertexShader: MixShader.vertexShader,
          fragmentShader: MixShader.fragmentShader,
          defines: {}
        } )
      );

      this.composerFinal.addPass( mixPass ); //mix the two pixelation shaders
    const outputPass = new OutputPass(); //threejs coloring from OutputPass
    this.composerFinal.addPass( outputPass );

mix shader:

export const MixShader = {
  vertexShader:`
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
    }
  `,
  fragmentShader:`
    uniform sampler2D boardTexture;
    uniform sampler2D pieceTexture;
    varying vec2 vUv;
    void main() {
      vec4 boardColor = texture2D( boardTexture, vUv );
      vec4 pieceColor = texture2D( pieceTexture, vUv );
      gl_FragColor = (boardColor + pieceColor) * 0.5;
    }
  `
};

render:

      this.setMaterialVisibilityInLayer(false,0); //turn all off
      this.setMaterialVisibilityInLayer(true,2); //turn on board
      this.composerPixelateBoard.render(); //render1
      this.setMaterialVisibilityInLayer(false,2); //turn off board
      this.setMaterialVisibilityInLayer(true,1); //turn on pieces
      this.composerPixelatePieces.render(); //render2
      this.composerFinal.render(); //render
2

your line,

gl_FragColor = (boardColor + pieceColor) * 0.5;

is creating a vec4 with the alpha component being 0.5

You could add this line after that line to set it to 1.0

gl_FragColor[3] = 1.0;

This might also work,

vec3 boardColor = texture2D( boardTexture, vUv );
vec3 pieceColor = texture2D( pieceTexture, vUv );
gl_FragColor = vec4((boardColor + pieceColor) * 0.5, 1.0);

Although, I am only guessing using my inhead compiler, since I don’t have an example to test with.

3

Screenshot 2024-10-07 at 7.35.39 PM
Screenshot 2024-10-07 at 7.35.39 PM1424×756 40.6 KB

Thanks for the reply. Still same.

4

The alpha is fixed. The mixing is happening because you are multiplying both texture2d * .5
What affect are you after?

5

simply,
render the board at one pixelation.
render the pieces ontop of it at another pixelation.

6

Provided the texture2d that you want to overlay contains an alpha channel, which it looks like it does, then you can do this to overlay it over another texture2d.

//based on your code
vec4 boardColor = texture2D( boardTexture, vUv);
vec4 pieceColor = texture2D( pieceTexture, vUv);
gl_FragColor = pieceColor * pieceColor.a + boardColor * (1.0 - pieceColor.a);

Example,