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 Common from "../custom/utils/Common.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 ); let {vs,fs} = Common.changeShaderToWebgl2(copyShader.vertexShader, copyShader.fragmentShader, 'ShaderMaterial') this.recoverToScreenMat = new THREE.ShaderMaterial({ uniforms: copyUniforms, vertexShader: vs, fragmentShader: fs, 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 != Potree.settings.useRTPoint){//如果两个只开了一个 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.displayMode == 'showPanos' ? Potree.settings.useRTskybox : Potree.settings.useRTPoint) ? 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()){ let rtEDL = params.rtEDL || this.getRtEDL(params.viewport) if(rtEDL){ renderer.setRenderTarget( rtEDL ); let oldAlpha = renderer.getClearAlpha() renderer.setClearAlpha(0) renderer.clear( true, true, true ); renderer.setClearAlpha(oldAlpha) } } //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) } } //注：当pc窗口缩小，deviceRatio变小后，resolution2会小于resolution，然后遮挡会出现精度损失而有细微不准，是正常现象。 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(); } } getIfRtEDL_(params={}){ return (Potree.settings.pointEnableRT && Potree.settings.displayMode == 'showPointCloud' || Potree.settings.displayMode == 'showPanos'/* && viewer.images360.currentPano.pointcloud.hasDepthTex */ || viewer.useEDL) && Features.EXT_DEPTH.isSupported() && params.camera.type != "OrthographicCamera" && !params.dontRenderRtEDL && (params.rtEDL || this.getRtEDL(params.viewport)) // 平面相机不用depthTex直接打开depthTest？且不使用edl } getIfuseEdl(params={} ){ return viewer.useEDL && Potree.settings.displayMode != 'showPanos' } canUseRTPoint(){ return Potree.settings.useRTPoint && !viewer.scene.pointclouds.some(e=>e.visible && e.material.opacity < 1) && !viewer.objs.children.some(e=>e.opacity < 1) //透明mesh发黑，透明无效 } render(params={}){ const viewer = this.viewer; let camera = params.camera ? params.camera : viewer.scene.getActiveCamera(); let rtEDL = this.getIfRtEDL_(params) let useEDL = rtEDL && this.getIfuseEdl(params) let target = params.target || null const resolution = (rtEDL && Potree.settings.useRTPoint) ? new THREE.Vector2(rtEDL.width,rtEDL.height) : params.target ? new THREE.Vector2(params.target.width, params.target.height ) : params.viewport ? params.viewport.resolution2 : this.viewer.renderer.getSize(new THREE.Vector2());//截图时需要用target的大小 let renderer = params.renderer || viewer.renderer let pRenderer = params.pRenderer || viewer.pRenderer 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){ if(Potree.settings.displayMode == 'showPanos' || Potree.settings.testCube ){ Potree.Utils.setCameraLayers(camera, ['skybox']) //注：model等也可能是skybox if((Potree.settings.displayMode == 'showPanos' ) && (viewer.images360.currentPano.pointcloud.hasDepthTex || Potree.settings.modelSkybox && viewer.images360.currentPano.pointcloud.is4dkkModel) && rtEDL){//渲染深度图 renderer.setRenderTarget(rtEDL) //将带有深度图的skybox画在rtEDL一下，这样就不需要绘制后边的点云了 renderer.render(viewer.scene.scene, camera); 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(renderer, this.recoverToScreenMat, target); }else{ renderer.render(viewer.scene.scene, camera); } }else{ renderer.render(viewer.scene.scene, camera); } if(Potree.settings.displayMode == 'showPanos' ){ if(Potree.settings.fastTran && viewer.images360.fastTranMaskPass.enabled){ viewer.images360.fastTranMaskPass.render() } if( viewer.objs.children.length == 0 || !params.useModelOnRT ) return //没有模型需要绘制遮挡 } } } const pointclouds = viewer.scene.pointclouds.filter(pc => !pc.isSplat) const visiblePointClouds2 = pointclouds.filter(pc => pc.visible/* Potree.Utils.getObjVisiByReason(pc,'datasetSelection') */ ); //需要绘制到rtEDL的 const showPointClouds = params.magnifier ? visiblePointClouds2.length>0 : pointclouds.some(e=>e.visible) //是否有需要绘制到屏幕的 /* visiblePointClouds2.forEach(e=>{//为了绘制到depthTexture，先显示（展示全景图时隐藏了点云，所以需要显示下 ） e.oldVisi = e.visible e.visible = true; }) */ //好难写- -，太多东西了，无depTex时要把不显示的点云和模型绘制到rt上，但是rt又可能直接绘制到画面。有的模型是要在全景模式显示的 //所以决定去掉不显示的点云,无深度图的话就无遮挡 http://192.168.0.21/index.php?m=bug&f=view&bugID=49575 Potree.Utils.setCameraLayers(camera, ['pointcloud']) //设置多少都会渲染出来，因为渲染里没有sort //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 ){ //借用rtEDL存储深度信息 renderer.setRenderTarget( rtEDL ); if(visiblePointClouds2.length>0){ //渲染scenePointCloud到rtEDL 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, // 因透明时不写深度，所以不透明。 这也导致透明时不能直接使用rtEDL绘制到屏幕 notAdditiveBlending: Potree.settings.notAdditiveBlending }); } if(Potree.settings.intersectOnObjs){ Potree.Utils.setCameraLayers(camera, ['model','light']) viewer.objs.traverse(e=>{if(e.material)e._OlddepthWrite = e.material.depthWrite, e.material.depthWrite = true}) //否则半透明的mesh无法遮住测量线 renderer.render(viewer.scene.scene, camera); viewer.objs.traverse(e=>{if(e.material)e.material.depthWrite = e._OlddepthWrite}) } } } //渲染到rtEDL完毕 viewer.dispatchEvent({type: "render.pass.scene", viewer: viewer }); renderer.setRenderTarget( target ); /* if(!params.magnifier)visiblePointClouds2.forEach(e=>{//放大镜显示点云 e.visible = e.oldVisi }) */ {//绘制点云到画布 if(useEDL){ //设置edlMaterial //Features.EXT_DEPTH不支持的话不会到这一块 if(showPointClouds){ 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(renderer, this.edlMaterial, target); //相当于一个描边后期特效。 缺点： 因为target上的没有抗锯齿，所以点云在晃动镜头时会不稳定地闪烁1px位置。优点：比不打开edl少绘制一次点云，更流畅了？！ } }else if(this.canUseRTPoint() && rtEDL ){ //半透明点云在clearAlpha为非1的状态下截图 或 在useRTPoints时绘制到屏幕上透明度不对，亮度变低 。深度值遮挡也不对。 只能在半透明时关闭一下useRTPoint this.recoverToScreenMat.uniforms.tDiffuse.value = rtEDL.texture; if(this.recoverToScreenMat.defines.useDepth){ this.recoverToScreenMat.uniforms.depthTex.value = rtEDL.depthTexture; } Utils.screenPass.render(renderer, this.recoverToScreenMat, target/* , Potree.settings.useFxaa && viewer.composer2 */); //这时候 params_.useModelOnRT 应该和 Potree.settings.intersectOnObjs 相等 否则出错 }else{ //渲染点云 （直接用rtEDL上的会失去抗锯齿, 导致频闪、密集时出现条纹, 自己写抗锯齿也要渲染好几次。另外透明度也要处理下） if(showPointClouds){ let prop = { shadowMaps: lights.length > 0 ? [this.shadowMap] : null, clipSpheres: viewer.scene.volumes.filter(v => (v instanceof SphereVolume)) , notAdditiveBlending: Potree.settings.notAdditiveBlending//add 否则透明的点云会挡住后面的模型。 加上这句后竟然透明不会叠加了！ } 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的贴图渲染不需要顶层、中间层只需要点云。 */ }