lines.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856
  1. /**
  2. * @author WestLangley / http://github.com/WestLangley
  3. *
  4. */
  5. THREE.LineSegmentsGeometry = function () {
  6. THREE.InstancedBufferGeometry.call( this );
  7. this.type = 'LineSegmentsGeometry';
  8. var positions = [ - 1, 2, 0, 1, 2, 0, - 1, 1, 0, 1, 1, 0, - 1, 0, 0, 1, 0, 0, - 1, - 1, 0, 1, - 1, 0 ];
  9. var uvs = [ - 1, 2, 1, 2, - 1, 1, 1, 1, - 1, - 1, 1, - 1, - 1, - 2, 1, - 2 ];
  10. var index = [ 0, 2, 1, 2, 3, 1, 2, 4, 3, 4, 5, 3, 4, 6, 5, 6, 7, 5 ];
  11. this.setIndex( index );
  12. this.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
  13. this.setAttribute( 'uv', new THREE.Float32BufferAttribute( uvs, 2 ) );
  14. };
  15. THREE.LineSegmentsGeometry.prototype = Object.assign( Object.create( THREE.InstancedBufferGeometry.prototype ), {
  16. constructor: THREE.LineSegmentsGeometry,
  17. isLineSegmentsGeometry: true,
  18. applyMatrix: function ( matrix ) {
  19. var start = this.attributes.instanceStart;
  20. var end = this.attributes.instanceEnd;
  21. if ( start !== undefined ) {
  22. matrix.applyToBufferAttribute( start );
  23. matrix.applyToBufferAttribute( end );
  24. start.data.needsUpdate = true;
  25. }
  26. if ( this.boundingBox !== null ) {
  27. this.computeBoundingBox();
  28. }
  29. if ( this.boundingSphere !== null ) {
  30. this.computeBoundingSphere();
  31. }
  32. return this;
  33. },
  34. setPositions: function ( array ) {
  35. var lineSegments;
  36. if ( array instanceof Float32Array ) {
  37. lineSegments = array;
  38. } else if ( Array.isArray( array ) ) {
  39. lineSegments = new Float32Array( array );
  40. }
  41. var instanceBuffer = new THREE.InstancedInterleavedBuffer( lineSegments, 6, 1 ); // xyz, xyz
  42. this.setAttribute( 'instanceStart', new THREE.InterleavedBufferAttribute( instanceBuffer, 3, 0 ) ); // xyz
  43. this.setAttribute( 'instanceEnd', new THREE.InterleavedBufferAttribute( instanceBuffer, 3, 3 ) ); // xyz
  44. //
  45. this.computeBoundingBox();
  46. this.computeBoundingSphere();
  47. return this;
  48. },
  49. setColors: function ( array ) {
  50. var colors;
  51. if ( array instanceof Float32Array ) {
  52. colors = array;
  53. } else if ( Array.isArray( array ) ) {
  54. colors = new Float32Array( array );
  55. }
  56. var instanceColorBuffer = new THREE.InstancedInterleavedBuffer( colors, 6, 1 ); // rgb, rgb
  57. this.setAttribute( 'instanceColorStart', new THREE.InterleavedBufferAttribute( instanceColorBuffer, 3, 0 ) ); // rgb
  58. this.setAttribute( 'instanceColorEnd', new THREE.InterleavedBufferAttribute( instanceColorBuffer, 3, 3 ) ); // rgb
  59. return this;
  60. },
  61. fromWireframeGeometry: function ( geometry ) {
  62. this.setPositions( geometry.attributes.position.array );
  63. return this;
  64. },
  65. fromEdgesGeometry: function ( geometry ) {
  66. this.setPositions( geometry.attributes.position.array );
  67. return this;
  68. },
  69. fromMesh: function ( mesh ) {
  70. this.fromWireframeGeometry( new THREE.WireframeGeometry( mesh.geometry ) );
  71. // set colors, maybe
  72. return this;
  73. },
  74. fromLineSegements: function ( lineSegments ) {
  75. var geometry = lineSegments.geometry;
  76. if ( geometry.isGeometry ) {
  77. this.setPositions( geometry.vertices );
  78. } else if ( geometry.isBufferGeometry ) {
  79. this.setPositions( geometry.position.array ); // assumes non-indexed
  80. }
  81. // set colors, maybe
  82. return this;
  83. },
  84. computeBoundingBox: function () {
  85. var box = new THREE.Box3();
  86. return function computeBoundingBox() {
  87. if ( this.boundingBox === null ) {
  88. this.boundingBox = new THREE.Box3();
  89. }
  90. var start = this.attributes.instanceStart;
  91. var end = this.attributes.instanceEnd;
  92. if ( start !== undefined && end !== undefined ) {
  93. this.boundingBox.setFromBufferAttribute( start );
  94. box.setFromBufferAttribute( end );
  95. this.boundingBox.union( box );
  96. }
  97. };
  98. }(),
  99. computeBoundingSphere: function () {
  100. var vector = new THREE.Vector3();
  101. return function computeBoundingSphere() {
  102. if ( this.boundingSphere === null ) {
  103. this.boundingSphere = new THREE.Sphere();
  104. }
  105. if ( this.boundingBox === null ) {
  106. this.computeBoundingBox();
  107. }
  108. var start = this.attributes.instanceStart;
  109. var end = this.attributes.instanceEnd;
  110. if ( start !== undefined && end !== undefined ) {
  111. var center = this.boundingSphere.center;
  112. this.boundingBox.getCenter( center );
  113. var maxRadiusSq = 0;
  114. for ( var i = 0, il = start.count; i < il; i ++ ) {
  115. vector.fromBufferAttribute( start, i );
  116. maxRadiusSq = Math.max( maxRadiusSq, center.distanceToSquared( vector ) );
  117. vector.fromBufferAttribute( end, i );
  118. maxRadiusSq = Math.max( maxRadiusSq, center.distanceToSquared( vector ) );
  119. }
  120. this.boundingSphere.radius = Math.sqrt( maxRadiusSq );
  121. if ( isNaN( this.boundingSphere.radius ) ) {
  122. console.error( 'THREE.LineSegmentsGeometry.computeBoundingSphere(): Computed radius is NaN. The instanced position data is likely to have NaN values.', this );
  123. }
  124. }
  125. };
  126. }(),
  127. toJSON: function () {
  128. // todo
  129. },
  130. clone: function () {
  131. // todo
  132. },
  133. copy: function ( /* source */ ) {
  134. // todo
  135. return this;
  136. }
  137. } );
  138. /**
  139. * @author WestLangley / http://github.com/WestLangley
  140. *
  141. */
  142. THREE.LineSegments2 = function ( geometry, material ) {
  143. THREE.Mesh.call( this );
  144. this.type = 'LineSegments2';
  145. this.geometry = geometry !== undefined ? geometry : new THREE.LineSegmentsGeometry();
  146. this.material = material !== undefined ? material : new THREE.LineMaterial( { color: Math.random() * 0xffffff } );
  147. };
  148. THREE.LineSegments2.prototype = Object.assign( Object.create( THREE.Mesh.prototype ), {
  149. constructor: THREE.LineSegments2,
  150. isLineSegments2: true,
  151. computeLineDistances: ( function () { // for backwards-compatability, but could be a method of LineSegmentsGeometry...
  152. var start = new THREE.Vector3();
  153. var end = new THREE.Vector3();
  154. return function computeLineDistances() {
  155. var geometry = this.geometry;
  156. var instanceStart = geometry.attributes.instanceStart;
  157. var instanceEnd = geometry.attributes.instanceEnd;
  158. var lineDistances = new Float32Array( 2 * instanceStart.data.count );
  159. for ( var i = 0, j = 0, l = instanceStart.data.count; i < l; i ++, j += 2 ) {
  160. start.fromBufferAttribute( instanceStart, i );
  161. end.fromBufferAttribute( instanceEnd, i );
  162. lineDistances[ j ] = ( j === 0 ) ? 0 : lineDistances[ j - 1 ];
  163. lineDistances[ j + 1 ] = lineDistances[ j ] + start.distanceTo( end );
  164. }
  165. var instanceDistanceBuffer = new THREE.InstancedInterleavedBuffer( lineDistances, 2, 1 ); // d0, d1
  166. geometry.setAttribute( 'instanceDistanceStart', new THREE.InterleavedBufferAttribute( instanceDistanceBuffer, 1, 0 ) ); // d0
  167. geometry.setAttribute( 'instanceDistanceEnd', new THREE.InterleavedBufferAttribute( instanceDistanceBuffer, 1, 1 ) ); // d1
  168. return this;
  169. };
  170. }() ),
  171. copy: function ( /* source */ ) {
  172. // todo
  173. return this;
  174. }
  175. } );
  176. /**
  177. * @author WestLangley / http://github.com/WestLangley
  178. *
  179. * parameters = {
  180. * color: <hex>,
  181. * linewidth: <float>,
  182. * dashed: <boolean>,
  183. * dashScale: <float>,
  184. * dashSize: <float>,
  185. * gapSize: <float>,
  186. * resolution: <Vector2>, // to be set by renderer
  187. * }
  188. */
  189. THREE.UniformsLib.line = {
  190. linewidth: { value: 1 },
  191. resolution: { value: new THREE.Vector2( 1, 1 ) },
  192. dashScale: { value: 1 },
  193. dashSize: { value: 1 },
  194. gapSize: { value: 1 } // todo FIX - maybe change to totalSize
  195. };
  196. THREE.ShaderLib[ 'line' ] = {
  197. uniforms: THREE.UniformsUtils.merge( [
  198. THREE.UniformsLib.common,
  199. THREE.UniformsLib.fog,
  200. THREE.UniformsLib.line
  201. ] ),
  202. vertexShader:
  203. `
  204. #include <common>
  205. #include <color_pars_vertex>
  206. #include <fog_pars_vertex>
  207. #include <logdepthbuf_pars_vertex>
  208. #include <clipping_planes_pars_vertex>
  209. uniform float linewidth;
  210. uniform vec2 resolution;
  211. attribute vec3 instanceStart;
  212. attribute vec3 instanceEnd;
  213. attribute vec3 instanceColorStart;
  214. attribute vec3 instanceColorEnd;
  215. varying vec2 vUv;
  216. #ifdef USE_DASH
  217. uniform float dashScale;
  218. attribute float instanceDistanceStart;
  219. attribute float instanceDistanceEnd;
  220. varying float vLineDistance;
  221. #endif
  222. void trimSegment( const in vec4 start, inout vec4 end ) {
  223. // trim end segment so it terminates between the camera plane and the near plane
  224. // conservative estimate of the near plane
  225. float a = projectionMatrix[ 2 ][ 2 ]; // 3nd entry in 3th column
  226. float b = projectionMatrix[ 3 ][ 2 ]; // 3nd entry in 4th column
  227. float nearEstimate = - 0.5 * b / a;
  228. float alpha = ( nearEstimate - start.z ) / ( end.z - start.z );
  229. end.xyz = mix( start.xyz, end.xyz, alpha );
  230. }
  231. void main() {
  232. #ifdef USE_COLOR
  233. vColor.xyz = ( position.y < 0.5 ) ? instanceColorStart : instanceColorEnd;
  234. #endif
  235. #ifdef USE_DASH
  236. vLineDistance = ( position.y < 0.5 ) ? dashScale * instanceDistanceStart : dashScale * instanceDistanceEnd;
  237. #endif
  238. float aspect = resolution.x / resolution.y;
  239. vUv = uv;
  240. // camera space
  241. vec4 start = modelViewMatrix * vec4( instanceStart, 1.0 );
  242. vec4 end = modelViewMatrix * vec4( instanceEnd, 1.0 );
  243. // special case for perspective projection, and segments that terminate either in, or behind, the camera plane
  244. // clearly the gpu firmware has a way of addressing this issue when projecting into ndc space
  245. // but we need to perform ndc-space calculations in the shader, so we must address this issue directly
  246. // perhaps there is a more elegant solution -- WestLangley
  247. bool perspective = ( projectionMatrix[ 2 ][ 3 ] == - 1.0 ); // 4th entry in the 3rd column
  248. if ( perspective ) {
  249. if ( start.z < 0.0 && end.z >= 0.0 ) {
  250. trimSegment( start, end );
  251. } else if ( end.z < 0.0 && start.z >= 0.0 ) {
  252. trimSegment( end, start );
  253. }
  254. }
  255. // clip space
  256. vec4 clipStart = projectionMatrix * start;
  257. vec4 clipEnd = projectionMatrix * end;
  258. // ndc space
  259. vec2 ndcStart = clipStart.xy / clipStart.w;
  260. vec2 ndcEnd = clipEnd.xy / clipEnd.w;
  261. // direction
  262. vec2 dir = ndcEnd - ndcStart;
  263. // account for clip-space aspect ratio
  264. dir.x *= aspect;
  265. dir = normalize( dir );
  266. // perpendicular to dir
  267. vec2 offset = vec2( dir.y, - dir.x );
  268. // undo aspect ratio adjustment
  269. dir.x /= aspect;
  270. offset.x /= aspect;
  271. // sign flip
  272. if ( position.x < 0.0 ) offset *= - 1.0;
  273. // endcaps
  274. if ( position.y < 0.0 ) {
  275. offset += - dir;
  276. } else if ( position.y > 1.0 ) {
  277. offset += dir;
  278. }
  279. // adjust for linewidth
  280. offset *= linewidth;
  281. // adjust for clip-space to screen-space conversion // maybe resolution should be based on viewport ...
  282. offset /= resolution.y;
  283. // select end
  284. vec4 clip = ( position.y < 0.5 ) ? clipStart : clipEnd;
  285. // back to clip space
  286. offset *= clip.w;
  287. clip.xy += offset;
  288. gl_Position = clip;
  289. vec4 mvPosition = ( position.y < 0.5 ) ? start : end; // this is an approximation
  290. #include <logdepthbuf_vertex>
  291. #include <clipping_planes_vertex>
  292. #include <fog_vertex>
  293. }
  294. `,
  295. fragmentShader:
  296. `
  297. uniform vec3 diffuse;
  298. uniform float opacity;
  299. #ifdef USE_DASH
  300. uniform float dashSize;
  301. uniform float gapSize;
  302. #endif
  303. varying float vLineDistance;
  304. #include <common>
  305. #include <color_pars_fragment>
  306. #include <fog_pars_fragment>
  307. #include <logdepthbuf_pars_fragment>
  308. #include <clipping_planes_pars_fragment>
  309. varying vec2 vUv;
  310. void main() {
  311. #include <clipping_planes_fragment>
  312. #ifdef USE_DASH
  313. if ( vUv.y < - 1.0 || vUv.y > 1.0 ) discard; // discard endcaps
  314. if ( mod( vLineDistance, dashSize + gapSize ) > dashSize ) discard; // todo - FIX
  315. #endif
  316. if ( abs( vUv.y ) > 1.0 ) {
  317. float a = vUv.x;
  318. float b = ( vUv.y > 0.0 ) ? vUv.y - 1.0 : vUv.y + 1.0;
  319. float len2 = a * a + b * b;
  320. if ( len2 > 1.0 ) discard;
  321. }
  322. vec4 diffuseColor = vec4( diffuse, opacity );
  323. #include <logdepthbuf_fragment>
  324. #include <color_fragment>
  325. gl_FragColor = vec4( diffuseColor.rgb, diffuseColor.a );
  326. #include <premultiplied_alpha_fragment>
  327. #include <tonemapping_fragment>
  328. #include <encodings_fragment>
  329. #include <fog_fragment>
  330. }
  331. `
  332. };
  333. THREE.LineMaterial = function ( parameters ) {
  334. THREE.ShaderMaterial.call( this, {
  335. type: 'LineMaterial',
  336. uniforms: THREE.UniformsUtils.clone( THREE.ShaderLib[ 'line' ].uniforms ),
  337. vertexShader: THREE.ShaderLib[ 'line' ].vertexShader,
  338. fragmentShader: THREE.ShaderLib[ 'line' ].fragmentShader
  339. } );
  340. this.dashed = false;
  341. Object.defineProperties( this, {
  342. color: {
  343. enumerable: true,
  344. get: function () {
  345. return this.uniforms.diffuse.value;
  346. },
  347. set: function ( value ) {
  348. this.uniforms.diffuse.value = value;
  349. }
  350. },
  351. linewidth: {
  352. enumerable: true,
  353. get: function () {
  354. return this.uniforms.linewidth.value;
  355. },
  356. set: function ( value ) {
  357. this.uniforms.linewidth.value = value;
  358. }
  359. },
  360. dashScale: {
  361. enumerable: true,
  362. get: function () {
  363. return this.uniforms.dashScale.value;
  364. },
  365. set: function ( value ) {
  366. this.uniforms.dashScale.value = value;
  367. }
  368. },
  369. dashSize: {
  370. enumerable: true,
  371. get: function () {
  372. return this.uniforms.dashSize.value;
  373. },
  374. set: function ( value ) {
  375. this.uniforms.dashSize.value = value;
  376. }
  377. },
  378. gapSize: {
  379. enumerable: true,
  380. get: function () {
  381. return this.uniforms.gapSize.value;
  382. },
  383. set: function ( value ) {
  384. this.uniforms.gapSize.value = value;
  385. }
  386. },
  387. resolution: {
  388. enumerable: true,
  389. get: function () {
  390. return this.uniforms.resolution.value;
  391. },
  392. set: function ( value ) {
  393. this.uniforms.resolution.value.copy( value );
  394. }
  395. }
  396. } );
  397. this.setValues( parameters );
  398. };
  399. THREE.LineMaterial.prototype = Object.create( THREE.ShaderMaterial.prototype );
  400. THREE.LineMaterial.prototype.constructor = THREE.LineMaterial;
  401. THREE.LineMaterial.prototype.isLineMaterial = true;
  402. THREE.LineMaterial.prototype.copy = function ( source ) {
  403. THREE.ShaderMaterial.prototype.copy.call( this, source );
  404. this.color.copy( source.color );
  405. this.linewidth = source.linewidth;
  406. this.resolution = source.resolution;
  407. // todo
  408. return this;
  409. };
  410. /**
  411. * @author WestLangley / http://github.com/WestLangley
  412. *
  413. */
  414. THREE.LineGeometry = function () {
  415. THREE.LineSegmentsGeometry.call( this );
  416. this.type = 'LineGeometry';
  417. };
  418. THREE.LineGeometry.prototype = Object.assign( Object.create( THREE.LineSegmentsGeometry.prototype ), {
  419. constructor: THREE.LineGeometry,
  420. isLineGeometry: true,
  421. setPositions: function ( array ) {
  422. // converts [ x1, y1, z1, x2, y2, z2, ... ] to pairs format
  423. var length = array.length - 3;
  424. var points = new Float32Array( 2 * length );
  425. for ( var i = 0; i < length; i += 3 ) {
  426. points[ 2 * i ] = array[ i ];
  427. points[ 2 * i + 1 ] = array[ i + 1 ];
  428. points[ 2 * i + 2 ] = array[ i + 2 ];
  429. points[ 2 * i + 3 ] = array[ i + 3 ];
  430. points[ 2 * i + 4 ] = array[ i + 4 ];
  431. points[ 2 * i + 5 ] = array[ i + 5 ];
  432. }
  433. THREE.LineSegmentsGeometry.prototype.setPositions.call( this, points );
  434. return this;
  435. },
  436. setColors: function ( array ) {
  437. // converts [ r1, g1, b1, r2, g2, b2, ... ] to pairs format
  438. var length = array.length - 3;
  439. var colors = new Float32Array( 2 * length );
  440. for ( var i = 0; i < length; i += 3 ) {
  441. colors[ 2 * i ] = array[ i ];
  442. colors[ 2 * i + 1 ] = array[ i + 1 ];
  443. colors[ 2 * i + 2 ] = array[ i + 2 ];
  444. colors[ 2 * i + 3 ] = array[ i + 3 ];
  445. colors[ 2 * i + 4 ] = array[ i + 4 ];
  446. colors[ 2 * i + 5 ] = array[ i + 5 ];
  447. }
  448. THREE.LineSegmentsGeometry.prototype.setColors.call( this, colors );
  449. return this;
  450. },
  451. fromLine: function ( line ) {
  452. var geometry = line.geometry;
  453. if ( geometry.isGeometry ) {
  454. this.setPositions( geometry.vertices );
  455. } else if ( geometry.isBufferGeometry ) {
  456. this.setPositions( geometry.position.array ); // assumes non-indexed
  457. }
  458. // set colors, maybe
  459. return this;
  460. },
  461. copy: function ( /* source */ ) {
  462. // todo
  463. return this;
  464. }
  465. } );
  466. /**
  467. * @author WestLangley / http://github.com/WestLangley
  468. *
  469. */
  470. THREE.Line2 = function ( geometry, material ) {
  471. THREE.LineSegments2.call( this );
  472. this.type = 'Line2';
  473. this.geometry = geometry !== undefined ? geometry : new THREE.LineGeometry();
  474. this.material = material !== undefined ? material : new THREE.LineMaterial( { color: Math.random() * 0xffffff } );
  475. };
  476. THREE.Line2.prototype = Object.assign( Object.create( THREE.LineSegments2.prototype ), {
  477. constructor: THREE.Line2,
  478. isLine2: true,
  479. copy: function ( /* source */ ) {
  480. // todo
  481. return this;
  482. }
  483. } );