Mosaic caused by front and back occlusion in a model?

Questions
1

img_v3_02ld_e1d0be3f-f936-4598-a487-25bb419c99bg
img_v3_02ld_e1d0be3f-f936-4598-a487-25bb419c99bg1106Ă—875 55.4 KB

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

2

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.

3 Likes
3

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
4

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?

1 Like
5

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.

1 Like