DepthBasicMaterial.js 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. import * as THREE from "../../../libs/three.js/build/three.module.js";
  2. import {Shaders} from "../../../build/shaders/shaders.js";
  3. import {Features} from "../../Features.js";
  4. export default class DepthBasicMaterial extends THREE.ShaderMaterial{
  5. constructor(o={}){
  6. let {width, height} = viewer.renderer.getSize(new THREE.Vector2());
  7. let uniforms = {
  8. resolution: { type: 'v2', value: new THREE.Vector2(width, height ) },
  9. viewportOffset: { type: 'v2', value: new THREE.Vector2(0, 0 ) }, //left, top
  10. uUseOrthographicCamera:{ type: "b", value: false },
  11. nearPlane: { type: 'f', value: 0.1 },
  12. farPlane: { type: 'f', value: 10000 },
  13. depthTexture: { type: 't', value: null },
  14. opacity: { type: 'f', value: 1 },
  15. map: { type: 't', value: o.map },
  16. baseColor: {type:'v3', value: o.color ? new THREE.Color(o.color) : new THREE.Color("#ffffff")},
  17. backColor: {type:'v3', value: o.backColor ? new THREE.Color(o.backColor) : new THREE.Color("#ddd")},
  18. clipDistance : { type: 'f', value: o.clipDistance || 4 }, //消失距离
  19. occlusionDistance : { type: 'f', value: o.occlusionDistance || 1 }, //变为backColor距离
  20. maxClipFactor : { type: 'f', value: o.maxClipFactor || 1 }, //0-1
  21. maxOcclusionFactor : { type: 'f', value: o.maxOcclusionFactor || 1 }, //0-1
  22. //-------add:-----
  23. replaceColor : {type:'v3', value: o.replaceColor ? new THREE.Color(o.replaceColor) : null},
  24. beReplacedRed : {type:'f', value: o.beReplacedRed},
  25. }
  26. super({
  27. uniforms,
  28. vertexShader: Shaders['depthBasic.vs'],
  29. fragmentShader: Shaders['depthBasic.fs'],
  30. depthWrite: false,
  31. depthTest: false,
  32. transparent: o.transparent == void 0 ? true : o.transparent,
  33. side: o.side || 0 /* THREE.DoubleSide */,
  34. })
  35. this.events = {
  36. setSize:(e)=>{//如果出现横条状的异常,往往是viewportOffset出错 //地图不需要
  37. if(!this.useDepth /* || !e.viewport.camera.isPerspectiveCamera */|| !e.viewport)return
  38. let viewport = e.viewport
  39. let viewportOffset = viewport.offset || new THREE.Vector2()
  40. this.uniforms.resolution.value.copy(viewport.resolution2) //2023.6.12突然发现ratio>1的用resolution不对,得用2才对。但是之前明明记得不是这样
  41. this.uniforms.viewportOffset.value.copy(viewportOffset)
  42. },
  43. render:(e)=>{//before render 如果有大于两个viewport的话,不同viewport用不同的depthTex
  44. this.updateDepthParams(e)
  45. },
  46. cameraChange:(e)=>{
  47. if(e.changeInfo.projectionChanged){//resize时也会触发。虽然保守起见的话加上resize比较好//所以当时为何不用resize
  48. //console.log('projectionChanged')
  49. this.events.setSize(e)
  50. }
  51. }
  52. }
  53. if(o.mapColorReplace){
  54. this.defines.mapColorReplace = ''
  55. }
  56. //-----其他----
  57. this.autoDepthTest = o.autoDepthTest
  58. if(o.opacity != void 0){
  59. this.opacity = o.opacity
  60. }
  61. this.useDepth = o.useDepth
  62. this.map = o.map
  63. }
  64. get useDepth(){
  65. return this.useDepth_
  66. }
  67. set useDepth(value){
  68. value = value && Features.EXT_DEPTH.isSupported() //如果不支持 EXT_DEPTH 的话会失效
  69. if(this.useDepth_ != value){
  70. this.setRealDepth(value)
  71. this.useDepth_ = value
  72. if(value){
  73. viewer.addEventListener("render.begin", this.events.render)
  74. viewer.addEventListener('camera_changed', this.events.cameraChange)
  75. this.events.setSize( {viewport:viewer.mainViewport} )
  76. this.updateDepthParams()
  77. }else{
  78. viewer.removeEventListener("render.begin", this.events.render)
  79. viewer.removeEventListener('camera_changed', this.events.cameraChange)
  80. }
  81. }
  82. }
  83. setRealDepth(useDepth){//确实使用到depthTex
  84. if(this.realUseDepth != useDepth){
  85. if(useDepth ){
  86. this.defines.useDepth = ''
  87. }else{
  88. delete this.defines.useDepth
  89. }
  90. this.realUseDepth = useDepth
  91. if(this.autoDepthTest)this.depthWrite = this.depthTest = !useDepth //如果useDepth = false,使用原始的depthTest
  92. this.needsUpdate = true
  93. }
  94. }
  95. get map(){
  96. return this.uniforms.map.value
  97. }
  98. set map(map){
  99. this.uniforms.map.value = map;
  100. if(map){
  101. this.defines.use_map = ''
  102. }else{
  103. delete this.defines.use_map
  104. }
  105. }
  106. get opacity(){
  107. return this.uniforms.opacity.value
  108. }
  109. set opacity(o){
  110. this.uniforms && (this.uniforms.opacity.value = o)
  111. }
  112. get color(){
  113. return this.uniforms.baseColor.value
  114. }
  115. set color(c){
  116. this.uniforms && (this.uniforms.baseColor.value.set(c))
  117. }
  118. /* dispose(){
  119. super.dispose()
  120. viewer.depthBasic
  121. } */
  122. copy(source){
  123. super.copy(source)
  124. this.useDepth = source.useDepth
  125. this.map = source.map
  126. return this
  127. }
  128. updateDepthParams(e={}){//主要用于点云遮住mesh
  129. var viewport = e.viewport || viewer.mainViewport;
  130. var camera = viewport.camera;
  131. let hasDepth = this.useDepth /* && camera.isPerspectiveCamera */ &&
  132. (Potree.settings.pointEnableRT || Potree.settings.displayMode == 'showPanos' || viewer.useEDL)
  133. this.setRealDepth(hasDepth)
  134. if(hasDepth){
  135. this.uniforms.depthTexture.value = viewer.getPRenderer().getRtEDL(viewport).depthTexture //其实只赋值一次就行
  136. this.uniforms.nearPlane.value = camera.near;
  137. this.uniforms.farPlane.value = camera.far;
  138. }
  139. this.uniforms.uUseOrthographicCamera.value = !camera.isPerspectiveCamera
  140. }
  141. }