fix: 0

src/custom/materials/DepthBasicMaterial.js

@@ -16,6 +16,8 @@ export default class DepthBasicMaterial extends THREE.ShaderMaterial{
 			farPlane:      { type: 'f', 	value: 10000 }, 
 			depthTexture:   { type: 't', 	value: null }, 
 			opacity:        { type: 'f',	value: 1  },
+            //baseOpacity:    { type: 'f',	value: 1  },
+            mapOpaMultiplier:    { type: 'f',	value: 1  },
 			map:             { type: 't', 	value: o.map }, 
             mapColor:  {type:'v3',      value: o.mapColor ?  new THREE.Color(o.mapColor) :  new THREE.Color("#ffffff")},
             baseColor:     {type:'v3',      value: o.color ?  new THREE.Color(o.color) :  new THREE.Color("#ffffff")},
@@ -24,7 +26,7 @@ export default class DepthBasicMaterial extends THREE.ShaderMaterial{
             occlusionDistance :     { type: 'f', 	value:  o.occlusionDistance || 1  }, //变为backColor距离
             maxClipFactor :  { type: 'f', 	value: o.maxClipFactor || 1 },  //0-1 
             maxOcclusionFactor :  { type: 'f', 	value: o.maxOcclusionFactor || 1 },  //0-1
-            //mapScale:  { type: 'f', 	value:  o.mapScale || 1 },  //0-1
+            mapScale:  { 	value:  o.mapScale || new THREE.Vector2(1,1) },  //0-1   调间距
             
             startClipDis:  { type: 'f', 	value:  o.startClipDis || 0 },  //开始逐渐消失的距离
             startOcclusDis:  { type: 'f', 	value:  o.startOcclusDis || 0 },  //开始逐渐褪色的距离

src/custom/objects/tool/Path.js

@@ -35,6 +35,39 @@ const depthProps = {
     maxOcclusionFactor:0.9,
     maxClipFactor:1
 }
+
+/* const EdgeOpacity = {
+    default:{
+        whole: 0.5,  //箭头 
+        base: 0.3, //路径
+    },
+    click:{
+        whole: 0.8,  //箭头 
+        base: 0.5, //路径
+    },
+    hover:{
+        whole: 0.7,  //箭头 
+        base: 0.35, //路径
+    } 
+} */
+ 
+const EdgeOpacity = {
+    default:{
+        arrow: 3.125,    //箭头真实值是arrow * base
+        base: 0.16,  
+    },
+    click:{
+        arrow: 2.7,   
+        base: 0.35, 
+    },
+    hover:{
+        arrow: 2.8,  
+        base: 0.25, 
+    }  
+}
+ 
+ 
+
 const planeGeo = new THREE.PlaneBufferGeometry(1,1)
 const voidGeometry = new THREE.BufferGeometry() 
 
@@ -87,8 +120,10 @@ const getEndCaps = (function () {
         } 
         let endCaps = []
         let material = path.edge.material.clone()
-            material.map = map 
+            material.map = map  
+            //material.opacity = path.edge.material.opacity * path.edge.material.uniforms.baseOpacity.value 
             delete material.defines.mapOverlay
+            delete material.defines.useMapScale
         for(let i=0;i<2;i++){
             let cap = endCap.clone()
             cap.children[0].material = material
@@ -251,12 +286,17 @@ export class Path extends ctrlPolygon{
         }
         
         {//和measure不同的是它的边是连在一起的一整条
-            this.edge = new THREE.Mesh(voidGeometry,  new DepthBasicMaterial( $.extend({}, depthProps,{color: this.color ,  /* opacity: 0.6,  */side:2,/*  transparent:true,  */fadeFar: this.fadeFar})))
+            this.edge = new THREE.Mesh(voidGeometry,  new DepthBasicMaterial( $.extend({}, depthProps,{color: this.color ,  opacity: EdgeOpacity.default.base, side:2,  transparent:true, fadeFar: this.fadeFar})))
             //new THREE.MeshBasicMaterial({depthWrite:false, transparent:true, color:this.color || '#fff', opacity:0.5, side:2}))
             this.edge.material.defines.mapOverlay = true
+            this.edge.material.defines.useMapScale = true 
+            //this.edge.material.uniforms.baseOpacity.value = 0.3;  
+            this.edge.material.uniforms.mapOpaMultiplier.value = EdgeOpacity.default.arrow;  
+            this.edge.material.uniforms.mapScale.value.set(0.4,1)
             this.add(this.edge)
             this.edge.renderOrder = Potree.config.renderOrders.path.edge,  //和tag的一样，但为何遮不住它？好在一般底下有一层地面能遮住
             this.edge.name = 'pathEdge'
+             
             let addHoverEvent = ()=>{
                 let mouseover = (e) => {  
                     if(this.isNew)return
@@ -348,7 +388,7 @@ export class Path extends ctrlPolygon{
  
         
         this.initData(prop)
-        
+        this.setEdgeOpacity( EdgeOpacity.default.base )
         
 	}
     
@@ -520,6 +560,17 @@ export class Path extends ctrlPolygon{
         viewer.dispatchEvent('content_changed')
     }
     
+    setEdgeOpacity(o){
+        this.edge.material.opacity = this.edgeOpacity = o 
+        this.updateArrowOpacity()
+        viewer.dispatchEvent('content_changed')
+    }
+    updateArrowOpacity(){//自动调节箭头透明度乘数
+        let arrowOpacity = math.linearClamp(this.edge.material.opacity,[0, 0.1, 0.8,1],[10, 4, 1.2,0.6]);
+        [this.edge, this.endCaps[0].children[0]].forEach((e)=>{ 
+            e.material.uniforms.mapOpaMultiplier.value = arrowOpacity
+        })
+    }
     setLineHeight(len){
         if(len == this.lineHeight)return
         this.lineHeight = parseFloat(len)
@@ -623,7 +674,7 @@ export class Path extends ctrlPolygon{
                 this.UtoTMapArr = result.newUtoTMapArr
                 points = result.newPoints  
                 count = points.length 
-                
+                this.getTotalDistance(points)
                 //delete curve.UtoTMapArr 
             }
             let lastSideVec
@@ -656,7 +707,10 @@ export class Path extends ctrlPolygon{
                         sideVec = new THREE.Vector3().copy(nor).setZ(0).multiplyScalar(this.halfPathWidth)  //垂线
                         //console.log('接近0或180',angle, sideVec)
                     }else{
-                        let midVecLength = this.halfPathWidth / Math.sin(angle/2)   
+                        
+                        let r = Math.sin(angle/2)
+                        r = Math.sign(r) * Math.max(Math.abs(r), 0.1)  //加一个限制，防止夹角很小时突出很长
+                        let midVecLength = this.halfPathWidth / r 
                         sideVec = new THREE.Vector3().addVectors(OA,OB).normalize().multiplyScalar(midVecLength) //角平分线  （ 和上一个方向保持在同一侧，故而顺时针和逆时针方向不同  ）
                     } 
                     gatherLen += O.distanceTo(A)
@@ -805,7 +859,7 @@ export class Path extends ctrlPolygon{
                     i==0 ? e.quaternion.set(0,0,0,1) : e.quaternion.set(0,0,1,0)  //两个半圆拼成一个圆点
                 }
                 e.position.copy(points[i==0 ? 0 : len-1]) 
-                let s = this.halfPathWidth * 2.15
+                let s = this.halfPathWidth * 2.066//  （旧的128px的图是 2.15）
                 e.scale.set(s,s,s)
             } 
        })
@@ -979,42 +1033,49 @@ export class Path extends ctrlPolygon{
     }
     
     
+    
     updateSelectStyle(){
         
         
         //let c = new THREE.Color().set(this.color).getHSL({ h: 0, s: 0, l: 0 })
         let hsv = new THREE.Color().set(this.color).getHSV()
-        let color, arrowColor  
+        let color = this.color, arrowOpacity, baseOpacity
         if(this.selectStates.click){
             color = '#00C8AF'
-            arrowColor = '#ffffff'
-             
-        }else if(this.selectStates.hover){  
-            /* color = new THREE.Color().setHSL(c.h, c.s, c.l - 0.1 )   
-            arrowColor = new THREE.Color().setHSL(c.h, c.s, c.l >= 0.4 ? c.l - 0.3 : c.l + 0.3 )  */ 
-            color = new THREE.Color().setHSV(hsv.h, hsv.s, hsv.v - 10 )   
-            arrowColor = new THREE.Color().setHSV(hsv.h, hsv.s, hsv.v >= 40 ? hsv.v - 30 : hsv.v + 30 )
-            
+            //arrowColor = '#ffffff'
+            arrowOpacity = EdgeOpacity.click.arrow, baseOpacity = EdgeOpacity.click.base  
+        }else if(this.selectStates.hover){   
+            /* color = new THREE.Color().setHSV(hsv.h, hsv.s, hsv.v - 10 )   
+            arrowColor = new THREE.Color().setHSV(hsv.h, hsv.s, hsv.v >= 40 ? hsv.v - 30 : hsv.v + 30 ) */ 
+            //baseOpacity = EdgeOpacity.hover.base  
+            baseOpacity = this.edgeOpacity > 0.9 ? this.edgeOpacity - 0.1 : this.edgeOpacity + 0.1
+            //arrowOpacity = EdgeOpacity.hover.arrow 
         }else{
             //arrowColor = new THREE.Color().setHSL(c.h, c.s, c.l >= 0.4 ? c.l - 0.3 : c.l + 0.3 )  
-            arrowColor = new THREE.Color().setHSV(hsv.h, hsv.s, hsv.v >= 40 ? hsv.v - 30 : hsv.v + 30 )  
-            color = this.color
-            
+            //arrowColor = new THREE.Color().setHSV(hsv.h, hsv.s, hsv.v >= 40 ? hsv.v - 30 : hsv.v + 30 )   
+            //baseOpacity = EdgeOpacity.default.base  
+            baseOpacity = this.edgeOpacity 
+            //arrowOpacity = EdgeOpacity.default.arrow 
         }
         
-        if(this.arrows){
+        /* if(this.arrows){
             this.arrows.material.color.set(arrowColor);
         }else{
             this.edge.material.uniforms.mapColor.value.set(arrowColor)
-        }
-        ([this.edge, this.endCaps[0].children[0]].forEach(e=>{ 
+        } */
+        ([this.edge, this.endCaps[0].children[0]].forEach((e)=>{ 
             e.material.color.set(color)
+            e.material.opacity = baseOpacity
+            
             e.material.uniforms.maxClipFactor.value = this.selectStates.click ? 0.4 : this.selectStates.hover ? 0.6 : depthProps.maxClipFactor
             e.material.uniforms.occlusionDistance.value = this.selectStates.click ? 0.6 : this.selectStates.hover ? 0.7 : depthProps.occlusionDistance
         }))
+        
+        this.updateArrowOpacity()
     }
     
     
+    
     setPosition(index, position) {
         super.setPosition(index, position)
         let event = {
@@ -1080,7 +1141,7 @@ export class Path extends ctrlPolygon{
     
     updateArrowRepeat(){
         if(!this.edge.material.map)return 
-        this.edge.material.map.repeat.x = Math.round(this.totalLength / this.halfPathWidth * 0.5) * (this.reverse ? -1 : 1)
+        this.edge.material.map.repeat.x = Math.round(this.totalLength / this.halfPathWidth * 0.3) * (this.reverse ? -1 : 1)
         this.edge.material.map.needsUpdate = true
         this.edge.material.setUV()
     }
@@ -1094,8 +1155,8 @@ export class Path extends ctrlPolygon{
                 }) 
                 map.anisotropy = 2
                 map.wrapS = THREE.RepeatWrapping 
-                map.repeat.set(10,1.3)  
-                map.offset.set(0,-0.15)
+                map.repeat.set(10,1.6)  
+                map.offset.set(0,-0.3)
                 this.edge.material.map = map  
                 this.updateArrowRepeat()
             }else{

src/materials/shaders/depthBasic.fs

@@ -1,6 +1,6 @@
 
-uniform float opacity;
-//uniform float mapScale;
+uniform float opacity; 
+
 uniform vec3 baseColor;
 
 
@@ -11,22 +11,43 @@ uniform vec3 baseColor;
     varying vec2 vUv;
     uniform sampler2D map; 
     uniform vec3 mapColor;
+    #if defined useMapScale
+        uniform vec2 mapScale;
+    #endif
+    
+    #if defined mapOverlay
+        uniform float mapOpaMultiplier;
+    #endif
     
     vec4 applyMapColor(vec4 color){ 
         vec2 uv = vUv;
-        /*if(mapScale != 1.0){ 
-            uv = (vUv - 0.5) / mapScale + 0.5; 
-            if(uv.x > 1.0 || uv.y > 1.0 || uv.x < 0.0 || uv.y < 0.0){
-                //color = vec4(0.0,0.0,0.0,0.0);
-                discard;
-            } 
-        }*/
+     
+        #if defined useMapScale
+            /*uv = fract(uv  );  // 小数部分  这样会有白线，从0.999跳到0时跨过了白色区域
+            uv = (uv - 0.5) / mapScale + 0.5; 
+            uv = clamp(uv, 0.0, 1.0); // CLAMP_TO_EDGE 
+             */
+            
+            vec2 tileIndex  = floor(uv);
+            uv = (uv - tileIndex - 0.5) / mapScale + tileIndex + 0.5;
+            uv = clamp(uv, tileIndex, tileIndex + 1.0); 
+            
+            
+            /*if(uv.x > 1.0 || uv.y > 1.0 || uv.x < 0.0 || uv.y < 0.0){
+                discardMapCol = true;
+                //discard;  //这样写性能差 可以改成float isInside = step(0.0, uv.x) * step(uv.x, 1.0) *  step(0.0, uv.y) * step(uv.y, 1.0);
+            } */
+        #endif 
+         
         vec4 colorFromMap = texture2D(map, uv);
          
         #if defined mapOverlay
             //贴图叠加在基础色上，而非相乘
             colorFromMap.rgb *= mapColor;
-            color = color * (1.0-colorFromMap.a) + colorFromMap;
+            //color.a *= baseOpacity;
+            float mapAlpha = colorFromMap.a;
+            colorFromMap.a *= mapOpaMultiplier;
+            color = color * max(1.0-mapAlpha, 0.) + colorFromMap; 
         #else
             color *= colorFromMap;
              
@@ -79,7 +100,7 @@ void main() {
     
     //vec4 color = vec4(baseColor, opacity);
     vec4 color = vec4(baseColor, 1.0);
-    
+    float opacity_ = opacity;
     
     #if defined(GL_EXT_frag_depth) && defined(useDepth) || defined(FadeFar)  
        
@@ -146,7 +167,7 @@ void main() {
         #endif 
     #endif
     
-    color.a *= opacity;
+    color.a *= opacity_;
     gl_FragColor = color;
   
 }