xzw 1 rok pred
rodič
commit
519d7b5b1f

+ 9 - 8
src/custom/materials/postprocessing/EffectComposer.js

@@ -51,8 +51,8 @@ var EffectComposer = function ( renderer, renderTarget ) {
 
 	this.copyPass = new ShaderPass( CopyShader );
     
-    viewer.addEventListener('resize',(e)=>{
-        this.setSize(e.viewport.resolution.x,e.viewport.resolution.y) //暂时假设composer渲染的viewer的viewports.length == 1
+    viewer.addEventListener('resize',(e)=>{ 
+        this.setSize(e.viewport.resolution2.x,e.viewport.resolution2.y) //暂时假设composer渲染的viewer的viewports.length == 1
     })
     
 };
@@ -92,9 +92,10 @@ Object.assign(  EffectComposer.prototype, {
 		var maskActive = false;
         let passes = this.passes.filter(e=>e.enabled)
 		var pass, i, il = passes.length;
-
+        let oldTarget = this.renderer.getRenderTarget();
         if(this.readTarget){ //add 使用当前renderTarget中的像素 
-            this.copyPass.render( scene, camera,viewports, this.renderer, this.readBuffer, this.renderer.getRenderTarget()  );
+            this.copyPass.render( scene, camera,viewports, this.renderer, this.readBuffer, oldTarget  );
+            
         }  
         
 		for ( i = 0; i < il; i ++ ) {
@@ -103,7 +104,7 @@ Object.assign(  EffectComposer.prototype, {
  
 
             //if(i == il-1)pass.renderToScreen = true//
-                
+            
 			pass.render( scene, camera, viewports, this.renderer, this.writeBuffer, this.readBuffer, maskActive, renderFun );
     
 			if ( pass.needsSwap ) {
@@ -140,7 +141,7 @@ Object.assign(  EffectComposer.prototype, {
 
 		}
         
-        
+        this.renderer.setRenderTarget(oldTarget);
         //add
          if(!pass.renderToScreen){ //最后一个如果没有绘制到屏幕or target上
             this.copyPass.renderToScreen = true
@@ -174,8 +175,8 @@ Object.assign(  EffectComposer.prototype, {
 
 	setSize: function ( width, height, scaleRatio ) {
 
-        scaleRatio = scaleRatio || 1;
-
+        scaleRatio = scaleRatio || this.scaleRatio || 1;
+        //console.log('setSize', width * scaleRatio, height * scaleRatio)
 		this.renderTarget1.setSize( width * scaleRatio , height * scaleRatio );
 		this.renderTarget2.setSize( width * scaleRatio, height * scaleRatio );
 

+ 4 - 3
src/custom/materials/postprocessing/FXAAShader.js

@@ -266,7 +266,7 @@ const FXAAShader = {
 	}
 
 	void main() {
-			const float edgeDetectionQuality = 0.2;//.05 ;  //越高,越保留细节;越低,越平滑 但模糊
+			const float edgeDetectionQuality = 0.1 ;//.05 ;  //越高,越保留细节;越低,越平滑 但模糊 
 			const float invEdgeDetectionQuality = 1. / edgeDetectionQuality;
 
 			gl_FragColor = FxaaPixelShader(
@@ -276,8 +276,9 @@ const FXAAShader = {
 					edgeDetectionQuality, // [0,1] contrast needed, otherwise early discard
 					invEdgeDetectionQuality
 			);
-
-	}
+            //单独渲染测量线有黑边,因为透明区域的clearColor是(0,0,0),模糊化的时候采用了这些黑色因子来混色。因为测量线颜色可能多种,也不能直接修改clearColor为其颜色,且还有label。
+            //故而无法单独渲染测量线,而需要将底图一起渲染。
+    }
 	`
 
 };

+ 3 - 1
src/custom/materials/postprocessing/RenderPass.js

@@ -78,7 +78,9 @@ class RenderPass extends Pass {
 			 scene.overrideMaterial = oldOverrideMaterial;
 
 		}
-
+        
+        renderer.setRenderTarget(oldTarget);
+        
 		renderer.autoClear = oldAutoClear;
 
 	}

+ 27 - 19
src/custom/materials/postprocessing/SMAAPass.js

@@ -1,10 +1,15 @@
 /**
  * @author mpk / http://polko.me/
  */
+import * as THREE from "../../../../libs/three.js/build/three.module.js";
+import {Pass } from './ShaderPass' 
+import SMAAShader from './SMAAShader' 
 
-THREE.SMAAPass = function ( width, height ) {
 
-	THREE.Pass.call( this );
+
+let SMAAPass = function ( width, height ) {
+
+    Pass.call( this );
 
 	// render targets
 
@@ -61,24 +66,22 @@ THREE.SMAAPass = function ( width, height ) {
 
 	// materials - pass 1
 
-	if ( THREE.SMAAShader === undefined ) {
-		console.error( "THREE.SMAAPass relies on THREE.SMAAShader" );
-	}
+ 
 
-	this.uniformsEdges = THREE.UniformsUtils.clone( THREE.SMAAShader[0].uniforms );
+	this.uniformsEdges = THREE.UniformsUtils.clone(  SMAAShader[0].uniforms );
 
 	this.uniformsEdges[ "resolution" ].value.set( 1 / width, 1 / height );
 
 	this.materialEdges = new THREE.ShaderMaterial( {
-		defines: Object.assign( {}, THREE.SMAAShader[ 0 ].defines ),
+		defines: Object.assign( {}, SMAAShader[ 0 ].defines ),
 		uniforms: this.uniformsEdges,
-		vertexShader: THREE.SMAAShader[0].vertexShader,
-		fragmentShader: THREE.SMAAShader[0].fragmentShader
+		vertexShader:  SMAAShader[0].vertexShader,
+		fragmentShader:  SMAAShader[0].fragmentShader
 	} );
 
 	// materials - pass 2
 
-	this.uniformsWeights = THREE.UniformsUtils.clone( THREE.SMAAShader[1].uniforms );
+	this.uniformsWeights = THREE.UniformsUtils.clone(  SMAAShader[1].uniforms );
 
 	this.uniformsWeights[ "resolution" ].value.set( 1 / width, 1 / height );
 	this.uniformsWeights[ "tDiffuse" ].value = this.edgesRT.texture;
@@ -86,23 +89,23 @@ THREE.SMAAPass = function ( width, height ) {
 	this.uniformsWeights[ "tSearch" ].value = this.searchTexture;
 
 	this.materialWeights = new THREE.ShaderMaterial( {
-		defines: Object.assign( {}, THREE.SMAAShader[ 1 ].defines ),
+		defines: Object.assign( {}, SMAAShader[ 1 ].defines ),
 		uniforms: this.uniformsWeights,
-		vertexShader: THREE.SMAAShader[1].vertexShader,
-		fragmentShader: THREE.SMAAShader[1].fragmentShader
+		vertexShader:  SMAAShader[1].vertexShader,
+		fragmentShader: SMAAShader[1].fragmentShader
 	} );
 
 	// materials - pass 3
 
-	this.uniformsBlend = THREE.UniformsUtils.clone( THREE.SMAAShader[2].uniforms );
+	this.uniformsBlend = THREE.UniformsUtils.clone( SMAAShader[2].uniforms );
 
 	this.uniformsBlend[ "resolution" ].value.set( 1 / width, 1 / height );
 	this.uniformsBlend[ "tDiffuse" ].value = this.weightsRT.texture;
 
 	this.materialBlend = new THREE.ShaderMaterial( {
 		uniforms: this.uniformsBlend,
-		vertexShader: THREE.SMAAShader[2].vertexShader,
-		fragmentShader: THREE.SMAAShader[2].fragmentShader
+		vertexShader:  SMAAShader[2].vertexShader,
+		fragmentShader:  SMAAShader[2].fragmentShader
 	} );
 
 	this.needsSwap = false;
@@ -116,11 +119,13 @@ THREE.SMAAPass = function ( width, height ) {
 
 };
 
-THREE.SMAAPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {
 
-	constructor: THREE.SMAAPass,
 
-	render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
+SMAAPass.prototype = Object.assign( Object.create( Pass.prototype ), {
+
+	constructor: SMAAPass,
+ 
+	render: function ( scene, camera, viewports, renderer, writeBuffer, readBuffer, maskActive, renderFun /* renderer, writeBuffer, readBuffer, delta, maskActive  */) {
 
 		// pass 1
 
@@ -174,3 +179,6 @@ THREE.SMAAPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ),
 	}
 
 } );
+
+export default SMAAPass
+

+ 5 - 1
src/custom/materials/postprocessing/SMAAShader.js

@@ -5,8 +5,9 @@
  * Preset: SMAA 1x Medium (with color edge detection)
  * https://github.com/iryoku/smaa/releases/tag/v2.8
  */
+import * as THREE from "../../../../libs/three.js/build/three.module.js";
 
-THREE.SMAAShader = [ {
+let SMAAShader = [ {
 
 	defines: {
 
@@ -460,3 +461,6 @@ THREE.SMAAShader = [ {
 	].join("\n")
 
 } ];
+
+
+export default SMAAShader

+ 12 - 16
src/custom/modules/clipModel/Clip.js

@@ -60,25 +60,18 @@ var Clip = {
     
 
     setBoxPose(){
-        const min = 0.01//0的话相当于没有box所以不能为0
         //box底部不变,永远在bound的底部。但top会根据height改变
-        let boxData = this.getBoxData()
-        let bound = viewer.bound.boundingBox.clone();
-        let scale = viewer.bound.boundSize.clone().setZ(Math.max(min,boxData.height)) 
-        let pos = viewer.bound.center.clone().setZ(bound.min.z + boxData.height/2)
-        let rotation = new THREE.Euler(0,0,boxData.rotAngle)
-        scale.setX(Math.max(min,scale.x*boxData.scaleXY)).setY(Math.max(min,scale.y*boxData.scaleXY))
-        
-        this.box.position.copy(pos)
-        this.box.rotation.copy(rotation)
-        this.box.scale.copy(scale)
          
+        let boxData = this.getBoxData()
+        this.setRot(boxData.rotAngle)  
+        this.setScale(boxData.scaleXY)
+        this.setScaleZ(boxData.scaleZ)
     },
 
     //暂定为在手动设置旋转之前 , 如果有基准线,使用基准线的旋转角。 
     getDefaultData(){  
         this.boxData = {
-            height : 4, scaleXY:1,  //水平缩放比率。1代表和bound相同
+            scaleZ : 1, scaleXY:1,  //水平缩放比率。1代表和bound相同
             rotAngle: 0//this.getRotByBaseLine()   ,   rotByUser: false
         } 
     },
@@ -184,10 +177,13 @@ var Clip = {
         this.box.scale.x = viewer.bound.boundSize.x * s
         this.box.scale.y = viewer.bound.boundSize.y * s 
     }, 
-    setHeight(v){
-        this.boxData.height = v 
-        this.box.scale.z = v 
-        this.box.position.z = viewer.bound.boundingBox.min.z + v/2
+    setScaleZ(scaleZ){
+        scaleZ = Math.max(0.0001, scaleZ)  //0的话相当于没有box所以不能为0
+        let maxHeight = viewer.bound.boundSize.z
+        let height = maxHeight * scaleZ
+        this.boxData.scaleZ = scaleZ
+        this.box.scale.z = height
+        this.box.position.z = viewer.bound.boundingBox.min.z + height/2
     }
    
    

+ 4 - 5
src/custom/objects/tool/MeasuringTool.js

@@ -436,7 +436,7 @@ export class MeasuringTool extends THREE.EventDispatcher{
 
 		let end = (e={}) => {//确定、结束 
             if(!measure.isNew )return
-             
+       console.log('end')      
             if(args.minMarkers != void 0 ){
                 
                 if(!e.finish && measure.markers.length<=args.minMarkers ){//右键  当个数不够时取消
@@ -687,11 +687,10 @@ export class MeasuringTool extends THREE.EventDispatcher{
         
         Potree.Utils.setCameraLayers(o.camera, ['measure'])
 		
-        /* if(o.screenshot && this.viewer.ssaaRenderPass.enabled){ //抗锯齿
-            this.viewer.ssaaRenderPass.sampleLevel = 4
+        if(o.screenshot && this.viewer.fxaaPass.enabled){ //抗锯齿 
             this.viewer.composer.render(this.scene, o.camera );   
-        }else{ */
+        }else{ 
             this.viewer.renderer.render(this.scene, o.camera );
-        //}
+        }
 	}
 };

+ 1 - 1
src/custom/objects/tool/ctrlPolygon.js

@@ -224,7 +224,7 @@ export class ctrlPolygon extends THREE.Object3D {
         }
         let location = intersectPos.clone()
         
-        console.log('dragMarker', oldPoint, intersectPos) 
+        //console.log('dragChange', oldPoint, intersectPos) 
         
         
         if(this.faceDirection && this.maxMarkers == 2 && len == 2){//add 固定方向的点不直接拖拽

+ 1 - 1
src/custom/settings.js

@@ -284,7 +284,7 @@ const config = {//配置参数   不可修改
     ultraHighQualityMaxZoom: 3,
     panoFieldRadius : 10, //当前位置多远范围内可以切全景模式
     clickMaxDragDis:5,
-    clickMaxPressTime:500, //ms
+    clickMaxPressTime:100, //ms  设置过大的话,点击两下不会触发完成
     doubleClickTime:200,//双击间隔时间
     testNodeCount1: browser.isMobile() ? 5 : 3,  //testMaxNode次数达到这个数字时,changePointSize才使用nodeMaxLevel。 (调试时比较卡,在线上实际只需要3)
      

+ 39 - 21
src/custom/viewer/ViewerNew.js

@@ -52,11 +52,11 @@ import {Loader3DTiles} from '../../../libs/three.js/3dtiles/three-loader-3dtiles
 import {PLYLoader} from "../../../libs/three.js/loaders/PLYLoader.js";
     
    
-import SSAARenderPass from "../materials/postprocessing/SSAARenderPass.js"
+import SMAAPass from "../materials/postprocessing/SMAAPass.js"
 import EffectComposer from '../materials/postprocessing/EffectComposer.js'
 import {ShaderPass} from '../materials/postprocessing/ShaderPass.js'
 import RenderPass from '../materials/postprocessing/RenderPass.js'
-import FXAAShader from "../materials/postprocessing/FXAAShader.js"
+import FXAAShader from "../materials/postprocessing/FXAAShader.js" 
 import OutlinePass from "../materials/postprocessing/OutlinePass.js"
 import BasicMaterial from '../materials/BasicMaterial.js'  
         
@@ -347,20 +347,15 @@ export class Viewer extends ViewerBase{
             //add:  for 截图时抗锯齿
               
             {
-                this.composer = new EffectComposer( this.renderer );
-                this.ssaaRenderPass = new SSAARenderPass(0x000000, 0);
-                this.composer.addPass( this.ssaaRenderPass ); 
-                 
-                //this.ssaaRenderPass.useCopy = true
-                //this.ssaaRenderPass.renderToScreen = true; 
-                //this.ssaaRenderPass.needsSwap = false
-                //见 https://threejs.org/examples/?q=AA#webgl_postprocessing_fxaa 效果和SSAA差不多,都对透明不太友好。
-                 
-                /* let outlinePass = this.outlinePass = new OutlinePass( ); 
-                this.ssaaRenderPass.addPass(outlinePass) 
-                 */
-                
-                //for 融合页面 
+                /* this.composer = new EffectComposer( this.renderer );
+                this.smaaRenderPass = new SMAAPass(0,0);
+                this.renderPass = new RenderPass(  ); 
+                this.renderPass.clearColor = new THREE.Color( 0, 0, 0 );
+				this.renderPass.clearAlpha = 0;
+                this.composer.addPass( this.renderPass ); 
+                this.composer.addPass( this.smaaRenderPass ); */ 
+            
+                /* //for 融合页面 
                 let outlinePass = this.outlinePass = new OutlinePass( );
                 outlinePass.renderToScreen = true  //这样更流畅,不用ssaa了,缺点是outline有锯齿
                 outlinePass.enabled = false
@@ -369,7 +364,7 @@ export class Viewer extends ViewerBase{
                 outlinePass.edgeGlow = 0 
                 outlinePass.visibleEdgeColor = new THREE.Color("#09a1b3")   
                 //--------------------------
-                
+                 */
                 
                 /* this.composer2 = new EffectComposer( this.renderer );
                 //const renderPass = new RenderPass();
@@ -387,7 +382,28 @@ export class Viewer extends ViewerBase{
 				this.composer2.addPass( this.fxaaPass ); 
                 this.composer2.readTarget = true
                 */ 
+                 
+                this.composer = new EffectComposer( this.renderer );  
+                this.composer.scaleRatio = 4 //将底图和测量线绘制在一张高倍贴图上,for测量线不模糊
+                this.composer.readTarget = true  //把底图和测量线一起fxaa 
+                const renderPass = new RenderPass();
+                
+				//renderPass.clearColor = new THREE.Color( 0,0,0 );      
+				//renderPass.clearAlpha = 0; 
+                renderPass.clear = !this.composer.readTarget 
+                this.composer.addPass( renderPass );  
+                
                 
+                this.fxaaPass = new ShaderPass( FXAAShader );  
+                this.fxaaPass.readTarget = true //add 
+                this.fxaaPass.setSize = function(width, height){
+                    this.material.uniforms[ 'resolution' ].value.x = 1 / ( width )  ;
+                    this.material.uniforms[ 'resolution' ].value.y = 1 / ( height )  ;  
+                } 
+                this.fxaaPass.renderToScreen = true;
+                
+				this.composer.addPass( this.fxaaPass ); 
+                //抗锯齿截图 效果时而好时而不好
             }
             
             
@@ -629,7 +645,9 @@ export class Viewer extends ViewerBase{
                 pointcloud.material.addEventListener('material_property_changed',()=>{
                     this.dispatchEvent('pointcloud_changed') 
                 })
-                
+                /* if(Potree.settings.isTest ){  
+                     this.showBoundingBox = true 
+                } */
                 
             })
             
@@ -3180,12 +3198,12 @@ export class Viewer extends ViewerBase{
             viewports = viewports.filter(v=>v.active) 
             if(viewports.length > 0){   
                 params.viewports = viewports  
-                if(this.outlinePass.selectedObjects.length && this.outlinePass.edgeStrength > 0 && !params.screenshot){  
+                /* if(this.outlinePass.selectedObjects.length && this.outlinePass.edgeStrength > 0 && !params.screenshot){  
                     let scenes = this.inputHandler.interactiveScenes.concat(this.scene.scene).concat(viewer.scene.scenePointCloud) 
                     this.composer.render(scenes, null, this.viewports, this.renderDefault.bind(this));  
-                }else{  
+                }else{   */
                     this.renderDefault(params);
-                } 
+                //} 
             } 
             if(!specialRender) this.needRender = false            
         }