123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190 |
- 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
- uUseOrthographicCamera:{ type: "b", value: false },
- 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
- maxOcclusionFactor : { type: 'f', value: o.maxOcclusionFactor || 1 }, //0-1
- //-------add:-----
- replaceColor : {type:'v3', value: o.replaceColor ? new THREE.Color(o.replaceColor) : null},
- beReplacedRed : {type:'f', value: o.beReplacedRed},
-
- }
-
- super({
- uniforms,
- vertexShader: Shaders['depthBasic.vs'],
- fragmentShader: Shaders['depthBasic.fs'],
- depthWrite: false,
- depthTest: false,
- transparent: o.transparent == void 0 ? true : o.transparent,
- side: o.side || 0 /* THREE.DoubleSide */,
- })
-
-
-
- this.events = {
- setSize:(e)=>{//如果出现横条状的异常,往往是viewportOffset出错 //地图不需要
- if(!this.useDepth /* || !e.viewport.camera.isPerspectiveCamera */|| !e.viewport)return
- let viewport = e.viewport
- let viewportOffset = viewport.offset || new THREE.Vector2()
-
- this.uniforms.resolution.value.copy(viewport.resolution2) //2023.6.12突然发现ratio>1的用resolution不对,得用2才对。但是之前明明记得不是这样
- this.uniforms.viewportOffset.value.copy(viewportOffset)
- },
- render:(e)=>{//before render 如果有大于两个viewport的话,不同viewport用不同的depthTex
- this.updateDepthParams(e)
- },
- cameraChange:(e)=>{
- if(e.changeInfo.projectionChanged){//resize时也会触发。虽然保守起见的话加上resize比较好//所以当时为何不用resize
- //console.log('projectionChanged')
- this.events.setSize(e)
- }
- }
-
- }
- if(o.mapColorReplace){
- this.defines.mapColorReplace = ''
- }
-
-
-
- //-----其他----
-
- this.autoDepthTest = o.autoDepthTest
- if(o.opacity != void 0){
- this.opacity = o.opacity
- }
- this.useDepth = o.useDepth
- this.map = o.map
-
-
- }
-
-
- get useDepth(){
- return this.useDepth_
- }
-
-
-
- set useDepth(value){
- value = value && Features.EXT_DEPTH.isSupported() //如果不支持 EXT_DEPTH 的话会失效
-
- if(this.useDepth_ != value){
-
- this.setRealDepth(value)
- this.useDepth_ = value
-
- if(value){
- viewer.addEventListener("render.begin", this.events.render)
- viewer.addEventListener('camera_changed', this.events.cameraChange)
- this.events.setSize( {viewport:viewer.mainViewport} )
- this.updateDepthParams()
- }else{
- viewer.removeEventListener("render.begin", this.events.render)
- viewer.removeEventListener('camera_changed', this.events.cameraChange)
- }
- }
-
- }
-
-
- setRealDepth(useDepth){//确实使用到depthTex
- if(this.realUseDepth != useDepth){
- if(useDepth ){
- this.defines.useDepth = ''
- }else{
- delete this.defines.useDepth
- }
- this.realUseDepth = useDepth
- if(this.autoDepthTest)this.depthWrite = this.depthTest = !useDepth //如果useDepth = false,使用原始的depthTest
- this.needsUpdate = true
- }
- }
-
-
-
-
- get map(){
- return this.uniforms.map.value
- }
- set map(map){
- this.uniforms.map.value = map;
- if(map){
- this.defines.use_map = ''
- }else{
- delete this.defines.use_map
- }
- }
-
- get opacity(){
- return this.uniforms.opacity.value
- }
- set opacity(o){
- this.uniforms && (this.uniforms.opacity.value = o)
- }
-
- get color(){
- return this.uniforms.baseColor.value
- }
- set color(c){
- this.uniforms && (this.uniforms.baseColor.value.set(c))
- }
-
-
- /* dispose(){
- super.dispose()
- viewer.depthBasic
- } */
-
- copy(source){
- super.copy(source)
-
- this.useDepth = source.useDepth
- this.map = source.map
- return this
- }
-
-
-
-
- updateDepthParams(e={}){//主要用于点云遮住mesh
- var viewport = e.viewport || viewer.mainViewport;
- var camera = viewport.camera;
-
- let hasDepth = this.useDepth /* && camera.isPerspectiveCamera */ &&
- (Potree.settings.pointEnableRT || Potree.settings.displayMode == 'showPanos' || viewer.useEDL)
-
- this.setRealDepth(hasDepth)
-
- if(hasDepth){
- this.uniforms.depthTexture.value = viewer.getPRenderer().getRtEDL(viewport).depthTexture //其实只赋值一次就行
- this.uniforms.nearPlane.value = camera.near;
- this.uniforms.farPlane.value = camera.far;
- }
-
- this.uniforms.uUseOrthographicCamera.value = !camera.isPerspectiveCamera
- }
-
- }
|