浏览代码

Merge branch 'master' of http://192.168.0.115:3000/bill/fuse-code

bill 2 年之前
父节点
当前提交
b7f61d9990
共有 3 个文件被更改,包括 270 次插入90 次删除
  1. 234 68
      public/lib/potree/potree.js
  2. 1 1
      public/lib/potree/potree.js.map
  3. 35 21
      src/sdk/cover/index.js

+ 234 - 68
public/lib/potree/potree.js

@@ -793,7 +793,7 @@
         intersectOnObjs:false,
         intersectWhenHover:true,
 
-
+        notAdditiveBlending:false, //点云是否使用普通的blend, 否则会曝光过渡
         precision:2  // 两位小数
     };
      
@@ -71846,7 +71846,7 @@ void main() {
 
     			let node = stack.pop();
 
-    			if (node instanceof PointCloudTree) {
+    			if (node instanceof PointCloudTree) { 
     				octrees.push(node);
     				continue;
     			}
@@ -72385,12 +72385,15 @@ void main() {
                 
                 if(params.notAdditiveBlending){
                     gl.blendFuncSeparate( gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA ); //NormalBlending 
+                    gl.enable(gl.DEPTH_TEST);
+                    gl.depthMask(true); //如果不开启depthWrite,深度会错乱。 
                 }else {
                     gl.blendFunc(gl.SRC_ALPHA, gl.ONE); //AdditiveBlending   原本
-                }
+                    gl.disable(gl.DEPTH_TEST);
+                    gl.depthMask(false);
+                } 
+    			
     			
-    			gl.depthMask(false);
-    			gl.disable(gl.DEPTH_TEST);
     		} else {
     			gl.disable(gl.BLEND);
     			gl.depthMask(true);
@@ -72733,11 +72736,42 @@ void main() {
     		// camera.matrixWorldInverse.invert(camera.matrixWorld);
 
     		const traversalResult = this.traverse(scene);
-
-
+            
+            //排序
+            if(Potree.settings.notAdditiveBlending){//add 
+                
+                traversalResult.octrees.forEach(tree=>{
+                    if(tree.material.opacity==1){
+                        tree._z = Infinity; //不透明的先渲染
+                    }else {
+                        let center = tree.boundCenter ? tree.boundCenter.clone() : tree.boundingBox.getCenter(tree.boundCenter).applyMatrix4(tree.matrixWorld); 
+                        center.project(camera); 
+                        tree._z = center.z; 
+                    }
+                });   
+                     
+                traversalResult.octrees.sort((tree1,tree2)=>{ 
+                    return tree2._z - tree1._z //降序  (-1 朝外)。 离屏幕近的后渲染
+                });
+            }
+            
+            
+            
+            
     		// RENDER
     		for (const octree of traversalResult.octrees) {
     			let nodes = octree.visibleNodes;
+                
+                
+                
+                /* nodes.sort((node1,node2)=>{//姑且
+                    
+                    let center = node.getBoundingSphere().center.clone().applyMatrix4(octree.matrixWorld)
+                    return  
+                    
+                    
+                }) */
+                
     			this.renderOctree(octree, nodes, camera, target, params);
     		}
 
@@ -80357,8 +80391,7 @@ void main() {
             if(!this.viewport)return
             let right = this.viewport.left + this.viewport.width;
             this.dom.css({'right':((1-right)*100 + 1) + '%'});
-            
-            //this.dom.css({'right':'none','left':config.isMobile? "1%" : "2%"})
+             
         }
         
     }
@@ -80848,7 +80881,10 @@ void main() {
                     } 
                     if(Potree.settings.intersectOnObjs){// model也要渲染到rtEDL
                         camera.layers.set(Potree.config.renderLayers.model);
+                        viewer.objs.traverse(e=>{if(e.material)e._OlddepthWrite = e.material.depthWrite, e.material.depthWrite = true;}); //否则半透明的mesh无法遮住测量线
                         viewer.renderer.render(viewer.scene.scene, camera);
+                        viewer.objs.traverse(e=>{if(e.material)e.material.depthWrite = e._OlddepthWrite;});
+                        //缺点:半透明的model 就算完全透明, 也会遮住测量线
                     }
                     //test
                     /* {
@@ -80913,14 +80949,12 @@ void main() {
                 }else {
                     //渲染点云 (直接用rtEDL上的会失去抗锯齿)
                     
-                    let prop =   {
-                            shadowMaps:  lights.length > 0 ? [this.shadowMap] : null,
-                            clipSpheres: viewer.scene.volumes.filter(v => (v instanceof SphereVolume)) 
-                        };
-                    if(Potree.settings.editType == 'merge'){//add 否则透明的点云会挡住后面的模型。 加上这句后竟然透明不会叠加了!
-                        prop.depthTest = prop.depthWrite = true;
-                        prop.notAdditiveBlending = true;
-                    } 
+                    let prop = {
+                        shadowMaps:  lights.length > 0 ? [this.shadowMap] : null,
+                        clipSpheres: viewer.scene.volumes.filter(v => (v instanceof SphereVolume)) ,
+                        notAdditiveBlending: Potree.settings.notAdditiveBlending//add 否则透明的点云会挡住后面的模型。 加上这句后竟然透明不会叠加了!
+                    };
+                     
                     viewer.pRenderer.render(viewer.scene.scenePointCloud, camera, null , prop);  
                 }
             }        
@@ -117923,7 +117957,7 @@ ENDSEC
                 };
                 let mouseUp = (e)=>{
                      
-                    viewer.outlinePass.edgeStrength =  this.selected.isPointcloud ? edgeStrengths.pointcloud : edgeStrengths.glb;
+                    this.updateEdgeStrength();
                      
                 };
                 this.transformControls.addEventListener('mouseDown',mouseDown);
@@ -118081,10 +118115,9 @@ ENDSEC
                 viewer.addEventListener('global_drop', (e)=>{
                     dragInfo = null;
                     this.clearTranCursor();
-                     
-                    if(this.selected/*  && this.selected.isPointcloud */){ 
-                        viewer.outlinePass.edgeStrength = this.selected.isPointcloud ? edgeStrengths.pointcloud : edgeStrengths.glb;
-                    } 
+                      
+                    this.updateEdgeStrength();
+                      
                     
                 });
             
