Pārlūkot izejas kodu

fix: 百万米闪烁问题解决了两个,还剩下线条的

xzw 1 mēnesi atpakaļ
vecāks
revīzija
4690668fb0

+ 12 - 2
libs/three.js/build/three.module.js

@@ -17425,11 +17425,11 @@ function WebGLProgram( renderer, cacheKey, parameters, bindingStates ) {
 
 			console.error( 'THREE.WebGLProgram: shader error: ', gl.getError(), '35715', gl.getProgramParameter( program, 35715 ), 'gl.getProgramInfoLog', programLog, vertexErrors, fragmentErrors );
             //xzw add:
-            if(fragmentErrors){
+            /* if(fragmentErrors){
                 console.log(fragmentGlsl.split("\n").map((a, i) => `${i + 1}`.padEnd(5) + a).join("\n") )
             }else{
                 console.log(vertexGlsl.split("\n").map((a, i) => `${i + 1}`.padEnd(5) + a).join("\n") )
-            }
+            } */
             
 		} else if ( programLog !== '' ) {
 
@@ -24964,6 +24964,16 @@ function WebGLRenderer( parameters ) {
 		p_uniforms.setValue( _gl, 'normalMatrix', object.normalMatrix );
 		p_uniforms.setValue( _gl, 'modelMatrix', object.matrixWorld );
 
+        //xzw add:
+        if(material.useStaticMatrix){
+            let matrixWorld = object.matrixWorld.clone()
+            //if(material.useStaticMatrix != 'pause'){
+                matrixWorld.elements[12] -= camera.matrixWorld.elements[12]
+                matrixWorld.elements[13] -= camera.matrixWorld.elements[13]
+                matrixWorld.elements[14] -= camera.matrixWorld.elements[14]
+            //}
+            p_uniforms.setValue( _gl, 'staticModelMatrix', matrixWorld );
+        }
 		return program;
 
 	}

+ 42 - 11
src/custom/materials/ModelTextureMaterial.js

@@ -77,6 +77,10 @@ let shader = {
 				type: "v3",
 				value: new THREE.Vector3
 			},
+            staticPano0Pos: {
+				type: "v3",
+				value: new THREE.Vector3
+			},
 			pano0Matrix: {
 				type: "m4",
 				value: new THREE.Matrix4
@@ -86,6 +90,10 @@ let shader = {
 				type: "v3",
 				value: new THREE.Vector3
 			},
+            staticPano1Pos: {
+				type: "v3",
+				value: new THREE.Vector3
+			},
 			pano1Matrix: {
 				type: "m4",
 				value: new THREE.Matrix4
@@ -130,12 +138,12 @@ let shader = {
        
         vertexShader: prefixVertex + `
 
-            uniform vec3 pano0Position;
+            uniform vec3 staticPano0Pos;
             uniform mat4 pano0Matrix;
             
-            uniform vec3 pano1Position;
+            uniform vec3 staticPano1Pos;
             uniform mat4 pano1Matrix; 
-
+            uniform mat4 staticModelMatrix; ///!!! 替换modelMatrix,减去了相机位置
            
             varying vec2 vUv; 
             varying vec3 vWorldPosition0;
@@ -154,16 +162,16 @@ let shader = {
             void main() {
             
                 vUv = uv;
-                vec4 worldPosition = modelMatrix * vec4(position, 1.0);
+                vec4 worldPosition = /* modelMatrix */  staticModelMatrix * vec4(position, 1.0);
                 
                 
             
-                vec3 positionLocalToPanoCenter0 = worldPosition.xyz - pano0Position;
+                vec3 positionLocalToPanoCenter0 = worldPosition.xyz - staticPano0Pos;
                 vWorldPosition0 = (vec4(positionLocalToPanoCenter0, 1.0) * pano0Matrix).xyz;
                 vWorldPosition0.x *= -1.0;
                 vWorldPosition0 = transformAxis(vWorldPosition0);
                 
-                vec3 positionLocalToPanoCenter1 = worldPosition.xyz - pano1Position;
+                vec3 positionLocalToPanoCenter1 = worldPosition.xyz - staticPano1Pos;
                 vWorldPosition1 = (vec4(positionLocalToPanoCenter1, 1.0) * pano1Matrix).xyz;
                 vWorldPosition1.x *= -1.0;
                 vWorldPosition1 = transformAxis(vWorldPosition1);
@@ -192,8 +200,8 @@ let shader = {
             uniform float opacity;
             uniform float progress;
             uniform int tranType;
-            uniform vec3 pano0Position;
-            uniform vec3 pano1Position;
+            uniform vec3 staticPano0Pos;
+            uniform vec3 staticPano1Pos;
             uniform float maxDistance;
             uniform float minDistance;
             uniform float minOpa;
@@ -504,10 +512,16 @@ export default class ModelTextureMaterial extends THREE.RawShaderMaterial {
             //add
             
             viewer.addEventListener('camera_changed', (e)=>{
-                if(e.viewport.name != "MainView")return
+                if(e.viewport.name != "MainView" || e.changeInfo && !e.changeInfo.positionChanged )return
                 //this.uniforms.projectionMatrix.value.copy(e.camera.projectionMatrix) 
                 e.camera && this.uniforms.inverseProjectionMatrix.value.copy(e.camera.projectionMatrixInverse)
+             
+                this.updateStaticProps() 
             })   
+            this.useStaticMatrix = true  //在three里增加了staticModelMatrix
+            
+            
+            
             
             let setClass = ()=>{
                 this.classification = viewer.classifications
@@ -543,10 +557,27 @@ export default class ModelTextureMaterial extends THREE.RawShaderMaterial {
             },
         })
 		//-------------------------------------
+        
+        
+        
+        
+        
+        
+        
 	}
  
     
-      
+    updateStaticProps(){//为了防止移动到百万米以外的地方全景图扭曲, 要禁止往shader传入大数字,所以改为相对相机的pos
+        let { staticPano0Pos, staticPano1Pos  } = this.uniforms 
+        let camera = viewer.mainViewport.camera
+        staticPano0Pos.value.copy(this.uniforms.pano0Position.value)
+        staticPano1Pos.value.copy(this.uniforms.pano1Position.value)
+        
+        staticPano0Pos.value.sub(camera.position) 
+        staticPano1Pos.value.sub(camera.position) 
+         
+        //相机和模型的相对位移不变不需要修改ModelViewMatrix
+    } 
      
 	setProjectedPanos(pano0, pano1, progressValue ){
         
@@ -578,7 +609,7 @@ export default class ModelTextureMaterial extends THREE.RawShaderMaterial {
         //console.log('setProjectedPanos', pano0&&pano0.id, pano1&&pano1.id)
         this.needsUpdate = true;
         
-        
+        this.updateStaticProps()
         
  	}
     

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

@@ -103,7 +103,7 @@ let MergeEditor = {
         
             Potree.settings.notAdditiveBlending = true
         
-            let ground = this.ground = new InfiniteGridHelper(1, 10000, new THREE.Color('#eee'), 10000, 0.2, 0.3)
+            let ground = this.ground = new InfiniteGridHelper(1, 1000, new THREE.Color('#eee'), 10000, 0.2, 0.26, viewer)
             viewer.scene.scene.add(ground) 
             //再加两条线否则在正侧边看不到
             let line1 = LineDraw.createLine([new THREE.Vector3(-10000, 0, 0),new THREE.Vector3(10000, 0, 0) ], {color:'#aaa', })

+ 2 - 1
src/custom/modules/panos/Images360.js

@@ -3486,10 +3486,11 @@ Images360.prototype.updateCube = (function(){//增加细分的版本,且垂直
             addFaces()
            
             //MeshDraw.updateGeometry(this.cube.geometry, posArr, faceArr)
+            posArr.forEach(p=>p.sub(pano0.position))//避免在一百万米处抖动,但避免不了在一千万米全景图扭曲
             let geo = MeshDraw.createGeometry(posArr, faceArr)
             this.cube.geometry = geo
             this.cube.scale.set(1,1,1);
-            this.cube.position.set(0,0,0)
+            this.cube.position.copy(pano0.position)
             
             if(Potree.settings.testCube){
                 this.cubeTest.geometry = geo

+ 65 - 25
src/custom/objects/InfiniteGridHelper.js

@@ -1,11 +1,11 @@
 // Author: Fyrestar https://mevedia.com (https://github.com/Fyrestar/THREE.InfiniteGridHelper)
 import * as THREE from "../../../libs/three.js/build/three.module.js";
-
+import math from "../utils/math.js";
 
 
 class InfiniteGridHelper extends THREE.Mesh{
      
-    constructor(size1, size2, color, distance, opacity1=0.2, opacity2=1){
+    constructor(size1, size2, color, distance, opacity1=0.2, opacity2=1, viewer){
         
         color = color || new THREE.Color('white');
         size1 = size1 || 10;
@@ -13,7 +13,7 @@ class InfiniteGridHelper extends THREE.Mesh{
 
         distance = distance || 8000; //可视距离?越远越模糊
 
-        const geometry = new THREE.PlaneBufferGeometry(2, 2, 1, 1);
+        const geometry = new THREE.PlaneGeometry(2, 2, 1, 1);
 
         const material = new THREE.ShaderMaterial({
 
@@ -39,24 +39,28 @@ class InfiniteGridHelper extends THREE.Mesh{
                 },
                 uDistance: {
                     value: distance
+                },
+                staticCamPos :{
+                    value: new THREE.Vector3(0,0,0)
+                }, 
+                staticModelViewMatrix:{
+                    value: new THREE.Matrix4()
                 }
             },
             transparent: true,
             vertexShader: `
                
                varying vec3 worldPosition;
-               
+               uniform vec3 staticCamPos;
                uniform float uDistance;
-               
+               uniform mat4 staticModelViewMatrix;
                void main() {
                
-                    vec3 pos = position.xyz * uDistance;
-                    pos.xy += cameraPosition.xy;
+                    vec3 pos = position.xyz * uDistance; 
+                    pos.xy += staticCamPos.xy;  //pos.xy += cameraPosition.xy;
+                    worldPosition = pos; 
                     
-                    worldPosition = pos;
-                    
-                    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
-               
+                    gl_Position = projectionMatrix * staticModelViewMatrix/* modelViewMatrix */ * vec4(pos, 1.0);
                }
                `,
 
@@ -64,7 +68,7 @@ class InfiniteGridHelper extends THREE.Mesh{
             fragmentShader: `
                
                varying vec3 worldPosition;
-               
+               uniform vec3 staticCamPos;
                uniform float uSize1;
                uniform float uSize2;
                uniform float opacity1;
@@ -78,7 +82,6 @@ class InfiniteGridHelper extends THREE.Mesh{
                 
                     vec2 r = worldPosition.xy / size;
                     
-                    
                     vec2 grid = abs(fract(r - 0.5) - 0.5) / fwidth(r);
                     float line = min(grid.x, grid.y);
                     
@@ -89,21 +92,20 @@ class InfiniteGridHelper extends THREE.Mesh{
 
                void main() {
                
-                    
-                      float d = 1.0 - min(distance(cameraPosition.xy, worldPosition.xy) / uDistance, 1.0);
-                    
-                      float g1 = getGrid(uSize1);
-                      float g2 = getGrid(uSize2);
+
+                    float d = 1.0 - min(distance(staticCamPos/* cameraPosition */.xy, worldPosition.xy) / uDistance, 1.0); 
+                     
+                    float g1 = getGrid(uSize1);
+                    float g2 = getGrid(uSize2);
                       
                       
-                      gl_FragColor = vec4(uColor.rgb, mix(g2, g1, g1) * pow(d, 3.0));
-                      //gl_FragColor.a = mix(0.5 * gl_FragColor.a, gl_FragColor.a, g2);
-                        gl_FragColor.a = mix(opacity1 * gl_FragColor.a, opacity2 * gl_FragColor.a, g2);
+                    gl_FragColor = vec4(uColor.rgb, mix(g2, g1, g1) * pow(d, 3.0));
+                    //gl_FragColor.a = mix(0.5 * gl_FragColor.a, gl_FragColor.a, g2);
+                    gl_FragColor.a = mix(opacity1 * gl_FragColor.a, opacity2 * gl_FragColor.a, g2);
                         
                         
-                      if ( gl_FragColor.a <= 0.0 ) discard;
-                    
-               
+                    if ( gl_FragColor.a <= 0.0 ) discard;
+              
                }
                
                `,
@@ -119,7 +121,45 @@ class InfiniteGridHelper extends THREE.Mesh{
         
         super(geometry, material)
         this.frustumCulled = false;
-
+        
+        
+        
+        
+        
+        
+        //当视角移动到百万米以后线会变虚闪烁,所以提前计算下相对位置再传入shader,不要把大数字直接传入:
+          
+        //暂只在mainViewport绘制
+
+        viewer.addEventListener('camera_changed',(e)=>{  
+            if(e.viewport != viewer.mainViewport || e.changeInfo && !e.changeInfo.positionChanged ) return
+                 
+            let { staticCamPos, staticModelViewMatrix} = this.material.uniforms 
+            
+             
+            let camera = viewer.mainViewport.camera 
+            staticCamPos.value.copy(camera.position)
+            
+            
+            if(math.closeTo(camera.position, new THREE.Vector3(0,0,0), 50000)){//没有超过这个范围就用原本的 
+                staticModelViewMatrix.value = this.modelViewMatrix //用copy会延迟,要先更新矩阵
+            }else{ 
+                
+                staticCamPos.value.x %= size2
+                staticCamPos.value.y %= size2  //只要余数。不过之前我的大格子设置为和整个大小一致,以隐藏大格子,如果要求恢复隐藏,就用size1
+                 
+                let camM = camera.matrixWorld.clone()
+                    camM.elements[12] = staticCamPos.value.x 
+                    camM.elements[13] = staticCamPos.value.y 
+                    camM.invert()  
+                staticModelViewMatrix.value = new THREE.Matrix4().multiplyMatrices( camM, this.matrixWorld );
+            }
+             
+        }) 
+         
+        
+        
+         
     }
 
 

+ 3 - 1
src/custom/viewer/ViewerNew.js

@@ -4881,8 +4881,10 @@ export class Viewer extends ViewerBase{
                 let count = pointcloud.root.geometryNode.geometry.attributes.position.count
                 let index = Math.ceil(count / 2) //随便取一个点 
                 let point = new THREE.Vector3(posArr[index*3+0],posArr[index*3+1],posArr[index*3+2]) 
+                
+                point.applyMatrix4(pointcloud.root.sceneNode.matrixWorld)//有时候不对
                 //point.applyMatrix4(pointcloud.root.pointcloud.matrixWorld)
-                point.applyMatrix4(pointcloud.root.sceneNode.matrixWorld)
+                
                 viewer.focusOnObject({position:point},'point',duration,{dontChangeCamDir:true, distance:15})
 
                 o.dontMoveMap || viewer.mapViewer.fitToPointcloud(pointcloud, duration)