babylon.ellipse2d.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354
  1. var __extends = (this && this.__extends) || function (d, b) {
  2. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  3. function __() { this.constructor = d; }
  4. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  5. };
  6. var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  7. var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  8. if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  9. else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  10. return c > 3 && r && Object.defineProperty(target, key, r), r;
  11. };
  12. var BABYLON;
  13. (function (BABYLON) {
  14. var Ellipse2DRenderCache = (function (_super) {
  15. __extends(Ellipse2DRenderCache, _super);
  16. function Ellipse2DRenderCache(engine, modelKey) {
  17. _super.call(this, engine, modelKey);
  18. this.effectsReady = false;
  19. this.fillVB = null;
  20. this.fillIB = null;
  21. this.fillIndicesCount = 0;
  22. this.instancingFillAttributes = null;
  23. this.effectFillInstanced = null;
  24. this.effectFill = null;
  25. this.borderVB = null;
  26. this.borderIB = null;
  27. this.borderIndicesCount = 0;
  28. this.instancingBorderAttributes = null;
  29. this.effectBorderInstanced = null;
  30. this.effectBorder = null;
  31. }
  32. Ellipse2DRenderCache.prototype.render = function (instanceInfo, context) {
  33. // Do nothing if the shader is still loading/preparing
  34. if (!this.effectsReady) {
  35. if ((this.effectFill && (!this.effectFill.isReady() || (this.effectFillInstanced && !this.effectFillInstanced.isReady()))) ||
  36. (this.effectBorder && (!this.effectBorder.isReady() || (this.effectBorderInstanced && !this.effectBorderInstanced.isReady())))) {
  37. return false;
  38. }
  39. this.effectsReady = true;
  40. }
  41. var canvas = instanceInfo.owner.owner;
  42. var engine = canvas.engine;
  43. var depthFunction = 0;
  44. if (this.effectFill && this.effectBorder) {
  45. depthFunction = engine.getDepthFunction();
  46. engine.setDepthFunctionToLessOrEqual();
  47. }
  48. var curAlphaMode = engine.getAlphaMode();
  49. if (this.effectFill) {
  50. var partIndex = instanceInfo.partIndexFromId.get(BABYLON.Shape2D.SHAPE2D_FILLPARTID.toString());
  51. var pid = context.groupInfoPartData[partIndex];
  52. if (context.renderMode !== BABYLON.Render2DContext.RenderModeOpaque) {
  53. engine.setAlphaMode(BABYLON.Engine.ALPHA_COMBINE);
  54. }
  55. var effect = context.useInstancing ? this.effectFillInstanced : this.effectFill;
  56. engine.enableEffect(effect);
  57. engine.bindBuffersDirectly(this.fillVB, this.fillIB, [1], 4, effect);
  58. if (context.useInstancing) {
  59. if (!this.instancingFillAttributes) {
  60. this.instancingFillAttributes = this.loadInstancingAttributes(BABYLON.Shape2D.SHAPE2D_FILLPARTID, effect);
  61. }
  62. canvas._addDrawCallCount(1, context.renderMode);
  63. engine.updateAndBindInstancesBuffer(pid._partBuffer, null, this.instancingFillAttributes);
  64. engine.draw(true, 0, this.fillIndicesCount, pid._partData.usedElementCount);
  65. engine.unbindInstanceAttributes();
  66. }
  67. else {
  68. canvas._addDrawCallCount(context.partDataEndIndex - context.partDataStartIndex, context.renderMode);
  69. for (var i = context.partDataStartIndex; i < context.partDataEndIndex; i++) {
  70. this.setupUniforms(effect, partIndex, pid._partData, i);
  71. engine.draw(true, 0, this.fillIndicesCount);
  72. }
  73. }
  74. }
  75. if (this.effectBorder) {
  76. var partIndex = instanceInfo.partIndexFromId.get(BABYLON.Shape2D.SHAPE2D_BORDERPARTID.toString());
  77. var pid = context.groupInfoPartData[partIndex];
  78. if (context.renderMode !== BABYLON.Render2DContext.RenderModeOpaque) {
  79. engine.setAlphaMode(BABYLON.Engine.ALPHA_COMBINE);
  80. }
  81. var effect = context.useInstancing ? this.effectBorderInstanced : this.effectBorder;
  82. engine.enableEffect(effect);
  83. engine.bindBuffersDirectly(this.borderVB, this.borderIB, [1], 4, effect);
  84. if (context.useInstancing) {
  85. if (!this.instancingBorderAttributes) {
  86. this.instancingBorderAttributes = this.loadInstancingAttributes(BABYLON.Shape2D.SHAPE2D_BORDERPARTID, effect);
  87. }
  88. canvas._addDrawCallCount(1, context.renderMode);
  89. engine.updateAndBindInstancesBuffer(pid._partBuffer, null, this.instancingBorderAttributes);
  90. engine.draw(true, 0, this.borderIndicesCount, pid._partData.usedElementCount);
  91. engine.unbindInstanceAttributes();
  92. }
  93. else {
  94. canvas._addDrawCallCount(context.partDataEndIndex - context.partDataStartIndex, context.renderMode);
  95. for (var i = context.partDataStartIndex; i < context.partDataEndIndex; i++) {
  96. this.setupUniforms(effect, partIndex, pid._partData, i);
  97. engine.draw(true, 0, this.borderIndicesCount);
  98. }
  99. }
  100. }
  101. engine.setAlphaMode(curAlphaMode);
  102. if (this.effectFill && this.effectBorder) {
  103. engine.setDepthFunction(depthFunction);
  104. }
  105. return true;
  106. };
  107. Ellipse2DRenderCache.prototype.dispose = function () {
  108. if (!_super.prototype.dispose.call(this)) {
  109. return false;
  110. }
  111. if (this.fillVB) {
  112. this._engine._releaseBuffer(this.fillVB);
  113. this.fillVB = null;
  114. }
  115. if (this.fillIB) {
  116. this._engine._releaseBuffer(this.fillIB);
  117. this.fillIB = null;
  118. }
  119. if (this.effectFill) {
  120. this._engine._releaseEffect(this.effectFill);
  121. this.effectFill = null;
  122. }
  123. if (this.effectFillInstanced) {
  124. this._engine._releaseEffect(this.effectFillInstanced);
  125. this.effectFillInstanced = null;
  126. }
  127. if (this.borderVB) {
  128. this._engine._releaseBuffer(this.borderVB);
  129. this.borderVB = null;
  130. }
  131. if (this.borderIB) {
  132. this._engine._releaseBuffer(this.borderIB);
  133. this.borderIB = null;
  134. }
  135. if (this.effectBorder) {
  136. this._engine._releaseEffect(this.effectBorder);
  137. this.effectBorder = null;
  138. }
  139. if (this.effectBorderInstanced) {
  140. this._engine._releaseEffect(this.effectBorderInstanced);
  141. this.effectBorderInstanced = null;
  142. }
  143. return true;
  144. };
  145. return Ellipse2DRenderCache;
  146. })(BABYLON.ModelRenderCache);
  147. BABYLON.Ellipse2DRenderCache = Ellipse2DRenderCache;
  148. var Ellipse2DInstanceData = (function (_super) {
  149. __extends(Ellipse2DInstanceData, _super);
  150. function Ellipse2DInstanceData(partId) {
  151. _super.call(this, partId, 1);
  152. }
  153. Object.defineProperty(Ellipse2DInstanceData.prototype, "properties", {
  154. get: function () {
  155. return null;
  156. },
  157. enumerable: true,
  158. configurable: true
  159. });
  160. __decorate([
  161. BABYLON.instanceData()
  162. ], Ellipse2DInstanceData.prototype, "properties", null);
  163. return Ellipse2DInstanceData;
  164. })(BABYLON.Shape2DInstanceData);
  165. BABYLON.Ellipse2DInstanceData = Ellipse2DInstanceData;
  166. var Ellipse2D = (function (_super) {
  167. __extends(Ellipse2D, _super);
  168. /**
  169. * Create an Ellipse 2D Shape primitive
  170. * @param settings a combination of settings, possible ones are
  171. * - parent: the parent primitive/canvas, must be specified if the primitive is not constructed as a child of another one (i.e. as part of the children array setting)
  172. * - children: an array of direct children
  173. * - id: a text identifier, for information purpose
  174. * - position: the X & Y positions relative to its parent. Alternatively the x and y properties can be set. Default is [0;0]
  175. * - rotation: the initial rotation (in radian) of the primitive. default is 0
  176. * - scale: the initial scale of the primitive. default is 1
  177. * - origin: define the normalized origin point location, default [0.5;0.5]
  178. * - size: the size of the group. Alternatively the width and height properties can be set. Default will be [10;10].
  179. * - subdivision: the number of subdivision to create the ellipse perimeter, default is 64.
  180. * - fill: the brush used to draw the fill content of the ellipse, you can set null to draw nothing (but you will have to set a border brush), default is a SolidColorBrush of plain white. can also be a string value (see Canvas2D.GetBrushFromString)
  181. * - border: the brush used to draw the border of the ellipse, you can set null to draw nothing (but you will have to set a fill brush), default is null. can be a string value (see Canvas2D.GetBrushFromString)
  182. * - borderThickness: the thickness of the drawn border, default is 1.
  183. * - isVisible: true if the group must be visible, false for hidden. Default is true.
  184. * - childrenFlatZOrder: if true all the children (direct and indirect) will share the same Z-Order. Use this when there's a lot of children which don't overlap. The drawing order IS NOT GUARANTED!
  185. * - marginTop: top margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
  186. * - marginLeft: left margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
  187. * - marginRight: right margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
  188. * - marginBottom: bottom margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
  189. * - margin: top, left, right and bottom margin formatted as a single string (see PrimitiveThickness.fromString)
  190. * - marginHAlignment: one value of the PrimitiveAlignment type's static properties
  191. * - marginVAlignment: one value of the PrimitiveAlignment type's static properties
  192. * - marginAlignment: a string defining the alignment, see PrimitiveAlignment.fromString
  193. * - paddingTop: top padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
  194. * - paddingLeft: left padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
  195. * - paddingRight: right padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
  196. * - paddingBottom: bottom padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
  197. * - padding: top, left, right and bottom padding formatted as a single string (see PrimitiveThickness.fromString)
  198. */
  199. function Ellipse2D(settings) {
  200. // Avoid checking every time if the object exists
  201. if (settings == null) {
  202. settings = {};
  203. }
  204. _super.call(this, settings);
  205. if (settings.size != null) {
  206. this.size = settings.size;
  207. }
  208. else if (settings.width || settings.height) {
  209. var size = new BABYLON.Size(settings.width, settings.height);
  210. this.size = size;
  211. }
  212. var sub = (settings.subdivisions == null) ? 64 : settings.subdivisions;
  213. this.subdivisions = sub;
  214. }
  215. Object.defineProperty(Ellipse2D.prototype, "actualSize", {
  216. get: function () {
  217. if (this._actualSize) {
  218. return this._actualSize;
  219. }
  220. return this.size;
  221. },
  222. set: function (value) {
  223. this._actualSize = value;
  224. },
  225. enumerable: true,
  226. configurable: true
  227. });
  228. Object.defineProperty(Ellipse2D.prototype, "subdivisions", {
  229. get: function () {
  230. return this._subdivisions;
  231. },
  232. set: function (value) {
  233. this._subdivisions = value;
  234. },
  235. enumerable: true,
  236. configurable: true
  237. });
  238. Ellipse2D.prototype.levelIntersect = function (intersectInfo) {
  239. var w = this.size.width / 2;
  240. var h = this.size.height / 2;
  241. var x = intersectInfo._localPickPosition.x - w;
  242. var y = intersectInfo._localPickPosition.y - h;
  243. return ((x * x) / (w * w) + (y * y) / (h * h)) <= 1;
  244. };
  245. Ellipse2D.prototype.updateLevelBoundingInfo = function () {
  246. BABYLON.BoundingInfo2D.CreateFromSizeToRef(this.actualSize, this._levelBoundingInfo);
  247. };
  248. Ellipse2D.prototype.createModelRenderCache = function (modelKey) {
  249. var renderCache = new Ellipse2DRenderCache(this.owner.engine, modelKey);
  250. return renderCache;
  251. };
  252. Ellipse2D.prototype.setupModelRenderCache = function (modelRenderCache) {
  253. var renderCache = modelRenderCache;
  254. var engine = this.owner.engine;
  255. // Need to create WebGL resources for fill part?
  256. if (this.fill) {
  257. var vbSize = this.subdivisions + 1;
  258. var vb = new Float32Array(vbSize);
  259. for (var i = 0; i < vbSize; i++) {
  260. vb[i] = i;
  261. }
  262. renderCache.fillVB = engine.createVertexBuffer(vb);
  263. var triCount = vbSize - 1;
  264. var ib = new Float32Array(triCount * 3);
  265. for (var i = 0; i < triCount; i++) {
  266. ib[i * 3 + 0] = 0;
  267. ib[i * 3 + 2] = i + 1;
  268. ib[i * 3 + 1] = i + 2;
  269. }
  270. ib[triCount * 3 - 2] = 1;
  271. renderCache.fillIB = engine.createIndexBuffer(ib);
  272. renderCache.fillIndicesCount = triCount * 3;
  273. // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
  274. var ei = this.getDataPartEffectInfo(BABYLON.Shape2D.SHAPE2D_FILLPARTID, ["index"], true);
  275. if (ei) {
  276. renderCache.effectFillInstanced = engine.createEffect({ vertex: "ellipse2d", fragment: "ellipse2d" }, ei.attributes, ei.uniforms, [], ei.defines, null);
  277. }
  278. // Get the non instanced version
  279. ei = this.getDataPartEffectInfo(BABYLON.Shape2D.SHAPE2D_FILLPARTID, ["index"], false);
  280. renderCache.effectFill = engine.createEffect({ vertex: "ellipse2d", fragment: "ellipse2d" }, ei.attributes, ei.uniforms, [], ei.defines, null);
  281. }
  282. // Need to create WebGL resource for border part?
  283. if (this.border) {
  284. var vbSize = this.subdivisions * 2;
  285. var vb = new Float32Array(vbSize);
  286. for (var i = 0; i < vbSize; i++) {
  287. vb[i] = i;
  288. }
  289. renderCache.borderVB = engine.createVertexBuffer(vb);
  290. var triCount = vbSize;
  291. var rs = triCount / 2;
  292. var ib = new Float32Array(triCount * 3);
  293. for (var i = 0; i < rs; i++) {
  294. var r0 = i;
  295. var r1 = (i + 1) % rs;
  296. ib[i * 6 + 0] = rs + r1;
  297. ib[i * 6 + 1] = rs + r0;
  298. ib[i * 6 + 2] = r0;
  299. ib[i * 6 + 3] = r1;
  300. ib[i * 6 + 4] = rs + r1;
  301. ib[i * 6 + 5] = r0;
  302. }
  303. renderCache.borderIB = engine.createIndexBuffer(ib);
  304. renderCache.borderIndicesCount = (triCount * 3);
  305. // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
  306. var ei = this.getDataPartEffectInfo(BABYLON.Shape2D.SHAPE2D_BORDERPARTID, ["index"], true);
  307. if (ei) {
  308. renderCache.effectBorderInstanced = engine.createEffect("ellipse2d", ei.attributes, ei.uniforms, [], ei.defines, null);
  309. }
  310. // Get the non instanced version
  311. ei = this.getDataPartEffectInfo(BABYLON.Shape2D.SHAPE2D_BORDERPARTID, ["index"], false);
  312. renderCache.effectBorder = engine.createEffect("ellipse2d", ei.attributes, ei.uniforms, [], ei.defines, null);
  313. }
  314. return renderCache;
  315. };
  316. Ellipse2D.prototype.createInstanceDataParts = function () {
  317. var res = new Array();
  318. if (this.border) {
  319. res.push(new Ellipse2DInstanceData(BABYLON.Shape2D.SHAPE2D_BORDERPARTID));
  320. }
  321. if (this.fill) {
  322. res.push(new Ellipse2DInstanceData(BABYLON.Shape2D.SHAPE2D_FILLPARTID));
  323. }
  324. return res;
  325. };
  326. Ellipse2D.prototype.refreshInstanceDataPart = function (part) {
  327. if (!_super.prototype.refreshInstanceDataPart.call(this, part)) {
  328. return false;
  329. }
  330. if (part.id === BABYLON.Shape2D.SHAPE2D_BORDERPARTID) {
  331. var d = part;
  332. var size = this.actualSize;
  333. d.properties = new BABYLON.Vector3(size.width, size.height, this.subdivisions);
  334. }
  335. else if (part.id === BABYLON.Shape2D.SHAPE2D_FILLPARTID) {
  336. var d = part;
  337. var size = this.actualSize;
  338. d.properties = new BABYLON.Vector3(size.width, size.height, this.subdivisions);
  339. }
  340. return true;
  341. };
  342. __decorate([
  343. BABYLON.instanceLevelProperty(BABYLON.Shape2D.SHAPE2D_PROPCOUNT + 1, function (pi) { return Ellipse2D.acutalSizeProperty = pi; }, false, true)
  344. ], Ellipse2D.prototype, "actualSize", null);
  345. __decorate([
  346. BABYLON.modelLevelProperty(BABYLON.Shape2D.SHAPE2D_PROPCOUNT + 2, function (pi) { return Ellipse2D.subdivisionsProperty = pi; })
  347. ], Ellipse2D.prototype, "subdivisions", null);
  348. Ellipse2D = __decorate([
  349. BABYLON.className("Ellipse2D")
  350. ], Ellipse2D);
  351. return Ellipse2D;
  352. })(BABYLON.Shape2D);
  353. BABYLON.Ellipse2D = Ellipse2D;
  354. })(BABYLON || (BABYLON = {}));