potree-sdk/src/viewer/EDLRendererNew.js

import * as THREE from "../../libs/three.js/build/three.module.js";
import {PointCloudSM} from "../utils/PointCloudSM.js";
import {ExtendEyeDomeLightingMaterial} from "../materials/ExtendEyeDomeLightingMaterial.js";
import {SphereVolume} from "../utils/Volume.js";
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 DepthTexSampler from "../custom/utils/DepthTexSampler.js";

export class EDLRenderer{//Eye-Dome Lighting 眼罩照明
	constructor(viewer){
		this.viewer = viewer;

		this.edlMaterial = null;

		//this.rtRegular;
		this.rtEDLs = new Map

		this.gl = viewer.renderer.getContext();
        //反正也没用到，注释了：
		//this.shadowMap = new PointCloudSM(this.viewer.pRenderer);
        
        viewer.addEventListener('resize',this.resize.bind(this))
        this.initEDL(viewer) 
        
	}

	initEDL(viewer){
		if (this.edlMaterial != null || !Features.EXT_DEPTH.isSupported()){
			return;
		}

		this.edlMaterial = new ExtendEyeDomeLightingMaterial();
		this.edlMaterial.depthTest = true;
		this.edlMaterial.depthWrite = true;
		this.edlMaterial.transparent = true;
        
        let copyUniforms = THREE.UniformsUtils.clone( copyShader.uniforms );
        this.recoverToScreenMat = new THREE.ShaderMaterial({
          
            uniforms: copyUniforms,
            vertexShader:copyShader.vertexShader,
            fragmentShader: copyShader.fragmentShader, 
            transparent: true,         
            defines:{
                useDepth: true
            }            
        })
        /*  let copyUniforms = THREE.UniformsUtils.clone( copyShader.uniforms );
          
            this.copyMaterial = new THREE.ShaderMaterial(	{
                uniforms: copyUniforms,
                vertexShader: copyShader.vertexShader,
                fragmentShader: copyShader.fragmentShader,
                //premultipliedAlpha: true,
                transparent: true,
                //blending: THREE.AdditiveBlending,
                depthTest: false,
                depthWrite: false
            }); */
        if(Potree.settings.useRTskybox){
            viewer.images360.addEventListener('endChangeMode',()=>{
                this.resize({viewport:viewer.mainViewport})
            }) 
        }
        //this.depthTexSampler = new DepthTexSampler(this);
	};

	resize(e){
        if(Features.EXT_DEPTH.isSupported()){  
            let viewport = e.viewport
            let size = Potree.settings.useRTskybox && Potree.settings.displayMode == 'showPanos' ? viewport.resolution2 : viewport.resolution; //若要渲染skybox，需要和设备一样精度的rt
            this.getRtEDL(viewport).setSize( size.x, size.y  );   //理论上可以是任意尺寸，但会影响精度，且aspect最好和渲染的一致
        }
	}

	

	clearTargets(params={}){
		const viewer = this.viewer;
		const {renderer} = viewer;

		const oldTarget = renderer.getRenderTarget();
        
        if(params.target){//add
            renderer.setRenderTarget( params.target);
            renderer.clear() 
        }
        
        
        
        if(Features.EXT_DEPTH.isSupported()){ 
            if(params.rtEDL){
                renderer.setRenderTarget( params.rtEDL);
                renderer.clear() 
            }else{
                var rtEDL = this.getRtEDL(params.viewport)
                if(rtEDL){
                    renderer.setRenderTarget( rtEDL );
                    renderer.clear( true, true, true );
                }
                
            }
        }
        
        
        
		//renderer.setRenderTarget( this.rtRegular );
		//renderer.clear( true, true, false );

		renderer.setRenderTarget(oldTarget);
	}
 
 
    getRtEDL(viewport){//根据不同viewport返回rtEDL的texture
        if(!viewport){
            console.warn('getRtEDL没传viewport!!!! !!!!!!!!!!')
            viewport = viewer.mainViewport
        }
        var rtEDL = this.rtEDLs.get(viewport)
        if(!rtEDL){
            if(Features.EXT_DEPTH.isSupported()){ 
                rtEDL = new THREE.WebGLRenderTarget(viewport.resolution.x, viewport.resolution.y, {
                    minFilter: THREE.NearestFilter,
                    magFilter: THREE.NearestFilter,
                    format: THREE.RGBAFormat,
                    type: THREE.FloatType,
                    depthTexture: new THREE.DepthTexture(undefined, undefined, THREE.UnsignedIntType) 
                }); 
                //注： 部分手机在resize时会崩溃，经检验去掉rtEDL的resize可以解决，所以更应该注释掉这个
            
                
                this.rtEDLs.set(viewport, rtEDL)
            }  
        } 
    
        return rtEDL
    }
 

