greasedLineBuilder.js 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435
  1. import { StandardMaterial } from "./../../Materials/standardMaterial.js";
  2. import { PBRMaterial } from "../../Materials/PBR/pbrMaterial.js";
  3. import { GreasedLineMesh } from "../GreasedLine/greasedLineMesh.js";
  4. import { EngineStore } from "../../Engines/engineStore.js";
  5. import { GreasedLineSimpleMaterial } from "../../Materials/GreasedLine/greasedLineSimpleMaterial.js";
  6. import { GreasedLineTools } from "../../Misc/greasedLineTools.js";
  7. import { GreasedLineRibbonAutoDirectionMode, GreasedLineRibbonFacesMode, GreasedLineRibbonPointsMode } from "../GreasedLine/greasedLineBaseMesh.js";
  8. import { GreasedLineRibbonMesh } from "../GreasedLine/greasedLineRibbonMesh.js";
  9. import { GreasedLineMeshMaterialType } from "../../Materials/GreasedLine/greasedLineMaterialInterfaces.js";
  10. import { GreasedLinePluginMaterial } from "../../Materials/GreasedLine/greasedLinePluginMaterial.js";
  11. import { GreasedLineMaterialDefaults } from "../../Materials/GreasedLine/greasedLineMaterialDefaults.js";
  12. /**
  13. * How are the colors distributed along the color table
  14. * {@link https://doc.babylonjs.com/features/featuresDeepDive/mesh/creation/param/greased_line#colors-and-colordistribution}
  15. */
  16. export var GreasedLineMeshColorDistribution;
  17. (function (GreasedLineMeshColorDistribution) {
  18. /**
  19. * Do no modify the color table
  20. */
  21. GreasedLineMeshColorDistribution[GreasedLineMeshColorDistribution["COLOR_DISTRIBUTION_NONE"] = 0] = "COLOR_DISTRIBUTION_NONE";
  22. /**
  23. * Repeat the colors until the color table is full
  24. */
  25. GreasedLineMeshColorDistribution[GreasedLineMeshColorDistribution["COLOR_DISTRIBUTION_REPEAT"] = 1] = "COLOR_DISTRIBUTION_REPEAT";
  26. /**
  27. * Distribute the colors evenly through the color table
  28. */
  29. GreasedLineMeshColorDistribution[GreasedLineMeshColorDistribution["COLOR_DISTRIBUTION_EVEN"] = 2] = "COLOR_DISTRIBUTION_EVEN";
  30. /**
  31. * Put the colors to start of the color table a fill the rest with the default color
  32. */
  33. GreasedLineMeshColorDistribution[GreasedLineMeshColorDistribution["COLOR_DISTRIBUTION_START"] = 3] = "COLOR_DISTRIBUTION_START";
  34. /**
  35. * Put the colors to the end of the color table and fill the rest with the default color
  36. */
  37. GreasedLineMeshColorDistribution[GreasedLineMeshColorDistribution["COLOR_DISTRIBUTION_END"] = 4] = "COLOR_DISTRIBUTION_END";
  38. /**
  39. * Put the colors to start and to the end of the color table and fill the gap between with the default color
  40. */
  41. GreasedLineMeshColorDistribution[GreasedLineMeshColorDistribution["COLOR_DISTRIBUTION_START_END"] = 5] = "COLOR_DISTRIBUTION_START_END";
  42. })(GreasedLineMeshColorDistribution || (GreasedLineMeshColorDistribution = {}));
  43. /**
  44. * How are the widths distributed along the width table
  45. * {@link https://doc.babylonjs.com/features/featuresDeepDive/mesh/creation/param/greased_line#widths-and-widthdistribution}
  46. */
  47. export var GreasedLineMeshWidthDistribution;
  48. (function (GreasedLineMeshWidthDistribution) {
  49. /**
  50. * Do no modify the width table
  51. */
  52. GreasedLineMeshWidthDistribution[GreasedLineMeshWidthDistribution["WIDTH_DISTRIBUTION_NONE"] = 0] = "WIDTH_DISTRIBUTION_NONE";
  53. /**
  54. * Repeat the widths until the width table is full
  55. */
  56. GreasedLineMeshWidthDistribution[GreasedLineMeshWidthDistribution["WIDTH_DISTRIBUTION_REPEAT"] = 1] = "WIDTH_DISTRIBUTION_REPEAT";
  57. /**
  58. * Distribute the widths evenly through the width table
  59. */
  60. GreasedLineMeshWidthDistribution[GreasedLineMeshWidthDistribution["WIDTH_DISTRIBUTION_EVEN"] = 2] = "WIDTH_DISTRIBUTION_EVEN";
  61. /**
  62. * Put the widths to start of the width table a fill the rest with the default width
  63. */
  64. GreasedLineMeshWidthDistribution[GreasedLineMeshWidthDistribution["WIDTH_DISTRIBUTION_START"] = 3] = "WIDTH_DISTRIBUTION_START";
  65. /**
  66. * Put the widths to the end of the width table and fill the rest with the default width
  67. */
  68. GreasedLineMeshWidthDistribution[GreasedLineMeshWidthDistribution["WIDTH_DISTRIBUTION_END"] = 4] = "WIDTH_DISTRIBUTION_END";
  69. /**
  70. * Put the widths to start and to the end of the width table and fill the gap between with the default width
  71. */
  72. GreasedLineMeshWidthDistribution[GreasedLineMeshWidthDistribution["WIDTH_DISTRIBUTION_START_END"] = 5] = "WIDTH_DISTRIBUTION_START_END";
  73. })(GreasedLineMeshWidthDistribution || (GreasedLineMeshWidthDistribution = {}));
  74. /**
  75. * Builder functions for creating GreasedLineMeshes
  76. */
  77. /**
  78. * Creates a new @see GreasedLinePluginMaterial
  79. * @param name name of the material
  80. * @param options material options @see GreasedLineMaterialOptions
  81. * @param scene scene or null to use the last scene
  82. * @returns StandardMaterial or PBRMaterial with the @see GreasedLinePluginMaterial attached to it
  83. */
  84. export function CreateGreasedLineMaterial(name, options, scene) {
  85. scene = (scene ?? EngineStore.LastCreatedScene);
  86. let material;
  87. switch (options.materialType) {
  88. case GreasedLineMeshMaterialType.MATERIAL_TYPE_PBR:
  89. material = new PBRMaterial(name, scene);
  90. new GreasedLinePluginMaterial(material, scene, options);
  91. break;
  92. case GreasedLineMeshMaterialType.MATERIAL_TYPE_SIMPLE:
  93. material = new GreasedLineSimpleMaterial(name, scene, options);
  94. break;
  95. default:
  96. material = new StandardMaterial(name, scene);
  97. new GreasedLinePluginMaterial(material, scene, options);
  98. break;
  99. }
  100. return material;
  101. }
  102. /**
  103. * Creates a GreasedLine mesh
  104. * @param name name of the mesh
  105. * @param options options for the mesh
  106. * @param materialOptions material options for the mesh
  107. * @param scene scene where the mesh will be created
  108. * @returns instance of GreasedLineMesh
  109. */
  110. export function CreateGreasedLine(name, options, materialOptions, scene) {
  111. scene = (scene ?? EngineStore.LastCreatedScene);
  112. let instance;
  113. const allPoints = GreasedLineTools.ConvertPoints(options.points);
  114. options.widthDistribution = options.widthDistribution ?? GreasedLineMeshWidthDistribution.WIDTH_DISTRIBUTION_START;
  115. if (options.ribbonOptions) {
  116. options.ribbonOptions.facesMode = options.ribbonOptions.facesMode ?? GreasedLineRibbonFacesMode.FACES_MODE_SINGLE_SIDED_NO_BACKFACE_CULLING;
  117. options.ribbonOptions.pointsMode = options.ribbonOptions.pointsMode ?? GreasedLineRibbonPointsMode.POINTS_MODE_POINTS;
  118. options.ribbonOptions.directionsAutoMode =
  119. options.ribbonOptions.directionsAutoMode ??
  120. (options.ribbonOptions.directions ? GreasedLineRibbonAutoDirectionMode.AUTO_DIRECTIONS_NONE : GreasedLineRibbonAutoDirectionMode.AUTO_DIRECTIONS_FROM_FIRST_SEGMENT);
  121. }
  122. materialOptions = materialOptions ?? {
  123. color: GreasedLineMaterialDefaults.DEFAULT_COLOR,
  124. };
  125. materialOptions.createAndAssignMaterial = materialOptions.createAndAssignMaterial ?? true;
  126. materialOptions.colorDistribution = materialOptions?.colorDistribution ?? GreasedLineMeshColorDistribution.COLOR_DISTRIBUTION_START;
  127. materialOptions.materialType = materialOptions.materialType ?? GreasedLineMeshMaterialType.MATERIAL_TYPE_STANDARD;
  128. const pointsCount = GetPointsCount(allPoints);
  129. const widths = CompleteGreasedLineWidthTable(pointsCount, options.widths ?? [], options.widthDistribution);
  130. const colors = materialOptions?.colors
  131. ? CompleteGreasedLineColorTable(pointsCount, materialOptions.colors, materialOptions.colorDistribution, materialOptions.color ?? GreasedLineMaterialDefaults.DEFAULT_COLOR)
  132. : undefined;
  133. // create new mesh if instance is not defined
  134. const initialGreasedLineOptions = {
  135. points: allPoints,
  136. updatable: options.updatable,
  137. widths,
  138. lazy: options.lazy,
  139. ribbonOptions: options.ribbonOptions,
  140. uvs: options.uvs,
  141. colorPointers: options.colorPointers,
  142. };
  143. if (initialGreasedLineOptions.ribbonOptions) {
  144. if (initialGreasedLineOptions.ribbonOptions.pointsMode === GreasedLineRibbonPointsMode.POINTS_MODE_POINTS) {
  145. initialGreasedLineOptions.ribbonOptions.width = materialOptions.width ?? initialGreasedLineOptions.ribbonOptions.width ?? GreasedLineMaterialDefaults.DEFAULT_WIDTH;
  146. }
  147. }
  148. if (!options.instance) {
  149. instance = initialGreasedLineOptions.ribbonOptions
  150. ? new GreasedLineRibbonMesh(name, scene, initialGreasedLineOptions)
  151. : new GreasedLineMesh(name, scene, initialGreasedLineOptions);
  152. if (materialOptions) {
  153. const initialMaterialOptions = {
  154. materialType: materialOptions.materialType,
  155. dashCount: materialOptions.dashCount,
  156. dashOffset: materialOptions.dashOffset,
  157. dashRatio: materialOptions.dashRatio,
  158. resolution: materialOptions.resolution,
  159. sizeAttenuation: materialOptions.sizeAttenuation,
  160. useColors: materialOptions.useColors,
  161. useDash: materialOptions.useDash,
  162. visibility: materialOptions.visibility,
  163. width: materialOptions.width,
  164. color: materialOptions.color,
  165. colorMode: materialOptions.colorMode,
  166. colorsSampling: materialOptions.colorsSampling,
  167. colorDistributionType: materialOptions.colorDistributionType,
  168. colors,
  169. cameraFacing: !options.ribbonOptions,
  170. colorsTexture: materialOptions.colorsTexture,
  171. };
  172. if (materialOptions.createAndAssignMaterial) {
  173. const material = CreateGreasedLineMaterial(name, initialMaterialOptions, scene);
  174. instance.material = material;
  175. if (options.ribbonOptions?.facesMode === GreasedLineRibbonFacesMode.FACES_MODE_SINGLE_SIDED_NO_BACKFACE_CULLING) {
  176. material.backFaceCulling = false;
  177. }
  178. }
  179. }
  180. }
  181. else {
  182. // update the data on the mesh instance
  183. instance = options.instance;
  184. if (instance instanceof GreasedLineRibbonMesh) {
  185. instance.addPoints(allPoints, initialGreasedLineOptions);
  186. }
  187. else {
  188. // add widths
  189. const currentWidths = instance.widths;
  190. if (currentWidths) {
  191. const newWidths = currentWidths.slice();
  192. for (const w of widths) {
  193. newWidths.push(w);
  194. }
  195. instance.widths = newWidths;
  196. }
  197. else {
  198. instance.widths = widths;
  199. }
  200. instance.addPoints(allPoints);
  201. // add UVs
  202. if (options.uvs) {
  203. const currentUVs = instance.uvs;
  204. if (currentUVs) {
  205. const newUVs = new Float32Array(currentUVs.length + options.uvs.length);
  206. newUVs.set(currentUVs, 0);
  207. newUVs.set(options.uvs, currentUVs.length);
  208. instance.uvs = newUVs;
  209. }
  210. else {
  211. instance.uvs = options.uvs;
  212. }
  213. }
  214. }
  215. }
  216. // add colors
  217. // it will merge if any colors already on the instance
  218. if (colors && options.instance) {
  219. if (options.instance.greasedLineMaterial) {
  220. const currentColors = options.instance.greasedLineMaterial.colors;
  221. if (currentColors) {
  222. const newColors = currentColors.concat(colors);
  223. options.instance.greasedLineMaterial.setColors(newColors, instance.isLazy());
  224. }
  225. }
  226. }
  227. return instance;
  228. }
  229. /**
  230. * Counts the number of points
  231. * @param allPoints Array of points [[x, y, z], [x, y, z], ...] or Array of points [x, y, z, x, y, z, ...]
  232. * @returns total number of points
  233. */
  234. export function GetPointsCount(allPoints) {
  235. let pointCount = 0;
  236. for (const points of allPoints) {
  237. pointCount += points.length / 3;
  238. }
  239. return pointCount;
  240. }
  241. /**
  242. * Completes the width table/fills the missing entries. It means it creates a width entry for every point of the line mesh.
  243. * You can provide more points the widths when creating the mesh. This function will fill the empty entries.
  244. * The algorithm used to fill the empty entries can be
  245. * GreasedLineMeshWidthDistribution.REPEAT - the width table will be repeatedly copied to the empty values [wL, wU] = [wL, wU, wL, wU, wL, wU, wL, wU, ...]
  246. * GreasedLineMeshWidthDistribution.EVEN - the width table will be evenly copied to the empty values [wL, wU] = [wL, wL, wL, wL, wU, wU, wU, wU]
  247. * GreasedLineMeshWidthDistribution.START - the width table will be copied at the start of the empty values
  248. * and rest will be filled width the default width upper and default width lower values [wU, wL] = [wL, wU, dwL, dwU, dwL, dwU, dwL, dwU]
  249. * GreasedLineMeshWidthDistribution.END - the width table will be copied at the end of the empty values
  250. * and rest will be filled width the default values [wL, wU] = [wL, wU, dwL, dwU, dwL, dwU, wL, wU]
  251. * @param pointCount number of points of the line mesh
  252. * @param widths array of widths [widhtLower, widthUpper, widthLower, widthUpper ...]. Two widths (lower/upper) per point.
  253. * @param widthsDistribution how to distribute widths if the widths array has fewer entries than pointCount
  254. * @param defaultWidthUpper the default value which will be used to fill empty width entries - upper width
  255. * @param defaultWidthLower the default value which will be used to fill empty width entries - lower width
  256. * @returns completed width table.
  257. */
  258. export function CompleteGreasedLineWidthTable(pointCount, widths, widthsDistribution, defaultWidthUpper = 1, defaultWidthLower = 1) {
  259. const missingCount = pointCount - widths.length / 2;
  260. const widthsData = [];
  261. if (missingCount < 0) {
  262. return widths.slice(0, pointCount * 2);
  263. }
  264. // is the width table shorter than the point table?
  265. if (missingCount > 0) {
  266. if (widths.length % 2 != 0) {
  267. widths.push(defaultWidthUpper);
  268. }
  269. // it is, fill in the missing elements
  270. if (widthsDistribution === GreasedLineMeshWidthDistribution.WIDTH_DISTRIBUTION_START_END) {
  271. const halfCount = Math.floor(widths.length / 2);
  272. // start sector
  273. for (let i = 0, j = 0; i < halfCount - 1; i++) {
  274. widthsData.push(widths[j++]);
  275. widthsData.push(widths[j++]);
  276. }
  277. // middle sector
  278. const widthL = widths[halfCount / 2];
  279. const widthU = widths[halfCount / 2 + 1];
  280. for (let i = 0; i < missingCount; i++) {
  281. widthsData.push(widthU);
  282. widthsData.push(widthL);
  283. }
  284. // end sector
  285. for (let i = halfCount; i < widths.length; i += 2) {
  286. widthsData.push(widths[i]);
  287. widthsData.push(widths[i + 1]);
  288. }
  289. }
  290. else if (widthsDistribution === GreasedLineMeshWidthDistribution.WIDTH_DISTRIBUTION_START) {
  291. // start sector
  292. for (let i = 0; i < widths.length; i += 2) {
  293. widthsData.push(widths[i]);
  294. widthsData.push(widths[i + 1]);
  295. }
  296. // end sector
  297. for (let i = 0; i < missingCount; i++) {
  298. widthsData.push(defaultWidthUpper);
  299. widthsData.push(defaultWidthLower);
  300. }
  301. }
  302. else if (widthsDistribution === GreasedLineMeshWidthDistribution.WIDTH_DISTRIBUTION_END) {
  303. // start sector
  304. for (let i = 0; i < missingCount; i++) {
  305. widthsData.push(defaultWidthUpper);
  306. widthsData.push(defaultWidthLower);
  307. }
  308. // end sector
  309. for (let i = 0; i < widths.length; i += 2) {
  310. widthsData.push(widths[i]);
  311. widthsData.push(widths[i + 1]);
  312. }
  313. }
  314. else if (widthsDistribution === GreasedLineMeshWidthDistribution.WIDTH_DISTRIBUTION_REPEAT) {
  315. let i = 0;
  316. for (let x = 0; x < pointCount; x++) {
  317. widthsData.push(widths[i++]);
  318. widthsData.push(widths[i++]);
  319. if (i === widths.length) {
  320. i = 0;
  321. }
  322. }
  323. }
  324. else if (widthsDistribution === GreasedLineMeshWidthDistribution.WIDTH_DISTRIBUTION_EVEN) {
  325. let j = 0;
  326. const widthsectorLength = widths.length / ((pointCount - 1) * 2);
  327. for (let x = 0; x < pointCount; x++) {
  328. const i = Math.floor(j);
  329. widthsData.push(widths[i]);
  330. widthsData.push(widths[i + 1]);
  331. j += widthsectorLength;
  332. }
  333. }
  334. }
  335. else {
  336. for (let i = 0; i < widths.length; i++) {
  337. widthsData.push(widths[i]);
  338. }
  339. }
  340. return widthsData;
  341. }
  342. /**
  343. * Completes the color table/fill the missing color entries. It means it creates a color entry for every point of the line mesh.
  344. * You can provide more points the colors when creating the mesh. This function will fill the empty entries.
  345. * The algorithm used to fill the empty entries can be
  346. * GreasedLineMesColorhDistribution.REPEAT - the color table will be repeatedly copied to the empty values [c1, c2] = [c1, c2, c1, c2, c1, c2, c1, c2]
  347. * GreasedLineMesColorhDistribution.EVEN - the color table will be evenly copied to the empty values [c1, c2] = [c1, c1, c1, c1, c2, c2, c2, c2]
  348. * GreasedLineMesColorhDistribution.START - the color table will be copied at the start of the empty values
  349. * and rest will be filled color the default color value [c1, c2] = [c1, c2, dc, dc, dc, dc, dc, dc]
  350. * GreasedLineMesColorhDistribution.START_END - the color table will be copied at the start and the end of the empty values
  351. * and rest will be filled color the default color value [c1, c2] = [c1, c2, dc, dc, dc, dc, c1, c2]
  352. * @param pointCount number of points of the line mesh
  353. * @param colors array of Color3 for the color table
  354. * @param colorDistribution how to distribute colors if the colors array has fewer entries than pointCount
  355. * @param defaultColor default color to be used to fill empty entries in the color table
  356. * @returns completed array of Color3s
  357. */
  358. export function CompleteGreasedLineColorTable(pointCount, colors, colorDistribution, defaultColor) {
  359. pointCount = Math.max(colors.length, pointCount);
  360. const missingCount = pointCount - colors.length;
  361. if (missingCount < 0) {
  362. return colors.slice(0, pointCount);
  363. }
  364. const colorsData = [];
  365. // is the color table shorter than the point table?
  366. if (missingCount > 0) {
  367. // it is, fill in the missing elements
  368. if (colorDistribution === GreasedLineMeshColorDistribution.COLOR_DISTRIBUTION_START_END) {
  369. const halfCount = Math.floor(colors.length / 2);
  370. // start sector
  371. for (let i = 0; i < halfCount; i++) {
  372. colorsData.push(colors[i]);
  373. }
  374. // middle sector
  375. for (let i = 0; i < missingCount - 1; i++) {
  376. colorsData.push(defaultColor);
  377. }
  378. // end sector
  379. for (let i = halfCount; i < colors.length; i++) {
  380. colorsData.push(colors[i]);
  381. }
  382. }
  383. else if (colorDistribution === GreasedLineMeshColorDistribution.COLOR_DISTRIBUTION_START) {
  384. // start sector
  385. for (let i = 0; i < colors.length; i++) {
  386. colorsData.push(colors[i]);
  387. }
  388. // end sector
  389. for (let i = 0; i < missingCount; i++) {
  390. colorsData.push(defaultColor);
  391. }
  392. }
  393. else if (colorDistribution === GreasedLineMeshColorDistribution.COLOR_DISTRIBUTION_END) {
  394. // start sector
  395. for (let i = 0; i < missingCount - 1; i++) {
  396. colorsData.push(defaultColor);
  397. }
  398. // end sector
  399. for (let i = 0; i < colors.length; i++) {
  400. colorsData.push(colors[i]);
  401. }
  402. }
  403. else if (colorDistribution === GreasedLineMeshColorDistribution.COLOR_DISTRIBUTION_REPEAT) {
  404. let i = 0;
  405. for (let x = 0; x < pointCount; x++) {
  406. colorsData.push(colors[i]);
  407. i++;
  408. if (i === colors.length) {
  409. i = 0;
  410. }
  411. }
  412. }
  413. else if (colorDistribution === GreasedLineMeshColorDistribution.COLOR_DISTRIBUTION_EVEN) {
  414. let j = 0;
  415. const colorSectorLength = colors.length / (pointCount - 1);
  416. for (let x = 0; x < pointCount - 1; x++) {
  417. const i = Math.floor(j);
  418. colorsData.push(colors[i]);
  419. j += colorSectorLength;
  420. }
  421. }
  422. else if (colorDistribution === GreasedLineMeshColorDistribution.COLOR_DISTRIBUTION_NONE) {
  423. for (let i = 0; i < colors.length; i++) {
  424. colorsData.push(colors[i]);
  425. }
  426. }
  427. }
  428. else {
  429. for (let i = 0; i < pointCount; i++) {
  430. colorsData.push(colors[i]);
  431. }
  432. }
  433. return colorsData;
  434. }
  435. //# sourceMappingURL=greasedLineBuilder.js.map