diff --git a/examples/copc_simple_loader.html b/examples/copc_simple_loader.html
index 7a9afb6eaf..5dfa290e1e 100644
--- a/examples/copc_simple_loader.html
+++ b/examples/copc_simple_loader.html
@@ -15,7 +15,7 @@
         </style>
 
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/lil-gui@0.19"></script>
     </head>
     <body>
         <div id="description">Specify the URL of a COPC file to load:
@@ -38,7 +38,7 @@
 
             const uri = new URL(location);
 
-            const gui = new dat.GUI();
+            const gui = new lil.GUI();
 
             const viewerDiv = document.getElementById('viewerDiv');
             const view = new itowns.View('EPSG:4326', viewerDiv);
@@ -96,7 +96,7 @@
                 const source = new itowns.CopcSource({ url });
 
                 if (layer) {
-                    gui.removeFolder(layer.debugUI);
+                    layer.debugUI.destroy()
                     view.removeLayer('COPC');
                     view.notifyChange();
                     layer.delete();
diff --git a/examples/entwine_3d_loader.html b/examples/entwine_3d_loader.html
index 923dca6675..3d8057fe49 100644
--- a/examples/entwine_3d_loader.html
+++ b/examples/entwine_3d_loader.html
@@ -14,7 +14,7 @@
         </style>
 
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/lil-gui@0.19"></script>
     </head>
     <body>
         <div id="description">Specify the URL of a Entwine Point Tree to load:
@@ -31,7 +31,7 @@
         <script src="js/GUI/LoadingScreen.js"></script>
         <script src="../dist/debug.js"></script>
         <script type="text/javascript">
-            var debugGui = new dat.GUI();
+            var debugGui = new lil.GUI();
             var viewerDiv = document.getElementById('viewerDiv');
 
             var view = new itowns.GlobeView(viewerDiv);
diff --git a/examples/entwine_simple_loader.html b/examples/entwine_simple_loader.html
index deb80d8924..9435a97e1a 100644
--- a/examples/entwine_simple_loader.html
+++ b/examples/entwine_simple_loader.html
@@ -14,7 +14,7 @@
         </style>
 
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/lil-gui@0.19"></script>
     </head>
     <body>
         <div id="description">Specify the URL of a Entwine Point Tree to load:
@@ -33,7 +33,7 @@
         <script type="text/javascript">
             itowns.proj4.defs('EPSG:3946', '+proj=lcc +lat_0=46 +lon_0=3 +lat_1=45.25 +lat_2=46.75 +x_0=1700000 +y_0=5200000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs');
 
-            var debugGui = new dat.GUI();
+            var debugGui = new lil.GUI();
             var viewerDiv = document.getElementById('viewerDiv');
             viewerDiv.style.display = 'block';
             var view = new itowns.View('EPSG:3946', viewerDiv);
@@ -84,12 +84,13 @@
                 }
             }
 
+            let eptName;
             function loadEPT(url, options) {
                 eptSource = new itowns.EntwinePointTileSource({ url });
 
                 if (eptLayer) {
-                    debugGui.removeFolder(eptLayer.debugUI);
-                    view.removeLayer('Entwine Point Tile');
+                    eptLayer.debugUI.destroy();
+                    view.removeLayer(eptName);
                     view.notifyChange();
                     eptLayer.delete();
                 }
@@ -99,7 +100,10 @@
                     crs: view.referenceCrs,
                     ...options,
                 }
-                eptLayer = new itowns.EntwinePointTileLayer('Entwine Point Tile', config);
+
+                eptName = url.split('/').pop()
+                eptName = eptName[0].toUpperCase() + eptName.slice(1);
+                eptLayer = new itowns.EntwinePointTileLayer(eptName, config);
 
                 view.addLayer(eptLayer).then(onLayerReady);
 
@@ -121,7 +125,7 @@
             }
 
             function loadGrandLyon() {
-                document.getElementById('ept_url').value = 'https://download.data.grandlyon.com/files/grandlyon/imagerie/mnt2018/lidar/ept/';
+                document.getElementById('ept_url').value = 'https://download.data.grandlyon.com/files/grandlyon/imagerie/mnt2018/lidar/ept';
                 readEPTURL();
             }
 
