three-js canvas texture lost transparency with WebGL renderer (ok with Canvasrenderer)

4
votes

I try to render a CircleGeometry over a cube one (from the camera point of view we show both). The cube is with a flat color, and the circle got a canvas with just an arc and no background color.

  • If I use a Canvasrenderer the canvas transparency is ok, and the arc is just print.
  • If I use the WebGL renderer, the full circle is filled with the page background color, with just the arc shown on it, so the transparency is lost.

I create a test for this : http://jsfiddle.net/f4u7s/6/ where you can switch between WebGL and CanvasRendering to show the problem. (look for 

// ------------> Switch HERE
    //renderer = new THREE.CanvasRenderer();
    renderer = new THREE.WebGLRenderer();

)

It sounds alike the three.js textures working with CanvasRenderer, but show up as black with WebGLRenderer ticket, with even with the solution proposed (mesh.dynamic = true), the problem is still here.

Am I missing something?

1
javascriptcanvaswebglthree.js

1 Answers

12
votes

You need to set transparent to true.

plane = new THREE.Mesh(
    new THREE.CircleGeometry(50, 50),
    new THREE.MeshBasicMaterial({
        map: texture,
        transparent: true
    })
);

Updated fiddle: http://jsfiddle.net/f4u7s/10/