Three.js TwoPassDoubleSide introduction in r.148 causes transparency rendering issues

[timmevandermeer]

Hi, I initially reported this to three.js in mrdoob/three.js#25307, but conclusion was this is a react-three-fiber issue. Three.js introduced a new Side type TwoPassDoubleSide for rendering transparent objects with two sides. However, this resulted in the regular DoubleSide not working when changing an object from opaque to transparent at runtime (object does not become transparent). In stead using TwoPassDoubleSide works well in terms of supporting transparency, but it actually does not render two sides when the object is opaque. Personally I was able to mitigate this with something like:

<meshStandardMaterial
  transparent={isTransparent}
  opacity={data.opacity}
  side={isTransparent ? TwoPassDoubleSide : DoubleSide}
  ...
/>

The repro:

• Working example on r.147
• Broken example on r.148

[CodyJasonBennett]

Can you make an example without R3F? I'm sorry but this is in fact a three.js issue; R3F does not modify how three.js works in any way, and everything from what I can see points to divergent behavior there.

[drcmda]

mugen thinks fiber is some kind of wrapper, fiber is threejs, if something needs a flag in vanilla, the same holds true if it's expressed declaratively.

but this seems solved then. they say it needsUpdate = true, and if it does then fiber wouldn't be any different. generally i don't think it's a good idea to do this because it will recompile the material, and doing this runtime has a cost.