This is a blood vessel loaded with VTP data. Below are my material settings, and what kind of mosaic effect does it look like before and after
How should I solve it
const material = new THREE.MeshPhongMaterial({
side: THREE.DoubleSide,
transparent: true,
opacity: fdStore.opacitySlider / 100,
color: 0x333333,
depthWrite: false,
depthTest: true
})
const mesh = new THREE.Mesh(geometry, material)
inst.bloodMesh = mesh
mesh.renderOrder = 10
While the combination of .transparent = true
and .depthWrite = false
can be useful for many transparency cases, that’s causing your issues here. Keeping .depthWrite = true
here might be enough to fix it. three.js does not sort individual faces within a mesh, so the order they are drawn may be arbitrary, and without a depth buffer write you’ll get this result.
Alternatively and perhaps preferably, you could disable transparency entirely unless/until you need to fade it in/out. I sometimes use .alphaHash=true
instead of .transparent=true
for quick fades, which adds a little grain/noise, but avoids all of these sorting issues.
Another option is to render twice, once with back and once with front:
const material = new THREE.MeshPhongMaterial({
side: THREE.FrontSide,
transparent: true,
opacity: fdStore.opacitySlider / 100,
color: 0x333333,
})
const mesh = new THREE.Mesh(geometry, material)
inst.bloodMesh = mesh
mesh.renderOrder = 10
//Add a mesh for rendering backside first
let back=new THREE.Mesh(geometry,material.clone();
mesh.add(back);
back.material.side=THREE.BackSide;
back.renderOrder = 9 //Render backside before frontside
There were some changes with double sided rendering (circa r148) that reverted automatic double sided rendering with 2 draw calls for transparent materials (Build (130 - 131) Performance dropped by 50% due to new texture processing with DOUBLESIDE material - #9 by Mugen87) @manthrax would your suggestion above be the same as setting material.side = THREE.TwoPassDoubleSide
? Or would this also fail under your current setup @T-en1991?
Ohh good catch. I recalled there was a “FrontAndBack” side.. and the kerfuffle over making it the default for doubleside, but I couldn’t find it in a google search.
I think THREE.TwoPassDoubleSide is what I was trying to find.
@T-en1991 try just using .side = THREE.TwoPassDoubleSide and see if that helps.