import * as THREE from "../../libs/three.js/build/three.module.js"; import {Shaders} from "../../build/shaders/shaders.js"; import {Features} from "../Features.js"; export default class DepthBasicMaterial extends THREE.ShaderMaterial{ constructor(o={}){ let {width, height} = viewer.renderer.getSize(new THREE.Vector2()); let uniforms = { resolution: { type: 'v2', value: new THREE.Vector2(width, height ) }, viewportOffset: { type: 'v2', value: new THREE.Vector2(0, 0 ) }, //left, top nearPlane: { type: 'f', value: 0.1 }, farPlane: { type: 'f', value: 10000 }, depthTexture: { type: 't', value: null }, opacity: { type: 'f', value: 1 }, map: { type: 't', value: o.map }, baseColor: {type:'v3', value: o.color ? new THREE.Color(o.color) : new THREE.Color("#ffffff")}, backColor: {type:'v3', value: o.backColor ? new THREE.Color(o.backColor) : new THREE.Color("#ddd")}, clipDistance : { type: 'f', value:o.clipDistance || 4}, //消失距离 occlusionDistance : { type: 'f', value: o.occlusionDistance || 1 }, //变为backColor距离 maxClipFactor : { type: 'f', value: o.maxClipFactor || 1 }, //0-1 } let defines = {}; let useDepth = o.useDepth && Features.EXT_DEPTH.isSupported()/* && Potree.settings.matUseDepth */ if(useDepth )defines.useDepth = '' if(o.map)defines.use_map = '' super({ uniforms, vertexShader: Shaders['depthBasic.vs'], fragmentShader: Shaders['depthBasic.fs'], depthWrite: !1, depthTest: !1, transparent: o.transparent == void 0 ? true : o.transparent, side: o.side || 0 /* THREE.DoubleSide */, defines, }) if(o.opacity != void 0){ this.opacity = o.opacity } if(useDepth) this.useDepth_ = true if(this.useDepth){ let setSize = (e)=>{//如果出现横条状的异常,往往是viewportOffset出错 let viewport = e.viewport let viewportOffset = viewport.offset || new THREE.Vector2() this.uniforms.resolution.value.copy(viewport.resolution2) this.uniforms.viewportOffset.value.copy(viewportOffset) //console.log('depth '+viewportOffset.toArray()) } let viewport = viewer.mainViewport; setSize( {viewport} ) viewer.addEventListener('resize',(e)=>{ if(!this.useDepth || !e.viewport || e.viewport.camera.isPerspectiveCamera){//地图不需要 setSize(e) } }) /* viewer.addEventListener('camera_changed', (e)=>{ if(e.viewport.name != 'mapViewport') this.updateDepthParams(e) }) */ viewer.addEventListener("render.begin", (e)=>{//before render 如果有大于两个viewport的话,不同viewport用不同的depthTex if(e.viewport.camera.isPerspectiveCamera) this.updateDepthParams(e) }) this.updateDepthParams() } //点云变化时要一直触发updateDepthParams?? //viewer.once("render.pass.end",this.updateDepthParams.bind(this)) } updateDepthParams(e={}){//主要用于点云遮住mesh if(this.useDepth){ var viewport = e.viewport || viewer.mainViewport; var camera = viewport.camera; /* if(Potree.settings.displayMode == 'showPanos' && viewer.images360.currentPano.depthTex){ this.uniforms.depthTexture.value = viewer.images360.currentPano.depthTex }else{ */ this.uniforms.depthTexture.value = viewer.getPRenderer().getRtEDL(viewport).depthTexture //其实只赋值一次就行 //} this.uniforms.nearPlane.value = camera.near; this.uniforms.farPlane.value = camera.far; } } set map(map){ this.uniforms.map.value = map; } get useDepth(){ return this.useDepth_ } set useDepth(value){//如果不支持 EXT_DEPTH 的话会失效 if(this.useDepth_ != value){ if(value && Features.EXT_DEPTH.isSupported()){ this.defines.useDepth = '' this.updateDepthParams() }else{ delete this.defines.useDepth } this.useDepth_ = value this.needsUpdate = true } } get opacity(){ return this.uniforms.opacity.value } set opacity(o){ this.uniforms && (this.uniforms.opacity.value = o) } /* dispose(){ super.dispose() viewer.depthBasic } */ }