fix: webgl2

public/lib/potree/potree.js

@@ -53806,7 +53806,49 @@
 	        return dataUrl
 
 	 
-	    }
+	    },
+	    
+	    changeShaderToWebgl2(vs, fs, matType, otherReplaces=[]){
+	        if(!Potree.settings.isWebgl2)return {vs, fs}
+	        let turnTo300 = matType != 'ShaderMaterial' && (vs.includes('gl_FragDepthEXT') || fs.includes('gl_FragDepthEXT') ); 
+	        let addV300 = turnTo300 && matType != 'RawShaderMaterial'; //需要直接material.glslVersion = '300 es' 以加在define之前
+	        let change = (shader, shaderType)=>{ 
+	            let newShader = shader;
+	            
+	            if(turnTo300){ //需要加 #version 300 es。  shaderMaterial会自动加所以不用
+	                addV300 && (newShader = '#version 300 es \n' + newShader);
+	                newShader = newShader.replaceAll('varying ', shaderType == 'vs' ? 'out ' : 'in ');
+	                newShader = newShader.replaceAll('attribute ', 'in '); 
+	                if(shaderType == 'fs'){
+	                    newShader = newShader.replaceAll('gl_FragColor', 'fragColor');
+	                    newShader = newShader.replace('void main', 'out vec4 fragColor;\n  void main' );//在void main前加入这个声明 
+	                }  
+	                newShader = newShader.replaceAll('gl_FragDepthEXT','gl_FragDepth');
+	            
+	                newShader = newShader.replaceAll('texture2D','texture');
+	                newShader = newShader.replaceAll('textureCube','texture');
+	            
+	            }
+	            
+	            newShader = newShader.replace('#extension GL_EXT_frag_depth : enable',''); 
+	            newShader = newShader.replaceAll('defined(GL_EXT_frag_depth) &&','');
+	             
+	            
+	            otherReplaces.forEach(({oldStr,newStr})=>{
+	                newShader = newShader.replaceAll(oldStr,newStr);   
+	            });
+	                
+	            return newShader
+	        };
+	        
+	        vs = change(vs,'vs');
+	        fs = change(fs,'fs');
+	         
+	        console.log('成功替换为webgl2' );
+	        return {vs,fs}
+	    }//three.js的shaderMaterial也有替换功能，搜 '#define gl_FragDepthEXT gl_FragDepth',
+	    
+	    
 	};  
 
 	Potree.Common = Common;
@@ -57610,7 +57652,7 @@
 		#include <clipping_planes_pars_fragment>
 
 
