LineMaterial.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702
  1. /**
  2. * parameters = {
  3. * color: <hex>,
  4. * linewidth: <float>,
  5. * dashed: <boolean>,
  6. * dashScale: <float>,
  7. * dashSize: <float>,
  8. * dashOffset: <float>,
  9. * gapSize: <float>,
  10. * resolution: <Vector2>, // to be set by renderer
  11. * }
  12. */
  13. import {
  14. ShaderLib,
  15. ShaderMaterial,
  16. UniformsLib,
  17. UniformsUtils,
  18. Vector2
  19. } from '../../../build/three.module.js';
  20. UniformsLib.line = {
  21. worldUnits: { value: 1 },
  22. linewidth: { value: 1 },
  23. resolution: { value: new Vector2( 1, 1 ) },
  24. dashOffset: { value: 0 },
  25. dashScale: { value: 1 },
  26. dashSize: { value: 1 },
  27. gapSize: { value: 1 } // todo FIX - maybe change to totalSize
  28. };
  29. ShaderLib[ 'line' ] = {
  30. uniforms: UniformsUtils.merge( [
  31. UniformsLib.common,
  32. UniformsLib.fog,
  33. UniformsLib.line
  34. ] ),
  35. vertexShader:
  36. /* glsl */`
  37. #include <common>
  38. #include <color_pars_vertex>
  39. #include <fog_pars_vertex>
  40. #include <logdepthbuf_pars_vertex>
  41. #include <clipping_planes_pars_vertex>
  42. uniform float linewidth;
  43. uniform vec2 resolution;
  44. attribute vec3 instanceStart;
  45. attribute vec3 instanceEnd;
  46. attribute vec3 instanceColorStart;
  47. attribute vec3 instanceColorEnd;
  48. #ifdef WORLD_UNITS
  49. varying vec4 worldPos;
  50. varying vec3 worldStart;
  51. varying vec3 worldEnd;
  52. #ifdef USE_DASH
  53. varying vec2 vUv;
  54. #endif
  55. #else
  56. varying vec2 vUv;
  57. #endif
  58. #ifdef USE_DASH
  59. uniform float dashScale;
  60. attribute float instanceDistanceStart;
  61. attribute float instanceDistanceEnd;
  62. varying float vLineDistance;
  63. #endif
  64. void trimSegment( const in vec4 start, inout vec4 end ) {
  65. // trim end segment so it terminates between the camera plane and the near plane
  66. // conservative estimate of the near plane
  67. float a = projectionMatrix[ 2 ][ 2 ]; // 3nd entry in 3th column
  68. float b = projectionMatrix[ 3 ][ 2 ]; // 3nd entry in 4th column
  69. float nearEstimate = - 0.5 * b / a;
  70. float alpha = ( nearEstimate - start.z ) / ( end.z - start.z );
  71. end.xyz = mix( start.xyz, end.xyz, alpha );
  72. }
  73. void main() {
  74. #ifdef USE_COLOR
  75. vColor.xyz = ( position.y < 0.5 ) ? instanceColorStart : instanceColorEnd;
  76. #endif
  77. #ifdef USE_DASH
  78. vLineDistance = ( position.y < 0.5 ) ? dashScale * instanceDistanceStart : dashScale * instanceDistanceEnd;
  79. vUv = uv;
  80. #endif
  81. float aspect = resolution.x / resolution.y;
  82. // camera space
  83. vec4 start = modelViewMatrix * vec4( instanceStart, 1.0 );
  84. vec4 end = modelViewMatrix * vec4( instanceEnd, 1.0 );
  85. #ifdef WORLD_UNITS
  86. worldStart = start.xyz;
  87. worldEnd = end.xyz;
  88. #else
  89. vUv = uv;
  90. #endif
  91. // special case for perspective projection, and segments that terminate either in, or behind, the camera plane
  92. // clearly the gpu firmware has a way of addressing this issue when projecting into ndc space
  93. // but we need to perform ndc-space calculations in the shader, so we must address this issue directly
  94. // perhaps there is a more elegant solution -- WestLangley
  95. bool perspective = ( projectionMatrix[ 2 ][ 3 ] == - 1.0 ); // 4th entry in the 3rd column
  96. if ( perspective ) {
  97. if ( start.z < 0.0 && end.z >= 0.0 ) {
  98. trimSegment( start, end );
  99. } else if ( end.z < 0.0 && start.z >= 0.0 ) {
  100. trimSegment( end, start );
  101. }
  102. }
  103. // clip space
  104. vec4 clipStart = projectionMatrix * start;
  105. vec4 clipEnd = projectionMatrix * end;
  106. // ndc space
  107. vec3 ndcStart = clipStart.xyz / clipStart.w;
  108. vec3 ndcEnd = clipEnd.xyz / clipEnd.w;
  109. // direction
  110. vec2 dir = ndcEnd.xy - ndcStart.xy;
  111. // account for clip-space aspect ratio
  112. dir.x *= aspect;
  113. dir = normalize( dir );
  114. #ifdef WORLD_UNITS
  115. // get the offset direction as perpendicular to the view vector
  116. vec3 worldDir = normalize( end.xyz - start.xyz );
  117. vec3 offset;
  118. if ( position.y < 0.5 ) {
  119. offset = normalize( cross( start.xyz, worldDir ) );
  120. } else {
  121. offset = normalize( cross( end.xyz, worldDir ) );
  122. }
  123. // sign flip
  124. if ( position.x < 0.0 ) offset *= - 1.0;
  125. float forwardOffset = dot( worldDir, vec3( 0.0, 0.0, 1.0 ) );
  126. // don't extend the line if we're rendering dashes because we
  127. // won't be rendering the endcaps
  128. #ifndef USE_DASH
  129. // extend the line bounds to encompass endcaps
  130. start.xyz += - worldDir * linewidth * 0.5;
  131. end.xyz += worldDir * linewidth * 0.5;
  132. // shift the position of the quad so it hugs the forward edge of the line
  133. offset.xy -= dir * forwardOffset;
  134. offset.z += 0.5;
  135. #endif
  136. // endcaps
  137. if ( position.y > 1.0 || position.y < 0.0 ) {
  138. offset.xy += dir * 2.0 * forwardOffset;
  139. }
  140. // adjust for linewidth
  141. offset *= linewidth * 0.5;
  142. // set the world position
  143. worldPos = ( position.y < 0.5 ) ? start : end;
  144. worldPos.xyz += offset;
  145. // project the worldpos
  146. vec4 clip = projectionMatrix * worldPos;
  147. // shift the depth of the projected points so the line
  148. // segements overlap neatly
  149. vec3 clipPose = ( position.y < 0.5 ) ? ndcStart : ndcEnd;
  150. clip.z = clipPose.z * clip.w;
  151. #else
  152. vec2 offset = vec2( dir.y, - dir.x );
  153. // undo aspect ratio adjustment
  154. dir.x /= aspect;
  155. offset.x /= aspect;
  156. // sign flip
  157. if ( position.x < 0.0 ) offset *= - 1.0;
  158. // endcaps
  159. if ( position.y < 0.0 ) {
  160. offset += - dir;
  161. } else if ( position.y > 1.0 ) {
  162. offset += dir;
  163. }
  164. // adjust for linewidth
  165. offset *= linewidth;
  166. // adjust for clip-space to screen-space conversion // maybe resolution should be based on viewport ...
  167. offset /= resolution.y;
  168. // select end
  169. vec4 clip = ( position.y < 0.5 ) ? clipStart : clipEnd;
  170. // back to clip space
  171. offset *= clip.w;
  172. clip.xy += offset;
  173. #endif
  174. gl_Position = clip;
  175. vec4 mvPosition = ( position.y < 0.5 ) ? start : end; // this is an approximation
  176. #include <logdepthbuf_vertex>
  177. #include <clipping_planes_vertex>
  178. #include <fog_vertex>
  179. }
  180. `,
  181. fragmentShader:
  182. /* glsl */`
  183. uniform vec3 diffuse;
  184. uniform float opacity;
  185. uniform float linewidth;
  186. #ifdef USE_DASH
  187. uniform float dashOffset;
  188. uniform float dashSize;
  189. uniform float gapSize;
  190. #endif
  191. varying float vLineDistance;
  192. #ifdef WORLD_UNITS
  193. varying vec4 worldPos;
  194. varying vec3 worldStart;
  195. varying vec3 worldEnd;
  196. #ifdef USE_DASH
  197. varying vec2 vUv;
  198. #endif
  199. #else
  200. varying vec2 vUv;
  201. #endif
  202. #include <common>
  203. #include <color_pars_fragment>
  204. #include <fog_pars_fragment>
  205. #include <logdepthbuf_pars_fragment>
  206. #include <clipping_planes_pars_fragment>
  207. vec2 closestLineToLine(vec3 p1, vec3 p2, vec3 p3, vec3 p4) {
  208. float mua;
  209. float mub;
  210. vec3 p13 = p1 - p3;
  211. vec3 p43 = p4 - p3;
  212. vec3 p21 = p2 - p1;
  213. float d1343 = dot( p13, p43 );
  214. float d4321 = dot( p43, p21 );
  215. float d1321 = dot( p13, p21 );
  216. float d4343 = dot( p43, p43 );
  217. float d2121 = dot( p21, p21 );
  218. float denom = d2121 * d4343 - d4321 * d4321;
  219. float numer = d1343 * d4321 - d1321 * d4343;
  220. mua = numer / denom;
  221. mua = clamp( mua, 0.0, 1.0 );
  222. mub = ( d1343 + d4321 * ( mua ) ) / d4343;
  223. mub = clamp( mub, 0.0, 1.0 );
  224. return vec2( mua, mub );
  225. }
  226. void main() {
  227. #include <clipping_planes_fragment>
  228. #ifdef USE_DASH
  229. if ( vUv.y < - 1.0 || vUv.y > 1.0 ) discard; // discard endcaps
  230. if ( mod( vLineDistance + dashOffset, dashSize + gapSize ) > dashSize ) discard; // todo - FIX
  231. #endif
  232. float alpha = opacity;
  233. #ifdef WORLD_UNITS
  234. // Find the closest points on the view ray and the line segment
  235. vec3 rayEnd = normalize( worldPos.xyz ) * 1e5;
  236. vec3 lineDir = worldEnd - worldStart;
  237. vec2 params = closestLineToLine( worldStart, worldEnd, vec3( 0.0, 0.0, 0.0 ), rayEnd );
  238. vec3 p1 = worldStart + lineDir * params.x;
  239. vec3 p2 = rayEnd * params.y;
  240. vec3 delta = p1 - p2;
  241. float len = length( delta );
  242. float norm = len / linewidth;
  243. #ifndef USE_DASH
  244. #ifdef USE_ALPHA_TO_COVERAGE
  245. float dnorm = fwidth( norm );
  246. alpha = 1.0 - smoothstep( 0.5 - dnorm, 0.5 + dnorm, norm );
  247. #else
  248. if ( norm > 0.5 ) {
  249. discard;
  250. }
  251. #endif
  252. #endif
  253. #else
  254. #ifdef USE_ALPHA_TO_COVERAGE
  255. // artifacts appear on some hardware if a derivative is taken within a conditional
  256. float a = vUv.x;
  257. float b = ( vUv.y > 0.0 ) ? vUv.y - 1.0 : vUv.y + 1.0;
  258. float len2 = a * a + b * b;
  259. float dlen = fwidth( len2 );
  260. if ( abs( vUv.y ) > 1.0 ) {
  261. alpha = 1.0 - smoothstep( 1.0 - dlen, 1.0 + dlen, len2 );
  262. }
  263. #else
  264. if ( abs( vUv.y ) > 1.0 ) {
  265. float a = vUv.x;
  266. float b = ( vUv.y > 0.0 ) ? vUv.y - 1.0 : vUv.y + 1.0;
  267. float len2 = a * a + b * b;
  268. if ( len2 > 1.0 ) discard;
  269. }
  270. #endif
  271. #endif
  272. vec4 diffuseColor = vec4( diffuse, alpha );
  273. #include <logdepthbuf_fragment>
  274. #include <color_fragment>
  275. gl_FragColor = vec4( diffuseColor.rgb, alpha );
  276. #include <tonemapping_fragment>
  277. #include <encodings_fragment>
  278. #include <fog_fragment>
  279. #include <premultiplied_alpha_fragment>
  280. }
  281. `
  282. };
  283. class LineMaterial extends ShaderMaterial {
  284. constructor( parameters ) {
  285. super( {
  286. type: 'LineMaterial',
  287. uniforms: UniformsUtils.clone( ShaderLib[ 'line' ].uniforms ),
  288. vertexShader: ShaderLib[ 'line' ].vertexShader,
  289. fragmentShader: ShaderLib[ 'line' ].fragmentShader,
  290. clipping: true // required for clipping support
  291. } );
  292. Object.defineProperties( this, {
  293. color: {
  294. enumerable: true,
  295. get: function () {
  296. return this.uniforms.diffuse.value;
  297. },
  298. set: function ( value ) {
  299. this.uniforms.diffuse.value = value;
  300. }
  301. },
  302. worldUnits: {
  303. enumerable: true,
  304. get: function () {
  305. return 'WORLD_UNITS' in this.defines;
  306. },
  307. set: function ( value ) {
  308. if ( value === true ) {
  309. this.defines.WORLD_UNITS = '';
  310. } else {
  311. delete this.defines.WORLD_UNITS;
  312. }
  313. }
  314. },
  315. linewidth: {
  316. enumerable: true,
  317. get: function () {
  318. return this.uniforms.linewidth.value;
  319. },
  320. set: function ( value ) {
  321. this.uniforms.linewidth.value = value;
  322. }
  323. },
  324. dashed: {
  325. enumerable: true,
  326. get: function () {
  327. return Boolean( 'USE_DASH' in this.defines );
  328. },
  329. set( value ) {
  330. if ( Boolean( value ) !== Boolean( 'USE_DASH' in this.defines ) ) {
  331. this.needsUpdate = true;
  332. }
  333. if ( value === true ) {
  334. this.defines.USE_DASH = '';
  335. } else {
  336. delete this.defines.USE_DASH;
  337. }
  338. }
  339. },
  340. dashScale: {
  341. enumerable: true,
  342. get: function () {
  343. return this.uniforms.dashScale.value;
  344. },
  345. set: function ( value ) {
  346. this.uniforms.dashScale.value = value;
  347. }
  348. },
  349. dashSize: {
  350. enumerable: true,
  351. get: function () {
  352. return this.uniforms.dashSize.value;
  353. },
  354. set: function ( value ) {
  355. this.uniforms.dashSize.value = value;
  356. }
  357. },
  358. dashOffset: {
  359. enumerable: true,
  360. get: function () {
  361. return this.uniforms.dashOffset.value;
  362. },
  363. set: function ( value ) {
  364. this.uniforms.dashOffset.value = value;
  365. }
  366. },
  367. gapSize: {
  368. enumerable: true,
  369. get: function () {
  370. return this.uniforms.gapSize.value;
  371. },
  372. set: function ( value ) {
  373. this.uniforms.gapSize.value = value;
  374. }
  375. },
  376. opacity: {
  377. enumerable: true,
  378. get: function () {
  379. return this.uniforms.opacity.value;
  380. },
  381. set: function ( value ) {
  382. this.uniforms.opacity.value = value;
  383. }
  384. },
  385. resolution: {
  386. enumerable: true,
  387. get: function () {
  388. return this.uniforms.resolution.value;
  389. },
  390. set: function ( value ) {
  391. this.uniforms.resolution.value.copy( value );
  392. }
  393. },
  394. alphaToCoverage: {
  395. enumerable: true,
  396. get: function () {
  397. return Boolean( 'USE_ALPHA_TO_COVERAGE' in this.defines );
  398. },
  399. set: function ( value ) {
  400. if ( Boolean( value ) !== Boolean( 'USE_ALPHA_TO_COVERAGE' in this.defines ) ) {
  401. this.needsUpdate = true;
  402. }
  403. if ( value === true ) {
  404. this.defines.USE_ALPHA_TO_COVERAGE = '';
  405. this.extensions.derivatives = true;
  406. } else {
  407. delete this.defines.USE_ALPHA_TO_COVERAGE;
  408. this.extensions.derivatives = false;
  409. }
  410. }
  411. }
  412. } );
  413. this.setValues( parameters );
  414. }
  415. }
  416. LineMaterial.prototype.isLineMaterial = true;
  417. export { LineMaterial };