fix(entwine): change transparency settings

examples/3dtiles_25d.html

@@ -114,7 +114,7 @@
             var menu = new GuiTools('menuDiv', view);
             var d = new debug.Debug(view, menu.gui);
             debug.createTileDebugUI(menu.gui, view, view.tileLayer, d);
-            debug.create3dTilesDebugUI(menu.gui, view, $3dTilesLayer, d);
+            debug.create3dTilesDebugUI(menu.gui, view, $3dTilesLayer);
         </script>
     </body>
 </html>

examples/3dtiles_basic.html

@@ -81,8 +81,8 @@
             // Add the UI Debug
             var d = new debug.Debug(view, menuGlobe.gui);
             debug.createTileDebugUI(menuGlobe.gui, view, view.tileLayer, d);
-            debug.create3dTilesDebugUI(menuGlobe.gui, view, $3dTilesLayerDiscreteLOD, d);
-            debug.create3dTilesDebugUI(menuGlobe.gui, view, $3dTilesLayerRequestVolume, d);
+            debug.create3dTilesDebugUI(menuGlobe.gui, view, $3dTilesLayerDiscreteLOD);
+            debug.create3dTilesDebugUI(menuGlobe.gui, view, $3dTilesLayerRequestVolume);
             d.zoom = function() {
                 view.camera3D.position.set(1215013.9, -4736315.5, 4081597.5);
                 view.camera3D.quaternion.set(0.9108514448729665, 0.13456816437801225, 0.1107206134840362, 0.3741416847378546);

examples/3dtiles_batch_table.html

@@ -80,9 +80,7 @@
             // Add a debug UI
             var d = new debug.Debug(view, menuGlobe.gui);
             debug.createTileDebugUI(menuGlobe.gui, view, view.tileLayer, d);
-            debug.create3dTilesDebugUI(menuGlobe.gui, view,
-                $3dTilesLayerBTHierarchy,
-                d);
+            debug.create3dTilesDebugUI(menuGlobe.gui, view, $3dTilesLayerBTHierarchy);
         </script>
     </body>
 </html>

examples/3dtiles_pointcloud.html

@@ -58,14 +58,15 @@
             }
             // Create a new Layer 3d-tiles For Pointcloud
             // -------------------------------------------
+            var $3dTilesSource = new itowns.C3DTilesSource({
+                    url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/pointclouds/pnts-sete-2021-0756_6256/tileset.json',
+                });
             var $3dTilesLayerSetePC = new itowns.C3DTilesLayer('3d-tiles-sete', {
                 name: 'SetePC',
                 sseThreshold: 5,
                 pntsMode: itowns.PNTS_MODE.CLASSIFICATION,
                 pntsShape : itowns.PNTS_SHAPE.CIRCLE,
-                source: new itowns.C3DTilesSource({
-                    url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/pointclouds/pnts-sete-2021-0756_6256/tileset.json',
-                }),
+                source: $3dTilesSource,
             }, view);
 
             $3dTilesLayerSetePC.addEventListener(
@@ -84,18 +85,11 @@
 
             // Add the UI Debug
             var d = new debug.Debug(view, menuGlobe.gui);
-            debug.createTileDebugUI(menuGlobe.gui, view, view.tileLayer, d);
-            debug.create3dTilesDebugUI(menuGlobe.gui, view, $3dTilesLayerSetePC, d);
-
-            d.switch = function() {
-                switchMode();
-            }
-            menuGlobe.gui.add(d, 'switch').name('Mode Switch');
-
-
-
-
-
+            $3dTilesLayerSetePC.whenReady
+                .then(() => {
+                    debug.createTileDebugUI(menuGlobe.gui, view, view.tileLayer, d);
+                    debug.create3dTilesDebugUI(menuGlobe.gui, view, $3dTilesLayerSetePC);
+                });
         </script>
     </body>
 </html>

examples/copc_simple_loader.html

@@ -109,7 +109,7 @@
                     pointBudget: 3000000,
                 });
                 view.addLayer(layer).then(onLayerReady);
-                debug.PotreeDebug.initTools(view, layer, gui);
+                debug.PointCloudDebug.initTools(view, layer, gui);
             }
 
             function loadAutzen() {

examples/entwine_3d_loader.html

@@ -98,7 +98,7 @@
 
                 itowns.View.prototype.addLayer.call(view, eptLayer).then(onLayerReady);
 
-                debug.PotreeDebug.initTools(view, eptLayer, debugGui);
+                debug.PointCloudDebug.initTools(view, eptLayer, debugGui);
             }
 
             readEPTURL();

examples/entwine_simple_loader.html

@@ -104,7 +104,7 @@
                 view.addLayer(eptLayer).then(onLayerReady);
 
                 eptLayer.whenReady
