babylon.ellipse2d.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351
  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. * - marginTop: top margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
  183. * - marginLeft: left margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
  184. * - marginRight: right margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
  185. * - marginBottom: bottom margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
  186. * - margin: top, left, right and bottom margin formatted as a single string (see PrimitiveThickness.fromString)
  187. * - marginHAlignment: one value of the PrimitiveAlignment type's static properties
  188. * - marginVAlignment: one value of the PrimitiveAlignment type's static properties
  189. * - marginAlignment: a string defining the alignment, see PrimitiveAlignment.fromString
  190. * - paddingTop: top padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
  191. * - paddingLeft: left padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
  192. * - paddingRight: right padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
  193. * - paddingBottom: bottom padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
  194. * - padding: top, left, right and bottom padding formatted as a single string (see PrimitiveThickness.fromString)
  195. */
  196. function Ellipse2D(settings) {
  197. // Avoid checking every time if the object exists
  198. if (settings == null) {
  199. settings = {};
  200. }
  201. _super.call(this, settings);
  202. if (settings.size != null) {
  203. this.size = settings.size;
  204. }
  205. else if (settings.width || settings.height) {
  206. var size = new BABYLON.Size(settings.width, settings.height);
  207. this.size = size;
  208. }
  209. var sub = (settings.subdivisions == null) ? 64 : settings.subdivisions;
  210. this.subdivisions = sub;
  211. }
  212. Object.defineProperty(Ellipse2D.prototype, "actualSize", {
  213. get: function () {
  214. if (this._actualSize) {
  215. return this._actualSize;
  216. }
  217. return this.size;
  218. },
  219. set: function (value) {
  220. this._actualSize = value;
  221. },
  222. enumerable: true,
  223. configurable: true
  224. });
  225. Object.defineProperty(Ellipse2D.prototype, "subdivisions", {
  226. get: function () {
  227. return this._subdivisions;
  228. },
  229. set: function (value) {
  230. this._subdivisions = value;
  231. },
  232. enumerable: true,
  233. configurable: true
  234. });
  235. Ellipse2D.prototype.levelIntersect = function (intersectInfo) {
  236. var w = this.size.width / 2;
  237. var h = this.size.height / 2;
  238. var x = intersectInfo._localPickPosition.x - w;
  239. var y = intersectInfo._localPickPosition.y - h;
  240. return ((x * x) / (w * w) + (y * y) / (h * h)) <= 1;
  241. };
  242. Ellipse2D.prototype.updateLevelBoundingInfo = function () {
  243. BABYLON.BoundingInfo2D.CreateFromSizeToRef(this.actualSize, this._levelBoundingInfo);
  244. };
  245. Ellipse2D.prototype.createModelRenderCache = function (modelKey) {
  246. var renderCache = new Ellipse2DRenderCache(this.owner.engine, modelKey);
  247. return renderCache;
  248. };
  249. Ellipse2D.prototype.setupModelRenderCache = function (modelRenderCache) {
  250. var renderCache = modelRenderCache;
  251. var engine = this.owner.engine;
  252. // Need to create WebGL resources for fill part?
  253. if (this.fill) {
  254. var vbSize = this.subdivisions + 1;
  255. var vb = new Float32Array(vbSize);
  256. for (var i = 0; i < vbSize; i++) {
  257. vb[i] = i;
  258. }
  259. renderCache.fillVB = engine.createVertexBuffer(vb);
  260. var triCount = vbSize - 1;
  261. var ib = new Float32Array(triCount * 3);
  262. for (var i = 0; i < triCount; i++) {
  263. ib[i * 3 + 0] = 0;
  264. ib[i * 3 + 2] = i + 1;
  265. ib[i * 3 + 1] = i + 2;
  266. }
  267. ib[triCount * 3 - 2] = 1;
  268. renderCache.fillIB = engine.createIndexBuffer(ib);
  269. renderCache.fillIndicesCount = triCount * 3;
  270. // 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
  271. var ei = this.getDataPartEffectInfo(BABYLON.Shape2D.SHAPE2D_FILLPARTID, ["index"], true);
  272. if (ei) {
  273. renderCache.effectFillInstanced = engine.createEffect({ vertex: "ellipse2d", fragment: "ellipse2d" }, ei.attributes, ei.uniforms, [], ei.defines, null);
  274. }
  275. // Get the non instanced version
  276. ei = this.getDataPartEffectInfo(BABYLON.Shape2D.SHAPE2D_FILLPARTID, ["index"], false);
  277. renderCache.effectFill = engine.createEffect({ vertex: "ellipse2d", fragment: "ellipse2d" }, ei.attributes, ei.uniforms, [], ei.defines, null);
  278. }
  279. // Need to create WebGL resource for border part?
  280. if (this.border) {
  281. var vbSize = this.subdivisions * 2;
  282. var vb = new Float32Array(vbSize);
  283. for (var i = 0; i < vbSize; i++) {
  284. vb[i] = i;
  285. }
  286. renderCache.borderVB = engine.createVertexBuffer(vb);
  287. var triCount = vbSize;
  288. var rs = triCount / 2;
  289. var ib = new Float32Array(triCount * 3);
  290. for (var i = 0; i < rs; i++) {
  291. var r0 = i;
  292. var r1 = (i + 1) % rs;
  293. ib[i * 6 + 0] = rs + r1;
  294. ib[i * 6 + 1] = rs + r0;
  295. ib[i * 6 + 2] = r0;
  296. ib[i * 6 + 3] = r1;
  297. ib[i * 6 + 4] = rs + r1;
  298. ib[i * 6 + 5] = r0;
  299. }
  300. renderCache.borderIB = engine.createIndexBuffer(ib);
  301. renderCache.borderIndicesCount = (triCount * 3);
  302. // 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
  303. var ei = this.getDataPartEffectInfo(BABYLON.Shape2D.SHAPE2D_BORDERPARTID, ["index"], true);
  304. if (ei) {
  305. renderCache.effectBorderInstanced = engine.createEffect("ellipse2d", ei.attributes, ei.uniforms, [], ei.defines, null);
  306. }
  307. // Get the non instanced version
  308. ei = this.getDataPartEffectInfo(BABYLON.Shape2D.SHAPE2D_BORDERPARTID, ["index"], false);
  309. renderCache.effectBorder = engine.createEffect("ellipse2d", ei.attributes, ei.uniforms, [], ei.defines, null);
  310. }
  311. return renderCache;
  312. };
  313. Ellipse2D.prototype.createInstanceDataParts = function () {
  314. var res = new Array();
  315. if (this.border) {
  316. res.push(new Ellipse2DInstanceData(BABYLON.Shape2D.SHAPE2D_BORDERPARTID));
  317. }
  318. if (this.fill) {
  319. res.push(new Ellipse2DInstanceData(BABYLON.Shape2D.SHAPE2D_FILLPARTID));
  320. }
  321. return res;
  322. };
  323. Ellipse2D.prototype.refreshInstanceDataPart = function (part) {
  324. if (!_super.prototype.refreshInstanceDataPart.call(this, part)) {
  325. return false;
  326. }
  327. if (part.id === BABYLON.Shape2D.SHAPE2D_BORDERPARTID) {
  328. var d = part;
  329. var size = this.actualSize;
  330. d.properties = new BABYLON.Vector3(size.width, size.height, this.subdivisions);
  331. }
  332. else if (part.id === BABYLON.Shape2D.SHAPE2D_FILLPARTID) {
  333. var d = part;
  334. var size = this.actualSize;
  335. d.properties = new BABYLON.Vector3(size.width, size.height, this.subdivisions);
  336. }
  337. return true;
  338. };
  339. __decorate([
  340. BABYLON.instanceLevelProperty(BABYLON.Shape2D.SHAPE2D_PROPCOUNT + 1, function (pi) { return Ellipse2D.acutalSizeProperty = pi; }, false, true)
  341. ], Ellipse2D.prototype, "actualSize", null);
  342. __decorate([
  343. BABYLON.modelLevelProperty(BABYLON.Shape2D.SHAPE2D_PROPCOUNT + 2, function (pi) { return Ellipse2D.subdivisionsProperty = pi; })
  344. ], Ellipse2D.prototype, "subdivisions", null);
  345. Ellipse2D = __decorate([
  346. BABYLON.className("Ellipse2D")
  347. ], Ellipse2D);
  348. return Ellipse2D;
  349. }(BABYLON.Shape2D));
  350. BABYLON.Ellipse2D = Ellipse2D;
  351. })(BABYLON || (BABYLON = {}));