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.js'
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'])
            let useDepthTex
            if(Potree.settings.displayMode == 'showPanos' && viewer.images360.currentPano.pointcloud.hasDepthTex && Features.EXT_DEPTH.isSupported()){//渲染深度图
                useDepthTex = true
                viewer.renderer.setRenderTarget(params.rtEDL || this.getRtEDL(params.viewport)) //将带有深度图的skybox画在rtEDL一下，这样就不需要绘制后边的点云了
                viewer.renderer.render(viewer.scene.scene, camera);
                viewer.renderer.setRenderTarget(params.target || null);
            } 
            viewer.renderer.render(viewer.scene.scene, camera);
            if(useDepthTex)return 
        } 
         
        
		const visiblePointClouds2 = viewer.scene.pointclouds.filter(pc => viewer.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; 
        })

        
         
        viewer.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.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() && !params.dontRenderRtEDL){  
                //借用rtEDL存储深度信息  
                viewer.renderer.setRenderTarget(params.rtEDL || this.getRtEDL(params.viewport)/* this.rtEDL */);
               
               
                if(visiblePointClouds2.length>0){ 
                    //渲染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.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 就算完全透明， 也会遮住测量线
                }
                //test
                /* {
                    viewer.objs.traverse((obj)=>{
                        if(obj.material){
                            obj.material = obj.depthMat
                        }
                    })
                    viewer.setCameraLayers(camera, ['sceneObjects'])
                    viewer.renderer.render(viewer.scene.scene, camera)
                    viewer.objs.traverse((obj)=>{
                        if(obj.material){
                            obj.material = obj.standardMat
                        }
                    })
                } */ 
            } 
		}
        
        
        
         
        //渲染到rtEDL完毕
		viewer.dispatchEvent({type: "render.pass.scene", viewer: viewer/* , renderTarget: this.rtRegular */});
		viewer.renderer.setRenderTarget(params.target || null);
        
        if(!params.magnifier)visiblePointClouds2.forEach(e=>{//放大镜显示点云
            e.visible = e.oldVisi
        })
        
         
         
        if(showPointClouds){ //绘制点云到画布
            if(viewer.useEDL) {  //设置edlMaterial
                //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上的会失去抗锯齿）
                
                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);  
            }
        }        
          
		//viewer.dispatchEvent({type: "render.pass.end",viewer: viewer});
        visiblePointClouds2.forEach(e=>{
            e.visible = e.oldVisi
        })
        
	}
}