potree-sdk/src/custom/materials/ModelTextureMaterial.js

import * as THREE from "../../../libs/three.js/build/three.module.js";
import Common from '../utils/Common.js'
import math from '../utils/math.js' 
import {Features} from "../../Features.js";                             
import {ExtendPointCloudMaterial} from "../../materials/ExtendPointCloudMaterial.js";    
import {Gradients} from "../../materials/Gradients.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;\n attribute vec3 position;\n attribute vec3 normal;\n attribute vec2 uv;\n"
const prefixFragment ="#extension GL_EXT_frag_depth : enable \n precision highp float;\nprecision highp int;\n\nuniform mat4 viewMatrix;\nuniform vec3 cameraPosition;\n"
                        // otherwise error: 'GL_EXT_frag_depth' : extension is disabled

  
let getClassificationLUT = ()=>{
    const [width, height] = [256, 1];
    let data = new Uint8Array(width * 4);
    let tex = new THREE.DataTexture(data, width, height, THREE.RGBAFormat);
    tex.magFilter = THREE.NearestFilter;
    tex.needsUpdate = true;
    return tex
}
let shader = {
	 
		uniforms: { 
			
			opacity: {
				type: "f",
				// value: 1
			},
			progress: {
				type: "f",
				value: 0
			},
			
			pano0Map: {
				type: "t",
				value: null
			}, 
            pano1Map: {
				type: "t",
				value: null
			}, 
            depthMap0: {
				type: "t",
				value: null
			},
            depthMap1: {
				type: "t",
				value: null
			}, 
            pano0ClassMap: {
				type: "t",
				value: null
			}, 
            pano1ClassMap: {
				type: "t",
				value: null
			}, 
            pano0TempMap: {
				type: "t",
				value: null
			}, 
            pano1TempMap: {
				type: "t",
				value: null
			}, 
            gradient: {
				type: "t",
				value: null
			}, 
            classificationLUT: {
				type: "t",
				value: null
			}, 
            
			pano0Position: {
				type: "v3",
				value: new THREE.Vector3
			},
			pano0Matrix: {
				type: "m4",
				value: new THREE.Matrix4
			},
			
			pano1Position: {
				type: "v3",
				value: new THREE.Vector3
			},
			pano1Matrix: {
				type: "m4",
				value: new THREE.Matrix4
            },
			/* pano1Matrix2: {
				type: "m4",
				value: new THREE.Matrix4
            },
            */
            
            inverseProjectionMatrix: {
                value: new THREE.Matrix4
            },  
            /* projectionMatrix:{//需要再写一遍吗
                value: new THREE.Matrix4
            }, */
            viewport: {
                value: new THREE.Vector4
            },
            //如     {x: 0, y: 0, z: 428, w: 969}  xy应该是offset, zw是宽高 
            cameraHeight0: {
				type: "f",
				value: 1
			},
            cameraHeight1: {
				type: "f",
				value: 1
			},
            ceilHeight0:{
                type: "f",
				value: 2
            },
            ceilHeight1:{
                type: "f",
				value: 2
            },
            temperRange:{//温度范围
                type:'vec2',
                value: new THREE.Vector2(math.getKelvinFromCelsius(15),  math.getKelvinFromCelsius(60)  )  
            } 
        },
       
        vertexShader: prefixVertex + `

            uniform vec3 pano0Position;
            uniform mat4 pano0Matrix;
            
            uniform vec3 pano1Position;
            uniform mat4 pano1Matrix; 

           
            varying vec2 vUv; 
            varying vec3 vWorldPosition0;
            varying vec3 vWorldPosition1;
            varying vec3 vWorldPosition12;
            
            vec3 transformAxis( vec3 direction ) //navvis->4dkk
            {
                float y = direction.y;
                direction.y = direction.z;
                direction.z = -y;
                return  direction;
            }
             
            
            void main() {
            
                vUv = uv;
                vec4 worldPosition = modelMatrix * vec4(position, 1.0);
                
                
            
                vec3 positionLocalToPanoCenter0 = worldPosition.xyz - pano0Position;
                vWorldPosition0 = (vec4(positionLocalToPanoCenter0, 1.0) * pano0Matrix).xyz;
                vWorldPosition0.x *= -1.0;
                vWorldPosition0 = transformAxis(vWorldPosition0);
                
                vec3 positionLocalToPanoCenter1 = worldPosition.xyz - pano1Position;
                vWorldPosition1 = (vec4(positionLocalToPanoCenter1, 1.0) * pano1Matrix).xyz;
                vWorldPosition1.x *= -1.0;
                vWorldPosition1 = transformAxis(vWorldPosition1);
                
                /* 
                vec3 positionLocalToPanoCenter12 = worldPosition.xyz - pano1Position;
                vWorldPosition12 = (vec4(positionLocalToPanoCenter12, 1.0) * pano1Matrix2).xyz;
                vWorldPosition12.x *= -1.0;
                vWorldPosition12 = transformAxis(vWorldPosition12);
                 */
                
                
                
                gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
            
            }

        `,
        fragmentShader: prefixFragment + `
                    
            
            #define PI 3.141592653 
            
             
            uniform float modelAlpha;
            uniform float opacity;
            uniform float progress;
            uniform int tranType;
            uniform vec3 pano0Position;
            uniform vec3 pano1Position;
            uniform float maxDistance;
            uniform float minDistance;
            uniform float minOpa;
             
            uniform samplerCube pano0Map;
            uniform samplerCube pano1Map;
            #if defined(useTempMap0) ||  defined(useTempMap1)
                uniform sampler2D gradient; 
                uniform vec2 temperRange; 
            #endif  
            #if defined(useClassMap0) ||  defined(useClassMap1)
                uniform sampler2D classificationLUT;
            #endif
            #if defined(useTempMap0)
                uniform sampler2D pano0TempMap;
            #endif
            #if defined(useTempMap1)
                uniform sampler2D pano1TempMap;
            #endif
            #if defined(useClassMap0)
                uniform sampler2D pano0ClassMap;
            #endif
            #if defined(useClassMap1)
                uniform sampler2D pano1ClassMap;
            #endif
            varying vec2 vUv; 
            varying vec3 vWorldPosition0;
            varying vec3 vWorldPosition1; 
            
          
            /* vec2 getSamplerCoord( vec3 direction ) 
            {
                direction = normalize(direction);
                float tx=atan(direction.x,-direction.y)/(PI*2.0)+0.5;
                float ty=acos(direction.z)/PI;

                return vec2(tx,ty);
            } */

            vec2 getSamplerCoord2( vec3 direction ) 
            { 
                direction = normalize(direction);
                float tx=atan(direction.x,direction.z)/(PI*2.0)+0.5;
                float ty=acos(direction.y)/PI;

                return vec2(tx,ty); 
            }
            
            
            #if defined(GL_EXT_frag_depth) && defined(hasDepthTex)  
                uniform sampler2D depthMap0;
                uniform sampler2D depthMap1;
                uniform mat4 inverseProjectionMatrix;
                uniform mat4 projectionMatrix;
                uniform vec4 viewport; 
                uniform float cameraHeight0;
                uniform float cameraHeight1;
                uniform float ceilHeight0;
                uniform float ceilHeight1;
                 
                
                vec2 getDepth(vec3 dir, sampler2D depthMap, float heightDown, float heightUp, vec4 eyePos){
                    vec2 depthValue = vec2(0.0, 0.0);
                    vec2 uv2 = getSamplerCoord2( dir.xyz);  //暂时只用基于目标漫游点的方向
                    uv2.x -= 0.25;    //全景图和Cube的水平采样起始坐标相差90度，这里矫正 0.25 个采样偏移
                    vec4 depth = texture2D(depthMap, uv2);
                    //float distance = depth.r + 256. * (depth.g + 256. * depth.b);
                    //distance *= 255. * .001;           // distance is now in meters
                    
                    //更改
                    float distance = (depth.g + depth.r / 256.) * 255.;  
                    
                    if(distance == 0.0){//漫游点底部识别不到的区域，给一个地板高度 
                         if(uv2.y < depthTexUVyLimit) distance = heightUp / dir.y;    
                         else if(uv2.y > 1.0 - depthTexUVyLimit) distance = heightDown / -dir.y;   
                         else distance = 100000.0;//给个超级远的值
                    } 
                    
                    if(distance == 0.0)distance = 100000.0;//给个超级远的值
                    
                    depthValue.x = distance;
                    
                    distance += .1;          // add a safety margin

                    vec4 eyePos2 = vec4(normalize(eyePos.xyz) * distance, 1.);
                    vec4 clipPos2 = projectionMatrix * eyePos2;
                    vec4 ndcPos2 = clipPos2 * 1. / clipPos2.w;

                    
                    depthValue.y = 0.5 * ((gl_DepthRange.far - gl_DepthRange.near) * ndcPos2.z
                            + gl_DepthRange.near + gl_DepthRange.far); 
                    
                    #if defined(depth_background) 
                        //后排的 skybox 不能挡住chunk  
                        depthValue.y += 0.3;
                    #endif
                    
                    
                    
                    return depthValue;      
                }
                //注：未加载好的话，depth为0，导致第一次漫游过去的时候许多mesh会立刻被遮挡，所以要确保加载完
            #endif
            
            int unpack16(vec2 channels){
                return int(round(channels.y * 255.0)) + (int(round(channels.x * 255.0)) << 8)  ;   //some phone needs round,such as vivo x30
            }
            
            int getIntFromColor(sampler2D map, vec3 dir){//uint16-> int  0-65536 
                //float texWidth = 1024.;
                vec2 uv = getSamplerCoord2(dir.xyz);  
                uv.x -= 0.25;    
                vec4 color = texture2D(map, uv); 
                return unpack16(color.rg); 
                /* if( fract(uv.x * texWidth) > 0.5){
                    return unpack16(color.rg);
                }else{
                    return unpack16(color.ba);
                }   */
                 
            } 
            
            
            /*vec4 getColorFromMap(sampler2D map, vec3 dir){
                vec2 uv = getSamplerCoord2(dir.xyz);  
                uv.x -= 0.25;    
                vec4 color = texture2D(map, uv); 
                return color;
            }*/
            
            
            //ir热成像 
            #if defined(useTempMap0) ||  defined(useTempMap1)
            
                vec4 getTemperature(sampler2D map, vec3 dir){ 
                    
                    float temperature = float(getIntFromColor(map, dir))/ 10.0 ; 
                      
                    float w = (temperature - temperRange.x) / (temperRange.y - temperRange.x);
                    w = clamp(w,0.0,1.0);
                    vec4 color = vec4(texture2D(gradient, vec2(w,1.0-w)).rgb, 1.0);   
                    return color;
                    
                }
            #endif 
            
            #if defined(useClassMap0) ||  defined(useClassMap1)
              
                /*vec4 getClassification(sampler2D map, vec3 dir, vec4 originColor){ 
                    vec4 color = getColorFromMap(map, dir);  
                    float v = color.r * 255.0;  
                    if(v<=2.01&&v>=1.99){
                        color = vec4(1.0,0.0,0.0,1.0);
                    } else{
                        color = vec4(0.0,0.0,0.0,1.0);
                    } 
                    return color;
                } */
                
                
                
                vec4 getClassification(sampler2D map, vec3 dir, vec4 originColor){ 
                     
                    int classIndex = getIntFromColor(map, dir); 
                  
                    vec2 uv = vec2(float(classIndex) / 255.0, 0.5);         //copy from pointcloud_new.vs
                    vec4 classColor = texture2D(classificationLUT, uv);
	
                    float blendRatio = 0.5;
                    float classAlpha = classColor.a * blendRatio;  
                    vec4 color = vec4(classColor.rgb * classAlpha + originColor.rgb * (1.0-classAlpha), 1.0);  //mix with old rgba
                    return color;
                }  
            #endif 
            
            
            void main()
            { 
                
                
                vec3 vWorldPosition0N = normalize(vWorldPosition0);
                vec3 vWorldPosition1N = normalize(vWorldPosition1);
                float progress_ = progress;
                
                vec4 colorFromPano0 = vec4(0.0,0.0,0.0,0.0);
                #if defined(usePanoMap0)
                    //即progress < 1.0   通常是1 
                    
                    #if defined(useTempMap0) 
                        colorFromPano0 = getTemperature(pano0TempMap,vWorldPosition0N.xyz); 
                    #else 
                        colorFromPano0 = textureCube(pano0Map,vWorldPosition0N.xyz);
                        #if defined(useClassMap0) 
                            colorFromPano0 = getClassification(pano0ClassMap,vWorldPosition0N.xyz, colorFromPano0); 
                        #endif
                    #endif
                    
                #else 
                    progress_ = 1.0;
                #endif
                
                
                vec4 colorFromPano1 = vec4(0.0,0.0,0.0,0.0);
                #if defined(useTempMap1) 
                    colorFromPano1 = getTemperature(pano1TempMap,vWorldPosition1N.xyz);
                #else 
                    colorFromPano1 = textureCube(pano1Map,vWorldPosition1N.xyz);
                    #if defined(useClassMap1) 
                        colorFromPano1 = getClassification(pano1ClassMap,vWorldPosition1N.xyz, colorFromPano1); 
                    #endif
                #endif
                 
 
                gl_FragColor = mix(colorFromPano0,colorFromPano1,progress_);
                
                
                
                 
              
                //深度图修改深度
              
                #if defined(GL_EXT_frag_depth) && defined(hasDepthTex)  
                    vec4 ndcPos;
                    ndcPos.xy = ((2.0 * gl_FragCoord.xy) - (2.0 * viewport.xy)) / (viewport.zw) - 1.;
                    ndcPos.z = (2.0 * gl_FragCoord.z - gl_DepthRange.near - gl_DepthRange.far) /
                        (gl_DepthRange.far - gl_DepthRange.near);
                    ndcPos.w = 1.0;

                    vec4 clipPos = ndcPos / gl_FragCoord.w;
                    vec4 eyePos = inverseProjectionMatrix * clipPos;
                    vec2 depth0 = vec2(0.0,0.0);
                    vec2 depth1 = vec2(0.0,0.0);
                    float depth = 0.0;
                    
                    bool useDepth0 = false;
                    bool useDepth1 = true;
                    
                    
                    #if defined(usePanoMap0) 
                        useDepth0 = true;
                        #if defined(UnableMixTwoDepth) 
                            if(progress_<0.5){
                                useDepth1 = false;
                            }else{
                                useDepth0 = false; 
                            }
                        #endif
                        if(useDepth0) depth0 = getDepth(vWorldPosition0N, depthMap0, cameraHeight0, ceilHeight0, eyePos);
                    #endif
                    
                    if(useDepth1) depth1 = getDepth(vWorldPosition1N, depthMap1, cameraHeight1, ceilHeight1, eyePos);
                    
                    
                    #if defined(UnableMixTwoDepth)
                        depth = useDepth0 ? depth0.y : depth1.y;//不支持叠加，只能用其中一个，过渡时无法渐变
                    #else
                        depth = mix(depth0.y,depth1.y,progress_); 
                    #endif
                    gl_FragDepthEXT = clamp(depth, 0.0, 1.0);    //防止部分手机出现黑块。ios 16  。 因为我给的超远值超出范围
                    

                #endif

                
            }
        `
    }
            
   //注：gl_FragDepthEXT  修改了确实能像真实mesh那样遮挡住在后面的物体。但是为过渡时不能直接像有模型那样，和角度有关。
    
