Converting from CanvasRenderer to WebGLRenderer - three.js

Question

I was using CanvasRenderer in my scenes to render a brain with neurons.
The problem is that when I draw the neurons (every neuron consists of many many lines) the scene is really slow because I render a lot of neurons. So I switched into WebGLRenderer and it is much faster and smoother, but the scene looked completely different! No opacity is applied any more which made the neurons hidden inside the brain
Here is a comparison between the two scenes:
CanvasRenderer:
The brain has some transparency, and there is a green sphere represents a region of interest (ROI) also has transparency.
WebGLRenderer:
The transparency has completely gone!
I am using the following materials for the brain model and the ROI model:
var brain_material = new THREE.MeshPhongMaterial({
wireframe: false,
color: 0xaaaaaa,
specular: 0xcccccc,
opacity: 0.4
});
var roi_material = new THREE.MeshBasicMaterial({
color: selected_roi_color,
opacity: 0.2,
visible: true
})
and here is my renderer:
renderer = new THREE.WebGLRenderer({alpha:true});
renderer.setClearColor(renderer_clear_color);
renderer.setPixelRatio(viewport_width / viewport_height);
renderer.setSize(viewport_width, viewport_height);
renderer.sortObjects = false;
container.appendChild(renderer.domElement);
How can I get a similar result to the CanvasRenderer using the WebGLRenderer?
Thank you very much

Answer 1

If you use opacity, then you have to use it with transparent:
var brain_material = new THREE.MeshPhongMaterial({
wireframe: false,
color: 0xaaaaaa,
specular: 0xcccccc,
transparent: true, // here
opacity: 0.4
});
var roi_material = new THREE.MeshBasicMaterial({
color: selected_roi_color,
transparent: true, // here
opacity: 0.2,
visible: true
})