@@ -118232,11 +118265,10 @@ ENDSEC
                
                 this.showModelOutline(model);
                 
-                if(model.isPointcloud){
-                    viewer.outlinePass.edgeStrength = edgeStrengths.pointcloud;
-                }else {
-                    viewer.outlinePass.edgeStrength = edgeStrengths.glb;
-                }
+                
+                
+                this.updateEdgeStrength();
+                
                 //console.log('selectModel', model)
                 
             }else { 
@@ -118281,7 +118313,14 @@ ENDSEC
             }
         },
         
-        
+        updateEdgeStrength(){
+            if(!this.selected)return
+            if(this.selected.isPointcloud){
+                viewer.outlinePass.edgeStrength = edgeStrengths.pointcloud;// / this.selected.material.opacity  
+            }else {
+                viewer.outlinePass.edgeStrength = edgeStrengths.glb;
+            }  
+        },
         focusOn(objects, duration = 400, fitBound=true, dontLookUp){  
             if(!(objects instanceof Array)){
                 objects = [objects];
@@ -125711,6 +125750,8 @@ ENDSEC
     	this.renderTargetBlurBuffer2.texture.generateMipmaps = false; */
 
     	this.edgeDetectionMaterial = this.getEdgeDetectionMaterial(this.edgeStrength);
+         
+        
     	this.renderTargetEdgeBuffer1 = new WebGLRenderTarget( resx, resy, pars );
     	this.renderTargetEdgeBuffer1.texture.name = "OutlinePass.edge1";
     	this.renderTargetEdgeBuffer1.texture.generateMipmaps = false;
@@ -125999,8 +126040,19 @@ ENDSEC
                 //renderer.setRenderTarget(this.renderTargetMaskBuffer)
                 //renderer.clear()
                 //renderer.render( scene, camera/* , this.renderTargetMaskBuffer, true */ );
+                
+                viewer.scene.pointclouds.forEach(e=>{  //先将点云透明度变为1,因为点云透明度莫名其妙会影响其r值
+                    e.material._oldOpa = e.material.opacity;
+                    e.material.opacity = 1;
+                });
+                
                 render2(this.renderTargetMaskBuffer);
                 
+                viewer.scene.pointclouds.forEach(e=>{//恢复
+                    e.material.opacity = e.material._oldOpa;
+                    delete e.material._oldOpa;
+                });
+                
                 viewports.forEach((e)=>{e.beforeRender = e.oldBeforeRender;});  
                 
     			this.changeVisibilityOfNonSelectedObjects( true , scenes);
@@ -126019,7 +126071,7 @@ ENDSEC
     			this.edgeDetectionMaterial.uniforms[ "maskTexture" ].value = this.renderTargetMaskBuffer.texture;//this.renderTargetMaskDownSampleBuffer.texture;
     			this.edgeDetectionMaterial.uniforms[ "texSize" ].value = new Vector2$1(this.resolution.x, this.resolution.y );//new THREE.Vector2( this.renderTargetMaskDownSampleBuffer.width, this.renderTargetMaskDownSampleBuffer.height );
     			//this.edgeDetectionMaterial.uniforms[ "texSize" ].value = new THREE.Vector2(this.renderTargetMaskBuffer.width, this.renderTargetMaskBuffer.height)//new THREE.Vector2( this.renderTargetMaskDownSampleBuffer.width, this.renderTargetMaskDownSampleBuffer.height );
-                this.edgeDetectionMaterial.uniforms[ "thickness" ].value = this.edgeStrength;
+                this.edgeDetectionMaterial.uniforms[ "edgeStrength" ].value = this.edgeStrength;
                 
                 this.edgeDetectionMaterial.uniforms[ "visibleEdgeColor" ].value = this.visibleEdgeColor;//this.tempPulseColor1;
     			this.edgeDetectionMaterial.uniforms[ "hiddenEdgeColor" ].value = this.hiddenEdgeColor; //this.tempPulseColor2;
@@ -126029,6 +126081,7 @@ ENDSEC
                 let buffer = readBuffer;
                 if ( this.renderToScreen ) {
                     this.quad.material.transparent = true;
+                    
                     buffer = null; 
                     renderer.setClearColor( this.oldClearColor, this.oldClearAlpha );  
                     render2(null,false);
@@ -126043,7 +126096,7 @@ ENDSEC
                     renderer.clear();
                 } 
                 
-                
+             
                 renderer.setRenderTarget(buffer/* this.renderTargetEdgeBuffer1 */);
                 
                 renderer.render( this.scene,  this.camera/* , this.renderTargetEdgeBuffer1, true  */);
@@ -126128,17 +126181,18 @@ ENDSEC
 
     				'}'
     			].join( '\n' )
-
+                //scene.overrideMaterial
+                //为什么画出来红色通道不为0,且depthTest似乎会改变红色通道的值
     		} );
 
     	},
 
