itowns 2.43.2-next.3 → 2.43.2-next.5

package/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>

package/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);

package/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>

package/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>

package/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() {

package/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();

package/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);

package/examples/js/plugins/COGParser.js

@@ -22,10 +22,8 @@
  * @returns {GeoTIFFLevel} The selected zoom level.
  */
 function selectLevel(source, requestExtent, requestWidth, requestHeight) {
-    // Number of images  = original + overviews if any
-    const cropped = requestExtent.clone().intersect(source.extent);
     // Dimensions of the requested extent
-    const extentDimension = cropped.planarDimensions();
+    const extentDimension = requestExtent.clone().planarDimensions();
 
     const targetResolution = Math.min(
         extentDimension.x / requestWidth,
@@ -87,70 +85,112 @@ function makeWindowFromExtent(source, extent, resolution) {
 }
 
 /**
- * Creates a texture from the pixel buffer(s).
+ * Reads raster data from the image as RGB.
+ * The result is always an interleaved typed array.
+ * Colorspaces other than RGB will be transformed to RGB, color maps expanded.
+ *
+ * @param {Source} source The COGSource.
+ * @param {GeoTIFFLevel} level The GeoTIFF level to read
+ * @param {number[]} viewport The image region to read.
+ * @returns {Promise<TypedArray[]>} The raster data
+ */
+async function readRGB(source, level, viewport) {
+    try {
+        // TODO possible optimization: instead of letting geotiff.js crop and resample
+        // the tiles into the desired region, we could use image.getTileOrStrip() to
+        // read individual tiles (aka blocks) and make a texture per block. This way,
+        // there would not be multiple concurrent reads for the same block, and we would not
+        // waste time resampling the blocks since resampling is already done in the composer.
+        // We would create more textures, but it could be worth it.
+        return await level.image.readRGB({
+            window: viewport,
+            pool: source.pool,
+            width: source.tileWidth,
+            height: source.tileHeight,
+            resampleMethod: source.resampleMethod,
+            enableAlpha: true,
+            interleave: true,
+        });
+    } catch (error) {
+        if (error.toString() === 'AggregateError: Request failed') {
+            // Problem with the source that is blocked by another fetch
+            // (request failed in readRasters). See the conversations in
+            // https://github.com/geotiffjs/geotiff.js/issues/218
+            // https://github.com/geotiffjs/geotiff.js/issues/221
+            // https://github.com/geotiffjs/geotiff.js/pull/224
+            // Retry until it is not blocked.
+            // TODO retry counter
+            await new Promise((resolve) => {
+                setTimeout(resolve, 100);
+            });
+            return readRGB(level, viewport, source);
+        }
+        throw error;
+    }
+}
+
+/**
+ * Creates a texture from the pixel buffer
  *
  * @param {Object} source The COGSource
- * @param {THREE.TypedArray | THREE.TypedArray[]} buffers The buffers (one buffer per band)
- * @param {number} buffers.width
- * @param {number} buffers.height
- * @param {number} buffers.byteLength
+ * @param {THREE.TypedArray[]} buffer The pixel buffer
+ * @param {number} buffer.width
+ * @param {number} buffer.height
+ * @param {number} buffer.byteLength
  * @returns {THREE.DataTexture} The generated texture.
  */
-function createTexture(source, buffers) {
-    const { width, height, byteLength } = buffers;
+function createTexture(source, buffer) {
+    const { byteLength } = buffer;
+    const width = source.tileWidth;
+    const height = source.tileHeight;
     const pixelCount = width * height;
     const targetDataType = source.dataType;
     const format = THREE.RGBAFormat;
     const channelCount = 4;
-    let texture;
-    let data;
-
-    // Check if it's a RGBA buffer
-    if (pixelCount * channelCount === byteLength) {
-        data = buffers;
-    }
+    const isRGBA = pixelCount * channelCount === byteLength;
+    let tmpBuffer = buffer;
 
     switch (targetDataType) {
         case THREE.UnsignedByteType: {
-            if (!data) {
-                // We convert RGB buffer to RGBA
-                const newBuffers = new Uint8ClampedArray(pixelCount * channelCount);
-                data = convertToRGBA(buffers, newBuffers, source.defaultAlpha);
+            if (!isRGBA) {
+                tmpBuffer = convertToRGBA(tmpBuffer, new Uint8ClampedArray(pixelCount * channelCount), source.defaultAlpha);
             }
-            texture = new THREE.DataTexture(data, width, height, format, THREE.UnsignedByteType);
-            break;
+            return new THREE.DataTexture(tmpBuffer, width, height, format, THREE.UnsignedByteType);
         }
         case THREE.FloatType: {
-            if (!data) {
-                // We convert RGB buffer to RGBA
-                const newBuffers = new Float32Array(pixelCount * channelCount);
-                data = convertToRGBA(buffers, newBuffers, source.defaultAlpha / 255);
+            if (!isRGBA) {
+                tmpBuffer = convertToRGBA(tmpBuffer, new Float32Array(pixelCount * channelCount), source.defaultAlpha / 255);
             }
-            texture = new THREE.DataTexture(data, width, height, format, THREE.FloatType);
-            break;
+            return new THREE.DataTexture(tmpBuffer, width, height, format, THREE.FloatType);
         }
         default:
             throw new Error('unsupported data type');
     }
-
-    return texture;
 }
 
-function convertToRGBA(buffers, newBuffers, defaultAlpha) {
-    const { width, height } = buffers;
+/**
+ * Convert RGB pixel buffer to RGBA pixel buffer
+ *
+ * @param {THREE.TypedArray[]} buffer The RGB pixel buffer
+ * @param {THREE.TypedArray[]} newBuffer The empty RGBA pixel buffer
+ * @param {number} defaultAlpha Default alpha value
+ * @returns {THREE.DataTexture} The generated texture.
+ */
+function convertToRGBA(buffer, newBuffer, defaultAlpha) {
+    const { width, height } = buffer;
 
     for (let i = 0; i < width * height; i++) {
         const oldIndex = i * 3;
         const index = i * 4;
         // Copy RGB from original buffer
-        newBuffers[index + 0] = buffers[oldIndex + 0]; // R
-        newBuffers[index + 1] = buffers[oldIndex + 1]; // G
-        newBuffers[index + 2] = buffers[oldIndex + 2]; // B
+        newBuffer[index + 0] = buffer[oldIndex + 0]; // R
+        newBuffer[index + 1] = buffer[oldIndex + 1]; // G
+        newBuffer[index + 2] = buffer[oldIndex + 2]; // B
         // Add alpha to new buffer
-        newBuffers[index + 3] = defaultAlpha; // A
+        newBuffer[index + 3] = defaultAlpha; // A
     }
 
-    return newBuffers;
+    return newBuffer;
 }
 
 /**
@@ -195,20 +235,14 @@ const COGParser = (function _() {
          */
         parse: async function _(data, options) {
             const source = options.in;
-            const nodeExtent = data.extent.as(source.crs);
-            const level = selectLevel(source, nodeExtent, source.tileWidth, source.tileHeight);
-            const viewport = makeWindowFromExtent(source, nodeExtent, level.resolution);
-
-            const buffers = await level.image.readRGB({
-                window: viewport,
-                pool: source.pool,
-                enableAlpha: true,
-                interleave: true,
-            });
+            const tileExtent = options.extent.as(source.crs);
 
-            const texture = createTexture(source, buffers);
+            const level = selectLevel(source, tileExtent, source.tileWidth, source.tileHeight);
+            const viewport = makeWindowFromExtent(source, tileExtent, level.resolution);
+            const rgbBuffer = await readRGB(source, level, viewport);
+            const texture = createTexture(source, rgbBuffer);
             texture.flipY = true;
-            texture.extent = data.extent;
+            texture.extent = options.extent;
             texture.needsUpdate = true;
             texture.magFilter = THREE.LinearFilter;
             texture.minFilter = THREE.LinearFilter;

package/examples/js/plugins/COGSource.js

@@ -15,6 +15,9 @@
  * @property {string} url - The URL of the COG.
  * @property {GeoTIFF.Pool} pool - Pool use to decode GeoTiff.
  * @property {number} defaultAlpha - Alpha byte value used if no alpha is present in COG. Default value is 255.
+ * @property {number} tileWidth - Tile width in pixels. Default value use 'geotiff.getTileWidth()'.
+ * @property {number} tileHeight - Tile height in pixels. Default value use 'geotiff.getTileHeight()'.
+ * @property {number} resampleMethod - The desired resampling method. Default is 'nearest'.
  *
  * @example
  * // Create the source
@@ -59,9 +62,9 @@ class COGSource extends itowns.Source {
                 this.firstImage = await geotiff.getImage();
                 this.origin = this.firstImage.getOrigin();
                 this.dataType = this.selectDataType(this.firstImage.getSampleFormat(), this.firstImage.getBitsPerSample());
-
-                this.tileWidth = this.firstImage.getTileWidth();
-                this.tileHeight = this.firstImage.getTileHeight();
+                this.tileWidth = source.tileWidth || this.firstImage.getTileWidth();
+                this.tileHeight = source.tileHeight || this.firstImage.getTileHeight();
+                this.resampleMethod = source.resampleMethod || 'nearest';
 
                 // Compute extent
                 const [minX, minY, maxX, maxY] = this.firstImage.getBoundingBox();
@@ -80,7 +83,7 @@ class COGSource extends itowns.Source {
                         .then(image => this.makeLevel(image, image.getResolution(this.firstImage)));
                     promises.push(promise);
                 }
-                this.levels.push(await Promise.all(promises));
+                this.levels = this.levels.concat(await Promise.all(promises));
             });
     }
 

package/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();
 

package/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');

package/examples/source_file_cog.html

@@ -36,6 +36,7 @@
             itowns.proj4.defs('EPSG:2154', '+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
 
             var viewerDiv = document.getElementById('viewerDiv');
+            var view;
 
             function readCOGURL() {
                 var url = document.getElementById('cog_url').value || new URLSearchParams(window.location.search).get('geotiff');
@@ -47,7 +48,7 @@
             }
 
             function loadRGBSample() {
-                document.getElementById('cog_url').value = 'https://cdn.jsdelivr.net/gh/bloc-in-bloc/iTowns2-sample-data@add-cog-sample/cog/orvault.tif';
+                document.getElementById('cog_url').value = 'https://cdn.jsdelivr.net/gh/iTowns/iTowns2-sample-data/cog/nantes/nantes.tif';
                 readCOGURL();
             }
 
@@ -56,17 +57,33 @@
                 readCOGURL();
             }
 
-            function loadCOG(url, crs) {
+            function removeAllChildNodes(parent) {
+                while (parent.firstChild) {
+                    parent.removeChild(parent.firstChild);
+                }
+            }
+
+            function loadCOG(url) {
                 // create a source from a Cloud Optimized GeoTiff
                 var cogSource = new COGSource({
                     url: url,
-                    crs: "EPSG:2154"
+                    crs: "EPSG:2154",
+                    // Default resample method is 'nearest', 'bilinear' looks better when zoomed
+                    resampleMethod: 'bilinear'
                 });
 
                 cogSource.whenReady.then(() => {
-                    var view = new itowns.PlanarView(viewerDiv, cogSource.extent, { disableSkirt: true, placement: { tilt: 90 } });
+                    if (view !== undefined) {
+                        view.dispose(true);
+                        removeAllChildNodes(viewerDiv);
+                    }
+                    view = new itowns.PlanarView(viewerDiv, cogSource.extent, {
+                        // Default maxSubdivisionLevel is 5, so with huge geotiff it's not enough to see details when zoomed
+                        maxSubdivisionLevel: 10,
+                        disableSkirt: true,
+                        placement: { tilt: 90 }
+                    });
                     setupLoadingScreen(viewerDiv, view);
-                    new itowns.PlanarControls(view, {});
                     var cogLayer = new itowns.ColorLayer('cog', {
                         source: cogSource,
                     });

package/lib/Layer/C3DTilesLayer.js

@@ -92,7 +92,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

package/lib/Layer/PointCloudLayer.js

@@ -176,7 +176,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) {

package/lib/Layer/ReferencingLayerProperties.js

@@ -1,6 +1,5 @@
 // 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;
@@ -44,9 +43,11 @@ function ReferLayerProperties(material, layer) {
     });
     Object.defineProperty(material, 'transparent', {
       get: () => {
-        if (transparent != material.layer.opacity < 1.0) {
+        var _material$userData$ne;
+        const needTransparency = ((_material$userData$ne = material.userData.needTransparency) === null || _material$userData$ne === void 0 ? void 0 : _material$userData$ne[material.mode]) || material.layer.opacity < 1.0;
+        if (transparent != needTransparency) {
           material.needsUpdate = true;
-          transparent = material.layer.opacity < 1.0;
+          transparent = needTransparency;
         }
         return transparent;
       }

package/lib/Provider/3dTilesProvider.js

@@ -114,6 +114,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;

package/lib/Renderer/PointsMaterial.js

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 /* babel-plugin-inline-import './Shader/PointsVS.glsl' */
-const PointsVS = "#include <itowns/precision_qualifier>\n#if defined(USE_TEXTURES_PROJECTIVE)\n#include <itowns/projective_texturing_pars_vertex>\n#endif\n#include <common>\n#include <logdepthbuf_pars_vertex>\n\n#define NB_CLASS 8.\n\nuniform float size;\nuniform float scale;\n\nuniform bool picking;\nuniform int mode;\nuniform float opacity;\nuniform vec4 overlayColor;\n\nuniform vec2 elevationRange;\nuniform vec2 intensityRange;\nuniform vec2 angleRange;\n\nuniform bool applyOpacityClassication;\n\nuniform sampler2D classificationTexture;\nuniform sampler2D discreteTexture;\nuniform sampler2D gradientTexture;\nuniform int sizeMode;\nuniform float minAttenuatedSize;\nuniform float maxAttenuatedSize;\n\nattribute vec3 color;\nattribute vec2 range;\nattribute vec4 unique_id;\nattribute float intensity;\nattribute float classification;\nattribute float pointSourceID;\n\nattribute float returnNumber;\nattribute float numberOfReturns;\nattribute float scanAngle;\n\n#if defined(NORMAL_OCT16)\nattribute vec2 oct16Normal;\n#elif defined(NORMAL_SPHEREMAPPED)\nattribute vec2 sphereMappedNormal;\n#endif\n\nvarying vec4 vColor;\n\n// see https://web.archive.org/web/20150303053317/http://lgdv.cs.fau.de/get/1602\n// and implementation in PotreeConverter (BINPointReader.cpp) and potree (BinaryDecoderWorker.js)\n#if defined(NORMAL_OCT16)\nvec3 decodeOct16Normal(vec2 encodedNormal) {\n    vec2 nNorm = 2. * (encodedNormal / 255.) - 1.;\n    vec3 n;\n    n.z = 1. - abs(nNorm.x) - abs(nNorm.y);\n    if (n.z >= 0.) {\n        n.x = nNorm.x;\n        n.y = nNorm.y;\n    } else {\n        n.x = sign(nNorm.x) - sign(nNorm.x) * sign(nNorm.y) * nNorm.y;\n        n.y = sign(nNorm.y) - sign(nNorm.y) * sign(nNorm.x) * nNorm.x;\n    }\n    return normalize(n);\n}\n#elif defined(NORMAL_SPHEREMAPPED)\n// see http://aras-p.info/texts/CompactNormalStorage.html method #4\n// or see potree's implementation in BINPointReader.cpp\nvec3 decodeSphereMappedNormal(vec2 encodedNormal) {\n    vec2 fenc = 2. * encodedNormal / 255. - 1.;\n    float f = dot(fenc,fenc);\n    float g = 2. * sqrt(1. - f);\n    vec3 n;\n    n.xy = fenc * g;\n    n.z = 1. - 2. * f;\n    return n;\n}\n#endif\n\nvoid main() {\n\n#if defined(NORMAL_OCT16)\n    vec3  normal = decodeOct16Normal(oct16Normal);\n#elif defined(NORMAL_SPHEREMAPPED)\n    vec3 normal = decodeSphereMappedNormal(sphereMappedNormal);\n#elif defined(NORMAL)\n    // nothing to do\n#else\n    // default to color\n    vec3 normal = color;\n#endif\n\n    if (picking) {\n        vColor = unique_id;\n    } else {\n        vColor.a = opacity;\n        if (applyOpacityClassication || mode == PNTS_MODE_CLASSIFICATION) {\n            vec2 uv = vec2(classification/255., 0.5);\n            vColor = texture2D(classificationTexture, uv);\n            vColor.a *= opacity;\n        }\n\n        if (mode == PNTS_MODE_NORMAL) {\n            vColor.rgb = abs(normal);\n        } else if (mode == PNTS_MODE_COLOR) {\n            // default to color mode\n            vColor.rgb = mix(color, overlayColor.rgb, overlayColor.a);\n        } else if (mode == PNTS_MODE_RETURN_NUMBER) {\n            vec2 uv = vec2(returnNumber/255., 0.5);\n            vColor = texture2D(discreteTexture, uv);\n        } else if (mode == PNTS_MODE_RETURN_TYPE) {\n            float returnType;\n            if (returnNumber > numberOfReturns) {\n                returnType = 4.;\n            } else if (returnNumber == 1.) {\n                if (numberOfReturns == 1.) {\n                    // single\n                    returnType = 0.;\n                } else {\n                    // first\n                    returnType = 1.;\n                }\n            } else {\n                if (returnNumber == numberOfReturns) {\n                    // last\n                    returnType = 3.;\n                } else {\n                    // intermediate\n                    returnType = 2.;\n                }\n            }\n            vec2 uv = vec2(returnType/255., 0.5);\n            vColor = texture2D(discreteTexture, uv);\n        } else if (mode == PNTS_MODE_RETURN_COUNT) {\n            vec2 uv = vec2(numberOfReturns/255., 0.5);\n            vColor = texture2D(discreteTexture, uv);\n        } else if (mode == PNTS_MODE_POINT_SOURCE_ID) {\n            vec2 uv = vec2(mod(pointSourceID, NB_CLASS)/255., 0.5);\n            vColor = texture2D(discreteTexture, uv);\n        } else if (mode == PNTS_MODE_SCAN_ANGLE) {\n            float i = (scanAngle - angleRange.x) / (angleRange.y - angleRange.x);\n            vec2 uv = vec2(i, (1. - i));\n            vColor = texture2D(gradientTexture, uv);\n        } else if (mode == PNTS_MODE_INTENSITY) {\n            float i = (intensity - intensityRange.x) / (intensityRange.y - intensityRange.x);\n            vec2 uv = vec2(i, (1. - i));\n            vColor = texture2D(gradientTexture, uv);\n        } else if (mode == PNTS_MODE_ELEVATION) {\n            float i = (position.z - elevationRange.x) / (elevationRange.y - elevationRange.x);\n            vec2 uv = vec2(i, (1. - i));\n            vColor = texture2D(gradientTexture, uv);\n        }\n    }\n\n    #include <begin_vertex>\n    #include <project_vertex>\n\n    gl_PointSize = size;\n\n    if (sizeMode == PNTS_SIZE_MODE_ATTENUATED) {\n        bool isPerspective = isPerspectiveMatrix(projectionMatrix);\n\n        if (isPerspective) {\n            gl_PointSize *= scale / -mvPosition.z;\n            gl_PointSize = clamp(gl_PointSize, minAttenuatedSize, maxAttenuatedSize);\n        }\n    }\n\n#if defined(USE_TEXTURES_PROJECTIVE)\n    #include <itowns/projective_texturing_vertex>\n#endif\n    #include <logdepthbuf_vertex>\n}\n";
+const PointsVS = "#include <itowns/precision_qualifier>\n#if defined(USE_TEXTURES_PROJECTIVE)\n#include <itowns/projective_texturing_pars_vertex>\n#endif\n#include <common>\n#include <logdepthbuf_pars_vertex>\n\n#define NB_CLASS 8.\n\nuniform float size;\nuniform float scale;\n\nuniform bool picking;\nuniform int mode;\nuniform float opacity;\nuniform vec4 overlayColor;\n\nuniform vec2 elevationRange;\nuniform vec2 intensityRange;\nuniform vec2 angleRange;\n\nuniform sampler2D classificationTexture;\nuniform sampler2D discreteTexture;\nuniform sampler2D gradientTexture;\nuniform int sizeMode;\nuniform float minAttenuatedSize;\nuniform float maxAttenuatedSize;\n\nattribute vec3 color;\nattribute vec2 range;\nattribute vec4 unique_id;\nattribute float intensity;\nattribute float classification;\nattribute float pointSourceID;\n\nattribute float returnNumber;\nattribute float numberOfReturns;\nattribute float scanAngle;\n\n#if defined(NORMAL_OCT16)\nattribute vec2 oct16Normal;\n#elif defined(NORMAL_SPHEREMAPPED)\nattribute vec2 sphereMappedNormal;\n#endif\n\nvarying vec4 vColor;\n\n// see https://web.archive.org/web/20150303053317/http://lgdv.cs.fau.de/get/1602\n// and implementation in PotreeConverter (BINPointReader.cpp) and potree (BinaryDecoderWorker.js)\n#if defined(NORMAL_OCT16)\nvec3 decodeOct16Normal(vec2 encodedNormal) {\n    vec2 nNorm = 2. * (encodedNormal / 255.) - 1.;\n    vec3 n;\n    n.z = 1. - abs(nNorm.x) - abs(nNorm.y);\n    if (n.z >= 0.) {\n        n.x = nNorm.x;\n        n.y = nNorm.y;\n    } else {\n        n.x = sign(nNorm.x) - sign(nNorm.x) * sign(nNorm.y) * nNorm.y;\n        n.y = sign(nNorm.y) - sign(nNorm.y) * sign(nNorm.x) * nNorm.x;\n    }\n    return normalize(n);\n}\n#elif defined(NORMAL_SPHEREMAPPED)\n// see http://aras-p.info/texts/CompactNormalStorage.html method #4\n// or see potree's implementation in BINPointReader.cpp\nvec3 decodeSphereMappedNormal(vec2 encodedNormal) {\n    vec2 fenc = 2. * encodedNormal / 255. - 1.;\n    float f = dot(fenc,fenc);\n    float g = 2. * sqrt(1. - f);\n    vec3 n;\n    n.xy = fenc * g;\n    n.z = 1. - 2. * f;\n    return n;\n}\n#endif\n\nvoid main() {\n\n#if defined(NORMAL_OCT16)\n    vec3  normal = decodeOct16Normal(oct16Normal);\n#elif defined(NORMAL_SPHEREMAPPED)\n    vec3 normal = decodeSphereMappedNormal(sphereMappedNormal);\n#elif defined(NORMAL)\n    // nothing to do\n#else\n    // default to color\n    vec3 normal = color;\n#endif\n\n    if (picking) {\n        vColor = unique_id;\n    } else {\n        vColor.a = 1.0;\n        if (mode == PNTS_MODE_CLASSIFICATION) {\n            vec2 uv = vec2(classification/255., 0.5);\n            vColor = texture2D(classificationTexture, uv);\n        } else if (mode == PNTS_MODE_NORMAL) {\n            vColor.rgb = abs(normal);\n        } else if (mode == PNTS_MODE_COLOR) {\n            // default to color mode\n            vColor.rgb = mix(color, overlayColor.rgb, overlayColor.a);\n        } else if (mode == PNTS_MODE_RETURN_NUMBER) {\n            vec2 uv = vec2(returnNumber/255., 0.5);\n            vColor = texture2D(discreteTexture, uv);\n        } else if (mode == PNTS_MODE_RETURN_TYPE) {\n            float returnType;\n            if (returnNumber > numberOfReturns) {\n                returnType = 4.;\n            } else if (returnNumber == 1.) {\n                if (numberOfReturns == 1.) {\n                    // single\n                    returnType = 0.;\n                } else {\n                    // first\n                    returnType = 1.;\n                }\n            } else {\n                if (returnNumber == numberOfReturns) {\n                    // last\n                    returnType = 3.;\n                } else {\n                    // intermediate\n                    returnType = 2.;\n                }\n            }\n            vec2 uv = vec2(returnType/255., 0.5);\n            vColor = texture2D(discreteTexture, uv);\n        } else if (mode == PNTS_MODE_RETURN_COUNT) {\n            vec2 uv = vec2(numberOfReturns/255., 0.5);\n            vColor = texture2D(discreteTexture, uv);\n        } else if (mode == PNTS_MODE_POINT_SOURCE_ID) {\n            vec2 uv = vec2(mod(pointSourceID, NB_CLASS)/255., 0.5);\n            vColor = texture2D(discreteTexture, uv);\n        } else if (mode == PNTS_MODE_SCAN_ANGLE) {\n            float i = (scanAngle - angleRange.x) / (angleRange.y - angleRange.x);\n            vec2 uv = vec2(i, (1. - i));\n            vColor = texture2D(gradientTexture, uv);\n        } else if (mode == PNTS_MODE_INTENSITY) {\n            float i = (intensity - intensityRange.x) / (intensityRange.y - intensityRange.x);\n            vec2 uv = vec2(i, (1. - i));\n            vColor = texture2D(gradientTexture, uv);\n        } else if (mode == PNTS_MODE_ELEVATION) {\n            float i = (position.z - elevationRange.x) / (elevationRange.y - elevationRange.x);\n            vec2 uv = vec2(i, (1. - i));\n            vColor = texture2D(gradientTexture, uv);\n        }\n\n        vColor.a *= opacity;\n    }\n\n    #include <begin_vertex>\n    #include <project_vertex>\n\n    gl_PointSize = size;\n\n    if (sizeMode == PNTS_SIZE_MODE_ATTENUATED) {\n        bool isPerspective = isPerspectiveMatrix(projectionMatrix);\n\n        if (isPerspective) {\n            gl_PointSize *= scale / -mvPosition.z;\n            gl_PointSize = clamp(gl_PointSize, minAttenuatedSize, maxAttenuatedSize);\n        }\n    }\n\n#if defined(USE_TEXTURES_PROJECTIVE)\n    #include <itowns/projective_texturing_vertex>\n#endif\n    #include <logdepthbuf_vertex>\n}\n";
 /* babel-plugin-inline-import './Shader/PointsFS.glsl' */
 const PointsFS = "#include <itowns/precision_qualifier>\n#include <logdepthbuf_pars_fragment>\n#if defined(USE_TEXTURES_PROJECTIVE)\n#include <itowns/projective_texturing_pars_fragment>\n#endif\n\nvarying vec4 vColor;\nuniform bool picking;\nuniform int shape;\n\nvoid main() {\n    #include <logdepthbuf_fragment>\n    //square shape does not require any change.\n    if (shape == PNTS_SHAPE_CIRCLE) {\n        //circular rendering in glsl\n        if ((length(gl_PointCoord - 0.5) > 0.5) || (vColor.a == 0.0)) {\n            discard;\n        }\n    }\n\n#if defined(USE_TEXTURES_PROJECTIVE)\n    vec4 color = vColor;\n    if (!picking) {\n        #pragma unroll_loop\n        for (int i = 0; i < ORIENTED_IMAGES_COUNT; i++) {\n            color = projectiveTextureColor(projectiveTextureCoords[ ORIENTED_IMAGES_COUNT - 1 - i ], projectiveTextureDistortion[ ORIENTED_IMAGES_COUNT - 1 - i ], projectiveTexture[ ORIENTED_IMAGES_COUNT - 1 - i ], mask[ORIENTED_IMAGES_COUNT - 1 - i], color);\n        }\n        gl_FragColor = vec4(color.rgb, color.a * opacity);\n    } else {\n        gl_FragColor = color;\n    }\n#else\n    gl_FragColor = vColor;\n#endif\n}\n";
 import ShaderUtils from "./Shader/ShaderUtils.js";
@@ -127,7 +127,7 @@ export const ClassificationScheme = {
       visible: true,
       name: 'default',
       color: new THREE.Color(0.3, 0.6, 0.6),
-      opacity: 0.5
+      opacity: 1.0
     }
   }
 };
@@ -185,7 +185,7 @@ const DiscreteScheme = {
       visible: true,
       name: 'default',
       color: white,
-      opacity: 0.5
+      opacity: 1.0
     }
   }
 };
@@ -220,6 +220,7 @@ function generateGradientTexture(gradient) {
   return texture;
 }
 function recomputeTexture(scheme, texture, nbClass) {
+  let needTransparency;
   const data = texture.image.data;
   const width = texture.image.width;
   if (!nbClass) {
@@ -250,8 +251,10 @@ 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 {
   /**
@@ -264,7 +267,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.
@@ -293,7 +295,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;
@@ -313,7 +314,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;
@@ -322,6 +322,7 @@ class PointsMaterial extends THREE.ShaderMaterial {
     delete options.maxAttenuatedSize;
     delete options.gradient;
     super(options);
+    this.userData.needTransparency = {};
     this.gradients = gradients;
     this.gradientTexture = new THREE.CanvasTexture();
     this.vertexShader = PointsVS;
@@ -339,7 +340,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);
@@ -390,14 +390,19 @@ 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itowns",
-  "version": "2.43.2-next.3",
+  "version": "2.43.2-next.5",
   "description": "A JS/WebGL framework for 3D geospatial data visualization",
   "type": "module",
   "main": "lib/Main.js",