-        #if defined(GL_EXT_frag_depth) && defined(useDepth)  
+        #if defined(GL_EXT_frag_depth) && defined(useDepth)   
             float convertToLinear(float zValue)
             {
                 //if(uUseOrthographicCamera){
@@ -57813,14 +57855,16 @@
 
 		constructor( parameters ) {
 
+	        let {vs,fs} = Potree.Common.changeShaderToWebgl2(ShaderLib[ 'line' ].vertexShader, ShaderLib[ 'line' ].fragmentShader, 'ShaderMaterial');
+
 			super( {
 
 				type: 'LineMaterial',
 
 				uniforms: UniformsUtils.clone( ShaderLib[ 'line' ].uniforms ),
 
-				vertexShader: ShaderLib[ 'line' ].vertexShader,
-				fragmentShader: ShaderLib[ 'line' ].fragmentShader,
+				vertexShader: vs,
+				fragmentShader: fs,
 
 				clipping: true // required for clipping support
 
@@ -62122,7 +62166,7 @@ varying float 	vRadius;
 varying float 	vPointSize;
 
 
-float round(float number){
+float Round(float number){
 	return floor(number + 0.5);
 }
 
@@ -62215,15 +62259,15 @@ float getLOD(){//////we use this
 		
 		vec3 index3d = (position-offset) / nodeSizeAtLevel;
 		index3d = floor(index3d + 0.5);
-		int index = int(round(4.0 * index3d.x + 2.0 * index3d.y + index3d.z));
+		int index = int(Round(4.0 * index3d.x + 2.0 * index3d.y + index3d.z));
 		
 		vec4 value = texture2D(visibleNodes, vec2(float(iOffset) / 2048.0, 0.0));
-		int mask = int(round(value.r * 255.0));
+		int mask = int(Round(value.r * 255.0));
 
 		if(isBitSet(mask, index)){
 			// there are more visible child nodes at this position
-			int advanceG = int(round(value.g * 255.0)) * 256;
-			int advanceB = int(round(value.b * 255.0));
+			int advanceG = int(Round(value.g * 255.0)) * 256;
+			int advanceB = int(Round(value.b * 255.0));
 			int advanceChild = numberOfOnes(mask, index - 1);
 			int advance = advanceG + advanceB + advanceChild;
 
@@ -62255,10 +62299,10 @@ float getSpacing(){
 		
 		vec3 index3d = (position-offset) / nodeSizeAtLevel;
 		index3d = floor(index3d + 0.5);
-		int index = int(round(4.0 * index3d.x + 2.0 * index3d.y + index3d.z));
+		int index = int(Round(4.0 * index3d.x + 2.0 * index3d.y + index3d.z));
 		
 		vec4 value = texture2D(visibleNodes, vec2(float(iOffset) / 2048.0, 0.0));
-		int mask = int(round(value.r * 255.0));
+		int mask = int(Round(value.r * 255.0));
 		float spacingFactor = value.a;
 
 		if(i > 0.0){
@@ -62268,8 +62312,8 @@ float getSpacing(){
 
 		if(isBitSet(mask, index)){
 			// there are more visible child nodes at this position
-			int advanceG = int(round(value.g * 255.0)) * 256;
-			int advanceB = int(round(value.b * 255.0));
+			int advanceG = int(Round(value.g * 255.0)) * 256;
+			int advanceB = int(Round(value.b * 255.0));
 			int advanceChild = numberOfOnes(mask, index - 1);
 			int advance = advanceG + advanceB + advanceChild;
 
@@ -62765,7 +62809,7 @@ bool insideBox(mat4 clipBox, vec4 worldPos){//add
         float yMin = prismInfo[1][2];
         float yMax = prismInfo[2][0]; 
 
-        int pointCount = int(round(prismInfo[2][1]));
+        int pointCount = int(Round(prismInfo[2][1]));
          
         if( worldPos.x < xMin || worldPos.x > xMax || worldPos.y < yMin || worldPos.y > yMax)return 0;
         #ifndef showBaseHeight
@@ -62958,7 +63002,7 @@ void doClipping(vec4 world){
             }
         
                    
-            pointIndexStart += int(round(prismList[i][2][1])); 
+            pointIndexStart += int(Round(prismList[i][2][1])); 
 		} 
         
         #ifdef color_type_heightCpt  
@@ -63948,7 +63992,8 @@ uniform vec3 baseColor;
     }
 #endif
  
-#if defined(GL_EXT_frag_depth) && defined(useDepth)  
+
+  #if defined(GL_EXT_frag_depth) && defined(useDepth)
     //似乎通过gl.getExtension('EXT_frag_depth')得到的GL_EXT_frag_depth
      
     uniform sampler2D depthTexture;
@@ -63983,7 +64028,7 @@ void main() {
     
     
     
-    #if defined(GL_EXT_frag_depth) && defined(useDepth)
+    #if defined(GL_EXT_frag_depth) && defined(useDepth)    
         // mixFactor and clipFactor define the color mixing proportion between the states of
         // full visibility and occluded visibility
         // and
@@ -70590,6 +70635,11 @@ void main()
 	        this.clipBoxes_out = [];
 	        this.highlightBoxes = [];
 			this.prisms = [];
+	        
+	        let {vs, fs} = Common.changeShaderToWebgl2(Shaders['pointcloud_new.vs'],Shaders['pointcloud_new.fs'], 'selfBuild' );
+	        Shaders['pointcloud_new.vs'] = vs;
+	        Shaders['pointcloud_new.fs'] = fs;
+	        
 			this.updateShaderSource();
 		}
 
@@ -71377,11 +71427,14 @@ void main()
 	            maxOcclusionFactor :  { type: 'f', 	value: o.maxOcclusionFactor || 1 },  //0-1
 	            mapScale:  { type: 'f', 	value:  o.mapScale || 1 },  //0-1
 			};  
-	     
+	        
+	        
+	        let {vs,fs} = Common.changeShaderToWebgl2(Shaders['depthBasic.vs'], Shaders['depthBasic.fs'], 'ShaderMaterial');
+	        
 	        super({ 
 	            uniforms,
-	            vertexShader: Shaders['depthBasic.vs'],   
-	            fragmentShader: Shaders['depthBasic.fs'],
+	            vertexShader: vs,   
+	            fragmentShader: fs,
 	            depthWrite: false,
 	            depthTest: false,
 	            transparent: o.transparent == void 0 ?  true : o.transparent,
@@ -76985,9 +77038,10 @@ void main()
 	            };    
 	              
 	            viewer.loadModel(info , callback, onProgress, onError);
+	               
 	            
 	            
-	            
+	       
 	        }else if(prop.type == 'osgb' || prop.type == 'b3dm'){  //3d tiles  
 	        
 	            let callback = (object)=>{
@@ -81131,8 +81185,10 @@ void main()
 	        let canvas = document.createElement("canvas");
 	                                                             
 
-	        let context = canvas.getContext('webgl', contextAttributes );   //不用webgl2是因为有的写法在webgl2不支持 如gl_FragDepthEXT 
-	        
+	        let context = canvas.getContext('webgl2', contextAttributes );   //不用webgl2是因为有的写法在webgl2不支持 如gl_FragDepthEXT 
+	        if(context){
+	            Potree.settings.isWebgl2 = true;
+	        } 
 
 	        this.renderer = new WebGLRenderer({ 
 	            premultipliedAlpha: false, 
@@ -81495,7 +81551,7 @@ void main()
 	    }
 	}
 
-	const prefixVertex ="precision highp float;\nprecision highp int;\n\nuniform mat4 modelMatrix;\nuniform mat4 modelViewMatrix;\nuniform mat4 projectionMatrix;\nuniform mat4 viewMatrix;\nuniform mat3 normalMatrix;\nuniform vec3 cameraPosition;\nattribute vec3 position;\nattribute vec3 normal;\nattribute vec2 uv;\n";
+	const prefixVertex ="precision highp float;\nprecision highp int;\n\nuniform mat4 modelMatrix;\nuniform mat4 modelViewMatrix;\nuniform mat4 projectionMatrix;\nuniform mat4 viewMatrix;\nuniform mat3 normalMatrix;\nuniform vec3 cameraPosition;\n attribute vec3 position;\n attribute vec3 normal;\n attribute vec2 uv;\n";
 	const prefixFragment ="precision highp float;\nprecision highp int;\n\nuniform mat4 viewMatrix;\nuniform vec3 cameraPosition;\n";
 	 
 	let shader = {
@@ -81635,7 +81691,8 @@ void main()
 
         `,
 	        fragmentShader: prefixFragment + `
-            #extension GL_EXT_frag_depth : enable
+            #extension GL_EXT_frag_depth : enable        // otherwise error: 'GL_EXT_frag_depth' : extension is disabled
+            
             #define PI 3.141592653 
             
              
@@ -81661,6 +81718,7 @@ void main()
             varying vec3 vWorldPosition0;
             varying vec3 vWorldPosition1;
             //varying vec3 vWorldPosition12;
+            
           
             /* vec2 getSamplerCoord( vec3 direction ) 
             {
@@ -81742,7 +81800,7 @@ void main()
                 #endif
                 vec4 colorFromPano1=textureCube(pano1Map,vWorldPosition1N.xyz);
  
-                gl_FragColor=mix(colorFromPano0,colorFromPano1,progress);
+                gl_FragColor = mix(colorFromPano0,colorFromPano1,progress);
               
               
                 
@@ -81783,18 +81841,18 @@ void main()
 	    
 	        let defines = {depthTexUVyLimit: Potree.config.depthTexUVyLimit};
 	         
-	       
+	        let {vs,fs} = Common.changeShaderToWebgl2(shader.vertexShader, shader.fragmentShader, 'RawShaderMaterial');
 	        
 	        super({
-	            fragmentShader: shader.fragmentShader,
-				vertexShader: shader.vertexShader,
+	            fragmentShader: fs,
+				vertexShader: vs,
 				uniforms: UniformsUtils.clone(shader.uniforms),
 	            side:DoubleSide,
 				name: "ModelTextureMaterial",
-	            defines
+	            defines,  
 	        });
 	    
-	        
+	        this.glslVersion = Potree.settings.isWebgl2 && '300 es';
 	            
 	        let setSize = (e)=>{ 
 	            let viewport = e.viewport;
@@ -96778,23 +96836,12 @@ void main()
 	            }else if(this.point2dInfo){
 	            
 	                if(Potree.settings.areaAtNotPlane){
-	                    //测点不在同一平面的面积.   （缺点：容易出现三角缺块, 以及搭错线导致超出理想边界外。故暂不开放） //测试桥面 SG-arqnGgAR7om&formal
+	                    //测点不在同一平面的面积.   （缺点：容易出现三角缺块, 以及搭错线导致超出理想边界外。在平面上n个点能构成n-2个三角形，但空间中更多个，所以若要指定出类似平面那样n-2个三角形是有多种可能的。故暂不开放。 用d3.Delaunay结果更差） //测试桥面 SG-arqnGgAR7om&formal
 	                    //参考 http://indoor.popsmart.cn:8084/sxswsw-sx/   找到场景中面积测量线的方法：window.scene.children[18].children[0].material.color.r = 1
-	                    let geometry = new Geometry; 
-	                    let faceArray = [], triangles;
-	                    
-	                     /* if(window.used3){ //更差 
-	                        const xyPoints = this.points.map(d => d.toArray());
-	                        const mesh2D = d3.Delaunay.from(xyPoints);  
-	                        triangles = []
-	                        for(let i=0;i<mesh2D.triangles.length/3;i++){
-	                            triangles.push([mesh2D.triangles[i*3],mesh2D.triangles[i*3+1],mesh2D.triangles[i*3+2]])
-	                        } 
-	                    }else{  */
-	                        triangles = ShapeUtils.triangulateShape(this.point2dInfo.points2d, [] );
-	                    //}
-	                     
-	                    
+	                    let geometry = new Geometry;   
+	                    let faceArray = [], triangles = ShapeUtils.triangulateShape(this.point2dInfo.points2d, [] ); //因为它只关注xy平面，垂直画就容易错，所以用转到平面的points2d来识别三角。
+	                        
+	                      
 	                    if(triangles.length == 0)return
 	                    this._area = 0;
 	                    for( var i = 0; i < triangles.length; i++ ){
@@ -96816,26 +96863,6 @@ void main()
 	                    //this.center
 	                    //参考getFacePlane  在这里建立_normal?
 	                    
-	                    
-	                    
-	                    
-	                    /* let center = this.getCenter()
-	                          
-	                    let firstPos =  this.point2dInfo.points2d[0].clone()
-	                    firstPos.z = 0                  //因为shape只读取了xy,所以位移下, 再算出最终位置，得到差距
-	                    firstPos.applyQuaternion(this.point2dInfo.quaInverse)
-	                    let vec = this.point2dInfo.originPoint0.clone().sub(firstPos)
-	                    center = new THREE.Vector3(center.x, center.y, 0)
-	                    center.applyQuaternion(this.point2dInfo.quaInverse)
-	                    this.areaPlane.quaternion.copy(this.point2dInfo.quaInverse) 
-	                    this.areaPlane.position.copy(vec)       
-	                    center.add(vec)
-	                    this.center = center
-	                     */
-	                    
-	                    
-	                    
-	                    
 	                }else {
 	                    //if(this.point2dInfo){//旧的。 之前的规定点要在同一平面
 	                        this.areaPlane.geometry = MeshDraw.getShapeGeo(this.point2dInfo.points2d);
@@ -102398,7 +102425,7 @@ void main()
 	   
 	    }
 	    
-	    update(quaternion){
+	    update(quaternion){ 
 	        if(!this.show)return;
 	        if(!quaternion) quaternion = this.viewport.camera.quaternion.clone();
 	        this.updateCamera(quaternion);
@@ -102477,10 +102504,25 @@ void main()
 	    }
 	    
 	    
-	    autoJudgeDisplay(){
-	         
-	    }
 	    
+	    setAutoDisplay(state){//被直接改变了dom的显示
+	        
+	        this.autoJudgeShow = state;
+	        
+	        if(state){ 
+	            this._autoDisplayEvent = ()=>{
+	                let oldShow = this.show;
+	                this.show = !!this.renderer.domElement.clientHeight;
+	                if(oldShow != this.show){
+	                    this.update();
+	                }
+	            };
+	            viewer.addEventListener('update_start',this._autoDisplayEvent);
+	          
+	        }else {
+	            viewer.removeEventListener('update_start',this._autoDisplayEvent);
+	        }
+	    }
 	    
 	    
 	    setDomPos(){
@@ -104565,13 +104607,13 @@ void main()
         #extension GL_EXT_frag_depth : enable
         uniform float opacity;
         uniform sampler2D tDiffuse;
-        #if defined(GL_EXT_frag_depth) && defined(useDepth)
+        #if defined(GL_EXT_frag_depth) && defined(useDepth)  
             uniform sampler2D depthTex;
         #endif
         
         varying vec2 vUv;
         void main() { 
-            #if defined(GL_EXT_frag_depth) && defined(useDepth)
+            #if defined(GL_EXT_frag_depth) && defined(useDepth) 
                 float depth = texture2D(depthTex, vUv).r;
                 /* if(depth >= 1.0){ //超级远（但是在modelTex里我把天空距离超出far了，所以不删）
                     discard;
@@ -104620,11 +104662,14 @@ void main()
 			this.edlMaterial.transparent = true;
 	        
 	        let copyUniforms = UniformsUtils.clone( copyShader.uniforms );
+	         
+	        let {vs,fs} = Common.changeShaderToWebgl2(copyShader.vertexShader, copyShader.fragmentShader, 'ShaderMaterial');
+	        
 	        this.recoverToScreenMat = new ShaderMaterial({
 	          
 	            uniforms: copyUniforms,
-	            vertexShader:copyShader.vertexShader,
-	            fragmentShader: copyShader.fragmentShader, 
+	            vertexShader: vs,
+	            fragmentShader: fs, 
 	            transparent: true,         
 	            defines:{
 	                useDepth: true  //开启后，其他物体才能被遮挡
@@ -162479,7 +162524,7 @@ ENDSEC
 	                });
 	            }
 	        }
-	          
+	           
 	        this.dispatchEvent({type: "render.pass.scene", viewer: viewer});
 	    
 	      
@@ -164392,7 +164437,7 @@ ENDSEC
 	                    loadDone(object);
 	                }, onProgress,  onError);
 	            }
-	        }else if(fileInfo.fileType == 'glb'){
+	        }else if(fileInfo.fileType == 'glb'){ 
 	            loaders.glbLoader.unlitMat = true;//!!fileInfo.unlit
 	            loaders.glbLoader.load(fileInfo.url,  ( gltf, total )=>{    
 	                //console.log('loadGLTF', gltf)

src/sdk/cover/index.js

@@ -37,7 +37,7 @@ export const enter = (dom, mapDom, isLocal, lonlat) => {
     
     let {THREE} = Potree.mergeEditStart(dom, mapDom)
     let MergeEditor = viewer.modules.MergeEditor
-  
+    
     
     viewer.addEventListener('camera_changed', e => {
         var camera = e.viewport.camera
@@ -50,7 +50,7 @@ export const enter = (dom, mapDom, isLocal, lonlat) => {
         console.error('viewer webglError: ' + e)
         sceneBus.emit('webglError', { msg: e.msg })
     })
-    
+    viewer.compass.setAutoDisplay(true)
     
     /* mapBus.on('visible', v => {
         //console.log('mapBus visible', v)