three.js transparent material issue - three.js

I have set a transparent map, though, not all parts are transparent.
I'm using a transparent PNG image as the material map, though it shows background as seen here:
material:
new THREE.MeshLambertMaterial({ map: texture, transparent: true, alphaTest: 0})
renderer:
renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
renderer.preserveDrawingBuffer = true;
renderer.premultipliedAlpha = false;

Related

transparent material rendering artifacts

I have a 3d surface which I would like to make it transparent so the map under it is visible.
The problem is that some face hidden are rendered not making the transparency constant (highlighted). Is possible to render the yellow/green of the right image transparent without these artefacts?
Folling #WestLangley comment I was able to fix the issue rendering twice:
once colorWrite = false and then colorWrite = true . The simplest way I found is with a MultiMaterialObject.
let material = new THREE.MeshPhongMaterial(
{ color: 0xffffff88,
side: THREE.DoubleSide,
opacity: 0.4,
transparent: true,
colorWrite : false,
vertexColors: THREE.VertexColors,
shininess: 60
} )
let material_cw = material.clone()
material_cw.colorWrite = true
let mesh = THREE.SceneUtils.createMultiMaterialObject(
geometry,[material,material_cw] )

Converting from CanvasRenderer to WebGLRenderer

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
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
})

Three.js - transparent planes hiding sprites

When we add text-spites on scene, we saw that our transparent planes hide sprites, but didn't hide any 3d Objects.
Why is this and how to make sprites visible under transparent planes?
To look PNG example click here
My plane is:
// transparent plane
geometry = new THREE.PlaneGeometry(200, 200, 200);
material = new THREE.MeshBasicMaterial({
color: 0xa6cfe2,
side: THREE.DoubleSide,
transparent: true,
opacity: 0.5,
depthFunc: THREE.LessDepth,
});
But it seems no work good.
So, for that examle i wrote some code on fiddle, to figure out the problem:
look fidddle example
three.js renders opaque objects first, then transparent objects.
You can use this pattern to prevent your transparent objects from writing to the depth buffer:
// transparent plane
geometry = new THREE.PlaneBufferGeometry( 200, 200, 1, 1 );
material = new THREE.MeshBasicMaterial( {
color: 0xa6cfe2,
side: THREE.DoubleSide,
transparent: true,
opacity: 0.5,
depthWrite: false
} );
three.js r.112

Transparent texture in pointCloudMaterial and depth-buffer

I use threejs to add a pointCloud to the screen , and set texture map, But I find that the top point can cover the one behind it.
after I add AdditiveBlending , It's much better, but still have some problem.
Because I have another objects so I can't add depthTest:false , how can I solve this problem?
below is the code and the texture
var geometryBig = new THREE.Geometry();
var meshBig = new THREE.PointCloud(geometryBig, new THREE.PointCloudMaterial({
size: 4,
color: 0xFFFFFF,
transparent: true,
blending: THREE.AdditiveBlending,
// depthTest: false,
transparent: true,
sizeAttenuation: true,
map: THREE.ImageUtils.loadTexture(
"img/particle.png"
),
}));
Add to your PointCloudMaterial:
depthWrite: false

Three js animate blender model with material colors

I have an exported (three js json format) blender model. The model have a few material with colors. If i use THREE.MorphAnimMesh and THREE.MeshPhongMaterial the animation is working fine but no material colors. If i use THREE.MeshFaceMaterial it have colors but animation not working.
The question is, how can i animate with material colors from the model js file?
animation working but no colors. the model is white:
var material = new THREE.MeshPhongMaterial({ morphTargets: true, morphNormals: true, vertexColors: THREE.FaceColors, shading: THREE.SmoothShading, perPixel: true } );
var meshAnim = new THREE.MorphAnimMesh( geometry, material );
model have the material colors but animation not working:
var material = new THREE.MeshFaceMaterial({ morphTargets: true, morphNormals: true, vertexColors: THREE.FaceColors });
var meshAnim = new THREE.MorphAnimMesh( geometry, material );
here is the model js file: http://speedy.sh/rs39u/skeleton-0.js
btw, i saw the flamingo.js file from the examples. It have a morphColors object but if i know right i cant export this from blender.
Got it. Maybe someone can use it:
for (var i=0; i<geometry.materials.length; i++) {
geometry.materials[i].morphTargets = true;
}
var material = new THREE.MeshFaceMaterial({ morphTargets: true, morphNormals: true, vertexColors: THREE.FaceColors });
var meshAnim = new THREE.MorphAnimMesh( geometry, material );

Resources