瀏覽代碼

fix: 截图改用fxaa

xzw 1 年之前
父節點
當前提交
ef513777e6

+ 29 - 12
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)=>{ //readTarget的话是渲染一整张的,暂时无法一个个viewport渲染所以不用
+        this.readTarget || this.setSize(e.viewport.resolution2.x,e.viewport.resolution2.y) //暂时假设composer渲染的viewer的viewports.length == 1
     })
     
 };
@@ -92,9 +92,12 @@ Object.assign(  EffectComposer.prototype, {
 		var maskActive = false;
         let passes = this.passes.filter(e=>e.enabled)
 		var pass, i, il = passes.length;
-
-        if(this.readTarget){ //add 使用当前renderTarget中的像素 
-            this.copyPass.render( scene, camera,viewports, this.renderer, this.readBuffer, this.renderer.getRenderTarget()  );
+        let oldTarget = this.renderer.getRenderTarget();
+        if(this.readTarget && oldTarget){ //add 使用当前renderTarget中的像素  
+            this.setSize(oldTarget.width, oldTarget.height)//所有viewports一起渲染,整个画面  因暂时没办法一个个copy
+            oldTarget.viewport.set(0, 0, oldTarget.width, oldTarget.height);    
+            oldTarget.scissorTest = false
+            this.copyPass.render( scene, camera,viewports, this.renderer, this.readBuffer, oldTarget  ); 
         }  
         
 		for ( i = 0; i < il; i ++ ) {
@@ -103,7 +106,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 +143,7 @@ Object.assign(  EffectComposer.prototype, {
 
 		}
         
-        
+        this.renderer.setRenderTarget(oldTarget);
         //add
          if(!pass.renderToScreen){ //最后一个如果没有绘制到屏幕or target上
             this.copyPass.renderToScreen = true
@@ -174,14 +177,28 @@ Object.assign(  EffectComposer.prototype, {
 
 	setSize: function ( width, height, scaleRatio ) {
 
-        scaleRatio = scaleRatio || 1;
-
-		this.renderTarget1.setSize( width * scaleRatio , height * scaleRatio );
-		this.renderTarget2.setSize( width * scaleRatio, height * scaleRatio );
+        scaleRatio = scaleRatio || this.scaleRatio || 1;
+        //console.log('setSize', width * scaleRatio, height * scaleRatio)
+        let maxTexWidth = 8192
+        let w = width * scaleRatio
+        let h = height * scaleRatio
+        if(w > maxTexWidth || h > maxTexWidth){ //超出会崩溃
+            if(w>h){
+                scaleRatio = maxTexWidth / width
+            }else{
+                scaleRatio = maxTexWidth / height
+            } 
+        } 
+        w = width * scaleRatio
+        h = height * scaleRatio
+        
+        
+		this.renderTarget1.setSize( w, h );
+		this.renderTarget2.setSize( w, h );
 
 		for ( var i = 0; i < this.passes.length; i ++ ) {
 
-			this.passes[ i ].setSize( width * scaleRatio, height * scaleRatio  );
+			this.passes[ i ].setSize( w, h );
 
 		}
 

+ 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;
 
 	}

+ 1 - 1
src/custom/mergeStartTest.js

@@ -47,7 +47,7 @@ var start = function(dom, mapDom, number, fileServer, webSite){ //t-Zvd3w0m
         //this.bound = new THREE.Box3(new THREE.Vector3(-1,-1,-1),new THREE.Vector3(1,1,1))
         
         viewer.transformationTool.setModeEnable('scale',false)
-        viewer.ssaaRenderPass.sampleLevel = 0 //奇怪好像没啥锯齿?  sampleLevel为1 的话,ground就不会
+        //viewer.ssaaRenderPass.sampleLevel = 0 //奇怪好像没啥锯齿?  sampleLevel为1 的话,ground就不会
     }
     
      

+ 2 - 1
src/custom/modules/mergeModel/MergeEditor.js

@@ -166,7 +166,8 @@ let MergeEditor = {
                 this.showModelOutline(this.selected,!!this.selected)
             } 
         })
-        viewer.ssaaRenderPass.enabled = false
+        viewer.fxaaPass.enabled = false//viewer.ssaaRenderPass.enabled = false
+        viewer.composer.scaleRatio = 1
         viewer.outlinePass.enabled = true
         //Potree.settings.intersectWhenHover = false
         //Potree.Utils.updateVisible(viewer.reticule, 'force', false)

+ 3 - 3
src/custom/modules/panos/Images360.js

@@ -241,8 +241,8 @@ export class Images360 extends THREE.EventDispatcher{
             
             
              
-            
-            let mapStyleBtn = $("<input type='button' value='普通'></input>")
+            if(viewer.mapViewer){
+                let mapStyleBtn = $("<input type='button' value='普通'></input>")
                 mapStyleBtn.css({
                     position : "absolute",
                     right : '50%',
@@ -259,7 +259,7 @@ export class Images360 extends THREE.EventDispatcher{
                     mapStyleBtn.val(map.style == 'satellite' ? '卫星' : '普通')
                 });
                 
-             
+            }
             
             
             

+ 4 - 1
src/custom/objects/tool/Measure.js

@@ -233,7 +233,10 @@ export class Measure extends ctrlPolygon{
             let center = new THREE.Vector3().addVectors(p1,p2).multiplyScalar(0.5);  
             label.setPos(center) 
             distance = distance == void 0 ? p1.distanceTo(p2) : distance; 
-            var text = viewer.unitConvert.convert(distance, 'distance', Potree.settings.precision, this.unitSystem, 1 , true)//distance要传0.1 这个factor
+            //var text = viewer.unitConvert.convert(distance, 'distance', Potree.settings.precision, this.unitSystem, 1 , true)//distance要传0.1 这个factor
+            var text = viewer.unitConvert.convert(distance, 'distance',  Potree.settings.precision , this.unitSystem, 0.01 , true  )//distance要传0.1 这个factor
+                     
+            
             label.setText(text)
             return distance
         }

+ 3 - 10
src/custom/objects/tool/MeasuringTool.js

@@ -621,18 +621,11 @@ export class MeasuringTool extends THREE.EventDispatcher{
         
         Potree.Utils.setCameraLayers(o.camera, ['measure'])
 		
-        if(o.screenshot && this.viewer.ssaaRenderPass.enabled){ //抗锯齿
+        /* if(o.screenshot && this.viewer.fxaaPass.enabled){ //抗锯齿
             this.viewer.ssaaRenderPass.sampleLevel = 4
             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{
+        }else{ */
             this.viewer.renderer.render(this.scene, o.camera );
-        }
+        //}
 	}
 };

+ 36 - 19
src/custom/viewer/ViewerNew.js

@@ -390,10 +390,10 @@ export class Viewer extends ViewerBase{
             //add:  for 截图时抗锯齿
               
             {
-                this.composer = new EffectComposer( this.renderer );
+               /*  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
@@ -402,7 +402,23 @@ export class Viewer extends ViewerBase{
                 /* let outlinePass = this.outlinePass = new OutlinePass( ); 
                 this.ssaaRenderPass.addPass(outlinePass) 
                  */
+                //ssaa有透明度、发黑的问题所以不用了
+              
+                //-------------------------- 
+                
+                
+                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 );  
+                 */
+                 
+                 
                 //for 融合页面 
                 let outlinePass = this.outlinePass = new OutlinePass( );
                 outlinePass.renderToScreen = true  //这样更流畅,不用ssaa了,缺点是outline有锯齿
@@ -411,25 +427,22 @@ export class Viewer extends ViewerBase{
                 outlinePass.edgeStrength = 4
                 outlinePass.edgeGlow = 0 
                 outlinePass.visibleEdgeColor = new THREE.Color("#09a1b3")   
-                //--------------------------
-                
+                 
+                 
                 
-                /* this.composer2 = new EffectComposer( this.renderer );
-                //const renderPass = new RenderPass();
-				//renderPass.clearColor = new THREE.Color( 0, 0, 0 );
-				//renderPass.clearAlpha = 0;
-                //this.composer2.addPass( renderPass );  
-                this.fxaaPass = new ShaderPass( FXAAShader ); 
+                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.material.uniforms[ 'resolution' ].value.x = 1 / ( width )  ;
+                    this.material.uniforms[ 'resolution' ].value.y = 1 / ( height )  ;  
                 } 
                 this.fxaaPass.renderToScreen = true;
                 
-				this.composer2.addPass( this.fxaaPass ); 
-                this.composer2.readTarget = true
-                */ 
+				this.composer.addPass( this.fxaaPass ); 
+                //抗锯齿截图 效果时而好时而不好,文字比较模糊
+                
+                
+                //这两个暂时不能一起用。目前刚好不需要一起用
                 
             }
             
@@ -3170,15 +3183,19 @@ export class Viewer extends ViewerBase{
         })
         
         
+       
         
-        /* if(params_.screenshot){ //抗锯齿
-            params_.target.viewport.set(0, 0, params_.target.width, params_.target.height);  
+        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(params_.target) //本想再画一层标签,但是viewport总是出错  */
+            
+            this.composer.render();  
+            
+        }  
         
         
         this.renderer.setRenderTarget(null)