DepthBasicMaterial.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  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. nearPlane: { type: 'f', value: 0.1 },
  11. farPlane: { type: 'f', value: 10000 },
  12. depthTexture: { type: 't', value: null },
  13. opacity: { type: 'f', value: 1 },
  14. map: { type: 't', value: o.map },
  15. baseColor: {type:'v3', value: o.color ? new THREE.Color(o.color) : new THREE.Color("#ffffff")},
  16. backColor: {type:'v3', value: o.backColor ? new THREE.Color(o.backColor) : new THREE.Color("#ddd")},
  17. clipDistance : { type: 'f', value:o.clipDistance || 4}, //消失距离
  18. occlusionDistance : { type: 'f', value: o.occlusionDistance || 1 }, //变为backColor距离
  19. maxClipFactor : { type: 'f', value: o.maxClipFactor || 1 }, //0-1
  20. }
  21. let defines = {};
  22. let useDepth = o.useDepth && Features.EXT_DEPTH.isSupported()/* && Potree.settings.matUseDepth */
  23. if(useDepth )defines.useDepth = ''
  24. if(o.map)defines.use_map = ''
  25. super({
  26. uniforms,
  27. vertexShader: Shaders['depthBasic.vs'],
  28. fragmentShader: Shaders['depthBasic.fs'],
  29. depthWrite: !1,
  30. depthTest: !1,
  31. transparent: o.transparent == void 0 ? true : o.transparent,
  32. side: o.side || 0 /* THREE.DoubleSide */,
  33. defines,
  34. })
  35. if(o.opacity != void 0){
  36. this.opacity = o.opacity
  37. }
  38. if(useDepth) this.useDepth_ = true
  39. if(this.useDepth){
  40. let setSize = (e)=>{//如果出现横条状的异常,往往是viewportOffset出错
  41. let viewport = e.viewport
  42. let viewportOffset = viewport.offset || new THREE.Vector2()
  43. this.uniforms.resolution.value.copy(viewport.resolution2)
  44. this.uniforms.viewportOffset.value.copy(viewportOffset)
  45. //console.log('depth '+viewportOffset.toArray())
  46. }
  47. let viewport = viewer.mainViewport;
  48. setSize( {viewport} )
  49. viewer.addEventListener('resize',(e)=>{
  50. if(!this.useDepth || !e.viewport || e.viewport.camera.isPerspectiveCamera){//地图不需要
  51. setSize(e)
  52. }
  53. })
  54. /* viewer.addEventListener('camera_changed', (e)=>{
  55. if(e.viewport.name != 'mapViewport') this.updateDepthParams(e)
  56. }) */
  57. viewer.addEventListener("render.begin", (e)=>{//before render 如果有大于两个viewport的话,不同viewport用不同的depthTex
  58. if(e.viewport.camera.isPerspectiveCamera) this.updateDepthParams(e)
  59. })
  60. this.updateDepthParams()
  61. }
  62. //点云变化时要一直触发updateDepthParams??
  63. //viewer.once("render.pass.end",this.updateDepthParams.bind(this))
  64. }
  65. updateDepthParams(e={}){//主要用于点云遮住mesh
  66. if(this.useDepth){
  67. var viewport = e.viewport || viewer.mainViewport;
  68. var camera = viewport.camera;
  69. /* if(Potree.settings.displayMode == 'showPanos' && viewer.images360.currentPano.depthTex){
  70. this.uniforms.depthTexture.value = viewer.images360.currentPano.depthTex
  71. }else{ */
  72. this.uniforms.depthTexture.value = viewer.getPRenderer().getRtEDL(viewport).depthTexture //其实只赋值一次就行
  73. //}
  74. this.uniforms.nearPlane.value = camera.near;
  75. this.uniforms.farPlane.value = camera.far;
  76. }
  77. }
  78. set map(map){
  79. this.uniforms.map.value = map;
  80. }
  81. get useDepth(){
  82. return this.useDepth_
  83. }
  84. set useDepth(value){//如果不支持 EXT_DEPTH 的话会失效
  85. if(this.useDepth_ != value){
  86. if(value && Features.EXT_DEPTH.isSupported()){
  87. this.defines.useDepth = ''
  88. this.updateDepthParams()
  89. }else{
  90. delete this.defines.useDepth
  91. }
  92. this.useDepth_ = value
  93. this.needsUpdate = true
  94. }
  95. }
  96. get opacity(){
  97. return this.uniforms.opacity.value
  98. }
  99. set opacity(o){
  100. this.uniforms && (this.uniforms.opacity.value = o)
  101. }
  102. /* dispose(){
  103. super.dispose()
  104. viewer.depthBasic
  105. } */
  106. }