diff --git a/src/Layer/PointCloudLayer.js b/src/Layer/PointCloudLayer.js
index fa128c8395..51713cb92d 100644
--- a/src/Layer/PointCloudLayer.js
+++ b/src/Layer/PointCloudLayer.js
@@ -239,7 +239,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.userData.needTransparency[this.material.mode];
+            this.material.depthWrite = false;
             this.material.size = this.pointSize;
             this.material.scale = context.camera.preSSE;
             if (this.material.updateUniforms) {
diff --git a/src/Renderer/PointsMaterial.js b/src/Renderer/PointsMaterial.js
index e6bc3fc194..f926fca6fa 100644
--- a/src/Renderer/PointsMaterial.js
+++ b/src/Renderer/PointsMaterial.js
@@ -113,7 +113,6 @@ 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; }
@@ -121,19 +120,15 @@ function recomputeTexture(scheme, texture, nbClass) {
     for (let i = 0; i < width; i++) {
         let color;
         let opacity;
-        let visible = true;
 
         if (scheme[i]) {
             color = scheme[i].color;
-            visible = scheme[i].visible;
             opacity = scheme[i].opacity;
         } else if (scheme[i % nbClass]) {
             color = scheme[i % nbClass].color;
-            visible = scheme[i % nbClass].visible;
             opacity = scheme[i % nbClass].opacity;
         } else if (scheme.DEFAULT) {
             color = scheme.DEFAULT.color;
-            visible = scheme.DEFAULT.visible;
             opacity = scheme.DEFAULT.opacity;
         } else {
             color = white;
@@ -144,12 +139,9 @@ function recomputeTexture(scheme, texture, nbClass) {
         data[j + 0] = parseInt(255 * color.r, 10);
         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 || !visible;
+        data[j + 3] = parseInt(255 * opacity, 10);
     }
     texture.needsUpdate = true;
-    return needTransparency;
 }
 
 class PointsMaterial extends THREE.ShaderMaterial {
@@ -210,6 +202,7 @@ class PointsMaterial extends THREE.ShaderMaterial {
         super({
             ...materialOptions,
             fog: true,
+            transparent: true,
             precision: 'highp',
             vertexColors: true,
         });
@@ -221,7 +214,6 @@ class PointsMaterial extends THREE.ShaderMaterial {
         this.vertexShader = PointsVS;
         this.fragmentShader = PointsFS;
 
-        this.userData.needTransparency = {};
         this.gradients = gradients;
         this.gradientTexture = new THREE.CanvasTexture();
 
@@ -256,6 +248,14 @@ class PointsMaterial extends THREE.ShaderMaterial {
         textureLUT.magFilter = THREE.NearestFilter;
         CommonMaterial.setUniformProperty(this, 'discreteTexture', textureLUT);
 
+        // add texture to apply visibility.
+        const dataVisi = new Uint8Array(256 * 1);
+        const textureVisi = new THREE.DataTexture(dataVisi, 256, 1, THREE.RedFormat);
+
+        textureVisi.needsUpdate = true;
+        textureVisi.magFilter = THREE.NearestFilter;
+        CommonMaterial.setUniformProperty(this, 'visiTexture', textureVisi);
+
         // Classification and other discrete values scheme
         this.classificationScheme = classificationScheme;
         this.discreteScheme = discreteScheme;
@@ -263,6 +263,7 @@ class PointsMaterial extends THREE.ShaderMaterial {
         // Update classification and discrete Texture
         this.recomputeClassification();
         this.recomputeDiscreteTexture();
+        this.recomputeVisibleTexture();
 
         // Gradient texture for continuous values
         this.gradient = gradient;
@@ -280,11 +281,6 @@ class PointsMaterial extends THREE.ShaderMaterial {
      * @returns {this}
      */
     copy(source) {
-        // Manually copy this needTransparency if source doesn't have one. Prevents losing it when copying a three
-        // PointsMaterial into this PointsMaterial
-        const needTransparency = source.userData.needTransparency !== undefined ? source.userData.needTransparency
-            : this.userData.needTransparency;
-
         if (source.isShaderMaterial) {
             super.copy(source);
         } else {
@@ -299,8 +295,6 @@ class PointsMaterial extends THREE.ShaderMaterial {
         this.sizeAttenuation = source.sizeAttenuation;
         this.fog = source.fog;
 
-        this.userData.needTransparency = needTransparency;
-
         return this;
     }
 
@@ -371,8 +365,7 @@ class PointsMaterial extends THREE.ShaderMaterial {
     }
 
     recomputeClassification() {
-        const needTransparency = recomputeTexture(this.classificationScheme, this.classificationTexture, 256);
-        this.userData.needTransparency[PNTS_MODE.CLASSIFICATION] = needTransparency;
+        recomputeTexture(this.classificationScheme, this.classificationTexture, 256);
         this.dispatchEvent({
             type: 'material_property_changed',
             target: this.uniforms,
@@ -380,11 +373,35 @@ class PointsMaterial extends THREE.ShaderMaterial {
     }
 
     recomputeDiscreteTexture() {
-        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;
+        recomputeTexture(this.discreteScheme, this.discreteTexture);
+        this.dispatchEvent({
+            type: 'material_property_changed',
+            target: this.uniforms,
+        });
+    }
+
+    recomputeVisibleTexture() {
+        const texture = this.visiTexture;
+        const scheme = this.classificationScheme;
+
+        const data = texture.image.data;
+        const width = texture.image.width;
+
+        for (let i = 0; i < width; i++) {
+            let visible;
+
+            if (scheme[i]) {
+                visible  = scheme[i].visible;
+            } else if (scheme.DEFAULT) {
+                visible  = scheme.DEFAULT.visible;
+            } else {
+                visible = true;
+            }
+
+            data[i] = visible ? 255 : 0;
+        }
+        texture.needsUpdate = true;
+
         this.dispatchEvent({
             type: 'material_property_changed',
             target: this.uniforms,
diff --git a/src/Renderer/Shader/PointsVS.glsl b/src/Renderer/Shader/PointsVS.glsl
index 6dae914c36..f36b67d3b0 100644
--- a/src/Renderer/Shader/PointsVS.glsl
+++ b/src/Renderer/Shader/PointsVS.glsl
@@ -10,7 +10,7 @@ varying vec4 vColor; // color_pars_vertex
     uniform mat3 uvTransform;
 #endif
 
-#define NB_CLASS 8.
+#define SOURCE_ID_GROUP 8.
 
 uniform float size;
 uniform float scale;
@@ -25,6 +25,8 @@ uniform vec2 angleRange;
 uniform sampler2D classificationTexture;
 uniform sampler2D discreteTexture;
 uniform sampler2D gradientTexture;
+uniform sampler2D visiTexture;
+
 uniform int sizeMode;
 uniform float minAttenuatedSize;
 uniform float maxAttenuatedSize;
@@ -39,12 +41,13 @@ attribute float numberOfReturns;
 attribute float scanAngle;
 
 void main() {
+    vec2 uv = vec2(classification/255., 0.5);
+
     vColor = vec4(1.0);
     if (picking) {
         vColor = unique_id;
     } else {
         if (mode == PNTS_MODE_CLASSIFICATION) {
-            vec2 uv = vec2(classification/255., 0.5);
             vColor = texture2D(classificationTexture, uv);
         } else if (mode == PNTS_MODE_NORMAL) {
             vColor.rgb = abs(normal);
@@ -84,7 +87,7 @@ void main() {
             vec2 uv = vec2(numberOfReturns/255., 0.5);
             vColor = texture2D(discreteTexture, uv);
         } else if (mode == PNTS_MODE_POINT_SOURCE_ID) {
-            vec2 uv = vec2(mod(pointSourceID, NB_CLASS)/255., 0.5);
+            vec2 uv = vec2(mod(pointSourceID, SOURCE_ID_GROUP)/255., 0.5);
             vColor = texture2D(discreteTexture, uv);
         } else if (mode == PNTS_MODE_SCAN_ANGLE) {
             float i = (scanAngle - angleRange.x) / (angleRange.y - angleRange.x);
@@ -102,6 +105,10 @@ void main() {
         }
     }
 
+    if (texture2D(visiTexture, uv).r == 0.) {
+        vColor.a = 0.;
+    }
+
 #define USE_COLOR_ALPHA
 #include <morphcolor_vertex>
 #include <begin_vertex>
diff --git a/utils/debug/PointCloudDebug.js b/utils/debug/PointCloudDebug.js
index b2a963ad9d..2e1a8cb2fb 100644
--- a/utils/debug/PointCloudDebug.js
+++ b/utils/debug/PointCloudDebug.js
@@ -1,73 +1,55 @@
 import { PNTS_MODE, PNTS_SHAPE, PNTS_SIZE_MODE } from 'Renderer/PointsMaterial';
 
+const folderName = 'Styling';
+
 function getController(gui, name) {
-    let controller = null;
-    const controllers = gui.__folders.Styling.__controllers;
-    for (let i = 0; i < controllers.length; i += 1) {
-        const c = controllers[i];
-        if (c.property === name || c.name === name) {
-            controller = c;
-            break;
-        }
-    }
+    const controllers = gui.folders.filter(f => f._title === folderName)[0].controllers;
+    const controller = controllers.filter(c => (c.property === name || c.name === name))[0];
     return controller;
 }
 
-function hideController(gui, name) {
-    const controller = getController(gui, name);
-    if (controller) {
-        controller.__li.style.display = 'none';
-    }
-}
-
-function showController(gui, name) {
-    const controller = getController(gui, name);
-    if (controller) {
-        controller.__li.style.display = '';
-    }
-}
-
 function setupControllerVisibily(gui, displayMode, sizeMode) {
     displayMode =  parseInt(displayMode, 10);
     if ([PNTS_MODE.INTENSITY, PNTS_MODE.ELEVATION, PNTS_MODE.SCAN_ANGLE].includes(displayMode)) {
-        showController(gui, 'gradient');
+        getController(gui, 'gradient').show();
     } else {
-        hideController(gui, 'gradient');
+        getController(gui, 'gradient').hide();
     }
     if (PNTS_MODE.INTENSITY === displayMode) {
-        showController(gui, 'minIntensityRange');
-        showController(gui, 'maxIntensityRange');
+        getController(gui, 'minIntensityRange').show();
+        getController(gui, 'maxIntensityRange').show();
     } else {
-        hideController(gui, 'minIntensityRange');
-        hideController(gui, 'maxIntensityRange');
+        getController(gui, 'minIntensityRange').hide();
+        getController(gui, 'maxIntensityRange').hide();
     }
     if (PNTS_MODE.ELEVATION === displayMode) {
-        showController(gui, 'minElevationRange');
-        showController(gui, 'maxElevationRange');
+        getController(gui, 'minElevationRange').show();
+        getController(gui, 'maxElevationRange').show();
     } else {
-        hideController(gui, 'minElevationRange');
-        hideController(gui, 'maxElevationRange');
+        getController(gui, 'minElevationRange').hide();
+        getController(gui, 'maxElevationRange').hide();
     }
     if (PNTS_MODE.SCAN_ANGLE === displayMode) {
-        showController(gui, 'minAngleRange');
-        showController(gui, 'maxAngleRange');
+        getController(gui, 'minAngleRange').show();
+        getController(gui, 'maxAngleRange').show();
     } else {
-        hideController(gui, 'minAngleRange');
-        hideController(gui, 'maxAngleRange');
+        getController(gui, 'minAngleRange').hide();
+        getController(gui, 'maxAngleRange').hide();
     }
 
     sizeMode =  parseInt(sizeMode, 10);
     if (sizeMode === PNTS_SIZE_MODE.VALUE) {
-        hideController(gui, 'minAttenuatedSize');
-        hideController(gui, 'maxAttenuatedSize');
+        getController(gui, 'minAttenuatedSize').hide();
+        getController(gui, 'maxAttenuatedSize').hide();
     } else {
-        showController(gui, 'minAttenuatedSize');
-        showController(gui, 'maxAttenuatedSize');
+        getController(gui, 'minAttenuatedSize').show();
+        getController(gui, 'maxAttenuatedSize').show();
     }
 }
 
 export default {
     initTools(view, layer, datUi) {
+        datUi.title('Layer Controls');
         layer.debugUI = datUi.addFolder(`${layer.id}`);
 
         const update = () => {
@@ -89,7 +71,7 @@ export default {
         layer.dbgDisplayChildren = true;
         layer.dbgDisplayParents = true;
 
-        const styleUI = layer.debugUI.addFolder('Styling');
+        const styleUI = layer.debugUI.addFolder(folderName).close();
         if (layer.material.mode != undefined) {
             const modeNames = Object.keys(PNTS_MODE);
             const mode = modeNames.filter(v => PNTS_MODE[v] === layer.material.mode)[0];
@@ -98,6 +80,16 @@ export default {
                     layer.material.mode = PNTS_MODE[value];
                     update();
                 });
+
+            const classeUI = styleUI.addFolder('Classe Visibility').close();
+            Object.entries(layer.material.classificationScheme).forEach((classe) => {
+                classeUI.add(classe[1], 'visible').name(classe[1].name)
+                    .onChange(() => {
+                        layer.material.recomputeVisibleTexture();
+                        update();
+                    });
+            });
+
             const gradiantsNames = Object.keys(layer.material.gradients);
             styleUI.add({ gradient: gradiantsNames[0] }, 'gradient', gradiantsNames).name('gradient')
                 .onChange((value) => {
@@ -184,7 +176,7 @@ export default {
         }
 
         // UI
-        const debugUI = layer.debugUI.addFolder('Debug');
+        const debugUI = layer.debugUI.addFolder('Debug').close();
         debugUI.add(layer.bboxes, 'visible').name('Display Bounding Boxes').onChange(update);
         debugUI.add(layer, 'dbgStickyNode').name('Sticky node name').onChange(update);
         debugUI.add(layer, 'dbgDisplaySticky').name('Display sticky node').onChange(update);