export default class ModelTextureMaterial extends THREE.RawShaderMaterial { 
	constructor( ){ 
    
        let defines = {depthTexUVyLimit: Potree.config.depthTexUVyLimit}
        if(Potree.browser.maybeQilin()){
            defines.UnableMixTwoDepth = 1  //该系统在开启硬件加速后，webgl容易出bug。如过渡时黑屏报错，因无法将两个depth叠加。见bug记录
        }  
        let {vs,fs} = Common.changeShaderToWebgl2(shader.vertexShader, shader.fragmentShader, 'RawShaderMaterial')
        if(!Potree.settings.isWebgl2){
            defines['round(x)'] = 'floor(x + 0.5)'   //webgl1 unsupport round
            fs = fs.replace('int(round(channels.x * 255.0)) << 8', 'int(round(channels.x * 255.0 * pow(2.0, 8.0)))')  //unsupport <<
        }
        super({
            fragmentShader: fs,
			vertexShader: vs,
			uniforms: THREE.UniformsUtils.clone(shader.uniforms),
            side:THREE.DoubleSide,
			name: "ModelTextureMaterial",
            defines,  
        })
         
        this.glslVersion = Potree.settings.isWebgl2 && '300 es'
        this.uniforms.classificationLUT.value = this.classificationTexture = getClassificationLUT()
        
        let setSize = (e)=>{ 
            let viewport = e.viewport
            //let viewportOffset = viewport.offset || new Vector2()  
            let resolution = viewport.resolution2 
            //this.uniforms.viewport.value.set(viewportOffset.x, viewportOffset.y, resolution.x, resolution.y) 
            this.uniforms.viewport.value.set(0,0, resolution.x, resolution.y);// xy是在viewport中的left和bottom，和整个窗口没有关系，所以不是viewportOffset。几乎都是0,0
        
        }
        let viewport = viewer.mainViewport;
         
        setSize({viewport})


        viewer.addEventListener('resize',(e)=>{ 
            if(e.viewport.name != "MainView")return
            setSize(e)     
        }) 
        
        
        //var supportExtDepth = !!Features.EXT_DEPTH.isSupported()  
        {
         
            //add
            
            viewer.addEventListener('camera_changed', (e)=>{
                if(e.viewport.name != "MainView")return
                //this.uniforms.projectionMatrix.value.copy(e.camera.projectionMatrix) 
                e.camera && this.uniforms.inverseProjectionMatrix.value.copy(e.camera.projectionMatrixInverse)
            })   
            
            let setClass = ()=>{
                this.classification = viewer.classifications
                ExtendPointCloudMaterial.prototype.recomputeClassification.call(this)
            }
            viewer.addEventListener('classifications_changed',setClass)
            setClass()
            
             
            
            this._gradient = Gradients.ir  //海拔贴图种类,火灾也是这个
            this.uniforms.gradient.value = ExtendPointCloudMaterial.generateGradientTexture(this._gradient);  
        } 

        let progress = 0
        Object.defineProperty(this.uniforms.progress, 'value', {
            get: function () {
                return progress
            },
            set: e => {
                if (e < 1 && !Potree.settings.fastTran ) {
                    if (!('usePanoMap0' in this.defines)) {
                        this.defines.usePanoMap0 = ''
                        this.needsUpdate = true
                    }
                } else {
                    if ('usePanoMap0' in this.defines) {
                        delete this.defines.usePanoMap0
                        this.needsUpdate = true
                    }
                }
                progress = e
            },
        })
		//-------------------------------------
	}
 
    
      
     
	setProjectedPanos(pano0, pano1, progressValue ){
        
 		progressValue!=void 0 && (this.uniforms.progress.value = progressValue);
		//pano0.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;
		this.uniforms.pano1Position.value.copy(pano1.position)
		this.uniforms.pano1Matrix.value.copy(pano1.panoMatrix /* pano1.mesh.matrixWorld */ );
        
        
        
        this.pano0 = pano0
        this.pano1 = pano1
        
        this.updateDepthTex(pano0)  
        this.updateDepthTex(pano1)
        this.updateTempEnable()
        this.updateClassEnable()
        //console.log('setProjectedPanos', pano0&&pano0.id, pano1&&pano1.id)
        this.needsUpdate = true;
        
        
        
 	}
    
    
    updateDepthTex(pano, extra){
        if( !Potree.settings.useDepthTex || !pano || !pano.depthTex || pano!=this.pano0 && pano!=this.pano1)return
        //console.log('updateDepthTex', pano.id,  this.pano0 && this.pano0.id,  this.pano1 && this.pano1.id)
        
         
        if(this.pano0){ 
            this.uniforms.depthMap0.value = this.pano0.entered ? this.pano0.depthTex : null;   //dispose了就不要赋值否则dispose会失败
            this.uniforms.cameraHeight0.value = this.pano0.floorPosition.distanceTo(this.pano0.position)
            this.uniforms.ceilHeight0.value = this.pano0.getCeilHeight() - this.pano0.position.z  
        }
        if(this.pano1){ 
            this.uniforms.depthMap1.value = this.pano1.depthTex  //pano1还没entered时也需要，可能在飞入
            this.uniforms.cameraHeight1.value = this.pano1.floorPosition.distanceTo(this.pano1.position)
            this.uniforms.ceilHeight1.value = this.pano1.getCeilHeight() - this.pano1.position.z  
        } 
        
        
        if(this.dontChangeDepth)return
        let hasDepthTex = this.pano0 && this.pano1 && this.pano0.pointcloud.hasDepthTex && this.pano1.pointcloud.hasDepthTex  //暂时不知道一个有图一个没图怎么写所以
        Potree.Utils.addOrRemoveDefine(this, 'hasDepthTex', hasDepthTex?'add':'remove' )
         
        
    }
    
    
    
