How to render first with transparent double sided material? (r3f, react-three fiber)

Questions
,
1

Hi I’m trying to render Bounding Box that always rendered first
so I change material’s props depthTest, depthWrite false.
but with double sided transparent material, it doesn’t work… how to fix this…?

image
image1508×912 2.54 KB

left is not transparent, right is transparent with double sided

My code sandbox below Thanks in advance

2

Try rendering the outlines in a separate .render call, clearing only color / stencil in-between calls - that way everything in the second call will appear above the first one, regardless how the materials are set up.

Example (lines 67+ mostly)

1 Like
3

@mjurczyk Thanks for suggestion also your examples but I fixed like this, it works

//Material Setting
{
    depthTest: false,
    depthWrite: false,
    transparent: true,
    polygonOffset: true,
    polygonOffsetFactor: -10,
    toneMapped: false,
}
//Object3D Setting that use MaterialSetting above
{
  renderOrder = 1
}

referrence : PivotControls in drei, Github issues in three.js How to use polygonOffset solving Z-fighting poblems