potree-sdk/src/viewer/EDLRenderer.js

import * as THREE from "../../libs/three.js/build/three.module.js";
import {PointCloudSM} from "../utils/PointCloudSM.js";
import {EyeDomeLightingMaterial} from "../materials/EyeDomeLightingMaterial.js";
import {SphereVolume} from "../objects/tool/Volume.js";
import {Utils} from "../utils.js";
import {copyShader} from '../materials/shaders/otherShaders'
import {Features} from "../Features.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) {
			return;
		}

		this.edlMaterial = new EyeDomeLightingMaterial();
		this.edlMaterial.depthTest = true;
		this.edlMaterial.depthWrite = true;
		this.edlMaterial.transparent = true;
        
         

		/* this.rtRegular = new THREE.WebGLRenderTarget(viewer.mainViewport.resolution2.x, viewer.mainViewport.resolution2.y, {
			minFilter: THREE.NearestFilter,
			magFilter: THREE.NearestFilter,
			format: THREE.RGBAFormat,
			depthTexture: new THREE.DepthTexture(undefined, undefined, THREE.UnsignedIntType)
		});
         */
        
        
        
        
       /*  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
        }); */
        
	};

	resize(e ){
        if(Features.EXT_DEPTH.isSupported()){  
            let viewport = e.viewport
             
            this.getRtEDL(viewport).setSize(viewport.resolution2.x, viewport.resolution2.y);
        }
	}

	

	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.resolution2.x, viewport.resolution2.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={}){
 
         
        /* 
            渲染顺序：
                底层：背景 -> skybox(也可中间）
                中间层（含有深度信息）：1 点云、marker等mesh，
                                        2 测量线（现在被做成借用depthTex
                顶层：maginifier 
            magnifier的贴图渲染不需要顶层、中间层只需要点云。
         */
        
        const viewer = this.viewer; 
		let camera = params.camera ? params.camera : viewer.scene.getActiveCamera();
		const resolution = params.viewport ? params.viewport.resolution2 : this.viewer.renderer.getSize(new THREE.Vector2());
		
        
        //viewer.dispatchEvent({type: "render.pass.begin",viewer: viewer});
	
		                                           
        
         
        
 
		let lights = [];
		/* viewer.scene.scene.traverse(node => {
			if(node.type === "SpotLight"){
				lights.push(node);
			}
		}); */


        viewer.renderer.setRenderTarget(params.target || null);
        let background = params.background || viewer.background;
        let backgroundOpacity = params.backgroundOpacity == void 0 ? viewer.backgroundOpacity : params.backgroundOpacity//如果想完全透明，只需要backgroundOpacity为0
        if(backgroundOpacity != 0){//绘制背景
            if(background === "skybox"){
                viewer.skybox.camera.rotation.copy(viewer.scene.cameraP.rotation);
                viewer.skybox.camera.fov = viewer.scene.cameraP.fov;
                viewer.skybox.camera.aspect = viewer.scene.cameraP.aspect;

                viewer.skybox.parent.rotation.x = 0;
                viewer.skybox.parent.updateMatrixWorld();

                viewer.skybox.camera.updateProjectionMatrix();
                
                viewer.renderer.render(viewer.skybox.scene, viewer.skybox.camera);
            }else if(background === 'gradient'){ 
                viewer.scene.cameraBG.layers.set(Potree.config.renderLayers.bg);
                viewer.renderer.render(viewer.scene.scene, viewer.scene.cameraBG);
            }else if(background === 'overlayColor'){//在不clear的前提下加一层背景色 
                viewer.scene.bg2.material.color.copy(params.backgroundColor)
                viewer.scene.bg2.material.opacity = params.backgroundOpacity
                viewer.scene.cameraBG.layers.set(Potree.config.renderLayers.bg2);
                viewer.renderer.render(viewer.scene.scene, viewer.scene.cameraBG);
            }  
            
        }
        
        //skybox  全景图
        if(!params.magnifier){
            viewer.setCameraLayers(camera, ['skybox'])
            if(Potree.settings.hasDepthTex && Potree.settings.displayMode == 'showPanos' && Features.EXT_DEPTH.isSupported()){//渲染深度图
                viewer.renderer.setRenderTarget(params.rtEDL || this.getRtEDL(params.viewport))
                viewer.renderer.render(viewer.scene.scene, camera);
                viewer.renderer.setRenderTarget(params.target || null);
            } 
            viewer.renderer.render(viewer.scene.scene, camera);
            if(Potree.settings.hasDepthTex && Potree.settings.displayMode == 'showPanos' )return 
        } 
         
         
        
         
		//const visiblePointClouds = viewer.scene.pointclouds.filter(pc =>  pc.visible );
		const visiblePointClouds2 = viewer.scene.pointclouds.filter(pc => viewer.getObjVisiByReason(pc,'datasetSelection')  ); 
		const showPointClouds = viewer.scene.pointclouds.some(e=>e.visible)
         
        viewer.scene.pointclouds.forEach(e=>{//为了绘制到depthTexture，先显示（展示全景图时隐藏了点云，所以需要显示下。且放大镜需要绘制点云）
            e.oldVisi = e.visible
            if(viewer.getObjVisiByReason(e, 'datasetSelection') ) e.visible = true; 
        })

        
        //pointcloud
        viewer.setCameraLayers(camera, ['pointcloud'])
        camera.layers.set(Potree.config.renderLayers.pointcloud);
		
        //TODO adapt to multiple lights
		//this.renderShadowMap(visiblePointClouds2, camera, lights);  //???????

		{ //scenePointCloud   COLOR & DEPTH PASS
			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.screenWidth = width;
                material.screenHeight = height; */
                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(viewer.useEDL && Potree.settings.displayMode != 'showPanos'){ 
                    /* material.weighted = false;
                    material.useLogarithmicDepthBuffer = false;  */ 
                    material.useEDL = true;
                    //material.fakeEDL = false; //add
                }else{
                    material.useEDL = false;
                    //material.fakeEDL = true; //add 使也输出深度
                }   
                
			}
            
            
            if(Features.EXT_DEPTH.isSupported()){   
                //借用rtEDL存储深度信息 
                viewer.renderer.setRenderTarget(params.rtEDL || this.getRtEDL(params.viewport)/* this.rtEDL */);
                 
                //pointDensity已经使用的是panorama模式，在画面边缘点云会稀疏，遮挡效果差
                
                /* if(Potree.settings.displayMode == "showPanos"){ //还原成点云模式的材质，且可能要更大些，因点云变稀疏
                    var matBefore = { 
                        pointSizeType : new Map(),
                        size :  new Map(),    
                        usePanoMap :  new Map(),
                    } 
                    for (let pointcloud of visiblePointClouds2) { 
                        matBefore.usePanoMap.set(pointcloud, pointcloud.material.usePanoMap)
                        //matBefore.pointSizeType.set(pointcloud, pointcloud.material.pointSizeType)  
                        matBefore.size.set(pointcloud, pointcloud.temp.pointSize)  
                        
                        //pointcloud.material.pointSizeType = Potree.config.material.pointSizeType //不能修改这项，因为是define，会卡。
                        //pointcloud.changePointSize(pointcloud.temp.pointSize * (1+Potree.config.material.sizeAddAtPanoRtEDL))
                        
                        //pointcloud.changePointSize(Potree.config.material.sizeAtPanoRtEDL, true)
                        pointcloud.material.usePanoMap = false  //禁止使用absolutePanoramaSize大小
                        
                    }
                }  */   
                //渲染scenePointCloud到rtEDL
                viewer.pRenderer.render(viewer.scene.scenePointCloud, camera, params.rtEDL || this.getRtEDL(params.viewport), {
                    shadowMaps:  lights.length > 0 ? [this.shadowMap] : null,
                    clipSpheres: viewer.scene.volumes.filter(v => (v instanceof SphereVolume)),
                    transparent: false,
                });
                
                
                /* if(Potree.settings.displayMode == "showPanos"){ 
                    for (let pointcloud of visiblePointClouds2) {
                         
                        //pointcloud.material.pointSizeType = matBefore.pointSizeType.get(pointcloud)
                        pointcloud.material.usePanoMap = matBefore.usePanoMap.get(pointcloud)
                        //pointcloud.changePointSize(matBefore.size.get(pointcloud))
                    }
                } */
            } 
		}
        
        
        
         
        //渲染到rtEDL完毕
		viewer.dispatchEvent({type: "render.pass.scene", viewer: viewer/* , renderTarget: this.rtRegular */});
		viewer.renderer.setRenderTarget(params.target || null);
        
        if(!params.magnifier)viewer.scene.pointclouds.forEach(e=>{//放大镜显示点云
            e.visible = e.oldVisi
        })
        
         
         
        
       //设置edlMaterial
        if(viewer.useEDL && showPointClouds  /* || params.magnifier */) { 
            //Features.EXT_DEPTH不支持的话不会到这一块
             
			const uniforms = this.edlMaterial.uniforms;
            //if(viewer.useEDL){
                /* uniforms.screenWidth.value = width;
                uniforms.screenHeight.value = height; */
                uniforms.resolution.value.copy(resolution)
                
                uniforms.edlStrength.value = viewer.edlStrength;
                uniforms.radius.value = viewer.edlRadius;
                uniforms.useEDL.value = 1;//add
            /* }else{
                uniforms.useEDL.value = 0;//add
            } */
            
            let proj = camera.projectionMatrix;
            let projArray = new Float32Array(16);
            projArray.set(proj.elements);
            uniforms.uProj.value = projArray;
		 
			uniforms.uEDLColor.value = (params.rtEDL || this.getRtEDL(params.viewport)).texture;
			//uniforms.uEDLDepth.value = (params.rtEDL || this.getRtEDL(params.viewport)).depthTexture; //其实没用到
			 
			uniforms.opacity.value = viewer.edlOpacity; // HACK
			 
			
            Utils.screenPass.render(viewer.renderer, this.edlMaterial, params.target);
		}else{
            //渲染点云 （直接用rtEDL上的会失去抗锯齿）
            viewer.pRenderer.render(viewer.scene.scenePointCloud, camera, null , {
                shadowMaps:  lights.length > 0 ? [this.shadowMap] : null,
                clipSpheres: viewer.scene.volumes.filter(v => (v instanceof SphereVolume))
            });  
        }   
          
		//viewer.dispatchEvent({type: "render.pass.end",viewer: viewer});
        viewer.scene.pointclouds.forEach(e=>{
            e.visible = e.oldVisi
        })
        
	}
}