Merge branch 'webgl2.0+gaussain' into diff

# Conflicts:
#	src/custom/modules/mergeModel/MergeEditor.js
#	src/custom/objects/tool/ctrlPolygon.js
#	src/custom/start.js

examples/lion_laz.html

@@ -56,8 +56,8 @@
 			$("#menu_appearance").next().show();
 			//viewer.toggleSidebar();
 		});
-		
-		Potree.loadPointCloud("../pointclouds/lion_takanawa_laz/cloud.js", "lion", function(e){
+		//cloudPath, dataset.name ,datasetCode, timeStamp, 
+		Potree.loadPointCloud("../pointclouds/lion_takanawa_laz/cloud.js", "lion", "lion", 0, function(e){
 			viewer.scene.addPointCloud(e.pointcloud);
 			
 			let material = e.pointcloud.material;

gulpfile.js

@@ -12,6 +12,7 @@ const {watch} = gulp;
 const {createExamplesPage} = require("./src/tools/create_potree_page");
 const {createGithubPage} = require("./src/tools/create_github_page");
 const {createIconsPage} = require("./src/tools/create_icons_page");
+const serveStatic = require('serve-static'); // 引入serve-static
 
 
 let paths = {
@@ -86,13 +87,29 @@ let shaders = [
 
 'src/**/*.js',
 
+
+
+
+
 // For development, it is now possible to use 'gulp webserver'
 // from the command line to start the server (default port is 8080)
 gulp.task('webserver', gulp.series(async function() {
 	server = connect.server({
 		port: 1234,
         host:'192.168.0.113',
-		https: false,
+		https: true,
+        middleware: function(connect, opt) {
+          return [
+            // 首先，使用addResponseHeaders中间件来设置响应头
+            function setCustomHeaders(req, res, next) {
+              res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
+              res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
+              next();
+            },
+             // 任何其他中间件，如serveStatic
+            serveStatic('./public')
+          ];
+        }
 	});
 }));
 

libs/three.js/lines/LineMaterial.js

@@ -353,7 +353,7 @@ ShaderLib[ 'line' ] = {
 		#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){
@@ -556,14 +556,16 @@ class LineMaterial extends ShaderMaterial {
 
 	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
 

package.json

@@ -34,6 +34,7 @@
     "rollup": "^1.31.1",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-uglify": "^6.0.4",
+    "serve-static": "^1.15.0",
     "through": "~2.3.4"
   },
   "author": "Markus Schütz",

src/custom/materials/DepthBasicMaterial.js

@@ -2,7 +2,7 @@
 import * as THREE from "../../../libs/three.js/build/three.module.js";
 import {Shaders} from "../../../build/shaders/shaders.js";
 import {Features} from "../../Features.js";
-
+import Common from "../utils/Common.js";
  
 export default class DepthBasicMaterial extends THREE.ShaderMaterial{ 
     constructor(o={}){
@@ -25,11 +25,14 @@ export default class DepthBasicMaterial extends THREE.ShaderMaterial{
             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,

src/custom/materials/ModelTextureMaterial.js

@@ -3,7 +3,7 @@ import Common from '../utils/Common.js'
 import {Features} from "../../Features.js";
                                       
 
-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 = {
@@ -143,7 +143,8 @@ let shader = {
 
         `,
         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 
             
              
@@ -169,6 +170,7 @@ let shader = {
             varying vec3 vWorldPosition0;
             varying vec3 vWorldPosition1;
             //varying vec3 vWorldPosition12;
+            
           
             /* vec2 getSamplerCoord( vec3 direction ) 
             {
@@ -250,7 +252,7 @@ let shader = {
                 #endif
                 vec4 colorFromPano1=textureCube(pano1Map,vWorldPosition1N.xyz);
  
-                gl_FragColor=mix(colorFromPano0,colorFromPano1,progress);
+                gl_FragColor = mix(colorFromPano0,colorFromPano1,progress);
               
               
                 
@@ -291,18 +293,18 @@ export default class ModelTextureMaterial extends THREE.RawShaderMaterial {
     
         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: THREE.UniformsUtils.clone(shader.uniforms),
             side:THREE.DoubleSide,
 			name: "ModelTextureMaterial",
-            defines
+            defines,  
         })
     
-        
+        this.glslVersion = Potree.settings.isWebgl2 && '300 es'
             
         let setSize = (e)=>{ 
             let viewport = e.viewport

src/custom/modules/mergeModel/MergeEditor.js

@@ -545,7 +545,10 @@ let MergeEditor = {
         objects.forEach(object=>{
             boundingBox.union(object.boundingBox.clone().applyMatrix4(object.matrixWorld))
         })
-         
+        
+        let len = boundingBox.getSize(new THREE.Vector3).length()
+        Potree.settings.cameraFar = Math.max( Potree.settings.cameraFar, len*3 )
+        
         if(fitBound){
             viewer.focusOnObject({boundingBox}, 'boundingBox', duration, {dontLookUp, dontChangeCamDir:true}) 
         }else{ 

src/custom/objects/tool/ctrlPolygon.js

@@ -664,23 +664,12 @@ export class ctrlPolygon extends THREE.Object3D {
             }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 THREE.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 = THREE.ShapeUtils.triangulateShape(this.point2dInfo.points2d, [] );
-                    //}
-                     
-                    
+                    let geometry = new THREE.Geometry   
+                    let faceArray = [], triangles = THREE.ShapeUtils.triangulateShape(this.point2dInfo.points2d, [] ); //因为它只关注xy平面，垂直画就容易错，所以用转到平面的points2d来识别三角。
+                        
+                      
                     if(triangles.length == 0)return
                     this._area = 0
                     for( var i = 0; i < triangles.length; i++ ){
@@ -702,26 +691,6 @@ export class ctrlPolygon extends THREE.Object3D {
                     //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)

src/custom/start.js

@@ -1174,9 +1174,10 @@ export function mergeEditStart(dom, mapDom){
             }    
               
             viewer.loadModel(info , callback, onProgress, onError)
+               
             
             
-            
+       
         }else if(prop.type == 'osgb' || prop.type == 'b3dm'){  //3d tiles  
         
             let callback = (object)=>{

src/custom/three.shim.js

@@ -373,4 +373,15 @@ THREE.Object3D.prototype.realVisible = function(){
         v = false
     }   
     return v                                
-}
+}
+
+
+
+
+
+
+
+
+
+
+

src/custom/utils/Common.js

@@ -530,7 +530,49 @@ var Common = {
         return dataUrl
 
  
-    }
+    },
+    
+    changeShaderToWebgl2(vs, fs, matType, otherReplaces=[]){//部分shader要根据webgl版本作更改
+        if(!Potree.settings.isWebgl2)return {vs, fs}
+        let turnTo300 = matType != 'ShaderMaterial' && (vs.includes('gl_FragDepthEXT') || fs.includes('gl_FragDepthEXT') ) 
+        let addV300 = turnTo300 && matType != 'RawShaderMaterial' // RawShaderMaterial直接material.glslVersion = '300 es' 以加在define之前
+        let change = (shader, shaderType)=>{ 
+            let newShader = shader
+            
+            if(turnTo300){ //非shaderMaterial需要手动改为300 es的写法
+                addV300 && (newShader = '#version 300 es \n' + newShader)   //需要加 #version 300 es。 three.js自带的渲染会自动加所以不用
+                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

src/custom/viewer/ViewerNew.js

@@ -3480,7 +3480,7 @@ export class Viewer extends ViewerBase{
                 })
             }
         }
-          
+           
         this.dispatchEvent({type: "render.pass.scene", viewer: viewer});
     
       
@@ -5393,7 +5393,7 @@ export class Viewer extends ViewerBase{
                     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/custom/viewer/viewerBase.js

@@ -49,8 +49,10 @@ export class ViewerBase extends THREE.EventDispatcher{
         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 THREE.WebGLRenderer({ 
             premultipliedAlpha: false, 

src/materials/ExtendPointCloudMaterial.js

@@ -7,7 +7,7 @@ import {ClassificationScheme} from "./ClassificationScheme.js";
 import {PointSizeType, PointShape, TreeType, ElevationGradientRepeat} from "../defines.js";
 import {Features} from "../Features.js";
 import {PointCloudMaterial} from './PointCloudMaterial.js'
- 
+import Common from "../custom/utils/Common.js";
 
 
 //
@@ -121,6 +121,11 @@ export class ExtendPointCloudMaterial extends PointCloudMaterial {
         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();
 	}
 

src/materials/shaders/depthBasic.fs

@@ -23,7 +23,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;
@@ -58,7 +59,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

src/materials/shaders/otherShaders.js

@@ -24,13 +24,13 @@ export const copyShader = {
         #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;

src/materials/shaders/pointcloud_new.vs

@@ -196,7 +196,7 @@ varying float 	vRadius;
 varying float 	vPointSize;
 
 
-float round(float number){
+float Round(float number){
 	return floor(number + 0.5);
 }
 
@@ -289,15 +289,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;
 
@@ -329,10 +329,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){
@@ -342,8 +342,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;
 
@@ -839,7 +839,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
@@ -1032,7 +1032,7 @@ void doClipping(vec4 world){
             }
         
                    
-            pointIndexStart += int(round(prismList[i][2][1])); 
+            pointIndexStart += int(Round(prismList[i][2][1])); 
 		} 
         
         #ifdef color_type_heightCpt  

src/viewer/EDLRendererNew.js

@@ -7,6 +7,8 @@ import {Utils} from "../utils.js";
 import {copyShader} from '../materials/shaders/otherShaders.js'
 import {Features} from "../Features.js";
 import {easing} from "../custom/utils/transitions.js";
+import Common from "../custom/utils/Common.js";
+ 
  
 //import DepthTexSampler from "../custom/utils/DepthTexSampler.js";
 
@@ -39,11 +41,14 @@ export class EDLRenderer{//Eye-Dome Lighting 眼罩照明
 		this.edlMaterial.transparent = true;
         
         let copyUniforms = THREE.UniformsUtils.clone( copyShader.uniforms );
+         
+        let {vs,fs} = Common.changeShaderToWebgl2(copyShader.vertexShader, copyShader.fragmentShader, 'ShaderMaterial')
+        
         this.recoverToScreenMat = new THREE.ShaderMaterial({
           
             uniforms: copyUniforms,
-            vertexShader:copyShader.vertexShader,
-            fragmentShader: copyShader.fragmentShader, 
+            vertexShader: vs,
+            fragmentShader: fs, 
             transparent: true,         
             defines:{
                 useDepth: true  //开启后，其他物体才能被遮挡