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

Question

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?

Answer 1

You need to set material.transparent to true.

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

three.js r.144