Browse Source

feat:修改样式

jinx 4 years ago
parent
commit
d6563200e6
7 changed files with 295 additions and 280 deletions
  1. 11 3
      css/style.css
  2. 14 0
      locat/addDataSet.html
  3. 4 2
      locat/style.css
  4. 4 2
      style.css
  5. 1 1
      translations/zh.json
  6. 1 1
      数据参考/数据方面的笔记.txt
  7. 260 271
      笔记.js

+ 11 - 3
css/style.css

@@ -523,7 +523,7 @@ sidebar-menu-item>li icon {
 }
 
 
-/* 兴趣点 */
+/* 点 */
 
 .panel-heading .btn-group button {
     background: transparent;
@@ -1163,7 +1163,7 @@ attributes-editor .form-group .btn-primary:hover {
 }
 
 
-/* 导入/导出兴趣点 */
+/* 导入/导出点 */
 
 poi-export-import .collapse-style {
     display: none !important;
@@ -1494,7 +1494,7 @@ results-element .checkbox,
 }
 
 
-/* 右键兴趣点 */
+/* 右键点 */
 
 .context-menu-list {
     background: rgba(0, 0, 0, 0.5) !important;
@@ -1984,4 +1984,12 @@ i[title="复制当前放大程度"] {
 
 #PoiTypeVisibilityZoomMax {
     width: 100% !important;
+}
+
+#cke_editor1 {
+    height: auto !important;
+}
+
+#no_type_warning {
+    display: none !important;
 }

+ 14 - 0
locat/addDataSet.html

@@ -596,6 +596,20 @@
                     this.alat = this.showData.alat
                     this.blon = this.showData.blon
                     this.blat = this.showData.blat
+                },
+                moveEnd(e) {
+                    let obj = e.currentTarget
+                    obj.focus();
+                    var len = obj.value.length;
+                    if (document.selection) {
+                        var sel = obj.createTextRange();
+                        sel.moveStart('character', len);
+                        sel.collapse();
+                        sel.select();
+                    } else if (typeof obj.selectionStart == 'number' &&
+                        typeof obj.selectionEnd == 'number') {
+                        obj.selectionStart = obj.selectionEnd = len;
+                    }
                 }
 
 

+ 4 - 2
locat/style.css

@@ -141,7 +141,7 @@ form .formTitle {
     align-items: center;
     justify-content: space-between;
     box-sizing: border-box;
-    padding: 0 10px 0 0;
+    padding: 0 5px 0 0;
     margin-bottom: 10px;
 }
 
