Opacity does not work consistently

[robes]

Steps to reproduce:

1. I was looking at this example model https://dev.facebase.org/mesh-viewer/view.html?model=https://dev.facebase.org/data/mesh/19dpf/19model.json
2. reduce the opacity of some object like the Epiphyseal Bar
3. rotate the model around

What you can observe is that you can see through the less opaque object to other objects in some cases but not all. Its like for some objects the Epiphyseal Bar is still completely opaque and in other cases it exhibits the expected transparency.

[robes]

We should get back to this issue. Here's another set of steps to reproduce:

1. open https://cirm-dev.isrd.isi.edu/~mei/mesh-viewer/view.html?model=https://cirm-dev.isrd.isi.edu/data/mesh/3mesh/3model.json
2. click "Meshes"
3. expand "Mandible"
4. drag opacity slider to nearly complete transparent
5. rotate the model around but you can never see through the mandible to the other two mesh objects in the scene

[meihuisu]

I can see through it, I am using firefox.

what are you using?

---

From: robes notifications@github.com Sent: Monday, May 22, 2017 12:17 PM To: informatics-isi-edu/mesh-viewer Cc: Mei Su; Assign Subject: Re: [informatics-isi-edu/mesh-viewer] Opacity does not work consistently (#12)

We should get back to this issue. Here's another set of steps to reproduce:

1. open https://cirm-dev.isrd.isi.edu/~mei/mesh-viewer/view.html?model=https://cirm-dev.isrd.isi.edu/data/mesh/3mesh/3model.jsonhttps://cirm-dev.isrd.isi.edu/%7Emei/mesh-viewer/view.html?model=https://cirm-dev.isrd.isi.edu/data/mesh/3mesh/3model.json
2. click "Meshes"
3. expand "Mandible"
4. drag opacity slider to nearly complete transparent
5. rotate the model around but you can never see through the mandible to the other two mesh objects in the scene

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHubhttps://github.com/informatics-isi-edu/mesh-viewer/issues/12#issuecomment-303194299, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AIn6F4ApEIfBFKZZ34R5H5h8Zw_eJGLSks5r8d9fgaJpZM4M6elh.

{"api_version":"1.0","publisher":{"api_key":"05dde50f1d1a384dd78767c55493e4bb","name":"GitHub"},"entity":{"external_key":"github/informatics-isi-edu/mesh-viewer","title":"informatics-isi-edu/mesh-viewer","subtitle":"GitHub repository","main_image_url":"https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png","avatar_image_url":"https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png","action":{"name":"Open in GitHub","url":"https://github.com/informatics-isi-edu/mesh-viewer"}},"updates":{"snippets":[{"icon":"PERSON","message":"@robes in #12: We should get back to this issue. Here's another set of steps to reproduce:\r\n\r\n1. open https://cirm-dev.isrd.isi.edu/~mei/mesh-viewer/view.html?model=https://cirm-dev.isrd.isi.edu/data/mesh/3mesh/3model.json\r\n2. click \"Meshes\"\r\n3. expand \"Mandible\"\r\n4. drag opacity slider to nearly complete transparent\r\n5. rotate the model around but you can never see through the mandible to the other two mesh objects in the scene"}],"action":{"name":"View Issue","url":"https://github.com/informatics-isi-edu/mesh-viewer/issues/12#issuecomment-303194299"}}}

[robes]

You’re right. It also works for me with Firefox and Safari.

The problem I described only applies to Chrome.

We should test on Windows too.

[meihuisu]

maybe related to this,

https://discourse.wicg.io/t/chrome-53-breaks-css3d-with-opacity-flattening/1694

[http://discourse.wicg.io/uploads/default/original/1X/7f3b669379175496361014a9ff1f73d7cba5cc0a.png]https://discourse.wicg.io/t/chrome-53-breaks-css3d-with-opacity-flattening/1694

Chrome 53 breaks CSS3D with opacity flattening - WICGhttps://discourse.wicg.io/t/chrome-53-breaks-css3d-with-opacity-flattening/1694 discourse.wicg.io Chrome 53 implemented the new css-transforms spec, which mandates that object be flattened when opacity is applied to them. Details: https://bugs.chromium.org/p/chromium/issues/detail?id=646993 This doesn't make sen…

---

From: robes notifications@github.com Sent: Monday, May 22, 2017 1:52 PM To: informatics-isi-edu/mesh-viewer Cc: Mei Su; Assign Subject: Re: [informatics-isi-edu/mesh-viewer] Opacity does not work consistently (#12)

You’re right. It also works for me with Firefox and Safari.

The problem I described only applies to Chrome.

We should test on Windows too.

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHubhttps://github.com/informatics-isi-edu/mesh-viewer/issues/12#issuecomment-303216839, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AIn6F2-Bo-IprqD2t0Foe71A9rr0fXSGks5r8fWJgaJpZM4M6elh.

{"api_version":"1.0","publisher":{"api_key":"05dde50f1d1a384dd78767c55493e4bb","name":"GitHub"},"entity":{"external_key":"github/informatics-isi-edu/mesh-viewer","title":"informatics-isi-edu/mesh-viewer","subtitle":"GitHub repository","main_image_url":"https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png","avatar_image_url":"https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png","action":{"name":"Open in GitHub","url":"https://github.com/informatics-isi-edu/mesh-viewer"}},"updates":{"snippets":[{"icon":"PERSON","message":"@robes in #12: You’re right. It also works for me with Firefox and Safari.\r\n\r\nThe problem I described only applies to Chrome.\r\n\r\nWe should test on Windows too.\r\n"}],"action":{"name":"View Issue","url":"https://github.com/informatics-isi-edu/mesh-viewer/issues/12#issuecomment-303216839"}}}

[NickolausDS]

I found one solution here, which fixes opacity but can cause a little bit of popping if two meshes intersect. #20

[NickolausDS]

Pull Request was merged here: https://github.com/informatics-isi-edu/mesh-viewer/pull/20

This issue should be resolved.