    updateTempEnable(){ 
        let tex0 = Potree.settings.showHotTemp && this.pano0.tempTex || Potree.settings.showHotIr && this.pano0.irTex   
        let tex1 = Potree.settings.showHotTemp && this.pano1.tempTex || Potree.settings.showHotIr && this.pano1.irTex   
        this.uniforms.pano0TempMap.value = tex0  
        this.uniforms.pano1TempMap.value = tex1   
        
        Potree.Utils.addOrRemoveDefine(this, 'useTempMap0', tex0?'add':'remove' )
        Potree.Utils.addOrRemoveDefine(this, 'useTempMap1', tex1?'add':'remove' )
        viewer.dispatchEvent('content_changed')
    }
    updateClassEnable(){ 
        let hasClassTex0 = Potree.settings.showClass && this.pano0.segTex   
        let hasClassTex1 = Potree.settings.showClass && this.pano1.segTex  
        this.uniforms.pano0ClassMap.value = this.pano0.segTex    
        this.uniforms.pano1ClassMap.value = this.pano1.segTex    
        
        Potree.Utils.addOrRemoveDefine(this, 'useClassMap0', hasClassTex0?'add':'remove' )
        Potree.Utils.addOrRemoveDefine(this, 'useClassMap1', hasClassTex1?'add':'remove' )
        viewer.dispatchEvent('content_changed')
    }
    
    
    
}




ModelTextureMaterial.prototype.setTempRange = ExtendPointCloudMaterial.prototype.setTempRange