Opacity not working?

[Danjb1]

First of all, thank you for this repo, it's super useful!

I'm having a problem trying to render a plane with a solid color and translucency.

I am creating my material like so:

const material = new THREE.MeshBasicMaterial(
  {
    color: 0x000000,
    transparent: true,
    opacity: 0.5
  }
);

However it renders as a solid grey box, and the objects behind can't be seen through it.

Has anyone had any luck with this?

[Danjb1]

It turns out opacity was not implemented at all for solid-color materials.

This was my fix in the getMaterialShader function:

      if (material.vertexColors === THREE.FaceColors) {

        ...

      } else {

        string = [
          'var colorOffset = offset * 4;',
          'var r = material.color.r;',
          'var g = material.color.g;',
          'var b = material.color.b;',
          'var destR = buffer[colorOffset];',
          'var destG = buffer[colorOffset + 1];',
          'var destB = buffer[colorOffset + 2];',
          'var opaci = material.opacity * 255;',
          'var invOpaci = 1 - material.opacity;',
          'buffer[colorOffset] = (r * opaci + destR * invOpaci)',
          'buffer[colorOffset + 1] = (g * opaci + destG * invOpaci)',
          'buffer[colorOffset + 2] = (b * opaci + destB * invOpaci)',
          'buffer[colorOffset + 3] = 255;',
          'if (opaci === 255)', // Only opaque pixels write to the depth buffer
          '  depthBuf[offset] = depth;'
        ].join('\n');

      }

Note that this will only work correctly if the destination is fully opaque, as I have not taken into account the destination alpha.

[AVGP]

Feel free to make a pull request, happy to merge!