准备开始写 漫游点矫正

src/PointCloudOctree.js

@@ -1933,14 +1933,17 @@ export class PointCloudOctree extends PointCloudTree {
         
         
         num = Math.pow(num, 1.05) * 6 
-         
         
-        if(sizeFitToLevel || Potree.settings.sizeFitToLevel){//按照点云质量来调整的版本：
+        
+        
+        
+        if(sizeFitToLevel || Potree.settings.sizeFitToLevel){//按照点云质量来调整的版本：    近似将pointSizeType换成ADAPTIVE
             let str = this.temp.pointSize+':'+this.maxLevel+':'+this.nodeMaxLevel
             let value = this.temp.sizeFitToLevel[str]  //储存。防止每次渲染（反复切换density）都要算。
             if(value){
                 this.material.size = value
             }else{
+                
                 let base = this.material.spacing / Math.pow(2, this.maxLevel) //点云大小在level为0时设置为spacing，每长一级，大小就除以2
                 base *= this.nodeMaxLevel > 0 ? Math.max(0.1, Math.pow(this.maxLevel / this.nodeMaxLevel, 1.3)) : 0.1 //低质量的缩小点,因为视觉上看太大了。navvis是不铺满的，我们也留一点缝隙
 
@@ -1948,11 +1951,12 @@ export class PointCloudOctree extends PointCloudTree {
                 //在t-8BCqxQAr93 会议室 和 t-e2Kb2iU 隧道 两个场景里调节，因为它们的spacing相差较大，观察会议室墙壁的龟裂程度
                 this.temp.sizeFitToLevel[str] = this.material.size
             }
-        }else{
-            //let base = this.material.spacing / Math.pow(2, this.nodeMaxLevel) //点云大小在level为0时设置为spacing，每长一级，大小就除以2
-            let base = 0.05; 
+        }else{ 
+        
+            let base = 0.007;  //let base = this.material.spacing / Math.pow(2, this.nodeMaxLevel) //点云大小在level为0时设置为spacing，每长一级，大小就除以2
+            //base的数值理论上应该是右侧算出来的，但发现有的场景nodeMaxLevel和nodeMaxLevelPredict差别较大的点云显示也过大，而直接换成固定值反而可以适应所有场景。该固定值来源于 getHighestNodeSpacing 最小值，修改了下。(会不会是我们的相机其实该值是固定的，根据该值算出的spacing才是有误差的？ 如果换了相机是否要改值？）
             this.material.size = base * 5 * num /* * window.devicePixelRatio  */
-        }
+        } 
         
         
         //console.log('changePointSize  '  + this.dataset_id + '  , num : ' + num + ' , size : ' + this.material.size, this.material.spacing)

src/modules/Images360/Images360.js

@@ -578,9 +578,9 @@ export class Images360 extends THREE.EventDispatcher{
         
         if(!toPano.pano.enabled)return
 
-        if(!this.currentPano){
+        /* if(!this.currentPano){
             return this.focusPano(toPano) 
-        }
+        } */
         //console.log('flyToPano:', toPano.pano.id)
         let done = (makeIt)=>{
             //console.log('flyToPano done ', toPano.pano.id, makeIt )
@@ -733,7 +733,7 @@ export class Images360 extends THREE.EventDispatcher{
 
 
 
-	focusPano(toPano ){
+	/* focusPano(toPano ){
 		if(this.currentPano !== null){
 			return this.flyToPano(toPano); 
 		}
@@ -779,13 +779,7 @@ export class Images360 extends THREE.EventDispatcher{
              
             
         this.cube.visible = config.atPano.showSkybox  
-        /* this.cube.visible && this.cube.material.setProjectedPanos(pano, pano, 0)
          
-        if(config.atPano.pointUsePanoTex){//false
-            viewer.scene.pointclouds.forEach(e=>{
-                e.material.setProjectedPanos(pano, pano, 0)
-            })
-        }  */
         //if(config.transition.showSkybox || config.transition.pointUsePanoTex){  
             this.setProjectedPanos({
                 progress:0,
@@ -804,18 +798,12 @@ export class Images360 extends THREE.EventDispatcher{
             callback:()=>{//done 
                 //pano.enter()
                 this.flying = false  
-                /* viewer.scene.pointclouds.forEach(e=>{
-                    e.visible = pointcloudVisi
-                }) */
+                
                 this.currentPano = pano;
                 this.updateCube(this.currentPano)
                 done(true)
             },onUpdate:(progress)=>{ 
-                /* this.cube.material.uniforms.progress.value = progress 
-                
-                viewer.scene.pointclouds.forEach(e=>{
-                    e.material.uniforms.progress.value = progress 
-                }) */
+                 
             }, 
             cancelFun:()=>{this.flying = false}  
         })
@@ -829,10 +817,7 @@ export class Images360 extends THREE.EventDispatcher{
 	unfocus(o={}){
 		this.selectingEnabled = true;
         Potree.settings.displayMode = 'showPointCloud' 
-        
-        
-        
-		 
+         
 
 		if(!this.currentPano && !o.position){
 			return;
@@ -843,19 +828,6 @@ export class Images360 extends THREE.EventDispatcher{
 
 		viewer.orbitControls.doubleClockZoomEnabled = true;
 		 
-
-		/* viewer.scene.view.setView(
-			o.position || previousView.position, 
-			o.target || previousView.target,
-			o.duration || 500,
-            ()=>{ //done
-                for(let pano of this.panos){
-                    pano.mesh.visible = true;
-                    //pano.marker.material.depthTest = true
-                }
-                o.callback && o.callback()            
-            }
-		); */
         
         viewer.scene.view.setView($.extend({
             position: previousView.position,
@@ -877,7 +849,7 @@ export class Images360 extends THREE.EventDispatcher{
 		this.currentPano = null;
 
 		this.elUnfocus && (this.elUnfocus[0].style.display = "none");
-	}
+	} */
 
 
     updateCube(pano0, pano1){

src/modules/Images360/ModelTextureMaterial.js

@@ -190,11 +190,14 @@ export default class ModelTextureMaterial extends THREE.RawShaderMaterial {
         
  		progressValue!=void 0 && (this.uniforms.progress.value = progressValue);
 		//pano0.ensureSkyboxReadyForRender();
-		this.uniforms.pano0Map.value = pano0.getSkyboxTexture();//pano0.texture
-		this.uniforms.pano0Position.value.copy(pano0.position)
-		this.uniforms.pano0Matrix.value.copy(pano0.panoMatrix/* pano0.mesh.matrixWorld */ );
-		//pano1.ensureSkyboxReadyForRender();
- 
+        
+        
+        if(pano0){
+            this.uniforms.pano0Map.value = pano0.getSkyboxTexture();//pano0.texture
+            this.uniforms.pano0Position.value.copy(pano0.position)
+            this.uniforms.pano0Matrix.value.copy(pano0.panoMatrix/* pano0.mesh.matrixWorld */ );
+            //pano1.ensureSkyboxReadyForRender();
+        }
         
 		
 		this.uniforms.pano1Map.value = pano1.getSkyboxTexture()//pano1.texture;

src/modules/Images360/Panorama.js

@@ -446,7 +446,7 @@ class Panorama extends THREE.EventDispatcher{
     
     createTextLabel(){
         this.removeTextLabel()
-        this.label = new TextSprite($.extend(
+        this.label = new TextSprite(Object.assign({},
            labelProp, {text: this.id }) //{text: `id:${this.id}, dataset:${this.pointcloud.name}, 4dkkId:${this.originID}`}
         );
     

src/objects/tool/Measure.js

@@ -679,6 +679,7 @@ export class Measure extends ctrlPolygon{
                 select:    new THREE.MeshBasicMaterial({  
                     transparent: !0,
                     opacity: 1,
+                    depthTest:false,
                     map: texLoader.load(Potree.resourcePath+'/textures/pic_point32.png'/* , null, null, { antialias: false } */), 
                      
                 }),   
@@ -741,10 +742,10 @@ export class Measure extends ctrlPolygon{
                 useDepth:true 
             })), 
             selected: new THREE.MeshBasicMaterial({
-                color:color,
+                color:  color ,
                 side:THREE.DoubleSide,
                 opacity:0.3,
-                transparent:true
+                transparent:true, 
             })
         },Measure.planeMats = planeMats)
         return super.createAreaPlane(planeMats.default)

src/objects/tool/MeasuringTool.js

@@ -4,6 +4,10 @@ import {Measure} from "./Measure.js";
 import {Utils} from "../../utils.js"; 
 import math from "../../utils/math.js";
 import {CameraMode} from "../../defines.js"; 
+import {TextSprite} from '../TextSprite'
+
+ 
+ 
  
 function updateAzimuth(viewer, measure){
     if(!measure.showAzimuth)return
@@ -606,6 +610,18 @@ export class MeasuringTool extends THREE.EventDispatcher{
     
 	render(o={}){
         viewer.setCameraLayers(o.camera, ['measure'])
-		this.viewer.renderer.render(this.scene, o.camera/* this.viewer.scene.getActiveCamera() */);
+		
+        if(o.screenshot){ //抗锯齿
+            this.viewer.composer.render(this.scene, o.camera );  
+            /* viewer.scene.measurements.forEach(e=>{ //隐藏除了label以外的
+                e.children.forEach((c)=>{
+                    if(!(c instanceof TextSprite)){
+                        c.visible = false
+                    } 
+                }) 
+            })  */
+        }else{
+            this.viewer.renderer.render(this.scene, o.camera );
+        }
 	}
 };

src/settings.js

@@ -175,6 +175,11 @@ const config = {//配置参数   不可修改
         minSize: 0.1,
         maxSize: 10000,
         pointSizeType: 'ATTENUATED', //'ADAPTIVE'//'ADAPTIVE' \ FIXED //ADAPTIVE的在小房间里大小会不太匹配，但在远景似乎更好
+        /* 
+            ATTENUATED ： 衰减   真实大小，靠近时感觉是点云一点点变多，缝隙变小
+            ADAPTIVE：  自适应   大小根据level变化，越高越小。靠近时感觉点云由大慢慢细分成小份。这个感觉更佳但是navvis为何不用这个
+         */
+        
         absolutePanoramaSize: 1.3 ,//全景漫游时的size  是fixed的模式
         
         //sizeAtPanoRtEDL : 2000,  

src/utils/SplitScreen.js

@@ -130,7 +130,7 @@ var SplitScreen = {
         
         mapViewport.noPointcloud = false
         //隐藏地图游标
-        viewer.updateVisible(viewer.mapViewer.cursor, 'split4Screens', false)
+        //viewer.updateVisible(viewer.mapViewer.cursor, 'split4Screens', false)
         /* viewer.images360.panos.forEach(pano=>{
             viewer.updateVisible(pano.mapMarker, 'split4Screens', false) //希望这时候mapMarker已经建好了吧
         }) */
@@ -245,7 +245,7 @@ var SplitScreen = {
         
         let mapViewport = viewer.mapViewer.viewports[0]
         viewer.mapViewer.attachToMainViewer(false) 
-        viewer.updateVisible(viewer.mapViewer.cursor, 'split4Screens', true)
+        //viewer.updateVisible(viewer.mapViewer.cursor, 'split4Screens', true)
         /* viewer.images360.panos.forEach(pano=>{
             viewer.updateVisible(pano.mapMarker, 'split4Screens', true)
         }) */

src/utils/transitions.js

@@ -4,6 +4,45 @@ var easing = {};
 
 
 //currentTime:x轴当前时间（从0-到duration）, startY：起始点, duration:总时长， wholeY:路程 (即endY-startY)
+//参数基本是 x, 0, 1, 1 
+
+
+/* 
+easeOut 基本是y= m * (x-dur)^k + n， 若k为偶数，m<0, 若k为奇数，m>0;  （因为偶数的话必须开口向下才能获得斜率递减的递增的那段，而奇数是对称的，单调递增. ）
+根据x=0时y=0, x=dur时y=S , 得 n = S，m = -S/(-dur)^k
+
+*/
+ 
+easing.getEaseOut = function(k){// k 是>=2的整数. 越大变化率越大, 相同初始速度所需要时间越久 
+    let easeFun
+    k = Math.round(k)
+     
+    if(k<2){   
+        k = Math.PI / 2  
+        easeFun = easing.easeOutSine  
+    }else{
+        easeFun = function(currentTime, startY, wholeY, duration) {  
+            if(k>2){ 
+                console.log(k) 
+            }
+           return -wholeY/Math.pow(-duration, k) * Math.pow(currentTime-duration,  k) + wholeY 
+        }  
+    }
+      
+    return {
+        k,
+        easeFun  
+    }  
+}
+
+
+
+
+
+
+
+
+
 
 easing.linearTween = function(currentTime, startY, wholeY, duration) {
     return wholeY * currentTime / duration + startY
@@ -14,7 +53,7 @@ easing.easeInQuad = function(currentTime, startY, wholeY, duration) {
     wholeY * currentTime * currentTime + startY
 }
 ,
-easing.easeOutQuad = function(currentTime, startY, wholeY, duration) {
+easing.easeOutQuad = function(currentTime, startY, wholeY, duration) { // 如套上实际的距离S和时长dur, y = - S / dur *(x^2-2x) 当s为1,dur为1时，是  y = -(x-1)^2 + 1 ， 在0-1中是斜率递减的递增函数.     导数- S / dur *(2x-2 )   可求出实时速度  故在0这一时刻，速度为 2S/dur  
     return currentTime /= duration,
     -wholeY * currentTime * (currentTime - 2) + startY
 }
@@ -30,7 +69,7 @@ easing.easeInCubic = function(currentTime, startY, wholeY, duration) {
     wholeY * currentTime * currentTime * currentTime + startY
 }
 ,
-easing.easeOutCubic = function(currentTime, startY, wholeY, duration) {
+easing.easeOutCubic = function(currentTime, startY, wholeY, duration) {// y = S / dur^3 *(x-dur)^3 + S，对称中心是(dur,S),从0-dur是 斜率递减的递增函数，导数为3S/dur^3 * (x-dur)^2, 0时速度为3S/dur
     return currentTime /= duration,
     currentTime--,
     wholeY * (currentTime * currentTime * currentTime + 1) + startY
@@ -47,7 +86,7 @@ easing.easeInQuart = function(currentTime, startY, wholeY, duration) {
     wholeY * currentTime * currentTime * currentTime * currentTime + startY
 }
 ,
-easing.easeOutQuart = function(currentTime, startY, wholeY, duration) {
+easing.easeOutQuart = function(currentTime, startY, wholeY, duration) {//根据上面的计算，估计0时速度应该是4S/dur吧…… 
     return currentTime /= duration,
     currentTime--,
     -wholeY * (currentTime * currentTime * currentTime * currentTime - 1) + startY
@@ -80,7 +119,8 @@ easing.easeInSine = function(currentTime, startY, wholeY, duration) {
     return -wholeY * Math.cos(currentTime / duration * (Math.PI / 2)) + wholeY + startY
 }
 ,
-easing.easeOutSine = function(currentTime, startY, wholeY, duration) {
+easing.easeOutSine = function(currentTime, startY, wholeY, duration) {// y' = S * PI / 2 / dur * cos(PI/2/dur * x)
+    console.log('easeOutSine')
     return wholeY * Math.sin(currentTime / duration * (Math.PI / 2)) + startY
 }
 ,
@@ -179,6 +219,16 @@ easing.easeInOutBounce = function(currentTime, startY, wholeY, r) {
  
 
 
+
+
+
+
+
+
+
+
+
+
 var lerp = {
 	/* vector: function(currentTime, startY, f) {//xzw change, add f
 		var wholeY = currentTime.clone();

src/viewer/map/MapViewer.js

@@ -585,9 +585,9 @@ export class MapViewer extends ViewerBase{
         if(params.target){
             renderer.setRenderTarget(params.target)
         } 
-        if(params.resize){
-            this.emitResizeMsg(new THREE.Vector2(params.width,params.height))
-        } 
+        /* if(params.resize){
+            this.emitResizeMsg(new THREE.Vector2(params.width,params.height, viewport:params.viewport))
+        }  */
         params.clear ? params.clear() : renderer.clear(); 
         
         if(!this.attachedToViewer){
@@ -603,10 +603,10 @@ export class MapViewer extends ViewerBase{
         
         renderer.render(this.scene, this.camera);
         renderer.render(viewer.scene.scene, this.camera);
-        //测量线
-        //if(this.renderMeasure)viewer.dispatchEvent({type: "render.pass.perspective_overlay", viewer: viewer, camera:this.camera});
-        params.renderOverlay && params.renderOverlay({camera:this.camera, isMap:true, viewport: this.viewports[0] })//其余如reticule 等场景层
         
+        //测量线等
+        //params.renderOverlay && params.renderOverlay({camera:this.camera, isMap:true, viewport: this.viewports[0] })//其余如reticule 等场景层
+        params.renderOverlay && params.renderOverlay( $.extend({}, params, { isMap:true }))
         
         
         renderer.setRenderTarget(null)

src/viewer/viewer.js

@@ -65,6 +65,15 @@ import {MeshDraw}  from '../utils/DrawUtil'
 import {OBJLoader} from "../../libs/three.js/loaders/OBJLoader.js";
 import {MTLLoader} from "../../libs/three.js/loaders/MTLLoader.js";
 
+import SSAARenderPass from "../materials/postprocessing/SSAARenderPass"
+import EffectComposer from '../materials/postprocessing/EffectComposer'
+import {ShaderPass} from '../materials/postprocessing/ShaderPass'
+import RenderPass from '../materials/postprocessing/RenderPass'
+import FXAAShader from "../materials/postprocessing/FXAAShader"
+
+
+
+
 
 
 
@@ -311,6 +320,8 @@ export class Viewer extends ViewerBase{
                 this.shadowTestCam.lookAt(new THREE.Vector3(0, 0, 4.87));
             }
             
+             
+            
 
             let scene = new Scene(this.renderer);
             
@@ -331,6 +342,48 @@ export class Viewer extends ViewerBase{
             }
 
             this.setScene(scene);
+            
+            
+            //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差不多，都对透明不太友好。
+                /* const renderPass = new RenderPass();
+				renderPass.clearColor = new THREE.Color( 0, 0, 0 );
+				renderPass.clearAlpha = 0;
+                this.composer.addPass( renderPass ); 
+                 
+                this.fxaaPass = new ShaderPass( FXAAShader );
+                 
+				this.composer.addPass( this.fxaaPass );
+                
+                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.fxaaPass = new ShaderPass( FXAAShader );
+                //this.fxaaPass.readTarget = true //add
+				this.composer.addPass( this.fxaaPass );
+                this.composer.readTarget = true
+                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.inputHandler = new InputHandler(this, this.scene.scene);
@@ -2647,7 +2700,8 @@ export class Viewer extends ViewerBase{
                     params_.target.viewport.set(left, bottom, width, height);  
                     scissorTest && params_.target.scissor.set(left, bottom, width, height); 
                     params_.target.scissorTest = scissorTest
-                }else{
+                    
+                }else{        
                     this.renderer.setViewport(left, bottom, width, height) //规定视口，影响图形变换（画布的使用范围） 
                     scissorTest && this.renderer.setScissor( left, bottom, width, height );//规定渲染范围
                     this.renderer.setScissorTest( scissorTest );//开启WebGL剪裁测试功能，如果不开启，.setScissor方法设置的范围不起作用 | width==1且height==1时开启会只有鼠标的地方刷新，很奇怪
@@ -2655,7 +2709,10 @@ export class Viewer extends ViewerBase{
                 }
                
             }    
-             
+            
+
+
+            
             if(needSResize){
                 this.emitResizeMsg( { viewport:view} )
             } 
@@ -2666,11 +2723,11 @@ export class Viewer extends ViewerBase{
             
             viewer.dispatchEvent({type: "render.begin",  viewer: viewer, viewport:view, params });
             
-            if(view.render){
-                view.render({
-                    target: params_.target, renderer:this.renderer,   clear:this.clear.bind(this),
+            if(view.render){ 
+                view.render($.extend({}, params, {
+                    renderer:this.renderer,   clear:this.clear.bind(this), resize:null,
                     renderOverlay: this.renderOverlay.bind(this), force:!view.noPointcloud //如果要渲染点云，必须也一直渲染地图，否则地图会被覆盖（点云目前未能获取是否改变，也可能有其他动态物体，所以还是一直渲染的好）
-                })
+                }))
             } 
             
              
@@ -2710,12 +2767,31 @@ export class Viewer extends ViewerBase{
                 
                 view.afterRender && view.afterRender()
             } 
-            
-             
              
+
             this.dispatchEvent({type: "render.end",  viewer: this, viewport:view  });
+            
+             
         })
         
+        
+        
+        /* if(params_.screenshot){ //抗锯齿
+            params_.target.viewport.set(0, 0, params_.target.width, params_.target.height);  
+            //scissorTest && params_.target.scissor.set(left, bottom, width, height); 
+            params_.target.scissorTest = false
+            
+            this.renderer.setRenderTarget(params_.target) 
+             
+            
+            this.composer.render(); 
+
+            this.renderer.setRenderTarget(params_.target) //本想再画一层标签，但是viewport总是出错
+             
+            
+        }  */
+        
+        
         this.renderer.setRenderTarget(null)
         
         
@@ -2763,12 +2839,11 @@ export class Viewer extends ViewerBase{
         this.renderer.clearDepth(); 
 
         //this.transformationTool.update();
-         
-         
+       
          
         if(!params.magnifier){ 
             //测量线 
-            this.dispatchEvent({type: "render.pass.perspective_overlay", camera});
+            this.dispatchEvent({type: "render.pass.perspective_overlay", camera, screenshot:params.screenshot});
             
             if(!params.screenshot && !params.isMap){
                 this.setCameraLayers(camera, ['magnifier']) //magnifier 遮住测量线 
@@ -2781,7 +2856,7 @@ export class Viewer extends ViewerBase{
             this.renderer.render(this.clippingTool.sceneVolume, camera);
             this.renderer.render(this.transformationTool.scene, camera);
         }
-        
+         
     }
      
     setLimitFar(state){//切换是否limitFar

src/viewer/viewerBase.js

@@ -202,7 +202,7 @@ export class ViewerBase extends THREE.EventDispatcher{
             this.renderer.setSize(width, height, null, devicePixelRatio); // resize之后会自动clear(似乎因为setScissor )，所以一定要立刻绘制，所以setSize要在cameraChanged、update之前
         }
        
-        //this.composer.setSize(width, height);
+        this.composer && this.composer.setSize(width, height);
         
         if(this.viewports){
             this.viewports.forEach((view,i)=>{