const alphaIssue = canvas => {

  /*

  Generic vertex shader

   */

  const simpleVert = `

  varying vec2 vUv;

  void main() {

    vUv = uv;

    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

  }

  `;

​

  /*

  Fragment shader used to render our texture with alpha

   */

  const texFrag = `

  varying vec2 vUv;

  void main() {

    vec2 center = vec2(0.5, 0.3);

    float d = length(vUv - center);

​

    if (d < 0.1) {

      gl_FragColor = vec4(1.0,0.0,1.0,0.5);

    }

    else {

      discard;

    }

  }

  `;

​

  /*

  Fragment shader that renders a chessboard background

   */

  const bkgFrag = `

  varying vec2 vUv;

​

  void main() {

    float stepx = step(0.5, mod(vUv.x*15.0, 1.0));

    float stepy = step(0.5, mod(vUv.y*15.0, 1.0));

    float chess = mod(stepx + stepy, 2.0);

​

    vec3 color  = vec3(1.0) - chess*0.1;

​

    gl_FragColor = vec4(color, 1.0);

  }

  `;

​

  /*

  Add a chessboard background to the scene

   */

  const addBackground = scene => {

    var geometry = new THREE.PlaneGeometry(2, 2 );

    var material = new THREE.ShaderMaterial({

      transparent    : false,

      vertexShader   : simpleVert,

      fragmentShader : bkgFrag,

    });

    const mesh = new THREE.Mesh(geometry, material);

​

    mesh.translateZ(-0.0001);

    scene.add( mesh );

  }

​

  /*

  Render texture with alpha into WebGLRenderTarget

   */

  const makeTexture = (renderer, width, height) => {

    const target   = new THREE.WebGLRenderTarget(width, height, {minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, type: THREE.FloatType});

    const scene    = new THREE.Scene();

    const camera   = new THREE.PerspectiveCamera(90, 1, 0.1, 100000);

    const geometry = new THREE.PlaneGeometry(2, 2);

    const material = new THREE.ShaderMaterial({

      transparent    : true,

      vertexShader   : simpleVert,

      fragmentShader : texFrag,

    });

    const mesh = new THREE.Mesh(geometry, material);

​

    camera.position.set(0, 0, 1);

    scene.add(camera);

    scene.add(mesh);

​

    renderer.render(scene, camera, target, true);

​

    return target.texture;

  }

​

​

  /*

  Render main view

   */

  const renderer = new THREE.WebGLRenderer({canvas});

  const scene    = new THREE.Scene();

  const camera   = new THREE.PerspectiveCamera(90, 1, 0.1, 100000);

  const geometry = new THREE.PlaneGeometry( 2, 2 );

  const material = new THREE.MeshBasicMaterial({

    transparent : true,

    map         : makeTexture(renderer, canvas.width, canvas.height)

  });

  const mesh = new THREE.Mesh(geometry, material);

​

  camera.position.set(0, 0, 1);

  scene.add(camera);

  scene.add( mesh );

  addBackground(scene);

​

  renderer.render(scene, camera);

​

  /*

  Create reference

   */

  const div = document.createElement('div');

  document.body.appendChild(div);

  div.style.position = "absolute";

  div.style.top      = "100px";

  div.style.left     = "50%";

  div.style.width    = "80px";

  div.style.height   = "80px";

  div.style.marginLeft = "-40px";

  div.style.backgroundColor = "#FF00FF";

  div.style.opacity         = "0.5";

  div.style.borderRadius    = "50px"

};

​

alphaIssue(document.querySelector('canvas'));

​

alphaIssue(document.querySelector('canvas'));