Mosaic caused by front and back occlusion in a model?

[T-en1991]

Description

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

Reproduction steps

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

Code

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

Live example

• jsfiddle-latest-release WebGLRenderer
• jsfiddle-dev WebGLRenderer
• jsfiddle-latest-release WebGPURenderer
• jsfiddle-dev WebGPURenderer

Screenshots

No response

Version

Device

No response

Browser

Chrome

OS

Windows

[donmccurdy]

Let's discuss at https://discourse.threejs.org/t/mosaic-caused-by-front-and-back-occlusion-in-a-model/81295 – this result is expected given the transparency and depthWrite settings used in the example code. For help and support we recommend either the forums, stack overflow, or discord.