babylonjs.postProcess.js 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722
  1. (function webpackUniversalModuleDefinition(root, factory) {
  2. if(typeof exports === 'object' && typeof module === 'object')
  3. module.exports = factory(require("babylonjs"));
  4. else if(typeof define === 'function' && define.amd)
  5. define("babylonjs-postProcessesLibrary", ["babylonjs"], factory);
  6. else if(typeof exports === 'object')
  7. exports["babylonjs-postProcessesLibrary"] = factory(require("babylonjs"));
  8. else
  9. root["PPLIB"] = factory(root["BABYLON"]);
  10. })(window, function(__WEBPACK_EXTERNAL_MODULE_babylonjs__) {
  11. return /******/ (function(modules) { // webpackBootstrap
  12. /******/ // The module cache
  13. /******/ var installedModules = {};
  14. /******/
  15. /******/ // The require function
  16. /******/ function __webpack_require__(moduleId) {
  17. /******/
  18. /******/ // Check if module is in cache
  19. /******/ if(installedModules[moduleId]) {
  20. /******/ return installedModules[moduleId].exports;
  21. /******/ }
  22. /******/ // Create a new module (and put it into the cache)
  23. /******/ var module = installedModules[moduleId] = {
  24. /******/ i: moduleId,
  25. /******/ l: false,
  26. /******/ exports: {}
  27. /******/ };
  28. /******/
  29. /******/ // Execute the module function
  30. /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  31. /******/
  32. /******/ // Flag the module as loaded
  33. /******/ module.l = true;
  34. /******/
  35. /******/ // Return the exports of the module
  36. /******/ return module.exports;
  37. /******/ }
  38. /******/
  39. /******/
  40. /******/ // expose the modules object (__webpack_modules__)
  41. /******/ __webpack_require__.m = modules;
  42. /******/
  43. /******/ // expose the module cache
  44. /******/ __webpack_require__.c = installedModules;
  45. /******/
  46. /******/ // define getter function for harmony exports
  47. /******/ __webpack_require__.d = function(exports, name, getter) {
  48. /******/ if(!__webpack_require__.o(exports, name)) {
  49. /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
  50. /******/ }
  51. /******/ };
  52. /******/
  53. /******/ // define __esModule on exports
  54. /******/ __webpack_require__.r = function(exports) {
  55. /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
  56. /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
  57. /******/ }
  58. /******/ Object.defineProperty(exports, '__esModule', { value: true });
  59. /******/ };
  60. /******/
  61. /******/ // create a fake namespace object
  62. /******/ // mode & 1: value is a module id, require it
  63. /******/ // mode & 2: merge all properties of value into the ns
  64. /******/ // mode & 4: return value when already ns object
  65. /******/ // mode & 8|1: behave like require
  66. /******/ __webpack_require__.t = function(value, mode) {
  67. /******/ if(mode & 1) value = __webpack_require__(value);
  68. /******/ if(mode & 8) return value;
  69. /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
  70. /******/ var ns = Object.create(null);
  71. /******/ __webpack_require__.r(ns);
  72. /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
  73. /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
  74. /******/ return ns;
  75. /******/ };
  76. /******/
  77. /******/ // getDefaultExport function for compatibility with non-harmony modules
  78. /******/ __webpack_require__.n = function(module) {
  79. /******/ var getter = module && module.__esModule ?
  80. /******/ function getDefault() { return module['default']; } :
  81. /******/ function getModuleExports() { return module; };
  82. /******/ __webpack_require__.d(getter, 'a', getter);
  83. /******/ return getter;
  84. /******/ };
  85. /******/
  86. /******/ // Object.prototype.hasOwnProperty.call
  87. /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
  88. /******/
  89. /******/ // __webpack_public_path__
  90. /******/ __webpack_require__.p = "";
  91. /******/
  92. /******/
  93. /******/ // Load entry module and return exports
  94. /******/ return __webpack_require__(__webpack_require__.s = "./legacy/legacy.ts");
  95. /******/ })
  96. /************************************************************************/
  97. /******/ ({
  98. /***/ "../node_modules/webpack/buildin/global.js":
  99. /*!*************************************************!*\
  100. !*** ../node_modules/webpack/buildin/global.js ***!
  101. \*************************************************/
  102. /*! no static exports found */
  103. /***/ (function(module, exports) {
  104. var g;
  105. // This works in non-strict mode
  106. g = (function() {
  107. return this;
  108. })();
  109. try {
  110. // This works if eval is allowed (see CSP)
  111. g = g || Function("return this")() || (1, eval)("this");
  112. } catch (e) {
  113. // This works if the window reference is available
  114. if (typeof window === "object") g = window;
  115. }
  116. // g can still be undefined, but nothing to do about it...
  117. // We return undefined, instead of nothing here, so it's
  118. // easier to handle this case. if(!global) { ...}
  119. module.exports = g;
  120. /***/ }),
  121. /***/ "./legacy/legacy.ts":
  122. /*!**************************!*\
  123. !*** ./legacy/legacy.ts ***!
  124. \**************************/
  125. /*! no static exports found */
  126. /***/ (function(module, exports, __webpack_require__) {
  127. "use strict";
  128. /* WEBPACK VAR INJECTION */(function(global) {
  129. function __export(m) {
  130. for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
  131. }
  132. Object.defineProperty(exports, "__esModule", { value: true });
  133. var postProcessLibrary = __webpack_require__(/*! ../src/index */ "./src/index.ts");
  134. /**
  135. *
  136. * This is the entry point for the UMD module.
  137. * The entry point for a future ESM package should be index.ts
  138. */
  139. var globalObject = (typeof global !== 'undefined') ? global : ((typeof window !== 'undefined') ? window : undefined);
  140. if (typeof globalObject !== "undefined") {
  141. for (var key in postProcessLibrary) {
  142. globalObject.BABYLON[key] = postProcessLibrary[key];
  143. }
  144. }
  145. __export(__webpack_require__(/*! ../src/index */ "./src/index.ts"));
  146. /* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../../node_modules/webpack/buildin/global.js */ "../node_modules/webpack/buildin/global.js")))
  147. /***/ }),
  148. /***/ "./src/asciiArt/asciiArtPostProcess.ts":
  149. /*!*********************************************!*\
  150. !*** ./src/asciiArt/asciiArtPostProcess.ts ***!
  151. \*********************************************/
  152. /*! no static exports found */
  153. /***/ (function(module, exports, __webpack_require__) {
  154. "use strict";
  155. var __extends = (this && this.__extends) || (function () {
  156. var extendStatics = function (d, b) {
  157. extendStatics = Object.setPrototypeOf ||
  158. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  159. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  160. return extendStatics(d, b);
  161. }
  162. return function (d, b) {
  163. extendStatics(d, b);
  164. function __() { this.constructor = d; }
  165. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  166. };
  167. })();
  168. var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  169. var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  170. if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  171. 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;
  172. return c > 3 && r && Object.defineProperty(target, key, r), r;
  173. };
  174. Object.defineProperty(exports, "__esModule", { value: true });
  175. var babylonjs_1 = __webpack_require__(/*! babylonjs */ "babylonjs");
  176. babylonjs_1.Effect.ShadersStore["asciiartPixelShader"] = __webpack_require__(/*! ./asciiart.fragment.fx */ "./src/asciiArt/asciiart.fragment.fx");
  177. /**
  178. * AsciiArtFontTexture is the helper class used to easily create your ascii art font texture.
  179. *
  180. * It basically takes care rendering the font front the given font size to a texture.
  181. * This is used later on in the postprocess.
  182. */
  183. var AsciiArtFontTexture = /** @class */ (function (_super) {
  184. __extends(AsciiArtFontTexture, _super);
  185. /**
  186. * Create a new instance of the Ascii Art FontTexture class
  187. * @param name the name of the texture
  188. * @param font the font to use, use the W3C CSS notation
  189. * @param text the caracter set to use in the rendering.
  190. * @param scene the scene that owns the texture
  191. */
  192. function AsciiArtFontTexture(name, font, text, scene) {
  193. if (scene === void 0) { scene = null; }
  194. var _this = _super.call(this, scene) || this;
  195. scene = _this.getScene();
  196. if (!scene) {
  197. return _this;
  198. }
  199. _this.name = name;
  200. _this._text == text;
  201. _this._font == font;
  202. _this.wrapU = babylonjs_1.Texture.CLAMP_ADDRESSMODE;
  203. _this.wrapV = babylonjs_1.Texture.CLAMP_ADDRESSMODE;
  204. //this.anisotropicFilteringLevel = 1;
  205. // Get the font specific info.
  206. var maxCharHeight = _this.getFontHeight(font);
  207. var maxCharWidth = _this.getFontWidth(font);
  208. _this._charSize = Math.max(maxCharHeight.height, maxCharWidth);
  209. // This is an approximate size, but should always be able to fit at least the maxCharCount.
  210. var textureWidth = Math.ceil(_this._charSize * text.length);
  211. var textureHeight = _this._charSize;
  212. // Create the texture that will store the font characters.
  213. _this._texture = scene.getEngine().createDynamicTexture(textureWidth, textureHeight, false, babylonjs_1.Texture.NEAREST_SAMPLINGMODE);
  214. //scene.getEngine().setclamp
  215. var textureSize = _this.getSize();
  216. // Create a canvas with the final size: the one matching the texture.
  217. var canvas = document.createElement("canvas");
  218. canvas.width = textureSize.width;
  219. canvas.height = textureSize.height;
  220. var context = canvas.getContext("2d");
  221. context.textBaseline = "top";
  222. context.font = font;
  223. context.fillStyle = "white";
  224. context.imageSmoothingEnabled = false;
  225. // Sets the text in the texture.
  226. for (var i = 0; i < text.length; i++) {
  227. context.fillText(text[i], i * _this._charSize, -maxCharHeight.offset);
  228. }
  229. // Flush the text in the dynamic texture.
  230. scene.getEngine().updateDynamicTexture(_this._texture, canvas, false, true);
  231. return _this;
  232. }
  233. Object.defineProperty(AsciiArtFontTexture.prototype, "charSize", {
  234. /**
  235. * Gets the size of one char in the texture (each char fits in size * size space in the texture).
  236. */
  237. get: function () {
  238. return this._charSize;
  239. },
  240. enumerable: true,
  241. configurable: true
  242. });
  243. /**
  244. * Gets the max char width of a font.
  245. * @param font the font to use, use the W3C CSS notation
  246. * @return the max char width
  247. */
  248. AsciiArtFontTexture.prototype.getFontWidth = function (font) {
  249. var fontDraw = document.createElement("canvas");
  250. var ctx = fontDraw.getContext('2d');
  251. ctx.fillStyle = 'white';
  252. ctx.font = font;
  253. return ctx.measureText("W").width;
  254. };
  255. // More info here: https://videlais.com/2014/03/16/the-many-and-varied-problems-with-measuring-font-height-for-html5-canvas/
  256. /**
  257. * Gets the max char height of a font.
  258. * @param font the font to use, use the W3C CSS notation
  259. * @return the max char height
  260. */
  261. AsciiArtFontTexture.prototype.getFontHeight = function (font) {
  262. var fontDraw = document.createElement("canvas");
  263. var ctx = fontDraw.getContext('2d');
  264. ctx.fillRect(0, 0, fontDraw.width, fontDraw.height);
  265. ctx.textBaseline = 'top';
  266. ctx.fillStyle = 'white';
  267. ctx.font = font;
  268. ctx.fillText('jH|', 0, 0);
  269. var pixels = ctx.getImageData(0, 0, fontDraw.width, fontDraw.height).data;
  270. var start = -1;
  271. var end = -1;
  272. for (var row = 0; row < fontDraw.height; row++) {
  273. for (var column = 0; column < fontDraw.width; column++) {
  274. var index = (row * fontDraw.width + column) * 4;
  275. if (pixels[index] === 0) {
  276. if (column === fontDraw.width - 1 && start !== -1) {
  277. end = row;
  278. row = fontDraw.height;
  279. break;
  280. }
  281. continue;
  282. }
  283. else {
  284. if (start === -1) {
  285. start = row;
  286. }
  287. break;
  288. }
  289. }
  290. }
  291. return { height: (end - start) + 1, offset: start - 1 };
  292. };
  293. /**
  294. * Clones the current AsciiArtTexture.
  295. * @return the clone of the texture.
  296. */
  297. AsciiArtFontTexture.prototype.clone = function () {
  298. return new AsciiArtFontTexture(this.name, this._font, this._text, this.getScene());
  299. };
  300. /**
  301. * Parses a json object representing the texture and returns an instance of it.
  302. * @param source the source JSON representation
  303. * @param scene the scene to create the texture for
  304. * @return the parsed texture
  305. */
  306. AsciiArtFontTexture.Parse = function (source, scene) {
  307. var texture = babylonjs_1.SerializationHelper.Parse(function () { return new AsciiArtFontTexture(source.name, source.font, source.text, scene); }, source, scene, null);
  308. return texture;
  309. };
  310. __decorate([
  311. babylonjs_1.serialize("font")
  312. ], AsciiArtFontTexture.prototype, "_font", void 0);
  313. __decorate([
  314. babylonjs_1.serialize("text")
  315. ], AsciiArtFontTexture.prototype, "_text", void 0);
  316. return AsciiArtFontTexture;
  317. }(babylonjs_1.BaseTexture));
  318. exports.AsciiArtFontTexture = AsciiArtFontTexture;
  319. /**
  320. * AsciiArtPostProcess helps rendering everithing in Ascii Art.
  321. *
  322. * Simmply add it to your scene and let the nerd that lives in you have fun.
  323. * Example usage: var pp = new AsciiArtPostProcess("myAscii", "20px Monospace", camera);
  324. */
  325. var AsciiArtPostProcess = /** @class */ (function (_super) {
  326. __extends(AsciiArtPostProcess, _super);
  327. /**
  328. * Instantiates a new Ascii Art Post Process.
  329. * @param name the name to give to the postprocess
  330. * @camera the camera to apply the post process to.
  331. * @param options can either be the font name or an option object following the IAsciiArtPostProcessOptions format
  332. */
  333. function AsciiArtPostProcess(name, camera, options) {
  334. var _this = _super.call(this, name, 'asciiart', ['asciiArtFontInfos', 'asciiArtOptions'], ['asciiArtFont'], {
  335. width: camera.getEngine().getRenderWidth(),
  336. height: camera.getEngine().getRenderHeight()
  337. }, camera, babylonjs_1.Texture.TRILINEAR_SAMPLINGMODE, camera.getEngine(), true) || this;
  338. /**
  339. * This defines the amount you want to mix the "tile" or caracter space colored in the ascii art.
  340. * This number is defined between 0 and 1;
  341. */
  342. _this.mixToTile = 0;
  343. /**
  344. * This defines the amount you want to mix the normal rendering pass in the ascii art.
  345. * This number is defined between 0 and 1;
  346. */
  347. _this.mixToNormal = 0;
  348. // Default values.
  349. var font = "40px Monospace";
  350. var characterSet = " `-.'_:,\"=^;<+!*?/cL\\zrs7TivJtC{3F)Il(xZfY5S2eajo14[nuyE]P6V9kXpKwGhqAUbOd8#HRDB0$mgMW&Q%N@";
  351. // Use options.
  352. if (options) {
  353. if (typeof (options) === "string") {
  354. font = options;
  355. }
  356. else {
  357. font = options.font || font;
  358. characterSet = options.characterSet || characterSet;
  359. _this.mixToTile = options.mixToTile || _this.mixToTile;
  360. _this.mixToNormal = options.mixToNormal || _this.mixToNormal;
  361. }
  362. }
  363. _this._asciiArtFontTexture = new AsciiArtFontTexture(name, font, characterSet, camera.getScene());
  364. var textureSize = _this._asciiArtFontTexture.getSize();
  365. _this.onApply = function (effect) {
  366. effect.setTexture("asciiArtFont", _this._asciiArtFontTexture);
  367. effect.setFloat4("asciiArtFontInfos", _this._asciiArtFontTexture.charSize, characterSet.length, textureSize.width, textureSize.height);
  368. effect.setFloat4("asciiArtOptions", _this.width, _this.height, _this.mixToNormal, _this.mixToTile);
  369. };
  370. return _this;
  371. }
  372. return AsciiArtPostProcess;
  373. }(babylonjs_1.PostProcess));
  374. exports.AsciiArtPostProcess = AsciiArtPostProcess;
  375. /***/ }),
  376. /***/ "./src/asciiArt/asciiart.fragment.fx":
  377. /*!*******************************************!*\
  378. !*** ./src/asciiArt/asciiart.fragment.fx ***!
  379. \*******************************************/
  380. /*! no static exports found */
  381. /***/ (function(module, exports) {
  382. module.exports = "\nvarying vec2 vUV;\nuniform sampler2D textureSampler;\nuniform sampler2D asciiArtFont;\n\nuniform vec4 asciiArtFontInfos;\nuniform vec4 asciiArtOptions;\n\nfloat getLuminance(vec3 color)\n{\nreturn clamp(dot(color,vec3(0.2126,0.7152,0.0722)),0.,1.);\n}\n\nvoid main(void) \n{\nfloat caracterSize=asciiArtFontInfos.x;\nfloat numChar=asciiArtFontInfos.y-1.0;\nfloat fontx=asciiArtFontInfos.z;\nfloat fonty=asciiArtFontInfos.w;\nfloat screenx=asciiArtOptions.x;\nfloat screeny=asciiArtOptions.y;\nfloat tileX=float(floor((gl_FragCoord.x)/caracterSize))*caracterSize/screenx;\nfloat tileY=float(floor((gl_FragCoord.y)/caracterSize))*caracterSize/screeny;\nvec2 tileUV=vec2(tileX,tileY);\nvec4 tileColor=texture2D(textureSampler,tileUV);\nvec4 baseColor=texture2D(textureSampler,vUV);\nfloat tileLuminance=getLuminance(tileColor.rgb);\nfloat offsetx=(float(floor(tileLuminance*numChar)))*caracterSize/fontx;\nfloat offsety=0.0;\nfloat x=float(mod(gl_FragCoord.x,caracterSize))/fontx;\nfloat y=float(mod(gl_FragCoord.y,caracterSize))/fonty;\nvec4 finalColor=texture2D(asciiArtFont,vec2(offsetx+x,offsety+(caracterSize/fonty-y)));\nfinalColor.rgb*=tileColor.rgb;\nfinalColor.a=1.0;\nfinalColor=mix(finalColor,tileColor,asciiArtOptions.w);\nfinalColor=mix(finalColor,baseColor,asciiArtOptions.z);\ngl_FragColor=finalColor;\n}"
  383. /***/ }),
  384. /***/ "./src/asciiArt/index.ts":
  385. /*!*******************************!*\
  386. !*** ./src/asciiArt/index.ts ***!
  387. \*******************************/
  388. /*! no static exports found */
  389. /***/ (function(module, exports, __webpack_require__) {
  390. "use strict";
  391. function __export(m) {
  392. for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
  393. }
  394. Object.defineProperty(exports, "__esModule", { value: true });
  395. __export(__webpack_require__(/*! ./asciiArtPostProcess */ "./src/asciiArt/asciiArtPostProcess.ts"));
  396. /***/ }),
  397. /***/ "./src/digitalRain/digitalRainPostProcess.ts":
  398. /*!***************************************************!*\
  399. !*** ./src/digitalRain/digitalRainPostProcess.ts ***!
  400. \***************************************************/
  401. /*! no static exports found */
  402. /***/ (function(module, exports, __webpack_require__) {
  403. "use strict";
  404. var __extends = (this && this.__extends) || (function () {
  405. var extendStatics = function (d, b) {
  406. extendStatics = Object.setPrototypeOf ||
  407. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  408. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  409. return extendStatics(d, b);
  410. }
  411. return function (d, b) {
  412. extendStatics(d, b);
  413. function __() { this.constructor = d; }
  414. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  415. };
  416. })();
  417. var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  418. var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  419. if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  420. 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;
  421. return c > 3 && r && Object.defineProperty(target, key, r), r;
  422. };
  423. Object.defineProperty(exports, "__esModule", { value: true });
  424. var babylonjs_1 = __webpack_require__(/*! babylonjs */ "babylonjs");
  425. babylonjs_1.Effect.ShadersStore["digitalrainPixelShader"] = __webpack_require__(/*! ./digitalrain.fragment.fx */ "./src/digitalRain/digitalrain.fragment.fx");
  426. /**
  427. * DigitalRainFontTexture is the helper class used to easily create your digital rain font texture.
  428. *
  429. * It basically takes care rendering the font front the given font size to a texture.
  430. * This is used later on in the postprocess.
  431. */
  432. var DigitalRainFontTexture = /** @class */ (function (_super) {
  433. __extends(DigitalRainFontTexture, _super);
  434. /**
  435. * Create a new instance of the Digital Rain FontTexture class
  436. * @param name the name of the texture
  437. * @param font the font to use, use the W3C CSS notation
  438. * @param text the caracter set to use in the rendering.
  439. * @param scene the scene that owns the texture
  440. */
  441. function DigitalRainFontTexture(name, font, text, scene) {
  442. if (scene === void 0) { scene = null; }
  443. var _this = _super.call(this, scene) || this;
  444. scene = _this.getScene();
  445. if (!scene) {
  446. return _this;
  447. }
  448. _this.name = name;
  449. _this._text == text;
  450. _this._font == font;
  451. _this.wrapU = babylonjs_1.Texture.CLAMP_ADDRESSMODE;
  452. _this.wrapV = babylonjs_1.Texture.CLAMP_ADDRESSMODE;
  453. // Get the font specific info.
  454. var maxCharHeight = _this.getFontHeight(font);
  455. var maxCharWidth = _this.getFontWidth(font);
  456. _this._charSize = Math.max(maxCharHeight.height, maxCharWidth);
  457. // This is an approximate size, but should always be able to fit at least the maxCharCount.
  458. var textureWidth = _this._charSize;
  459. var textureHeight = Math.ceil(_this._charSize * text.length);
  460. // Create the texture that will store the font characters.
  461. _this._texture = scene.getEngine().createDynamicTexture(textureWidth, textureHeight, false, babylonjs_1.Texture.NEAREST_SAMPLINGMODE);
  462. //scene.getEngine().setclamp
  463. var textureSize = _this.getSize();
  464. // Create a canvas with the final size: the one matching the texture.
  465. var canvas = document.createElement("canvas");
  466. canvas.width = textureSize.width;
  467. canvas.height = textureSize.height;
  468. var context = canvas.getContext("2d");
  469. context.textBaseline = "top";
  470. context.font = font;
  471. context.fillStyle = "white";
  472. context.imageSmoothingEnabled = false;
  473. // Sets the text in the texture.
  474. for (var i = 0; i < text.length; i++) {
  475. context.fillText(text[i], 0, i * _this._charSize - maxCharHeight.offset);
  476. }
  477. // Flush the text in the dynamic texture.
  478. scene.getEngine().updateDynamicTexture(_this._texture, canvas, false, true);
  479. return _this;
  480. }
  481. Object.defineProperty(DigitalRainFontTexture.prototype, "charSize", {
  482. /**
  483. * Gets the size of one char in the texture (each char fits in size * size space in the texture).
  484. */
  485. get: function () {
  486. return this._charSize;
  487. },
  488. enumerable: true,
  489. configurable: true
  490. });
  491. /**
  492. * Gets the max char width of a font.
  493. * @param font the font to use, use the W3C CSS notation
  494. * @return the max char width
  495. */
  496. DigitalRainFontTexture.prototype.getFontWidth = function (font) {
  497. var fontDraw = document.createElement("canvas");
  498. var ctx = fontDraw.getContext('2d');
  499. ctx.fillStyle = 'white';
  500. ctx.font = font;
  501. return ctx.measureText("W").width;
  502. };
  503. // More info here: https://videlais.com/2014/03/16/the-many-and-varied-problems-with-measuring-font-height-for-html5-canvas/
  504. /**
  505. * Gets the max char height of a font.
  506. * @param font the font to use, use the W3C CSS notation
  507. * @return the max char height
  508. */
  509. DigitalRainFontTexture.prototype.getFontHeight = function (font) {
  510. var fontDraw = document.createElement("canvas");
  511. var ctx = fontDraw.getContext('2d');
  512. ctx.fillRect(0, 0, fontDraw.width, fontDraw.height);
  513. ctx.textBaseline = 'top';
  514. ctx.fillStyle = 'white';
  515. ctx.font = font;
  516. ctx.fillText('jH|', 0, 0);
  517. var pixels = ctx.getImageData(0, 0, fontDraw.width, fontDraw.height).data;
  518. var start = -1;
  519. var end = -1;
  520. for (var row = 0; row < fontDraw.height; row++) {
  521. for (var column = 0; column < fontDraw.width; column++) {
  522. var index = (row * fontDraw.width + column) * 4;
  523. if (pixels[index] === 0) {
  524. if (column === fontDraw.width - 1 && start !== -1) {
  525. end = row;
  526. row = fontDraw.height;
  527. break;
  528. }
  529. continue;
  530. }
  531. else {
  532. if (start === -1) {
  533. start = row;
  534. }
  535. break;
  536. }
  537. }
  538. }
  539. return { height: (end - start) + 1, offset: start - 1 };
  540. };
  541. /**
  542. * Clones the current DigitalRainFontTexture.
  543. * @return the clone of the texture.
  544. */
  545. DigitalRainFontTexture.prototype.clone = function () {
  546. return new DigitalRainFontTexture(this.name, this._font, this._text, this.getScene());
  547. };
  548. /**
  549. * Parses a json object representing the texture and returns an instance of it.
  550. * @param source the source JSON representation
  551. * @param scene the scene to create the texture for
  552. * @return the parsed texture
  553. */
  554. DigitalRainFontTexture.Parse = function (source, scene) {
  555. var texture = babylonjs_1.SerializationHelper.Parse(function () { return new DigitalRainFontTexture(source.name, source.font, source.text, scene); }, source, scene, null);
  556. return texture;
  557. };
  558. __decorate([
  559. babylonjs_1.serialize("font")
  560. ], DigitalRainFontTexture.prototype, "_font", void 0);
  561. __decorate([
  562. babylonjs_1.serialize("text")
  563. ], DigitalRainFontTexture.prototype, "_text", void 0);
  564. return DigitalRainFontTexture;
  565. }(babylonjs_1.BaseTexture));
  566. exports.DigitalRainFontTexture = DigitalRainFontTexture;
  567. /**
  568. * DigitalRainPostProcess helps rendering everithing in digital rain.
  569. *
  570. * Simmply add it to your scene and let the nerd that lives in you have fun.
  571. * Example usage: var pp = new DigitalRainPostProcess("digitalRain", "20px Monospace", camera);
  572. */
  573. var DigitalRainPostProcess = /** @class */ (function (_super) {
  574. __extends(DigitalRainPostProcess, _super);
  575. /**
  576. * Instantiates a new Digital Rain Post Process.
  577. * @param name the name to give to the postprocess
  578. * @camera the camera to apply the post process to.
  579. * @param options can either be the font name or an option object following the IDigitalRainPostProcessOptions format
  580. */
  581. function DigitalRainPostProcess(name, camera, options) {
  582. var _this = _super.call(this, name, 'digitalrain', ['digitalRainFontInfos', 'digitalRainOptions', 'cosTimeZeroOne', 'matrixSpeed'], ['digitalRainFont'], {
  583. width: camera.getEngine().getRenderWidth(),
  584. height: camera.getEngine().getRenderHeight()
  585. }, camera, babylonjs_1.Texture.TRILINEAR_SAMPLINGMODE, camera.getEngine(), true) || this;
  586. /**
  587. * This defines the amount you want to mix the "tile" or caracter space colored in the digital rain.
  588. * This number is defined between 0 and 1;
  589. */
  590. _this.mixToTile = 0;
  591. /**
  592. * This defines the amount you want to mix the normal rendering pass in the digital rain.
  593. * This number is defined between 0 and 1;
  594. */
  595. _this.mixToNormal = 0;
  596. // Default values.
  597. var font = "15px Monospace";
  598. var characterSet = "古池や蛙飛び込む水の音ふるいけやかわずとびこむみずのおと初しぐれ猿も小蓑をほしげ也はつしぐれさるもこみのをほしげなり江戸の雨何石呑んだ時鳥えどのあめなんごくのんだほととぎす";
  599. // Use options.
  600. if (options) {
  601. if (typeof (options) === "string") {
  602. font = options;
  603. }
  604. else {
  605. font = options.font || font;
  606. _this.mixToTile = options.mixToTile || _this.mixToTile;
  607. _this.mixToNormal = options.mixToNormal || _this.mixToNormal;
  608. }
  609. }
  610. _this._digitalRainFontTexture = new DigitalRainFontTexture(name, font, characterSet, camera.getScene());
  611. var textureSize = _this._digitalRainFontTexture.getSize();
  612. var alpha = 0.0;
  613. var cosTimeZeroOne = 0.0;
  614. var matrix = babylonjs_1.Matrix.FromValues(Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random());
  615. _this.onApply = function (effect) {
  616. effect.setTexture("digitalRainFont", _this._digitalRainFontTexture);
  617. effect.setFloat4("digitalRainFontInfos", _this._digitalRainFontTexture.charSize, characterSet.length, textureSize.width, textureSize.height);
  618. effect.setFloat4("digitalRainOptions", _this.width, _this.height, _this.mixToNormal, _this.mixToTile);
  619. effect.setMatrix("matrixSpeed", matrix);
  620. alpha += 0.003;
  621. cosTimeZeroOne = alpha;
  622. effect.setFloat('cosTimeZeroOne', cosTimeZeroOne);
  623. };
  624. return _this;
  625. }
  626. return DigitalRainPostProcess;
  627. }(babylonjs_1.PostProcess));
  628. exports.DigitalRainPostProcess = DigitalRainPostProcess;
  629. /***/ }),
  630. /***/ "./src/digitalRain/digitalrain.fragment.fx":
  631. /*!*************************************************!*\
  632. !*** ./src/digitalRain/digitalrain.fragment.fx ***!
  633. \*************************************************/
  634. /*! no static exports found */
  635. /***/ (function(module, exports) {
  636. module.exports = "\nvarying vec2 vUV;\nuniform sampler2D textureSampler;\nuniform sampler2D digitalRainFont;\n\nuniform vec4 digitalRainFontInfos;\nuniform vec4 digitalRainOptions;\nuniform mat4 matrixSpeed;\nuniform float cosTimeZeroOne;\n\nfloat getLuminance(vec3 color)\n{\nreturn clamp(dot(color,vec3(0.2126,0.7152,0.0722)),0.,1.);\n}\n\nvoid main(void) \n{\nfloat caracterSize=digitalRainFontInfos.x;\nfloat numChar=digitalRainFontInfos.y-1.0;\nfloat fontx=digitalRainFontInfos.z;\nfloat fonty=digitalRainFontInfos.w;\nfloat screenx=digitalRainOptions.x;\nfloat screeny=digitalRainOptions.y;\nfloat ratio=screeny/fonty;\nfloat columnx=float(floor((gl_FragCoord.x)/caracterSize));\nfloat tileX=float(floor((gl_FragCoord.x)/caracterSize))*caracterSize/screenx;\nfloat tileY=float(floor((gl_FragCoord.y)/caracterSize))*caracterSize/screeny;\nvec2 tileUV=vec2(tileX,tileY);\nvec4 tileColor=texture2D(textureSampler,tileUV);\nvec4 baseColor=texture2D(textureSampler,vUV);\nfloat tileLuminance=getLuminance(tileColor.rgb);\nint st=int(mod(columnx,4.0));\nfloat speed=cosTimeZeroOne*(sin(tileX*314.5)*0.5+0.6); \nfloat x=float(mod(gl_FragCoord.x,caracterSize))/fontx;\nfloat y=float(mod(speed+gl_FragCoord.y/screeny,1.0));\ny*=ratio;\nvec4 finalColor=texture2D(digitalRainFont,vec2(x,1.0-y));\nvec3 high=finalColor.rgb*(vec3(1.2,1.2,1.2)*pow(1.0-y,30.0));\nfinalColor.rgb*=vec3(pow(tileLuminance,5.0),pow(tileLuminance,1.5),pow(tileLuminance,3.0));\nfinalColor.rgb+=high;\nfinalColor.rgb=clamp(finalColor.rgb,0.,1.);\nfinalColor.a=1.0;\nfinalColor=mix(finalColor,tileColor,digitalRainOptions.w);\nfinalColor=mix(finalColor,baseColor,digitalRainOptions.z);\ngl_FragColor=finalColor;\n}"
  637. /***/ }),
  638. /***/ "./src/digitalRain/index.ts":
  639. /*!**********************************!*\
  640. !*** ./src/digitalRain/index.ts ***!
  641. \**********************************/
  642. /*! no static exports found */
  643. /***/ (function(module, exports, __webpack_require__) {
  644. "use strict";
  645. function __export(m) {
  646. for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
  647. }
  648. Object.defineProperty(exports, "__esModule", { value: true });
  649. __export(__webpack_require__(/*! ./digitalRainPostProcess */ "./src/digitalRain/digitalRainPostProcess.ts"));
  650. /***/ }),
  651. /***/ "./src/index.ts":
  652. /*!**********************!*\
  653. !*** ./src/index.ts ***!
  654. \**********************/
  655. /*! no static exports found */
  656. /***/ (function(module, exports, __webpack_require__) {
  657. "use strict";
  658. function __export(m) {
  659. for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
  660. }
  661. Object.defineProperty(exports, "__esModule", { value: true });
  662. __export(__webpack_require__(/*! ./asciiArt */ "./src/asciiArt/index.ts"));
  663. __export(__webpack_require__(/*! ./digitalRain */ "./src/digitalRain/index.ts"));
  664. /***/ }),
  665. /***/ "babylonjs":
  666. /*!****************************************************************************************************!*\
  667. !*** external {"root":"BABYLON","commonjs":"babylonjs","commonjs2":"babylonjs","amd":"babylonjs"} ***!
  668. \****************************************************************************************************/
  669. /*! no static exports found */
  670. /***/ (function(module, exports) {
  671. module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs__;
  672. /***/ })
  673. /******/ });
  674. });
  675. //# sourceMappingURL=babylonjs.postProcess.js.map