LineMaterial.js 12 KB

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