LineMaterial.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634
  1. import {
  2. ShaderLib,
  3. ShaderMaterial,
  4. UniformsLib,
  5. UniformsUtils,
  6. Vector2
  7. } from '../build/three.module.js';
  8. /**
  9. * parameters = {
  10. * color: <hex>,
  11. * lineWidth: <float>,
  12. * dashed: <boolean>,
  13. * dashScale: <float>,
  14. * dashSize: <float>,
  15. * dashOffset: <float>,
  16. * gapSize: <float>,
  17. * resolution: <Vector2>, // to be set by renderer
  18. * }
  19. */
  20. UniformsLib.line = {
  21. lineWidth: { value: 1 },
  22. resolution: { value: new Vector2( 1, 1 ) },
  23. viewportOffset: { value: new Vector2(0, 0 ) }, //left, top
  24. dashScale: { value: 1 },
  25. dashSize: { value: 1 },
  26. dashOffset: { value: 0 },
  27. gapSize: { value: 1 }, // todo FIX - maybe change to totalSize
  28. opacity: { value: 1 },
  29. depthTexture:{ value: null },
  30. nearPlane:{value: 0.1},
  31. farPlane:{value: 100000},
  32. };
  33. ShaderLib[ 'line' ] = {
  34. uniforms: UniformsUtils.merge( [
  35. UniformsLib.common,
  36. UniformsLib.fog,
  37. UniformsLib.line
  38. ] ),
  39. vertexShader:
  40. `
  41. #include <common>
  42. #include <color_pars_vertex>
  43. #include <fog_pars_vertex>
  44. #include <logdepthbuf_pars_vertex>
  45. #include <clipping_planes_pars_vertex>
  46. uniform float lineWidth;
  47. uniform vec2 resolution;
  48. attribute vec3 instanceStart;
  49. attribute vec3 instanceEnd;
  50. attribute vec3 instanceColorStart;
  51. attribute vec3 instanceColorEnd;
  52. varying vec2 vUv;
  53. #ifdef USE_DASH
  54. uniform float dashScale;
  55. attribute float instanceDistanceStart;
  56. attribute float instanceDistanceEnd;
  57. varying float vLineDistance;
  58. #endif
  59. void trimSegment( const in vec4 start, inout vec4 end ) {
  60. // trim end segment so it terminates between the camera plane and the near plane
  61. // conservative estimate of the near plane
  62. float a = projectionMatrix[ 2 ][ 2 ]; // 3nd entry in 3th column
  63. float b = projectionMatrix[ 3 ][ 2 ]; // 3nd entry in 4th column
  64. float nearEstimate = - 0.5 * b / a;
  65. float alpha = ( nearEstimate - start.z ) / ( end.z - start.z );
  66. end.xyz = mix( start.xyz, end.xyz, alpha );
  67. }
  68. void main() {
  69. #ifdef USE_COLOR
  70. vColor.xyz = ( position.y < 0.5 ) ? instanceColorStart : instanceColorEnd;
  71. #endif
  72. #ifdef USE_DASH
  73. vLineDistance = ( position.y < 0.5 ) ? dashScale * instanceDistanceStart : dashScale * instanceDistanceEnd;
  74. #endif
  75. float aspect = resolution.x / resolution.y;
  76. vUv = uv;
  77. // camera space
  78. vec4 start = modelViewMatrix * vec4( instanceStart, 1.0 );
  79. vec4 end = modelViewMatrix * vec4( instanceEnd, 1.0 );
  80. // special case for perspective projection, and segments that terminate either in, or behind, the camera plane
  81. // clearly the gpu firmware has a way of addressing this issue when projecting into ndc space
  82. // but we need to perform ndc-space calculations in the shader, so we must address this issue directly
  83. // perhaps there is a more elegant solution -- WestLangley
  84. bool perspective = ( projectionMatrix[ 2 ][ 3 ] == - 1.0 ); // 4th entry in the 3rd column
  85. if ( perspective ) {
  86. if ( start.z < 0.0 && end.z >= 0.0 ) {
  87. trimSegment( start, end );
  88. } else if ( end.z < 0.0 && start.z >= 0.0 ) {
  89. trimSegment( end, start );
  90. }
  91. }
  92. // clip space
  93. vec4 clipStart = projectionMatrix * start;
  94. vec4 clipEnd = projectionMatrix * end;
  95. // ndc space
  96. vec2 ndcStart = clipStart.xy / clipStart.w;
  97. vec2 ndcEnd = clipEnd.xy / clipEnd.w;
  98. // direction
  99. vec2 dir = ndcEnd - ndcStart;
  100. // account for clip-space aspect ratio
  101. dir.x *= aspect;
  102. dir = normalize( dir );
  103. // perpendicular to dir
  104. vec2 offset = vec2( dir.y, - dir.x );
  105. // undo aspect ratio adjustment
  106. dir.x /= aspect;
  107. offset.x /= aspect;
  108. // sign flip
  109. if ( position.x < 0.0 ) offset *= - 1.0;
  110. // endcaps
  111. if ( position.y < 0.0 ) {
  112. offset += - dir;
  113. } else if ( position.y > 1.0 ) {
  114. offset += dir;
  115. }
  116. // adjust for lineWidth
  117. offset *= lineWidth;
  118. // adjust for clip-space to screen-space conversion // maybe resolution should be based on viewport ...
  119. offset /= resolution.y;
  120. // select end
  121. vec4 clip = ( position.y < 0.5 ) ? clipStart : clipEnd;
  122. // back to clip space
  123. offset *= clip.w;
  124. clip.xy += offset;
  125. gl_Position = clip;
  126. vec4 mvPosition = ( position.y < 0.5 ) ? start : end; // this is an approximation
  127. #include <logdepthbuf_vertex>
  128. #include <clipping_planes_vertex>
  129. #include <fog_vertex>
  130. }
  131. `,
  132. fragmentShader:
  133. `
  134. uniform vec3 diffuse;
  135. uniform float opacity;
  136. #ifdef USE_DASH
  137. uniform float dashSize;
  138. uniform float dashOffset;
  139. uniform float gapSize;
  140. #endif
  141. //加
  142. #if defined(GL_EXT_frag_depth) && defined(useDepth)
  143. uniform sampler2D depthTexture;
  144. uniform float nearPlane;
  145. uniform float farPlane;
  146. uniform vec2 resolution;
  147. uniform vec2 viewportOffset;
  148. #endif
  149. varying float vLineDistance;
  150. #include <common>
  151. #include <color_pars_fragment>
  152. #include <fog_pars_fragment>
  153. #include <logdepthbuf_pars_fragment>
  154. #include <clipping_planes_pars_fragment>
  155. varying vec2 vUv;
  156. #if defined(GL_EXT_frag_depth) && defined(useDepth)
  157. float convertToLinear(float zValue)
  158. {
  159. float z = zValue * 2.0 - 1.0;
  160. return (2.0 * nearPlane * farPlane) / (farPlane + nearPlane - z * (farPlane - nearPlane));
  161. }
  162. #endif
  163. void main() {
  164. #include <clipping_planes_fragment>
  165. #ifdef USE_DASH
  166. if ( vUv.y < - 1.0 || vUv.y > 1.0 ) discard; // discard endcaps
  167. bool unvisible = mod( vLineDistance + dashOffset, dashSize + gapSize ) > dashSize;
  168. //加
  169. #ifdef DASH_with_depth
  170. #else
  171. if (unvisible) discard; // todo - FIX
  172. #endif
  173. #endif
  174. if ( abs( vUv.y ) > 1.0 ) {
  175. float a = vUv.x;
  176. float b = ( vUv.y > 0.0 ) ? vUv.y - 1.0 : vUv.y + 1.0;
  177. float len2 = a * a + b * b;
  178. if ( len2 > 1.0 ) discard;
  179. }
  180. vec4 diffuseColor = vec4( diffuse, opacity );
  181. //加
  182. #if defined(GL_EXT_frag_depth) && defined(useDepth)
  183. float mixFactor = 0.0;
  184. float clipFactor = 0.0;
  185. float fragDepth = convertToLinear(gl_FragCoord.z);
  186. vec2 depthTxtCoords = vec2(gl_FragCoord.x - viewportOffset.x, gl_FragCoord.y) / resolution;
  187. float textureDepth = convertToLinear(texture2D(depthTexture, depthTxtCoords).r);
  188. float delta = textureDepth - fragDepth;
  189. if (delta < 0.0)
  190. {
  191. float occlusionDistance = - 1.0;
  192. float clipDistance = - 4.0;
  193. mixFactor = clamp(delta / occlusionDistance, 0.0, 1.0);
  194. clipFactor = clamp(delta / clipDistance, 0.0, 1.0);
  195. }
  196. if (clipFactor == 1.0)
  197. {
  198. discard;
  199. }
  200. vec4 backColor = vec4(0.8,0.8,0.8, 0.8*opacity);
  201. #ifdef DASH_with_depth
  202. // 只在被遮住的部分显示虚线
  203. if(unvisible) backColor.a = 0.0;
  204. #endif
  205. //vec4 diffuseColor = vec4(mix(diffuse, backColor, mixFactor), opacity*(1.0 - clipFactor));
  206. diffuseColor = mix(diffuseColor, backColor , mixFactor);
  207. diffuseColor.a *= (1.0 - clipFactor);
  208. #endif
  209. #include <logdepthbuf_fragment>
  210. #include <color_fragment>
  211. gl_FragColor = vec4( diffuseColor.rgb, diffuseColor.a );
  212. #include <tonemapping_fragment>
  213. #include <encodings_fragment>
  214. #include <fog_fragment>
  215. #include <premultiplied_alpha_fragment>
  216. }
  217. `
  218. };
  219. var LineMaterial = function ( parameters ) {
  220. ShaderMaterial.call( this, {
  221. type: 'LineMaterial',
  222. uniforms: UniformsUtils.clone( ShaderLib[ 'line' ].uniforms ),
  223. vertexShader: ShaderLib[ 'line' ].vertexShader,
  224. fragmentShader: ShaderLib[ 'line' ].fragmentShader,
  225. clipping: true // required for clipping support
  226. } );
  227. this.supportExtDepth = parameters.supportExtDepth
  228. this.dashed = false;
  229. this.lineWidth_ = 0
  230. Object.defineProperties( this, {
  231. dashed:{//add
  232. enumerable: true,
  233. get: function () {
  234. return 'USE_DASH' in this.defines
  235. },
  236. set: function ( value ) {
  237. if(value){
  238. this.defines.USE_DASH = ''
  239. }else{
  240. delete this.defines.USE_DASH
  241. }
  242. this.needsUpdate = true
  243. }
  244. },
  245. useDepth:{//add
  246. enumerable: true,
  247. get: function () {
  248. return 'useDepth' in this.defines
  249. },
  250. set: function ( value ) {
  251. value = value && !!this.supportExtDepth
  252. if(value != this.useDepth){
  253. if(value){
  254. this.defines.useDepth = ''
  255. this.updateDepthParams()
  256. }else{
  257. delete this.defines.useDepth
  258. }
  259. this.needsUpdate = true
  260. }
  261. }
  262. },
  263. dashWithDepth:{//add
  264. enumerable: true,
  265. get: function () {
  266. return 'DASH_with_depth' in this.defines
  267. },
  268. set: function ( value ) {
  269. value = value && !!this.supportExtDepth
  270. if(value != this.dashWithDepth){
  271. if(value){
  272. this.defines.DASH_with_depth = ''
  273. }else{
  274. delete this.defines.DASH_with_depth
  275. }
  276. this.needsUpdate = true
  277. }
  278. }
  279. },
  280. color: {
  281. enumerable: true,
  282. get: function () {
  283. return this.uniforms.diffuse.value;
  284. },
  285. set: function ( value ) {
  286. this.uniforms.diffuse.value = value;
  287. }
  288. },
  289. lineWidth: {
  290. enumerable: true,
  291. get: function () {
  292. return this.lineWidth_;//this.uniforms.lineWidth.value;
  293. },
  294. set: function ( value ) {
  295. this.uniforms.lineWidth.value = value * window.devicePixelRatio;
  296. this.lineWidth_ = value
  297. }
  298. },
  299. dashScale: {
  300. enumerable: true,
  301. get: function () {
  302. return this.uniforms.dashScale.value;
  303. },
  304. set: function ( value ) {
  305. this.uniforms.dashScale.value = value;
  306. }
  307. },
  308. dashSize: {
  309. enumerable: true,
  310. get: function () {
  311. return this.uniforms.dashSize.value;
  312. },
  313. set: function ( value ) {
  314. this.uniforms.dashSize.value = value;
  315. }
  316. },
  317. dashOffset: {
  318. enumerable: true,
  319. get: function () {
  320. return this.uniforms.dashOffset.value;
  321. },
  322. set: function ( value ) {
  323. this.uniforms.dashOffset.value = value;
  324. }
  325. },
  326. gapSize: {
  327. enumerable: true,
  328. get: function () {
  329. return this.uniforms.gapSize.value;
  330. },
  331. set: function ( value ) {
  332. this.uniforms.gapSize.value = value;
  333. }
  334. },
  335. opacity: {
  336. enumerable: true,
  337. get: function () {
  338. return this.uniforms.opacity.value;
  339. },
  340. set: function ( value ) {
  341. this.uniforms.opacity.value = value;
  342. }
  343. },
  344. resolution: {
  345. enumerable: true,
  346. get: function () {
  347. return this.uniforms.resolution.value;
  348. },
  349. set: function ( value ) {
  350. this.uniforms.resolution.value.copy( value );
  351. }
  352. }
  353. } );
  354. this.setValues( parameters );
  355. let setSize = (e)=>{
  356. let viewport = e.viewport
  357. let viewportOffset = viewport.offset || new Vector2()
  358. this.uniforms.resolution.value.copy(viewport.resolution2)
  359. this.uniforms.viewportOffset.value.copy(viewportOffset)
  360. this.lineWidth = this.lineWidth_
  361. }
  362. let viewport = viewer.mainViewport;
  363. setSize({viewport})
  364. viewer.addEventListener('resize',(e)=>{
  365. //if(!e.viewport || e.viewport.name != 'mapViewport'){
  366. setSize(e)
  367. //console.log(this.name + viewportOffset.toArray())
  368. //}
  369. })
  370. if(this.supportExtDepth){
  371. //add
  372. this.updateDepthParams()
  373. viewer.addEventListener('camera_changed', (e)=>{
  374. if(e.viewport.name != 'mapViewport') this.updateDepthParams(e)
  375. })
  376. /* viewer.addEventListener("render.begin", (e)=>{//before render 如果有大于两个viewport的话可能要
  377. if(e.viewport.name != 'mapViewport') this.updateDepthParams({camera:e.viewport.camera})
  378. }) */
  379. }
  380. };
  381. LineMaterial.prototype = Object.create( ShaderMaterial.prototype );
  382. LineMaterial.prototype.constructor = LineMaterial;
  383. LineMaterial.prototype.isLineMaterial = true;
  384. LineMaterial.prototype.updateDepthParams = function(e={}){
  385. if(this.useDepth){
  386. var camera = e.camera || viewer.scene.getActiveCamera()
  387. this.uniforms.depthTexture.value = viewer.getPRenderer().rtEDL.depthTexture
  388. this.uniforms.nearPlane.value = camera.near;
  389. this.uniforms.farPlane.value = camera.far;
  390. }
  391. }
  392. export { LineMaterial };