[BUG] Transparent individual pointcloud classes don't get rendered as transparent

airnez commented 5 months ago

Context

I am using classified pointclouds provided as 3D Tiles. I am setting a custom classificationScheme to choose color and opacity for each individual pointcloud class. Setting colors works fine. Reducing opacity will however fade the point color to white instead of making it transparent. On the screenshot bellow the buildings are excpected to look half-transparent red but appear pink and opaque instead.

Steps to Reproduce

Render a classified point cloud 3D Tile source (https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/pointclouds/pnts-sete-2021-0756_6256/tileset.json)

Set a custom classification scheme with a transparent class (here buildings are set red and half-transparent and the rest is black) :

layer.classification = {
                6: { visible: true, color: new THREE.Color(1, 0, 0), opacity: 0.5 },
                DEFAULT: { visible: true, color: new THREE.Color(0, 0, 0), opacity: 1 }
}

Expected Behavior

The classified points should be rendered as transparent.

Actual Behavior

The classified point are getting whiter.

Possible Cause/Fix/Solution

It seems that the point material transparent property is not set correctly. Thus it renders the color alpha as color intensity instead of transparency. This happens because the layer opacity is set to 1. Even if we try to set the whole layer material transparent, the transparent property getter overwrites the value depending on the opacity. See here :

https://github.com/iTowns/itowns/blob/48fb9dfd3a6b420dc1e121971eb2a6a3a2efb286/src/Layer/ReferencingLayerProperties.js#L48-L56

ftoromanoff commented 4 months ago

Linked with your issue, I noticed a similar bug on PointCloudLayer (entwine and Potree). I started a PR #2327 to fix that issue, but currently I only look up for PointCloud and not yet other 3D Layer type (as 3D tiles you are refering to here)

ftoromanoff commented 4 months ago

The last commits of the PR #2327 should fix it. @airnez You can try to see if it is what you wanted ? It might get reworked, but it might be good to know if the issue you pointed out is resolved like that.

airnez commented 4 months ago

I tested your fix, and I couldn't make it work for 3dTiles. I suspect that the problem is linked to the fact that the 3dTiles pointsMaterial is instanciated here : https://github.com/iTowns/itowns/blob/14891fd8bce7f597abcd8945da93dda5e454661e/src/Provider/3dTilesProvider.js#L34-L50

It seems that something like what you implemented here is needed : https://github.com/ftoromanoff/itowns/blob/41fbaa3780245939b50cbc8b19cc79287de8aa2f/src/Layer/PointCloudLayer.js#L197

ftoromanoff commented 4 months ago

Should be fixed now. I indeed did a last little change that i forgot to apply on 3dTilesLayer...

airnez commented 4 months ago

Tested, it seems fixed ! Thank you @ftoromanoff

iTowns / itowns