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

canvas, javascript, three.js, webgl

Solution

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

Problem

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?

Original source