The model above has some transparency issues. The blending of the see-through layers is inconsistent depending on the angle. You’ll see the issue pretty quickly if you rotate around the model. Also the ridged area at the bottom doesn’t add to the blending most of the time. I’ve done a lot of reading on the topic of transparency and I’m about ready to give up trying to make it perfect. I just wanted to see if anyone has found a way to resolve these types of issues. Also we have full creative freedom over the model so if you have any advice about how to redo the model to avoid transparency issues like this I would love to hear it.
I think double-sided materials for the transparent base might help a bit, perhaps reducing the alpha if it becomes too dark. Comparing:
That said, this is a difficult setup for alpha-blended transparency… Splitting the inner and outer shells into two different meshes may help, as well. If you have control over the mesh render order (three.js gives you that, glTF does not) then forcing the inner and outer shells to render in a particular order is also worth a try.
The Khronos Slack has a glTF channel that may have some better advice than mine: Join KhronosDevs on Slack | Slack
Thanks for the reply! Btw I appreciated this post XD.
We might be able to do some of the curved surfaces as their own objects. I was also thinking about double-sided-ness. When I tried changing the material to be double-sided I got a ton of artifacts though. How did you make it double-sided without introducing artifacts?
I guess I’m seeing some artifacts (along the sides, at certain angles) but less so than when single-sided. I’m pasting the model into https://gltf.report/ and running the script below:
for (const mat of document.getRoot().listMaterials()) {
if (mat.getAlphaMode() === 'BLEND') {
mat.setDoubleSided(true);
}
}
The preview there uses https://modelviewer.dev/, which is still three.js, but may have some different configuration than the defaults.