How do I ensure that materials are one-sided or two-sided?

[hjeldin]

Description

Models are loaded with material.side = THREE.DoubleSided, which causes rendering issues with non-opaque materials.

I don't recall seeing any API to access the THREE.js layer, so i'm kinda out of alternatives, but setting THREE.FrontSide or THREE.BackSide to the side property of the material should suffice.

Live Demo

https://glitch.com/edit/#!/granite-lemur

Browser Affected

• Chrome
• Edge
• Firefox
• Helios
• IE
• Safari

OS

• Android
• iOS
• Linux
• MacOS
• Windows

Versions

• model-viewer: v0.6.0
• three.js: rXX

[cdata]

Hey, thanks for checking in with us before giving up 👍 I did some reading and took a stab at tweaking your model for better results. Let me know if this addresses your problem!

Scanning the glTF spec, it looks like materials support being configured as double sided.

Scanning the GLTFLoader source code, it also looks like Three.js respects this property.

Popping your model into Blender 2.8, I was able to turn on backface culling:

...leading to this improved result:

Here is my tweaked version of your demo model: export-fixed.glb.zip

[hjeldin]

Yep, it just occurred to me that we're using an automated pipeline to export the models. One of the stages of the pipeline is actually obj2gltf, which automatically sets DoubleSided on the material properties if the material is transparent.

Thanks for your help!

Should problems like these rise again, have you considered exposing some parts of the rendering layer to the model-viewer api?

[cdata]

Yes! We have speculated about exposing the scene graph via a "render worklet" of some kind (previous public discussion here and here). This wouldn't give you direct access to the Three.js API, but it would give you a lot of flexibility to tweak the models at runtime.

Since this has come up a few times, I have now filed #738 to cover our current ideas on the matter. Your feedback would be welcome there 👍