greasedLineSimpleMaterial.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417
  1. import { RawTexture } from "../Textures/rawTexture.js";
  2. import { ShaderMaterial } from "../shaderMaterial.js";
  3. import { Color3 } from "../../Maths/math.color.js";
  4. import { Vector2 } from "../../Maths/math.vector.js";
  5. import "../../Shaders/greasedLine.fragment.js";
  6. import "../../Shaders/greasedLine.vertex.js";
  7. import { GreasedLineMeshColorDistributionType, GreasedLineMeshColorMode } from "./greasedLineMaterialInterfaces.js";
  8. import { GreasedLineTools } from "../../Misc/greasedLineTools.js";
  9. import { GreasedLineMaterialDefaults } from "./greasedLineMaterialDefaults.js";
  10. /**
  11. * GreasedLineSimpleMaterial
  12. */
  13. export class GreasedLineSimpleMaterial extends ShaderMaterial {
  14. /**
  15. * GreasedLineSimple material constructor
  16. * @param name material name
  17. * @param scene the scene
  18. * @param options material options
  19. */
  20. constructor(name, scene, options) {
  21. const defines = [
  22. `COLOR_DISTRIBUTION_TYPE_LINE ${GreasedLineMeshColorDistributionType.COLOR_DISTRIBUTION_TYPE_LINE}.`,
  23. `COLOR_DISTRIBUTION_TYPE_SEGMENT ${GreasedLineMeshColorDistributionType.COLOR_DISTRIBUTION_TYPE_SEGMENT}.`,
  24. `COLOR_MODE_SET ${GreasedLineMeshColorMode.COLOR_MODE_SET}.`,
  25. `COLOR_MODE_ADD ${GreasedLineMeshColorMode.COLOR_MODE_ADD}.`,
  26. `COLOR_MODE_MULTIPLY ${GreasedLineMeshColorMode.COLOR_MODE_MULTIPLY}.`,
  27. ];
  28. const attributes = ["position", "grl_widths", "grl_offsets", "grl_colorPointers"];
  29. scene.useRightHandedSystem && defines.push("GREASED_LINE_RIGHT_HANDED_COORDINATE_SYSTEM");
  30. if (options.cameraFacing) {
  31. defines.push("GREASED_LINE_CAMERA_FACING");
  32. attributes.push("grl_previousAndSide", "grl_nextAndCounters");
  33. }
  34. else {
  35. attributes.push("grl_slopes");
  36. attributes.push("grl_counters");
  37. }
  38. super(name, scene, {
  39. vertex: "greasedLine",
  40. fragment: "greasedLine",
  41. }, {
  42. attributes,
  43. uniforms: [
  44. "world",
  45. "viewProjection",
  46. "view",
  47. "projection",
  48. "grlColorsWidth",
  49. "grlUseColors",
  50. "grlWidth",
  51. "grlColor",
  52. "grl_colorModeAndColorDistributionType",
  53. "grlResolution",
  54. "grlAspect",
  55. "grlAizeAttenuation",
  56. "grlDashArray",
  57. "grlDashOffset",
  58. "grlDashRatio",
  59. "grlUseDash",
  60. "grlVisibility",
  61. ],
  62. samplers: ["grlColors"],
  63. defines,
  64. });
  65. this._color = Color3.White();
  66. this._colorsDistributionType = GreasedLineMeshColorDistributionType.COLOR_DISTRIBUTION_TYPE_SEGMENT;
  67. this._colorsTexture = null;
  68. options = options || {
  69. color: GreasedLineMaterialDefaults.DEFAULT_COLOR,
  70. };
  71. const engine = scene.getEngine();
  72. this.visibility = options.visibility ?? 1;
  73. this.useDash = options.useDash ?? false;
  74. this.dashRatio = options.dashRatio ?? 0.5;
  75. this.dashOffset = options.dashOffset ?? 0;
  76. this.dashCount = options.dashCount ?? 1; // calculate the _dashArray value, call the setter
  77. this.width = options.width
  78. ? options.width
  79. : options.sizeAttenuation && options.cameraFacing
  80. ? GreasedLineMaterialDefaults.DEFAULT_WIDTH_ATTENUATED
  81. : GreasedLineMaterialDefaults.DEFAULT_WIDTH;
  82. this.sizeAttenuation = options.sizeAttenuation ?? false;
  83. this.color = options.color ?? Color3.White();
  84. this.useColors = options.useColors ?? false;
  85. this.colorsDistributionType = options.colorDistributionType ?? GreasedLineMeshColorDistributionType.COLOR_DISTRIBUTION_TYPE_SEGMENT;
  86. this.colorsSampling = options.colorsSampling ?? RawTexture.NEAREST_NEAREST;
  87. this.colorMode = options.colorMode ?? GreasedLineMeshColorMode.COLOR_MODE_SET;
  88. this._colors = options.colors ?? null;
  89. this._cameraFacing = options.cameraFacing ?? true;
  90. this.resolution = options.resolution ?? new Vector2(engine.getRenderWidth(), engine.getRenderHeight()); // calculate aspect call the setter
  91. if (options.colorsTexture) {
  92. this.colorsTexture = options.colorsTexture;
  93. }
  94. else {
  95. this.colorsTexture = GreasedLineTools.PrepareEmptyColorsTexture(scene);
  96. }
  97. if (this._colors) {
  98. this.setColors(this._colors);
  99. }
  100. engine.onDisposeObservable.add(() => {
  101. GreasedLineTools.DisposeEmptyColorsTexture();
  102. });
  103. }
  104. /**
  105. * Disposes the plugin material.
  106. */
  107. dispose() {
  108. this._colorsTexture?.dispose();
  109. super.dispose();
  110. }
  111. _setColorModeAndColorDistributionType() {
  112. this.setVector2("grl_colorModeAndColorDistributionType", new Vector2(this._colorMode, this._colorsDistributionType));
  113. }
  114. /**
  115. * Updates the material. Use when material created in lazy mode.
  116. */
  117. updateLazy() {
  118. if (this._colors) {
  119. this.setColors(this._colors, false, true);
  120. }
  121. }
  122. /**
  123. * Returns the colors used to colorize the line
  124. */
  125. get colors() {
  126. return this._colors;
  127. }
  128. /**
  129. * Sets the colors used to colorize the line
  130. */
  131. set colors(value) {
  132. this.setColors(value);
  133. }
  134. /**
  135. * Creates or updates the colors texture
  136. * @param colors color table RGBA
  137. * @param lazy if lazy, the colors are not updated
  138. * @param forceNewTexture force creation of a new texture
  139. */
  140. setColors(colors, lazy = false, forceNewTexture = false) {
  141. const origColorsCount = this._colors?.length ?? 0;
  142. this._colors = colors;
  143. if (colors === null || colors.length === 0) {
  144. this._colorsTexture?.dispose();
  145. return;
  146. }
  147. if (lazy && !forceNewTexture) {
  148. return;
  149. }
  150. if (this._colorsTexture && origColorsCount === colors.length && !forceNewTexture) {
  151. const colorArray = GreasedLineTools.Color3toRGBAUint8(colors);
  152. this._colorsTexture.update(colorArray);
  153. }
  154. else {
  155. this._colorsTexture?.dispose();
  156. this.colorsTexture = GreasedLineTools.CreateColorsTexture(`${this.name}-colors-texture`, colors, this.colorsSampling, this.getScene());
  157. }
  158. }
  159. /**
  160. * Gets the colors texture
  161. */
  162. get colorsTexture() {
  163. return this._colorsTexture ?? null;
  164. }
  165. /**
  166. * Sets the colorsTexture
  167. */
  168. set colorsTexture(value) {
  169. this._colorsTexture = value;
  170. this.setFloat("grlColorsWidth", this._colorsTexture.getSize().width);
  171. this.setTexture("grlColors", this._colorsTexture);
  172. }
  173. /**
  174. * Line base width. At each point the line width is calculated by widths[pointIndex] * width
  175. */
  176. get width() {
  177. return this._width;
  178. }
  179. /**
  180. * Line base width. At each point the line width is calculated by widths[pointIndex] * width
  181. */
  182. set width(value) {
  183. this._width = value;
  184. this.setFloat("grlWidth", value);
  185. }
  186. /**
  187. * Whether to use the colors option to colorize the line
  188. */
  189. get useColors() {
  190. return this._useColors;
  191. }
  192. set useColors(value) {
  193. this._useColors = value;
  194. this.setFloat("grlUseColors", GreasedLineTools.BooleanToNumber(value));
  195. }
  196. /**
  197. * The type of sampling of the colors texture. The values are the same when using with textures.
  198. */
  199. get colorsSampling() {
  200. return this._colorsSampling;
  201. }
  202. /**
  203. * The type of sampling of the colors texture. The values are the same when using with textures.
  204. */
  205. set colorsSampling(value) {
  206. this._colorsSampling = value;
  207. }
  208. /**
  209. * Normalized value of how much of the line will be visible
  210. * 0 - 0% of the line will be visible
  211. * 1 - 100% of the line will be visible
  212. */
  213. get visibility() {
  214. return this._visibility;
  215. }
  216. set visibility(value) {
  217. this._visibility = value;
  218. this.setFloat("grlVisibility", value);
  219. }
  220. /**
  221. * Turns on/off dash mode
  222. */
  223. get useDash() {
  224. return this._useDash;
  225. }
  226. /**
  227. * Turns on/off dash mode
  228. */
  229. set useDash(value) {
  230. this._useDash = value;
  231. this.setFloat("grlUseDash", GreasedLineTools.BooleanToNumber(value));
  232. }
  233. /**
  234. * Gets the dash offset
  235. */
  236. get dashOffset() {
  237. return this._dashOffset;
  238. }
  239. /**
  240. * Sets the dash offset
  241. */
  242. set dashOffset(value) {
  243. this._dashOffset = value;
  244. this.setFloat("grlDashOffset", value);
  245. }
  246. /**
  247. * Length of the dash. 0 to 1. 0.5 means half empty, half drawn.
  248. */
  249. get dashRatio() {
  250. return this._dashRatio;
  251. }
  252. /**
  253. * Length of the dash. 0 to 1. 0.5 means half empty, half drawn.
  254. */
  255. set dashRatio(value) {
  256. this._dashRatio = value;
  257. this.setFloat("grlDashRatio", value);
  258. }
  259. /**
  260. * Gets the number of dashes in the line
  261. */
  262. get dashCount() {
  263. return this._dashCount;
  264. }
  265. /**
  266. * Sets the number of dashes in the line
  267. * @param value dash
  268. */
  269. set dashCount(value) {
  270. this._dashCount = value;
  271. this._dashArray = 1 / value;
  272. this.setFloat("grlDashArray", this._dashArray);
  273. }
  274. /**
  275. * False means 1 unit in width = 1 unit on scene, true means 1 unit in width is reduced on the screen to make better looking lines
  276. */
  277. get sizeAttenuation() {
  278. return this._sizeAttenuation;
  279. }
  280. /**
  281. * Turn on/off attenuation of the width option and widths array.
  282. * @param value false means 1 unit in width = 1 unit on scene, true means 1 unit in width is reduced on the screen to make better looking lines
  283. */
  284. set sizeAttenuation(value) {
  285. this._sizeAttenuation = value;
  286. this.setFloat("grlSizeAttenuation", GreasedLineTools.BooleanToNumber(value));
  287. }
  288. /**
  289. * Gets the color of the line
  290. */
  291. get color() {
  292. return this.color;
  293. }
  294. /**
  295. * Sets the color of the line
  296. * @param value Color3
  297. */
  298. set color(value) {
  299. this.setColor(value);
  300. }
  301. /**
  302. * Sets the color of the line. If set the whole line will be mixed with this color according to the colorMode option.
  303. * The simple material always needs a color to be set. If you set it to null it will set the color to the default color (GreasedLineSimpleMaterial.DEFAULT_COLOR).
  304. * @param value color
  305. */
  306. setColor(value) {
  307. value = value ?? GreasedLineMaterialDefaults.DEFAULT_COLOR;
  308. this._color = value;
  309. this.setColor3("grlColor", value);
  310. }
  311. /**
  312. * Gets the color distributiopn type
  313. */
  314. get colorsDistributionType() {
  315. return this._colorsDistributionType;
  316. }
  317. /**
  318. * Sets the color distribution type
  319. * @see GreasedLineMeshColorDistributionType
  320. * @param value color distribution type
  321. */
  322. set colorsDistributionType(value) {
  323. this._colorsDistributionType = value;
  324. this._setColorModeAndColorDistributionType();
  325. }
  326. /**
  327. * Gets the mixing mode of the color and colors paramaters. Default value is GreasedLineMeshColorMode.SET.
  328. * MATERIAL_TYPE_SIMPLE mixes the color and colors of the greased line material.
  329. * @see GreasedLineMeshColorMode
  330. */
  331. get colorMode() {
  332. return this._colorMode;
  333. }
  334. /**
  335. * Sets the mixing mode of the color and colors paramaters. Default value is GreasedLineMeshColorMode.SET.
  336. * MATERIAL_TYPE_SIMPLE mixes the color and colors of the greased line material.
  337. * @see GreasedLineMeshColorMode
  338. */
  339. set colorMode(value) {
  340. this._colorMode = value;
  341. this._setColorModeAndColorDistributionType();
  342. }
  343. /**
  344. * Gets the resolution
  345. */
  346. get resolution() {
  347. return this._resolution;
  348. }
  349. /**
  350. * Sets the resolution
  351. * @param value resolution of the screen for GreasedLine
  352. */
  353. set resolution(value) {
  354. this._resolution = value;
  355. this.setVector2("grlResolution", value);
  356. this.setFloat("grlAspect", value.x / value.y);
  357. }
  358. /**
  359. * Serializes this plugin material
  360. * @returns serializationObjec
  361. */
  362. serialize() {
  363. const serializationObject = super.serialize();
  364. const greasedLineMaterialOptions = {
  365. colorDistributionType: this._colorsDistributionType,
  366. colorsSampling: this._colorsSampling,
  367. colorMode: this._colorMode,
  368. color: this._color,
  369. dashCount: this._dashCount,
  370. dashOffset: this._dashOffset,
  371. dashRatio: this._dashRatio,
  372. resolution: this._resolution,
  373. sizeAttenuation: this._sizeAttenuation,
  374. useColors: this._useColors,
  375. useDash: this._useDash,
  376. visibility: this._visibility,
  377. width: this._width,
  378. cameraFacing: this._cameraFacing,
  379. };
  380. this._colors && (greasedLineMaterialOptions.colors = this._colors);
  381. serializationObject.greasedLineMaterialOptions = greasedLineMaterialOptions;
  382. return serializationObject;
  383. }
  384. /**
  385. * Parses a serialized objects
  386. * @param source serialized object
  387. * @param scene scene
  388. * @param _rootUrl root url for textures
  389. */
  390. parse(source, scene, _rootUrl) {
  391. // TODO: super.parse?
  392. const greasedLineMaterialOptions = source.greasedLineMaterialOptions;
  393. this._colorsTexture?.dispose();
  394. greasedLineMaterialOptions.color && (this.color = greasedLineMaterialOptions.color);
  395. greasedLineMaterialOptions.colorDistributionType && (this.colorsDistributionType = greasedLineMaterialOptions.colorDistributionType);
  396. greasedLineMaterialOptions.colorsSampling && (this.colorsSampling = greasedLineMaterialOptions.colorsSampling);
  397. greasedLineMaterialOptions.colorMode && (this.colorMode = greasedLineMaterialOptions.colorMode);
  398. greasedLineMaterialOptions.useColors && (this.useColors = greasedLineMaterialOptions.useColors);
  399. greasedLineMaterialOptions.visibility && (this.visibility = greasedLineMaterialOptions.visibility);
  400. greasedLineMaterialOptions.useDash && (this.useDash = greasedLineMaterialOptions.useDash);
  401. greasedLineMaterialOptions.dashCount && (this.dashCount = greasedLineMaterialOptions.dashCount);
  402. greasedLineMaterialOptions.dashRatio && (this.dashRatio = greasedLineMaterialOptions.dashRatio);
  403. greasedLineMaterialOptions.dashOffset && (this.dashOffset = greasedLineMaterialOptions.dashOffset);
  404. greasedLineMaterialOptions.width && (this.width = greasedLineMaterialOptions.width);
  405. greasedLineMaterialOptions.sizeAttenuation && (this.sizeAttenuation = greasedLineMaterialOptions.sizeAttenuation);
  406. greasedLineMaterialOptions.resolution && (this.resolution = greasedLineMaterialOptions.resolution);
  407. if (greasedLineMaterialOptions.colors) {
  408. this.colorsTexture = GreasedLineTools.CreateColorsTexture(`${this.name}-colors-texture`, greasedLineMaterialOptions.colors, this.colorsSampling, this.getScene());
  409. }
  410. else {
  411. this.colorsTexture = GreasedLineTools.PrepareEmptyColorsTexture(scene);
  412. }
  413. this._cameraFacing = greasedLineMaterialOptions.cameraFacing ?? true;
  414. this.setDefine("GREASED_LINE_CAMERA_FACING", this._cameraFacing);
  415. }
  416. }
  417. //# sourceMappingURL=greasedLineSimpleMaterial.js.map