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 {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;\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 = {
	 
		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
			}, 
			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
            },
             
        },
       
        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 + `
            #extension GL_EXT_frag_depth : enable        // otherwise error: 'GL_EXT_frag_depth' : extension is disabled
            
            #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;
          
            
            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); 
                    return depthValue;      
                }
                //注：未加载好的话，depth为0，导致第一次漫游过去的时候许多mesh会立刻被遮挡，所以要确保加载完
            #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
                    colorFromPano0=textureCube(pano0Map,vWorldPosition0N.xyz);
                #else 
                    progress_ = 1.0;
                #endif
                vec4 colorFromPano1=textureCube(pano1Map,vWorldPosition1N.xyz);
 
                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); 
                    #if defined(usePanoMap0)
                        depth0 = getDepth(vWorldPosition0N, depthMap0, cameraHeight0, ceilHeight0, eyePos);
                    #endif
                    vec2 depth1 = getDepth(vWorldPosition1N, depthMap1, cameraHeight1, ceilHeight1, eyePos);
                    
                    
                    gl_FragDepthEXT = mix(depth0.y,depth1.y,progress_); 
                    gl_FragDepthEXT = clamp(gl_FragDepthEXT, 0.0, 1.0);    //防止部分手机出现黑块。ios 16  。 因为我给的超远值超出范围
                    

                #endif

                
            }
        `
    }
            
   //注：gl_FragDepthEXT  修改了确实能像真实mesh那样遮挡住在后面的物体。但是为过渡时不能直接像有模型那样，和角度有关。
    
export default class ModelTextureMaterial extends THREE.RawShaderMaterial { 
	constructor( ){ 
    
        let defines = {depthTexUVyLimit: Potree.config.depthTexUVyLimit}
         
        let {vs,fs} = Common.changeShaderToWebgl2(shader.vertexShader, shader.fragmentShader, 'RawShaderMaterial')
        
        super({
            fragmentShader: fs,
			vertexShader: vs,
			uniforms: THREE.UniformsUtils.clone(shader.uniforms),
            side:THREE.DoubleSide,
			name: "ModelTextureMaterial",
            defines,  
        })
    
        this.glslVersion = Potree.settings.isWebgl2 && '300 es'
            
        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 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
            },
        })
		//-------------------------------------
	}

	/**
	 * 
	 * @param {Panorama} pano0 
	 * @param {Panorama} pano1 
	 * @param {boolean} flag 
     
     更新全景图的材质uniforms 
     
	 */
     
      
     
	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)
        
        
        //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  
        } 
        this.updateDepthTexEnable()
    }
    
    updateDepthTexEnable(){
        let hasDepthTex = this.pano0 && this.pano1 && this.pano0.pointcloud.hasDepthTex && this.pano1.pointcloud.hasDepthTex  //暂时不知道一个有图一个没图怎么写所以
        
        Potree.Utils.addOrRemoveDefine(this, 'hasDepthTex', hasDepthTex?'add':'remove' )
         
        
    }
    
    /* EnableDepthTex(){//开启DepthTex
        if(this.defines['hasDepthTex']){
            return 
        }
        this.defines['hasDepthTex'] = ''
        this.needsUpdate = true;
    } */
}