	renderShadowMap(visiblePointClouds, camera, lights){

		const {viewer} = this;

		const doShadows = lights.length > 0 && !(lights[0].disableShadowUpdates);
		if(doShadows){
			let light = lights[0];
 
			this.shadowMap.setLight(light);

			let originalAttributes = new Map();
			for(let pointcloud of viewer.scene.pointclouds){
				// TODO IMPORTANT !!! check
				originalAttributes.set(pointcloud, pointcloud.material.activeAttributeName);
				pointcloud.material.disableEvents();
				pointcloud.material.activeAttributeName = "depth";
				//pointcloud.material.pointColorType = PointColorType.DEPTH;
			}

			this.shadowMap.render(viewer.scene.scenePointCloud, camera);

			for(let pointcloud of visiblePointClouds){
				let originalAttribute = originalAttributes.get(pointcloud);
				// TODO IMPORTANT !!! check
				pointcloud.material.activeAttributeName = originalAttribute;
				pointcloud.material.enableEvents();
			}

			viewer.shadowTestCam.updateMatrixWorld();
			viewer.shadowTestCam.matrixWorldInverse.copy(viewer.shadowTestCam.matrixWorld).invert();
			viewer.shadowTestCam.updateProjectionMatrix();
		}

	}












	render(params={}){ 
         
        const viewer = this.viewer; 
		let camera = params.camera ? params.camera : viewer.scene.getActiveCamera();
		const resolution = params.viewport ? params.viewport.resolution : this.viewer.renderer.getSize(new THREE.Vector2());//突然发现mobile用resolution2点云会放大
        let rtEDL = Features.EXT_DEPTH.isSupported() && camera.type != "OrthographicCamera" && !params.dontRenderRtEDL && (params.rtEDL || this.getRtEDL(params.viewport))  // 平面相机不用depthTex直接打开depthTest？且不使用edl
        let useEDL = viewer.useEDL && rtEDL && Potree.settings.displayMode != 'showPanos'
        let target = params.target || null
        viewer.renderer.setRenderTarget(target);
        
        //viewer.dispatchEvent({type: "render.pass.begin",viewer: viewer});
	 
		let lights = [];
		/* viewer.scene.scene.traverse(node => {
			if(node.type === "SpotLight"){
				lights.push(node);
			}
		}); */
    
        //skybox  全景图
        if(!params.magnifier){
            Potree.Utils.setCameraLayers(camera, ['skybox'])
            let useDepthTex
            if(Potree.settings.displayMode == 'showPanos' && viewer.images360.currentPano.pointcloud.hasDepthTex && rtEDL){//渲染深度图
                useDepthTex = true
             
                viewer.renderer.setRenderTarget(rtEDL) //将带有深度图的skybox画在rtEDL一下，这样就不需要绘制后边的点云了
                viewer.renderer.render(viewer.scene.scene, camera);
                viewer.renderer.setRenderTarget(target);
                
                if(Potree.settings.useRTskybox){//直接使用rtEDL，但是会失去抗锯齿，不知在skybox上需要抗锯齿吗
                    this.recoverToScreenMat.uniforms.depthTex.value = rtEDL.depthTexture
                    this.recoverToScreenMat.uniforms.tDiffuse.value = rtEDL.texture  
                    Utils.screenPass.render(viewer.renderer, this.recoverToScreenMat, target);  
                }else{
                    viewer.renderer.render(viewer.scene.scene, camera);
                }
            }else{
                viewer.renderer.render(viewer.scene.scene, camera);
            }                
            
            if(useDepthTex)return 
        }  
         
        
		const visiblePointClouds2 = viewer.scene.pointclouds.filter(pc => Potree.Utils.getObjVisiByReason(pc,'datasetSelection')  ); //需要绘制到rtEDL的
		const showPointClouds = params.magnifier ? visiblePointClouds2.length>0 : viewer.scene.pointclouds.some(e=>e.visible) //是否有需要绘制到屏幕的
         
        visiblePointClouds2.forEach(e=>{//为了绘制到depthTexture，先显示（展示全景图时隐藏了点云，所以需要显示下。且放大镜需要绘制点云）
            e.oldVisi = e.visible
            e.visible = true; 
        })
 
        Potree.Utils.setCameraLayers(camera, ['pointcloud'])
        camera.layers.set(Potree.config.renderLayers.pointcloud);
		
        //TODO adapt to multiple lights
		//this.renderShadowMap(visiblePointClouds2, camera, lights);  //???????

		{  
			for (let pointcloud of visiblePointClouds2) {
                
                let material = pointcloud.material; 
                let octreeSize = pointcloud.pcoGeometry.boundingBox.getSize(new THREE.Vector3()).x;
                material.fov = THREE.Math.degToRad(camera.fov)  
                material.resolution = resolution  
                material.spacing = pointcloud.pcoGeometry.spacing; // * Math.max(this.scale.x, this.scale.y, this.scale.z);
                material.near = camera.near;
                material.far = camera.far;
                material.uniforms.octreeSize.value = octreeSize
	
                if(useEDL ){  
                    material.useEDL = true;
                    //material.fakeEDL = false; //add
                }else{
                    material.useEDL = false;
                    //material.fakeEDL = true; //add 使也输出深度
                }  
			}

             
            if(rtEDL/* Features.EXT_DEPTH.isSupported() && !params.dontRenderRtEDL */){ //借用rtEDL存储深度信息  
                viewer.renderer.setRenderTarget( rtEDL );
                
                if(visiblePointClouds2.length>0){  //渲染scenePointCloud到rtEDL
                    viewer.pRenderer.render(viewer.scene.scenePointCloud, camera,  rtEDL, {
                        shadowMaps:  lights.length > 0 ? [this.shadowMap] : null,
                        clipSpheres: viewer.scene.volumes.filter(v => (v instanceof SphereVolume)),
                        transparent: false,
                    });
                } 
                if(Potree.settings.intersectOnObjs){// model也要渲染到rtEDL
                    camera.layers.set(Potree.config.renderLayers.model);
                    viewer.objs.traverse(e=>{if(e.material)e._OlddepthWrite = e.material.depthWrite, e.material.depthWrite = true}) //否则半透明的mesh无法遮住测量线
                    viewer.renderer.render(viewer.scene.scene, camera);
                    viewer.objs.traverse(e=>{if(e.material)e.material.depthWrite = e._OlddepthWrite})
                    //缺点：半透明的model 就算完全透明， 也会遮住测量线
                }  
            } 
		}
           
         
        //渲染到rtEDL完毕
		viewer.dispatchEvent({type: "render.pass.scene", viewer: viewer });
		viewer.renderer.setRenderTarget( target );
        
        if(!params.magnifier)visiblePointClouds2.forEach(e=>{//放大镜显示点云
            e.visible = e.oldVisi
        })
         
        
        if(showPointClouds){ //绘制点云到画布
            if(useEDL) {  //设置edlMaterial  //Features.EXT_DEPTH不支持的话不会到这一块
                 
                const uniforms = this.edlMaterial.uniforms; 
                uniforms.resolution.value.copy(resolution) 
                uniforms.edlStrength.value = viewer.edlStrength;
                uniforms.radius.value = viewer.edlRadius;
                uniforms.useEDL.value = 1;//add
                 
                let proj = camera.projectionMatrix;
                let projArray = new Float32Array(16);
                projArray.set(proj.elements);
                uniforms.uProj.value = projArray;
             
                uniforms.uEDLColor.value = rtEDL.texture; 
                uniforms.opacity.value = viewer.edlOpacity; // HACK 
                Utils.screenPass.render(viewer.renderer, this.edlMaterial, target);  //相当于一个描边后期特效。 缺点： 因为target上的没有抗锯齿，所以点云在晃动镜头时会不稳定地闪烁1px位置。优点：比不打开edl少绘制一次点云，更流畅了？！
            }else{ 
                //渲染点云 （直接用rtEDL上的会失去抗锯齿, 导致频闪、密集时出现条纹,  自己写抗锯齿也要渲染好几次。另外透明度也要处理下） 
                   
                let prop = {
                    shadowMaps:  lights.length > 0 ? [this.shadowMap] : null,
                    clipSpheres: viewer.scene.volumes.filter(v => (v instanceof SphereVolume)) ,
                    notAdditiveBlending: Potree.settings.notAdditiveBlending//add 否则透明的点云会挡住后面的模型。 加上这句后竟然透明不会叠加了！
                }
                 
                viewer.pRenderer.render(viewer.scene.scenePointCloud, camera, null , prop);  
                
            }
        }        
           
        visiblePointClouds2.forEach(e=>{
            e.visible = e.oldVisi
        }) 
        //viewer.dispatchEvent({type: "render.pass.end",viewer: viewer});
	}
    
    /* 
        渲染顺序：
            底层：背景 -> skybox(也可中间）
            中间层（含有深度信息）：1 点云、marker等mesh，
                                    2 测量线（现在被做成借用depthTex
            顶层：maginifier 
        magnifier的贴图渲染不需要顶层、中间层只需要点云。
     */
        
}