LineMaterial.js 12 KB

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