-                    .then(() => debug.PotreeDebug.initTools(view, eptLayer, debugGui));
+                    .then(() => debug.PointCloudDebug.initTools(view, eptLayer, debugGui));
 
                 function dblClickHandler(event) {
                     var pick = view.pickObjectsAt(event, 5, eptLayer);

examples/potree_25d_map.html

@@ -102,7 +102,7 @@
                     potreeLayer.root.bbox.getSize(size);
                     potreeLayer.root.bbox.getCenter(lookAt);
 
-                    debug.PotreeDebug.initTools(view, potreeLayer, debugGui);
+                    debug.PointCloudDebug.initTools(view, potreeLayer, debugGui);
 
                     view.camera3D.far = 2.0 * size.length();
 

examples/potree_3d_map.html

@@ -71,7 +71,7 @@
 
             // add potreeLayer to scene
             function onLayerReady() {
-                debug.PotreeDebug.initTools(view, potreeLayer, debugGui);
+                debug.PointCloudDebug.initTools(view, potreeLayer, debugGui);
 
                 // update stats window
                 var info = document.getElementById('info');

src/Layer/C3DTilesLayer.js

@@ -95,7 +95,9 @@ class C3DTilesLayer extends GeometryLayer {
      * @param {Number} [config.cleanupDelay=1000] The time (in ms) after which a tile content (and its children) are
      * removed from the scene.
      * @param {C3DTExtensions} [config.registeredExtensions] 3D Tiles extensions managers registered for this tileset.
-     * @param {String} [config.pntsMode= PNTS_MODE.COLOR] {@link PointsMaterials} Point cloud coloring mode. Only 'COLOR' or 'CLASSIFICATION' are possible. COLOR uses RGB colors of the points, CLASSIFICATION uses a classification property of the batch table to color points.
+     * @param {String} [config.pntsMode= PNTS_MODE.COLOR] {@link PointsMaterials} Point cloud coloring mode.
+     *      Only 'COLOR' or 'CLASSIFICATION' are possible. COLOR uses RGB colors of the points,
+     *      CLASSIFICATION uses a classification property of the batch table to color points.
      * @param {String} [config.pntsShape= PNTS_SHAPE.CIRCLE] Point cloud point shape. Only 'CIRCLE' or 'SQUARE' are possible.
      * @param {String} [config.pntsSizeMode= PNTS_SIZE_MODE.VALUE] {@link PointsMaterials} Point cloud size mode. Only 'VALUE' or 'ATTENUATED' are possible. VALUE use constant size, ATTENUATED compute size depending on distance from point to camera.
      * @param {Number} [config.pntsMinAttenuatedSize=3] Minimum scale used by 'ATTENUATED' size mode

src/Layer/PointCloudLayer.js

@@ -194,7 +194,7 @@ class PointCloudLayer extends GeometryLayer {
         if (this.material) {
             this.material.visible = this.visible;
             this.material.opacity = this.opacity;
-            this.material.transparent = this.opacity < 1;
+            this.material.transparent = this.opacity < 1 || this.material.userData.needTransparency[this.material.mode];
             this.material.size = this.pointSize;
             this.material.scale = context.camera.preSSE;
             if (this.material.updateUniforms) {

src/Layer/ReferencingLayerProperties.js

@@ -1,7 +1,6 @@
 
 // next step is move these properties to Style class
 // and hide transparent mechanism
-
 function ReferLayerProperties(material, layer) {
     if (layer && layer.isGeometryLayer) {
         let transparent = material.transparent;
@@ -16,26 +15,31 @@ function ReferLayerProperties(material, layer) {
                 get: () => material.layer.opacity,
             });
         }
+
         if (material.uniforms && material.uniforms.mode != undefined) {
             Object.defineProperty(material.uniforms.mode, 'value', {
                 get: () => material.layer.pntsMode,
             });
         }
+
         if (material.uniforms && material.uniforms.shape != undefined) {
             Object.defineProperty(material.uniforms.shape, 'value', {
                 get: () => material.layer.pntsShape,
             });
         }
+
         if (material.uniforms && material.uniforms.sizeMode != undefined) {
             Object.defineProperty(material.uniforms.sizeMode, 'value', {
                 get: () => material.layer.pntsSizeMode,
             });
         }
+
         if (material.uniforms && material.uniforms.minAttenuatedSize != undefined) {
             Object.defineProperty(material.uniforms.minAttenuatedSize, 'value', {
                 get: () => material.layer.pntsMinAttenuatedSize,
             });
         }
+
         if (material.uniforms && material.uniforms.maxAttenuatedSize != undefined) {
             Object.defineProperty(material.uniforms.maxAttenuatedSize, 'value', {
                 get: () => material.layer.pntsMaxAttenuatedSize,
@@ -45,11 +49,13 @@ function ReferLayerProperties(material, layer) {
         Object.defineProperty(material, 'wireframe', {
             get: () => material.layer.wireframe,
         });
+
         Object.defineProperty(material, 'transparent', {
             get: () => {
-                if (transparent != material.layer.opacity < 1.0) {
+                const needTransparency = material.userData.needTransparency?.[material.mode] || material.layer.opacity < 1.0;
+                if (transparent != needTransparency) {
                     material.needsUpdate = true;
-                    transparent = material.layer.opacity < 1.0;
+                    transparent = needTransparency;
                 }
                 return transparent;
             },

src/Provider/3dTilesProvider.js

@@ -119,6 +119,7 @@ function executeCommand(command) {
                 } else if (magic == 'b3dm') {
                     func = supportedFormats.b3dm;
                 } else if (magic == 'pnts') {
+                    layer.hasPnts = true;
                     func = supportedFormats.pnts;
                 } else if (magic == 'glTF') {
                     func = supportedFormats.gltf;

src/Renderer/PointsMaterial.js

@@ -61,7 +61,7 @@ export const ClassificationScheme = {
         10: { visible: true, name: 'rail', color: new THREE.Color(0.8,  0.8,  1.0), opacity: 1.0 },
         11: { visible: true, name: 'road Surface', color: new THREE.Color(0.4,  0.4,  0.7), opacity: 1.0 },
         12: { visible: true, name: 'overlap', color: new THREE.Color(1.0,  1.0,  0.0), opacity: 1.0 },
-        DEFAULT: { visible: true, name: 'default', color: new THREE.Color(0.3, 0.6, 0.6), opacity: 0.5 },
+        DEFAULT: { visible: true, name: 'default', color: new THREE.Color(0.3, 0.6, 0.6), opacity: 1.0 },
     },
 };
 
@@ -75,7 +75,7 @@ const DiscreteScheme = {
         5: { visible: true, name: '5', color: new THREE.Color('rgb(230, 25, 75)'), opacity: 1.0 },
         6: { visible: true, name: '6', color: new THREE.Color('rgb(66, 212, 244)'), opacity: 1.0 },
         7: { visible: true, name: '7', color: new THREE.Color('rgb(240, 50, 230)'), opacity: 1.0 },
-        DEFAULT: { visible: true, name: 'default', color: white, opacity: 0.5 },
+        DEFAULT: { visible: true, name: 'default', color: white, opacity: 1.0 },
     },
 };
 
@@ -116,6 +116,7 @@ function generateGradientTexture(gradient) {
 }
 
 function recomputeTexture(scheme, texture, nbClass) {
+    let needTransparency;
     const data = texture.image.data;
     const width = texture.image.width;
     if (!nbClass) { nbClass = Object.keys(scheme).length; }
@@ -147,9 +148,11 @@ function recomputeTexture(scheme, texture, nbClass) {
         data[j + 1] = parseInt(255 * color.g, 10);
         data[j + 2] = parseInt(255 * color.b, 10);
         data[j + 3] = visible ? parseInt(255 * opacity, 10) : 0;
-    }
 
+        needTransparency = needTransparency || opacity < 1;
+    }
     texture.needsUpdate = true;
+    return needTransparency;
 }
 
 class PointsMaterial extends THREE.ShaderMaterial {
@@ -163,7 +166,6 @@ class PointsMaterial extends THREE.ShaderMaterial {
      * @param      {THREE.Vector2}  [options.intensityRange=new THREE.Vector2(1, 65536)]  intensity range.
      * @param      {THREE.Vector2}  [options.elevationRange=new THREE.Vector2(0, 1000)]  elevation range.
      * @param      {THREE.Vector2}  [options.angleRange=new THREE.Vector2(-90, 90)]  scan angle range.
-     * @param      {boolean}  [options.applyOpacityClassication=false]  apply opacity classification on all display mode.
      * @param      {Scheme}  [options.classification]  LUT for point classification colorization.
      * @param      {Scheme}  [options.discreteScheme]  LUT for other discret point values colorization.
      * @param      {string}  [options.gradient]  Descrition of the gradient to use for continuous point values.
@@ -191,7 +193,6 @@ class PointsMaterial extends THREE.ShaderMaterial {
         const oiMaterial = options.orientedImageMaterial;
         const classificationScheme = options.classification || ClassificationScheme.DEFAULT;
         const discreteScheme = options.discreteScheme || DiscreteScheme.DEFAULT;
-        const applyOpacityClassication = options.applyOpacityClassication == undefined ? false : options.applyOpacityClassication;
         const size = options.size || 0;
         const mode = options.mode || PNTS_MODE.COLOR;
         const shape = options.shape || PNTS_SHAPE.CIRCLE;
@@ -212,7 +213,6 @@ class PointsMaterial extends THREE.ShaderMaterial {
         delete options.orientedImageMaterial;
         delete options.classification;
         delete options.discreteScheme;
-        delete options.applyOpacityClassication;
         delete options.size;
         delete options.mode;
         delete options.shape;
@@ -222,6 +222,7 @@ class PointsMaterial extends THREE.ShaderMaterial {
         delete options.gradient;
 
         super(options);
+        this.userData.needTransparency = {};
         this.gradients = gradients;
         this.gradientTexture = new THREE.CanvasTexture();
 
@@ -242,7 +243,6 @@ class PointsMaterial extends THREE.ShaderMaterial {
         CommonMaterial.setUniformProperty(this, 'intensityRange', intensityRange);
         CommonMaterial.setUniformProperty(this, 'elevationRange', elevationRange);
         CommonMaterial.setUniformProperty(this, 'angleRange', angleRange);
-        CommonMaterial.setUniformProperty(this, 'applyOpacityClassication', applyOpacityClassication);
         CommonMaterial.setUniformProperty(this, 'sizeMode', sizeMode);
         CommonMaterial.setUniformProperty(this, 'scale', scale);
         CommonMaterial.setUniformProperty(this, 'minAttenuatedSize', minAttenuatedSize);
@@ -299,15 +299,20 @@ class PointsMaterial extends THREE.ShaderMaterial {
     }
 
     recomputeClassification() {
-        recomputeTexture(this.classificationScheme, this.classificationTexture, 32);
+        const needTransparency = recomputeTexture(this.classificationScheme, this.classificationTexture, 32);
+        this.userData.needTransparency[PNTS_MODE.CLASSIFICATION] = needTransparency;
         this.dispatchEvent({
             type: 'material_property_changed',
             target: this.uniforms,
         });
     }
 
     recomputeDiscreteTexture() {
-        recomputeTexture(this.discreteScheme, this.discreteTexture);
+        const needTransparency = recomputeTexture(this.discreteScheme, this.discreteTexture);
+        this.userData.needTransparency[PNTS_MODE.RETURN_NUMBER] = needTransparency;
+        this.userData.needTransparency[PNTS_MODE.RETURN_TYPE] = needTransparency;
+        this.userData.needTransparency[PNTS_MODE.RETURN_COUNT] = needTransparency;
+        this.userData.needTransparency[PNTS_MODE.POINT_SOURCE_ID] = needTransparency;
         this.dispatchEvent({
             type: 'material_property_changed',
             target: this.uniforms,

src/Renderer/Shader/PointsVS.glsl

@@ -19,8 +19,6 @@ uniform vec2 elevationRange;
 uniform vec2 intensityRange;
 uniform vec2 angleRange;
 
-uniform bool applyOpacityClassication;
-
 uniform sampler2D classificationTexture;
 uniform sampler2D discreteTexture;
 uniform sampler2D gradientTexture;
@@ -93,14 +91,11 @@ void main() {
     if (picking) {
         vColor = unique_id;
     } else {
-        vColor.a = opacity;
-        if (applyOpacityClassication || mode == PNTS_MODE_CLASSIFICATION) {
+        vColor.a = 1.0;
+        if (mode == PNTS_MODE_CLASSIFICATION) {
             vec2 uv = vec2(classification/255., 0.5);
             vColor = texture2D(classificationTexture, uv);
-            vColor.a *= opacity;
-        }
-
-        if (mode == PNTS_MODE_NORMAL) {
+        } else if (mode == PNTS_MODE_NORMAL) {
             vColor.rgb = abs(normal);
         } else if (mode == PNTS_MODE_COLOR) {
             // default to color mode
@@ -150,6 +145,8 @@ void main() {
             vec2 uv = vec2(i, (1. - i));
             vColor = texture2D(gradientTexture, uv);
         }
+
+        vColor.a *= opacity;
     }
 
     #include <begin_vertex>

test/functional/source_stream_wfs_25d.js

@@ -14,7 +14,8 @@ describe('source_stream_wfs_25d', function _() {
         // Test picking a feature geometry property from `wfsBuilding` layer.
         // Picking is done at the given screen coordinates.
         const buildingId = await page.evaluate(() => picking({ x: 97, y: 213 }));
-        assert.equal(buildingId.geojson.id, 'batiment.46260502');
+        assert.ok(buildingId, 'no buildings picked');
+        assert.equal(buildingId.cleabs, 'BATIMENT0000000241634062');
     });
     it('should remove GeometryLayer', async () => {
         const countGeometryLayerStart = await page.evaluate(() => view.getLayers(l => l.isGeometryLayer).length);

test/unit/fetcher.js

@@ -110,7 +110,7 @@ describe('Fetcher', function () {
                     done();
                 })
                 .catch(done);
-        }).timeout(8000);
+        }).timeout(10000);
     });
 
     describe('multiple', function () {