-    	getEdgeDetectionMaterial: function (thickness) {
+    	getEdgeDetectionMaterial: function (edgeStrength) {
 
     		return new ShaderMaterial( {
                 
     			uniforms: {
-                    "thickness": { value: thickness }, 
+                    "edgeStrength": { value: edgeStrength }, 
     				"maskTexture": { value: null },
     				"texSize": { value: new Vector2$1( 10, 10 ) },
     				"visibleEdgeColor": { value: new Vector3( 1.0, 1.0, 1.0 ) },
@@ -126176,30 +126230,33 @@ ENDSEC
     					gl_FragColor = vec4(edgeColor, 1.0) * vec4(d);\
     				}" */
                     fragmentShader:
-    				"varying vec2 vUv;\
-				uniform sampler2D maskTexture;\
-                uniform float thickness;\
-				uniform vec2 texSize;\
-				uniform vec3 visibleEdgeColor;\
-				uniform vec3 hiddenEdgeColor;\
-				\
-				void main() {\n\
-					vec2 invSize = 1.0 / texSize;\
-					vec4 uvOffset = vec4(1.0, 0.0, 0.0, 1.0) * vec4(invSize, invSize);\
-					vec4 c1 = texture2D( maskTexture, vUv + uvOffset.xy);\
-					vec4 c2 = texture2D( maskTexture, vUv - uvOffset.xy);\
-					vec4 c3 = texture2D( maskTexture, vUv + uvOffset.yw);\
-					vec4 c4 = texture2D( maskTexture, vUv - uvOffset.yw);\
-					float diff1 = (c1.r - c2.r)*0.5;\
-					float diff2 = (c3.r - c4.r)*0.5;\
-					float d = length( vec2(diff1, diff2) ) * thickness;\
-					float a1 = min(c1.g, c2.g);\
-					float a2 = min(c3.g, c4.g);\
-					float visibilityFactor = min(a1, a2);\
-					vec3 edgeColor = 1.0 - visibilityFactor > 0.001 ? visibleEdgeColor : hiddenEdgeColor;\
-					gl_FragColor = vec4(edgeColor, 1.0) * vec4(d);\
-				}"
+    				`varying vec2 vUv;
+				uniform sampler2D maskTexture;
+                uniform float edgeStrength;
+				uniform vec2 texSize;
+				uniform vec3 visibleEdgeColor;
+				uniform vec3 hiddenEdgeColor;
+				
+				void main() { 
+                    const float thickness = 1.0;
+                    vec2 invSize = thickness / texSize;
+					vec4 uvOffset = vec4(1.0, 0.0, 0.0, 1.0) * vec4(invSize, invSize);
+					vec4 c1 = texture2D( maskTexture, vUv + uvOffset.xy);
+					vec4 c2 = texture2D( maskTexture, vUv - uvOffset.xy);
+					vec4 c3 = texture2D( maskTexture, vUv + uvOffset.yw);
+					vec4 c4 = texture2D( maskTexture, vUv - uvOffset.yw);
+					float diff1 = (c1.r - c2.r)*0.5;  //检测边缘,
+					float diff2 = (c3.r - c4.r)*0.5;
+					float d = length( vec2(diff1, diff2) ) * edgeStrength;
+					float a1 = min(c1.g, c2.g);
+					float a2 = min(c3.g, c4.g);
+					float visibilityFactor = min(a1, a2);
+					vec3 edgeColor = 1.0 - visibilityFactor > 0.001 ? visibleEdgeColor : hiddenEdgeColor;
+					//gl_FragColor = vec4(0.0,1.0,0.0,1.0); 
+                    gl_FragColor = vec4(edgeColor, 1.0) * vec4(d); 
+				}`
     		} );
+            //为什么vec4(0.0,1.0,1.0,1.0);  显示出来的是rgb(109,255,255) ? 几乎只有绿色通道会影响红色通道
 
     	},
 
@@ -129139,15 +129196,24 @@ ENDSEC
                 view.render || this.clear(params);  
                 pRenderer.clearTargets(params);
 
+
                 //先渲染不透明的model:
-                if(this.objs.children.length){
-                    this.renderer.setRenderTarget(params.target||null);
-                    this.setCameraLayers(params.camera,  ['model'] );//先渲染模型后渲染点云,否则半透明的点云的blend没有混合模型的部分(但模型为何可以混合点云的部分?估计还是PotreeRenderer有问题)
-                    /* this.objs.children.forEach(e=>{
-                        this.updateVisible(e, 'renderOpa', e.opacity == 1)  
-                    }) */
+                /* if(this.objs.children.length){
+                    this.renderer.setRenderTarget(params.target||null)
+                    this.setCameraLayers(params.camera,  ['model'] )//先渲染模型后渲染点云,否则半透明的点云的blend没有混合模型的部分(但模型为何可以混合点云的部分?估计还是PotreeRenderer有问题)
+                    
                     this.renderer.render(this.scene.scene, params.camera); 
-                }
+                }  */
+               
+               
+                if(Potree.settings.notAdditiveBlending){
+                    params.renderBeforeCloud = true;
+                    this.renderOverlay1(params);   
+                    //view.render || this.renderOverlay(params)  
+                } 
+               
+                
+               
                
                 if(!view.noPointcloud ){
                     
@@ -129176,8 +129242,15 @@ ENDSEC
                 
 
                  
-                view.render || this.renderOverlay(params); 
-               
+                //view.render || this.renderOverlay(params) 
+                if(Potree.settings.notAdditiveBlending){
+                    params.renderBeforeCloud = false;
+                    this.renderOverlay1(params); 
+                    this.renderOverlay2(params);  
+                }else { 
+                    view.render || this.renderOverlay(params);                 
+                }
+                
                   
                 
                 view.afterRender && view.afterRender(); 
@@ -129210,15 +129283,29 @@ ENDSEC
             
     	}
     	
+        /* 
+            关于透明度:
+            由于点云和mesh是分开渲染的,且材质很不一样,所以透明和blend有冲突
+            
+            1 如果点云的blend是AdditiveBlending,也就是普通的叠加模式。
+                则半透明点云的depthTest和depthWrite都为false
+                这时候mesh要后渲染,且depthWrite不能为false(除非depthTest也为false),否则将被点云遮住。
+            2 如果点云的blend是普通型
+                则半透明点云的depthTest和depthWrite都为true。(为何depthWrite不能像mesh一样为false, 否则点云自身透明会错乱,可能因为太多points了)
+                这时候若mesh全部先渲染,则 透过depthWrite为false的半透明mesh看不透明点云,mesh会完全被点云遮住。但是透明的物体就是depthWrite要为false,否则也会完全遮住点云
+                 
+                即使是后渲染半透明的mesh,若透过点云看mesh,mesh会完全被点云遮住(为什么之前遇到过 透过点云看mesh,点云会显示不出)
+                
+                最终选择是先渲染不透明的mesh,然后点云,然后透明的mesh。虽然点云对mesh透明会失效。 
        
-
+        */
 
         renderOverlay(params){
              
             let camera = params.camera ? params.camera : this.scene.getActiveCamera();
             
             this.reticule.updateAtViewports(params.viewport);
-            
+            this.renderer.setRenderTarget(params.target||null);
             
              //为什么要在点云之后渲染,否则透明失效 、 会被点云覆盖 
             let cameraLayers;
@@ -129226,7 +129313,7 @@ ENDSEC
             if(params.cameraLayers) cameraLayers = params.cameraLayers;
             else {
                 if(params.isMap)cameraLayers = ['bothMapAndScene'];
-                else cameraLayers = ['sceneObjects', /*  'model', */ 'bothMapAndScene' ];
+                else cameraLayers = ['sceneObjects',    'model',   'bothMapAndScene' ];
             }
             
             
@@ -129265,6 +129352,85 @@ ENDSEC
             }
              
         }
+        
+        
+        
+        renderOverlay1(params){
+            let camera = params.camera ? params.camera : this.scene.getActiveCamera();
+            
+            this.reticule.updateAtViewports(params.viewport);
+            this.renderer.setRenderTarget(params.target||null);
+            
+             //为什么要在点云之后渲染,否则透明失效 、 会被点云覆盖 
+            let cameraLayers;
+
+            if(params.cameraLayers) cameraLayers = params.cameraLayers;
+            else {
+                if(params.isMap)cameraLayers = ['bothMapAndScene'];
+                else cameraLayers = ['sceneObjects',   'model',  'bothMapAndScene' ];
+            }
+            
+            
+       
+            if(cameraLayers.length){
+                this.setCameraLayers(camera,  cameraLayers, params.extraEnableLayers); //透明贴图层 skybox 、reticule marker 不能遮住测量线
+                
+                this.scene.scene.traverse((object)=>{
+                    if(object.material){  
+                        this.updateVisible(object, 'renderOpa', 
+                            (params.renderBeforeCloud && object.material.opacity<1 || (!params.renderBeforeCloud) && object.material.opacity==1 )? false:true); 
+                        //点云之前渲染的话隐藏半透明的, 点云之后渲染的话隐藏不透明的
+                    } 
+                });
+                //ground的材质中opacity为1,所以被当做不透明了
+                
+                this.renderer.render(this.scene.scene, camera);  
+                
+                
+                
+                this.scene.scene.traverse((object)=>{
+                    if(object.material){  
+                        this.updateVisible(object, 'renderOpa',  true); //恢复 
+                    } 
+                });
+            }
+              
+            this.dispatchEvent({type: "render.pass.scene", viewer: viewer});
+        
+          
+        }
+        
+        
+        
+        renderOverlay2(params){
+            let camera = params.camera ? params.camera : this.scene.getActiveCamera();
+            //清除深度 !!!!
+            this.renderer.clearDepth(); 
+
+            //this.transformationTool.update();
+            
+             
+            if(!params.magnifier){ 
+                //测量线 
+                this.dispatchEvent({type: "render.pass.perspective_overlay", camera, screenshot:params.screenshot});
+                
+                if(!params.screenshot && !params.isMap){
+                    this.setCameraLayers(camera, ['magnifier']); //magnifier 遮住测量线 
+                    this.renderer.render(this.scene.scene, camera);
+                }
+            } 
+            
+            if(!params.isMap) {
+                this.setCameraLayers(camera, ['volume','transformationTool']);  
+                this.renderer.render(this.clippingTool.sceneVolume, camera);
+                this.renderer.render(this.transformationTool.scene, camera);
+            }
+        
+        
+        }
+        
+        
+        
           /* renderDefault(){//测试 ios15.4.1
             //let pRenderer = this.getPRenderer();
             //this.clear()

文件差异内容过多而无法显示
+ 1 - 1
public/lib/potree/potree.js.map


+ 35 - 21
src/sdk/cover/index.js

@@ -9,6 +9,8 @@ export const enter = (dom, isLocal) => {
     //Potree.fileServer = axios 
     Potree.settings.libsUrl = './lib/'
     
+    Potree.settings.notAdditiveBlending = true
+    
     const tagLimitDis = 8;
 
     Potree.settings.showCompass = true
@@ -619,34 +621,46 @@ export const enter = (dom, isLocal) => {
                         model.dispatchEvent("scale_changed")
                     }
                 },
-                changeOpacity(opacity){ 
+                changeOpacity(opacity){ //见笔记:透明物体的材质设置
                     if(opacity == void 0)opacity = 100
                     opacity/=100
                     
-                    let setOp = (mesh)=>{//见笔记:透明物体的材质设置
-                        if(model.isPointcloud){
-                            mesh.changePointOpacity(opacity)  
-                        }else{
-                            mesh.material.opacity = opacity
-                        }
-                        
-                        if(opacity<1){
-                            mesh.material.transparent = true
-                            mesh.renderOrder = Potree.config.renderOrders.model+1 
-                            mesh.material.depthWrite = false
-                        }else{
-                            mesh.material.transparent = false
-                            mesh.renderOrder = Potree.config.renderOrders.model
-                            mesh.material.depthWrite = true
-                        }
-                    }
+                  
                     
                     if(model){
-                        if(model.isPointcloud){
-                            setOp(model)   
+                        if(model.isPointcloud){ 
+                            model.changePointOpacity(opacity) 
+                            //MergeEditor.updateEdgeStrength()
                         }else{
-                            model.traverse(e=>e.material && setOp(e, opacity))
+                            //model.traverse(e=>e.material && setOp(e, opacity))
+                            model.traverse(mesh=>{
+                                if(mesh.material){ 
+                                
+                                    mesh.material.opacity = opacity
+                                    if(opacity<1){
+                                        mesh.material.transparent = true 
+                                        if(model.isPointcloud){
+                                            mesh.changePointOpacity(opacity)  
+                                        }else{
+                                            mesh.material.opacity = opacity
+                                        }
+                                        
+                                        mesh.renderOrder = Potree.config.renderOrders.model+1 
+                                        mesh.material.depthWrite = false
+                                    }else{
+                                        mesh.material.transparent = false
+                                        mesh.renderOrder = Potree.config.renderOrders.model
+                                        mesh.material.depthWrite = true
+                                    }
+                                
+                                }
+                            })
                         }
+                            
+                            
+                            
+                            
+                         
                         model.opacity = opacity//记录在最外层
                     }