@@ -174,6 +174,8 @@ form .formTitle {
     color: #15BEC8;
     text-align: right;
     border: none !important;
+    padding: 0 5px;
+    box-sizing: border-box;
 }
 
 input::placeholder {
@@ -191,7 +193,7 @@ input::-webkit-input-placeholder {
 .inputItem .unit {
     font-size: 14px;
     color: rgba(255, 255, 255, 0.4);
-    margin-left: 5px;
+    /* margin-left: 5px; */
 }
 
 .allIpt {

+ 4 - 2
style.css

@@ -141,7 +141,7 @@ form .formTitle {
     align-items: center;
     justify-content: space-between;
     box-sizing: border-box;
-    padding: 0 10px 0 0;
+    padding: 0 5px 0 0;
     margin-bottom: 10px;
 }
 
@@ -174,6 +174,8 @@ form .formTitle {
     color: #15BEC8;
     text-align: right;
     border: none !important;
+    padding: 0 5px;
+    box-sizing: border-box;
 }
 
 input::placeholder {
@@ -191,7 +193,7 @@ input::-webkit-input-placeholder {
 .inputItem .unit {
     font-size: 14px;
     color: rgba(255, 255, 255, 0.4);
-    margin-left: 5px;
+    /* margin-left: 5px; */
 }
 
 .allIpt {

File diff suppressed because it is too large
+ 1 - 1
translations/zh.json


+ 1 - 1
数据参考/数据方面的笔记.txt

@@ -90,7 +90,7 @@ camera_heads.json里:
 	"depth_fn_format": "pano_depth/tiles/r$RES/$ID100/$ID-pano-depth-r$RES-$TILE.png",
 
 **********************************************************************************************************************************************************************************************
-左侧栏的兴趣点对应:poi_types
+左侧栏的点对应:poi_types
 
 **********************************************************************************************************************************************************************************************
 																									调试						

+ 260 - 271
笔记.js

@@ -1,29 +1,29 @@
-datasets中的orientation为模型整体绕z轴的旋转角度,初始为0
+datasets中的orientation为模型整体绕z轴的旋转角度, 初始为0
 
 
 filter中的:
 
- 
+
 
 数据集校准后不变的值有:
-dataset_orientation(永远存储最初始的点位的quaternion,在旋转时也不变,因此它等于没有旋转时的orientation)---- image.datasetOrientation
-dataset_floor_orientation(一般和dataset_orientation值一样) 
+dataset_orientation( 永远存储最初始的点位的quaternion, 在旋转时也不变, 因此它等于没有旋转时的orientation)-- --image.datasetOrientation
+dataset_floor_orientation( 一般和dataset_orientation值一样)
 dataset_location 真实的三维坐标
 dataset_floor_location
 
 
 
 数据集校准后改变的值有:
-orientation----image.orientation(在旋转时实时变,且是根据模型旋转度数和dataset_orientation来算的,所以如果dataset_orientation不对,就会算错。)
-location----image.location   xy为经纬度
+orientation-- --image.orientation( 在旋转时实时变, 且是根据模型旋转度数和dataset_orientation来算的, 所以如果dataset_orientation不对, 就会算错。)
+location-- --image.location xy为经纬度
 floor_location
 
 
-------------------------------------------------
+-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
 
-查看全局: 
+查看全局:
 var view = window.IV.getMainView()
-view.currentImage.id  
+view.currentImage.id
 view.ImageService.images
 
 
@@ -31,152 +31,157 @@ view.ImageService.images
 
 
 
-POI: 兴趣点   PoiService  PoiEditorDirective PoiEntity
-t.prototype.isPreviewMenuVisible  ---- canDisplayResultDetails  --- PoiService.openedPoi - setOpenedPoi
+POI: 热点 PoiService PoiEditorDirective PoiEntity
+t.prototype.isPreviewMenuVisible-- --canDisplayResultDetails-- - PoiService.openedPoi - setOpenedPoi
 
-MeasurementLineMaterial : 测量线材质, 有蓝色标准实线和灰色透明虚线两种状态
+MeasurementLineMaterial: 测量线材质, 有蓝色标准实线和灰色透明虚线两种状态
 
 
-数据集校准 saveAlignment =      selectedDatasets
+数据集校准 saveAlignment = selectedDatasets
 
-this.underlayScene.children[3] 包含32个子mesh, 是全景图sphere   其材质fragment在下方
-overlayScene 里有marker , name: "location" 
+this.underlayScene.children[3] 包含32个子mesh, 是全景图sphere 其材质fragment在下方
+overlayScene 里有marker, name: "location"?
 
 QuaternionFactory VectorFactory
- 
-加载深度图loadDepthImage   获取深度值getDepth(用于更新reticule位置)。深度图用于修改全景图sphere的gl_FragDepthEXT
+
+加载深度图loadDepthImage 获取深度值getDepth( 用于更新reticule位置)。 深度图用于修改全景图sphere的gl_FragDepthEXT
 getCoordinates doPointCloudPicking doDepthImagePicking
 
 t.NORMAL = "normal",
-t.DATASET_ALIGNMENT = "datasetAlignment",
-t.GEO_REGISTRATION = "GeoRegistration",
-t.SITE_MODEL_EDITOR = "SiteModelEditor",
-t.NAV_GRAPH_EDITOR = "NavGraphEditor",
-t.DOWNLOAD_POINT_CLOUD = "DownloadPointCloud",
-t.MEASUREMENTS = "Measurements"
+    t.DATASET_ALIGNMENT = "datasetAlignment",
+    t.GEO_REGISTRATION = "GeoRegistration",
+    t.SITE_MODEL_EDITOR = "SiteModelEditor",
+    t.NAV_GRAPH_EDITOR = "NavGraphEditor",
+    t.DOWNLOAD_POINT_CLOUD = "DownloadPointCloud",
+    t.MEASUREMENTS = "Measurements"
 
 
 //--关于地图和 地图上的图片-------关键词mapSizeM
-updateSubTiles更新地图tile,如果不存在就加载
+updateSubTiles更新地图tile, 如果不存在就加载
 
 
 //图片上传https://testlaser.4dkankan.com/maxkk/t-iksBApb/locat/addDataSet.html
 var QuaternionFactory = { // 同 IndoorViewerAPI的 QuaternionFactory.toArray
-    toArray : function(quaternion){ 
-        var rot90 =  (new THREE.Quaternion).setFromAxisAngle(new THREE.Vector3(0,0,1), THREE.Math.degToRad(-90)) //add 转入时旋转90度
-          , rot90Invert = rot90.clone().inverse()//add 转出时旋回90度
-        var t1 = quaternion.clone().multiply(rot90Invert); 
-        var e = t1.toArray();
-        return [e[3], e[0], e[1], e[2]] 
+        toArray: function(quaternion) {
+            var rot90 = (new THREE.Quaternion).setFromAxisAngle(new THREE.Vector3(0, 0, 1), THREE.Math.degToRad(-90)) //add 转入时旋转90度
+                ,
+                rot90Invert = rot90.clone().inverse() //add 转出时旋回90度
+            var t1 = quaternion.clone().multiply(rot90Invert);
+            var e = t1.toArray();
+            return [e[3], e[0], e[1], e[2]]
+        }
     }
-}
-//获取旋转:
-var getQuaternion = function(angle){//angle:0-360 角度
-    var quaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler(0,0,THREE.Math.degToRad(-angle)));
-    return QuaternionFactory.toArray(quaternion)
-    
-}
-//获取缩放    
-var getSize = function(imgWidth, scale){//imgWidth:图片宽度, scale缩放值(x==y)
-    var level = imgWidth / 1024;  //以1024为基准
-    return 95.54628610610962 * level * scale; // 95.54628610610962 = 38.21851444244385 * (2+0.5), 其中38.21851444244385 = mapSizeM / Math.pow(2,maxDepth) = 40075017 / Math.pow(2,20) 可能表示地图在缩放zoom为20时的单块宽度
-                                            //0.5是试出来的,因为图片层的bias=0.5, 暂不知道其用处,所以试用了下……
-                                            //另:可能不是*2.5,  也许是*256/100 ?  不知道如何精确测试下
-                                            //有出现过一次错误是2048时的图但是大了一倍,发现是传图的那个网页在缩放值为0.1(即图为1:1显示,函数canvasFunction(extent, scale )时只有1024大小,后来刷新重新操作就是2048然后就正确。所以可能是这个网页出错。
-} 
-//位置直接使用中心点的经纬度               
-//-------------------------------------------------
-
-=======shader=======
-全景图 fragment
+    //获取旋转:
+var getQuaternion = function(angle) { //angle:0-360 角度
+        var quaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler(0, 0, THREE.Math.degToRad(-angle)));
+        return QuaternionFactory.toArray(quaternion)
+
+    }
+    //获取缩放    
+var getSize = function(imgWidth, scale) { //imgWidth:图片宽度, scale缩放值(x==y)
+        var level = imgWidth / 1024; //以1024为基准
+        return 95.54628610610962 * level * scale; // 95.54628610610962 = 38.21851444244385 * (2+0.5), 其中38.21851444244385 = mapSizeM / Math.pow(2,maxDepth) = 40075017 / Math.pow(2,20) 可能表示地图在缩放zoom为20时的单块宽度
+        //0.5是试出来的,因为图片层的bias=0.5, 暂不知道其用处,所以试用了下……
+        //另:可能不是*2.5,  也许是*256/100 ?  不知道如何精确测试下
+        //有出现过一次错误是2048时的图但是大了一倍,发现是传图的那个网页在缩放值为0.1(即图为1:1显示,函数canvasFunction(extent, scale )时只有1024大小,后来刷新重新操作就是2048然后就正确。所以可能是这个网页出错。
+    }
+    //位置直接使用中心点的经纬度               
+    //-------------------------------------------------
+
+===
+=== = shader === === =
+    全景图 fragment
 
 uniform sampler2D map;
 uniform float opacity;
 varying vec2 vUv;
 
-#ifdef USE_ALPHAMAP
-    uniform sampler2D alphaMap;
-#endif
-
-#ifdef GL_EXT_frag_depth
-    uniform sampler2D depthMap;
-    uniform mat4 inverseProjectionMatrix;
-    uniform mat4 projectionMatrix;
-    uniform vec4 viewport;
-#endif
-
-void main()
-{
-	vec4 color = texture2D(map, vUv);
-	float alpha = opacity;
-
-    #ifdef USE_ALPHAMAP
-        alpha *= texture2D(alphaMap, vUv).g;
-    #endif
-
-	gl_FragColor = vec4(color.r, color.g, color.b, alpha);
-
-    #ifdef GL_EXT_frag_depth
-
-        /*
-        * Useful resources:
-        *
-        * https://www.khronos.org/opengl/wiki/Vertex_Post-Processing#Viewport_transform
-        *   Clipping, perspective divide viewport transform
-        *
-        * https://www.khronos.org/opengl/wiki/Compute_eye_space_from_window_space
-        *   From window (viewport) space back to eye space in GLSL
-        *
-        * https://www.khronos.org/opengl/wiki/Vertex_Transformation
-        *   Summary of transformations object -> world -> eye (camera, view) -> clip -> NDC -> window
-        *
-        * http://slideplayer.com/slide/6837153/#
-        *   Overview presentation
-        *
-        * http://www.shaderific.com/glsl-variables/
-        *   GLSL built-in variables
-        */
-
-        vec4 depth = texture2D(depthMap, vUv);
-        //float distance = depth.r + 256. * (depth.g + 256. * depth.b);
-        //distance *= 255. * .001;           // distance is now in meters
-        
-        //更改
-        float distance = (depth.g + depth.r / 256.) * 255.;  //为什么要乘以255
-
-       // return  r[1] + r[0] / 256 
-
-
-        vec4 ndcPos;
-        ndcPos.xy = ((2.0 * gl_FragCoord.xy) - (2.0 * viewport.xy)) / (viewport.zw) - 1.;
-        ndcPos.z = (2.0 * gl_FragCoord.z - gl_DepthRange.near - gl_DepthRange.far) /
-            (gl_DepthRange.far - gl_DepthRange.near);
-        ndcPos.w = 1.0;
-
-        vec4 clipPos = ndcPos / gl_FragCoord.w;
-        vec4 eyePos = inverseProjectionMatrix * clipPos;
-
-        distance += .1;          // add a safety margin
-
-        vec4 eyePos2 = vec4(normalize(eyePos.xyz) * distance, 1.);
-        vec4 clipPos2 = projectionMatrix * eyePos2;
-        vec4 ndcPos2 = clipPos2 * 1. / clipPos2.w;
-
-        gl_FragDepthEXT = 0.5 * ((gl_DepthRange.far - gl_DepthRange.near) * ndcPos2.z
-                + gl_DepthRange.near + gl_DepthRange.far);
-
-    #endif
+#
+ifdef USE_ALPHAMAP
+uniform sampler2D alphaMap;#
+endif
+
+# ifdef GL_EXT_frag_depth
+uniform sampler2D depthMap;
+uniform mat4 inverseProjectionMatrix;
+uniform mat4 projectionMatrix;
+uniform vec4 viewport;#
+endif
+
+void main() {
+    vec4 color = texture2D(map, vUv);
+    float alpha = opacity;
+
+    #
+    ifdef USE_ALPHAMAP
+    alpha *= texture2D(alphaMap, vUv).g;#
+    endif
+
+    gl_FragColor = vec4(color.r, color.g, color.b, alpha);
+
+    #
+    ifdef GL_EXT_frag_depth
+
+    /*
+     * Useful resources:
+     *
+     * https://www.khronos.org/opengl/wiki/Vertex_Post-Processing#Viewport_transform
+     *   Clipping, perspective divide viewport transform
+     *
+     * https://www.khronos.org/opengl/wiki/Compute_eye_space_from_window_space
+     *   From window (viewport) space back to eye space in GLSL
+     *
+     * https://www.khronos.org/opengl/wiki/Vertex_Transformation
+     *   Summary of transformations object -> world -> eye (camera, view) -> clip -> NDC -> window
+     *
+     * http://slideplayer.com/slide/6837153/#
+     *   Overview presentation
+     *
+     * http://www.shaderific.com/glsl-variables/
+     *   GLSL built-in variables
+     */
+
+    vec4 depth = texture2D(depthMap, vUv);
+    //float distance = depth.r + 256. * (depth.g + 256. * depth.b);
+    //distance *= 255. * .001;           // distance is now in meters
+
+    //更改
+    float distance = (depth.g + depth.r / 256.) * 255.; //为什么要乘以255
+
+    // return  r[1] + r[0] / 256 
+
+
+    vec4 ndcPos;
+    ndcPos.xy = ((2.0 * gl_FragCoord.xy) - (2.0 * viewport.xy)) / (viewport.zw) - 1.;
+    ndcPos.z = (2.0 * gl_FragCoord.z - gl_DepthRange.near - gl_DepthRange.far) /
+        (gl_DepthRange.far - gl_DepthRange.near);
+    ndcPos.w = 1.0;
+
+    vec4 clipPos = ndcPos / gl_FragCoord.w;
+    vec4 eyePos = inverseProjectionMatrix * clipPos;
+
+    distance += .1; // add a safety margin
+
+    vec4 eyePos2 = vec4(normalize(eyePos.xyz) * distance, 1.);
+    vec4 clipPos2 = projectionMatrix * eyePos2;
+    vec4 ndcPos2 = clipPos2 * 1. / clipPos2.w;
+
+    gl_FragDepthEXT = 0.5 * ((gl_DepthRange.far - gl_DepthRange.near) * ndcPos2.z +
+        gl_DepthRange.near + gl_DepthRange.far);
+
+    #
+    endif
 
 }
- 
 
 
---------
+
+-- -- -- --
 MeasurementLineMaterial vertex
 
 
 
-"attribute vec3 previous;
+    "attribute vec3 previous;
 attribute vec3 next;
 attribute float side;
 attribute float width;
@@ -197,72 +202,64 @@ varying vec4 vColor;
 varying vec4 vDashColor;
 varying float vCounters;
 
-vec2 fix(vec4 i, float aspect)
-{
-	vec2 res = i.xy / i.w;
-	res.x *= aspect;
-	vCounters = counters;
-	return res;
+vec2 fix(vec4 i, float aspect) {
+    vec2 res = i.xy / i.w;
+    res.x *= aspect;
+    vCounters = counters;
+    return res;
 }
 
 // This vertex shader is a copy of the one supplied by MeshLineMaterial.
 // It supports drawing dashed lines.
-void main()
-{
-	float aspect = resolution.x / resolution.y;
-	float pixelWidthRatio = 1.0 / (resolution.x * projectionMatrix[0][0]);
-
-	vColor = vec4(color, opacity);
-	vDashColor = vec4(dashColor, dashOpacity);
-	vUV = uv;
-
-	mat4 m = projectionMatrix * modelViewMatrix;
-	vec4 finalPosition = m * vec4(position, 1.0);
-	vec4 prevPos = m * vec4(previous, 1.0);
-	vec4 nextPos = m * vec4(next, 1.0);
-
-	vec2 currentP = fix(finalPosition, aspect);
-	vec2 prevP = fix(prevPos, aspect);
-	vec2 nextP = fix(nextPos, aspect);
-
-	float pixelWidth = finalPosition.w * pixelWidthRatio;
-	float w = 1.8 * pixelWidth * lineWidth * width;
-
-	if (sizeAttenuation == 1.0)
-	{
-		w = 1.8 * lineWidth * width;
-	}
-
-	vec2 dir;
-	if (nextP == currentP)
-	{
-		dir = normalize(currentP - prevP);
-	}
-	else if (prevP == currentP)
-	{
-		dir = normalize(nextP - currentP);
-	}
-	else
-	{
-		vec2 dir1 = normalize(currentP - prevP);
-		vec2 dir2 = normalize(nextP - currentP);
-		dir = normalize(dir1 + dir2);
-
-		vec2 perp = vec2(-dir1.y, dir1.x);
-		vec2 miter = vec2(-dir.y, dir.x);
-	}
-
-	vec2 normal = vec2(-dir.y, dir.x);
-	normal.x /= aspect;
-	normal *= .5 * w;
-
-	vec4 offset = vec4(normal * side, 0.0, 1.0);
-	finalPosition.xy += offset.xy;
-
-	gl_Position = finalPosition;
-}
---------
-MeasurementLineMaterial fragment
+void main() {
+        float aspect = resolution.x / resolution.y;
+        float pixelWidthRatio = 1.0 / (resolution.x * projectionMatrix[0][0]);
+
+        vColor = vec4(color, opacity);
+        vDashColor = vec4(dashColor, dashOpacity);
+        vUV = uv;
+
+        mat4 m = projectionMatrix * modelViewMatrix;
+        vec4 finalPosition = m * vec4(position, 1.0);
+        vec4 prevPos = m * vec4(previous, 1.0);
+        vec4 nextPos = m * vec4(next, 1.0);
+
+        vec2 currentP = fix(finalPosition, aspect);
+        vec2 prevP = fix(prevPos, aspect);
+        vec2 nextP = fix(nextPos, aspect);
+
+        float pixelWidth = finalPosition.w * pixelWidthRatio;
+        float w = 1.8 * pixelWidth * lineWidth * width;
+
+        if (sizeAttenuation == 1.0) {
+            w = 1.8 * lineWidth * width;
+        }
+
+        vec2 dir;
+        if (nextP == currentP) {
+            dir = normalize(currentP - prevP);
+        } else if (prevP == currentP) {
+            dir = normalize(nextP - currentP);
+        } else {
+            vec2 dir1 = normalize(currentP - prevP);
+            vec2 dir2 = normalize(nextP - currentP);
+            dir = normalize(dir1 + dir2);
+
+            vec2 perp = vec2(-dir1.y, dir1.x);
+            vec2 miter = vec2(-dir.y, dir.x);
+        }
+
+        vec2 normal = vec2(-dir.y, dir.x);
+        normal.x /= aspect;
+        normal *= .5 * w;
+
+        vec4 offset = vec4(normal * side, 0.0, 1.0);
+        finalPosition.xy += offset.xy;
+
+        gl_Position = finalPosition;
+    }
+    -- -- -- --
+    MeasurementLineMaterial fragment
 
 
 
@@ -293,90 +290,82 @@ varying float vCounters;
 
 // Converts the exponential depth value from the depth buffer to a linear value
 // See https://learnopengl.com/Advanced-OpenGL/Depth-testing for more information about this formula
-float convertToLinear(float zValue)
-{
-	float z = zValue * 2.0 - 1.0;
-	return (2.0 * nearPlane * farPlane) / (farPlane + nearPlane - z * (farPlane - nearPlane));
+float convertToLinear(float zValue) {
+    float z = zValue * 2.0 - 1.0;
+    return (2.0 * nearPlane * farPlane) / (farPlane + nearPlane - z * (farPlane - nearPlane));
 }
 
-void main()
-{
-	vec4 c = vDashColor;
-
-	// <-- The following section of the shader is copied from MeshLineMaterial
-
-	// Sample the fragment from a texture if such is supplied
-	if (useMap == 1.0)
-	{
-		c *= texture2D(map, vUV * repeat);
-	}
-
-	// Sample the fragment's alpha value from an alpha texture if such is supplied
-	if (useAlphaMap == 1.0)
-	{
-		c.a *= texture2D(alphaMap, vUV * repeat).a;
-	}
-
-	// Discard the fragment if below the alpha threshold
-	if (c.a < alphaTest)
-	{
-		discard;
-	}
-
-	// If the line is dashed, set the alpha value of the fragment according to the line segment it belongs to
-	if (useDash == 1.0)
-	{
-		c.a *= ceil(mod(vCounters + dashOffset, dashArray) - (dashArray * dashRatio));
-	}
-
-	// <-- end of copied code
-
-#ifdef GL_EXT_frag_depth
-	// mixFactor and clipFactor define the color mixing proportion between the states of
-	// full visibility and occluded visibility
-	// and
-	// full visibility and total invisibility
-	float mixFactor = 0.0;
-	float clipFactor = 0.0;
-
-	// The linear depth value of the current fragment
-	float fragDepth = convertToLinear(gl_FragCoord.z);
-
-	// The coordinates of the current fragment in the depth texture
-	vec2 depthTxtCoords = vec2(gl_FragCoord.x - viewportOffset.x, gl_FragCoord.y) / viewportSize;
-
-	// The linear depth value of the pixel occupied by this fragment in the depth buffer
-	float textureDepth = convertToLinear(texture2D(depthTexture, depthTxtCoords).r);
-
-	// The difference between the two depths
-	float delta = textureDepth - fragDepth;
-
-	if (delta < 0.0)
-	{
-		// occlusionDistance and clipDistance define the width of the respective zones and
-		// mixFactor and clipFactor express the interpolation between the two colors depending on the position
-		// of the current fragment withing those zones.
-		mixFactor = clamp(delta / occlusionDistance, 0.0, 1.0);
-		clipFactor = clamp(delta / clipDistance, 0.0, 1.0);
-	}
-	// If the fragment is totally transparent, don't bother drawing it
-	if (clipFactor == 1.0)
-	{
-		discard;
-	}
-#else
-	float mixFactor = 0.0;
-	float clipFactor = 0.0;
-#endif
-
-	// Calculate the color of the dashed version of the line
-	vec4 backColor = vec4(c.rgb, c.a * step(vCounters, visibility));
-
-	// Mix between the solid and the dahsed versions of the line according to the mixFactor
-	gl_FragColor = mix(vColor, backColor, mixFactor);
-
-	// Set the alpha value of the fragment according to the clipFactor
-	// Note that clipFactor was previously clamped [0.0;1.0]
-	gl_FragColor.a *= (1.0 - clipFactor);
-}
+void main() {
+    vec4 c = vDashColor;
+
+    // <-- The following section of the shader is copied from MeshLineMaterial
+
+    // Sample the fragment from a texture if such is supplied
+    if (useMap == 1.0) {
+        c *= texture2D(map, vUV * repeat);
+    }
+
+    // Sample the fragment's alpha value from an alpha texture if such is supplied
+    if (useAlphaMap == 1.0) {
+        c.a *= texture2D(alphaMap, vUV * repeat).a;
+    }
+
+    // Discard the fragment if below the alpha threshold
+    if (c.a < alphaTest) {
+        discard;
+    }
+
+    // If the line is dashed, set the alpha value of the fragment according to the line segment it belongs to
+    if (useDash == 1.0) {
+        c.a *= ceil(mod(vCounters + dashOffset, dashArray) - (dashArray * dashRatio));
+    }
 
+    // <-- end of copied code
+
+    #
+    ifdef GL_EXT_frag_depth
+    // mixFactor and clipFactor define the color mixing proportion between the states of
+    // full visibility and occluded visibility
+    // and
+    // full visibility and total invisibility
+    float mixFactor = 0.0;
+    float clipFactor = 0.0;
+
+    // The linear depth value of the current fragment
+    float fragDepth = convertToLinear(gl_FragCoord.z);
+
+    // The coordinates of the current fragment in the depth texture
+    vec2 depthTxtCoords = vec2(gl_FragCoord.x - viewportOffset.x, gl_FragCoord.y) / viewportSize;
+
+    // The linear depth value of the pixel occupied by this fragment in the depth buffer
+    float textureDepth = convertToLinear(texture2D(depthTexture, depthTxtCoords).r);
+
+    // The difference between the two depths
+    float delta = textureDepth - fragDepth;
+
+    if (delta < 0.0) {
+        // occlusionDistance and clipDistance define the width of the respective zones and
+        // mixFactor and clipFactor express the interpolation between the two colors depending on the position
+        // of the current fragment withing those zones.
+        mixFactor = clamp(delta / occlusionDistance, 0.0, 1.0);
+        clipFactor = clamp(delta / clipDistance, 0.0, 1.0);
+    }
+    // If the fragment is totally transparent, don't bother drawing it
+    if (clipFactor == 1.0) {
+        discard;
+    }#
+    else
+        float mixFactor = 0.0;
+    float clipFactor = 0.0;#
+    endif
+
+    // Calculate the color of the dashed version of the line
+    vec4 backColor = vec4(c.rgb, c.a * step(vCounters, visibility));
+
+    // Mix between the solid and the dahsed versions of the line according to the mixFactor
+    gl_FragColor = mix(vColor, backColor, mixFactor);
+
+    // Set the alpha value of the fragment according to the clipFactor
+    // Note that clipFactor was previously clamped [0.0;1.0]
+    gl_FragColor.a *= (1.0 - clipFactor);
+}