babylon.debugLayer.js 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663
  1. var BABYLON;
  2. (function (BABYLON) {
  3. var DebugLayer = (function () {
  4. function DebugLayer(scene) {
  5. var _this = this;
  6. this._enabled = false;
  7. this._labelsEnabled = false;
  8. this._displayStatistics = true;
  9. this._displayTree = false;
  10. this._displayLogs = false;
  11. this._identityMatrix = BABYLON.Matrix.Identity();
  12. this.axisRatio = 0.02;
  13. this._scene = scene;
  14. this._syncPositions = function () {
  15. var engine = _this._scene.getEngine();
  16. var canvasRect = engine.getRenderingCanvasClientRect();
  17. if (_this._showUI) {
  18. _this._statsDiv.style.left = (canvasRect.right - 310) + "px";
  19. _this._statsDiv.style.top = (canvasRect.bottom - 370) + "px";
  20. _this._statsDiv.style.width = "300px";
  21. _this._statsDiv.style.height = "360px";
  22. _this._statsSubsetDiv.style.maxHeight = (canvasRect.height - 60) + "px";
  23. _this._optionsDiv.style.left = "0px";
  24. _this._optionsDiv.style.top = "10px";
  25. _this._optionsDiv.style.width = "200px";
  26. _this._optionsDiv.style.height = "auto";
  27. _this._optionsSubsetDiv.style.maxHeight = (canvasRect.height * 0.6) + "px";
  28. _this._logDiv.style.left = "0px";
  29. _this._logDiv.style.top = (canvasRect.bottom - 170) + "px";
  30. _this._logDiv.style.width = "600px";
  31. _this._logDiv.style.height = "160px";
  32. _this._treeDiv.style.left = (canvasRect.right - 310) + "px";
  33. _this._treeDiv.style.top = "10px";
  34. _this._treeDiv.style.width = "300px";
  35. _this._treeDiv.style.height = "auto";
  36. }
  37. _this._globalDiv.style.left = canvasRect.left + "px";
  38. _this._globalDiv.style.top = canvasRect.top + "px";
  39. _this._drawingCanvas.style.left = "0px";
  40. _this._drawingCanvas.style.top = "0px";
  41. _this._drawingCanvas.style.width = engine.getRenderWidth() + "px";
  42. _this._drawingCanvas.style.height = engine.getRenderHeight() + "px";
  43. var devicePixelRatio = window.devicePixelRatio || 1;
  44. var context = _this._drawingContext;
  45. var backingStoreRatio = context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1;
  46. _this._ratio = devicePixelRatio / backingStoreRatio;
  47. _this._drawingCanvas.width = engine.getRenderWidth() * _this._ratio;
  48. _this._drawingCanvas.height = engine.getRenderHeight() * _this._ratio;
  49. };
  50. this._onCanvasClick = function (evt) {
  51. _this._clickPosition = {
  52. x: evt.clientX * _this._ratio,
  53. y: evt.clientY * _this._ratio
  54. };
  55. };
  56. this._syncData = function () {
  57. if (_this._showUI) {
  58. if (_this._displayStatistics) {
  59. _this._displayStats();
  60. _this._statsDiv.style.display = "";
  61. } else {
  62. _this._statsDiv.style.display = "none";
  63. }
  64. if (_this._displayLogs) {
  65. _this._logDiv.style.display = "";
  66. } else {
  67. _this._logDiv.style.display = "none";
  68. }
  69. if (_this._displayTree) {
  70. _this._treeDiv.style.display = "";
  71. if (_this._needToRefreshMeshesTree) {
  72. _this._needToRefreshMeshesTree = false;
  73. _this._refreshMeshesTreeContent();
  74. }
  75. } else {
  76. _this._treeDiv.style.display = "none";
  77. }
  78. }
  79. if (_this._labelsEnabled || !_this._showUI) {
  80. _this._drawingContext.clearRect(0, 0, _this._drawingCanvas.width, _this._drawingCanvas.height);
  81. var engine = _this._scene.getEngine();
  82. var viewport = _this._scene.activeCamera.viewport;
  83. var globalViewport = viewport.toGlobal(engine);
  84. // Meshes
  85. var meshes = _this._scene.getActiveMeshes();
  86. for (var index = 0; index < meshes.length; index++) {
  87. var mesh = meshes.data[index];
  88. var position = mesh.getBoundingInfo().boundingSphere.center;
  89. var projectedPosition = BABYLON.Vector3.Project(position, mesh.getWorldMatrix(), _this._scene.getTransformMatrix(), globalViewport);
  90. if (mesh.renderOverlay || _this.shouldDisplayAxis && _this.shouldDisplayAxis(mesh)) {
  91. _this._renderAxis(projectedPosition, mesh, globalViewport);
  92. }
  93. if (!_this.shouldDisplayLabel || _this.shouldDisplayLabel(mesh)) {
  94. _this._renderLabel(mesh.name, projectedPosition, 12, function () {
  95. mesh.renderOverlay = !mesh.renderOverlay;
  96. }, function () {
  97. return mesh.renderOverlay ? 'red' : 'black';
  98. });
  99. }
  100. }
  101. // Cameras
  102. var cameras = _this._scene.cameras;
  103. for (index = 0; index < cameras.length; index++) {
  104. var camera = cameras[index];
  105. if (camera === _this._scene.activeCamera) {
  106. continue;
  107. }
  108. projectedPosition = BABYLON.Vector3.Project(camera.position, _this._identityMatrix, _this._scene.getTransformMatrix(), globalViewport);
  109. if (!_this.shouldDisplayLabel || _this.shouldDisplayLabel(camera)) {
  110. _this._renderLabel(camera.name, projectedPosition, 12, function () {
  111. _this._scene.activeCamera.detachControl(engine.getRenderingCanvas());
  112. _this._scene.activeCamera = camera;
  113. _this._scene.activeCamera.attachControl(engine.getRenderingCanvas());
  114. }, function () {
  115. return "purple";
  116. });
  117. }
  118. }
  119. // Lights
  120. var lights = _this._scene.lights;
  121. for (index = 0; index < lights.length; index++) {
  122. var light = lights[index];
  123. if (light.position) {
  124. projectedPosition = BABYLON.Vector3.Project(light.position, _this._identityMatrix, _this._scene.getTransformMatrix(), globalViewport);
  125. if (!_this.shouldDisplayLabel || _this.shouldDisplayLabel(light)) {
  126. _this._renderLabel(light.name, projectedPosition, -20, function () {
  127. light.setEnabled(!light.isEnabled());
  128. }, function () {
  129. return light.isEnabled() ? "orange" : "gray";
  130. });
  131. }
  132. }
  133. }
  134. }
  135. _this._clickPosition = undefined;
  136. };
  137. }
  138. DebugLayer.prototype._refreshMeshesTreeContent = function () {
  139. // Add meshes
  140. var sortedArray = this._scene.meshes.slice(0, this._scene.meshes.length);
  141. sortedArray.sort(function (a, b) {
  142. if (a.name === b.name) {
  143. return 0;
  144. }
  145. return (a.name > b.name) ? 1 : -1;
  146. });
  147. for (var index = 0; index < sortedArray.length; index++) {
  148. var mesh = sortedArray[index];
  149. if (!mesh.isEnabled()) {
  150. continue;
  151. }
  152. this._generateAdvancedCheckBox(this._treeSubsetDiv, mesh.name, mesh.getTotalVertices() + " verts", mesh.isVisible, function (element, mesh) {
  153. mesh.isVisible = element.checked;
  154. }, mesh);
  155. }
  156. };
  157. DebugLayer.prototype._renderSingleAxis = function (zero, unit, unitText, label, color) {
  158. this._drawingContext.beginPath();
  159. this._drawingContext.moveTo(zero.x, zero.y);
  160. this._drawingContext.lineTo(unit.x, unit.y);
  161. this._drawingContext.strokeStyle = color;
  162. this._drawingContext.lineWidth = 4;
  163. this._drawingContext.stroke();
  164. this._drawingContext.font = "normal 14px Segoe UI";
  165. this._drawingContext.fillStyle = color;
  166. this._drawingContext.fillText(label, unitText.x, unitText.y);
  167. };
  168. DebugLayer.prototype._renderAxis = function (projectedPosition, mesh, globalViewport) {
  169. var position = mesh.getBoundingInfo().boundingSphere.center;
  170. var worldMatrix = mesh.getWorldMatrix();
  171. var unprojectedVector = BABYLON.Vector3.UnprojectFromTransform(projectedPosition.add(new BABYLON.Vector3(this._drawingCanvas.width * this.axisRatio, 0, 0)), globalViewport.width, globalViewport.height, worldMatrix, this._scene.getTransformMatrix());
  172. var unit = (unprojectedVector.subtract(position)).length();
  173. var xAxis = BABYLON.Vector3.Project(position.add(new BABYLON.Vector3(unit, 0, 0)), worldMatrix, this._scene.getTransformMatrix(), globalViewport);
  174. var xAxisText = BABYLON.Vector3.Project(position.add(new BABYLON.Vector3(unit * 1.5, 0, 0)), worldMatrix, this._scene.getTransformMatrix(), globalViewport);
  175. this._renderSingleAxis(projectedPosition, xAxis, xAxisText, "x", "#FF0000");
  176. var yAxis = BABYLON.Vector3.Project(position.add(new BABYLON.Vector3(0, unit, 0)), worldMatrix, this._scene.getTransformMatrix(), globalViewport);
  177. var yAxisText = BABYLON.Vector3.Project(position.add(new BABYLON.Vector3(0, unit * 1.5, 0)), worldMatrix, this._scene.getTransformMatrix(), globalViewport);
  178. this._renderSingleAxis(projectedPosition, yAxis, yAxisText, "y", "#00FF00");
  179. var zAxis = BABYLON.Vector3.Project(position.add(new BABYLON.Vector3(0, 0, unit)), worldMatrix, this._scene.getTransformMatrix(), globalViewport);
  180. var zAxisText = BABYLON.Vector3.Project(position.add(new BABYLON.Vector3(0, 0, unit * 1.5)), worldMatrix, this._scene.getTransformMatrix(), globalViewport);
  181. this._renderSingleAxis(projectedPosition, zAxis, zAxisText, "z", "#0000FF");
  182. };
  183. DebugLayer.prototype._renderLabel = function (text, projectedPosition, labelOffset, onClick, getFillStyle) {
  184. if (projectedPosition.z > 0 && projectedPosition.z < 1.0) {
  185. this._drawingContext.font = "normal 12px Segoe UI";
  186. var textMetrics = this._drawingContext.measureText(text);
  187. var centerX = projectedPosition.x - textMetrics.width / 2;
  188. var centerY = projectedPosition.y;
  189. if (this._isClickInsideRect(centerX - 5, centerY - labelOffset - 12, textMetrics.width + 10, 17)) {
  190. onClick();
  191. }
  192. this._drawingContext.beginPath();
  193. this._drawingContext.rect(centerX - 5, centerY - labelOffset - 12, textMetrics.width + 10, 17);
  194. this._drawingContext.fillStyle = getFillStyle();
  195. this._drawingContext.globalAlpha = 0.5;
  196. this._drawingContext.fill();
  197. this._drawingContext.globalAlpha = 1.0;
  198. this._drawingContext.strokeStyle = '#FFFFFF';
  199. this._drawingContext.lineWidth = 1;
  200. this._drawingContext.stroke();
  201. this._drawingContext.fillStyle = "#FFFFFF";
  202. this._drawingContext.fillText(text, centerX, centerY - labelOffset);
  203. this._drawingContext.beginPath();
  204. this._drawingContext.arc(projectedPosition.x, centerY, 5, 0, 2 * Math.PI, false);
  205. this._drawingContext.fill();
  206. }
  207. };
  208. DebugLayer.prototype._isClickInsideRect = function (x, y, width, height) {
  209. if (!this._clickPosition) {
  210. return false;
  211. }
  212. if (this._clickPosition.x < x || this._clickPosition.x > x + width) {
  213. return false;
  214. }
  215. if (this._clickPosition.y < y || this._clickPosition.y > y + height) {
  216. return false;
  217. }
  218. return true;
  219. };
  220. DebugLayer.prototype.isVisible = function () {
  221. return this._enabled;
  222. };
  223. DebugLayer.prototype.hide = function () {
  224. if (!this._enabled) {
  225. return;
  226. }
  227. this._enabled = false;
  228. var engine = this._scene.getEngine();
  229. this._scene.unregisterAfterRender(this._syncData);
  230. document.body.removeChild(this._globalDiv);
  231. window.removeEventListener("resize", this._syncPositions);
  232. this._scene.forceShowBoundingBoxes = false;
  233. this._scene.forceWireframe = false;
  234. BABYLON.StandardMaterial.DiffuseTextureEnabled = true;
  235. BABYLON.StandardMaterial.AmbientTextureEnabled = true;
  236. BABYLON.StandardMaterial.SpecularTextureEnabled = true;
  237. BABYLON.StandardMaterial.EmissiveTextureEnabled = true;
  238. BABYLON.StandardMaterial.BumpTextureEnabled = true;
  239. BABYLON.StandardMaterial.OpacityTextureEnabled = true;
  240. BABYLON.StandardMaterial.ReflectionTextureEnabled = true;
  241. this._scene.shadowsEnabled = true;
  242. this._scene.particlesEnabled = true;
  243. this._scene.postProcessesEnabled = true;
  244. this._scene.collisionsEnabled = true;
  245. this._scene.lightsEnabled = true;
  246. this._scene.texturesEnabled = true;
  247. this._scene.lensFlaresEnabled = true;
  248. this._scene.proceduralTexturesEnabled = true;
  249. this._scene.renderTargetsEnabled = true;
  250. engine.getRenderingCanvas().removeEventListener("click", this._onCanvasClick);
  251. };
  252. DebugLayer.prototype.show = function (showUI) {
  253. if (typeof showUI === "undefined") { showUI = true; }
  254. if (this._enabled) {
  255. return;
  256. }
  257. this._enabled = true;
  258. this._showUI = showUI;
  259. var engine = this._scene.getEngine();
  260. this._scene.registerAfterRender(this._syncData);
  261. this._globalDiv = document.createElement("div");
  262. document.body.appendChild(this._globalDiv);
  263. this._generateDOMelements();
  264. window.addEventListener("resize", this._syncPositions);
  265. engine.getRenderingCanvas().addEventListener("click", this._onCanvasClick);
  266. this._syncPositions();
  267. };
  268. DebugLayer.prototype._clearLabels = function () {
  269. this._drawingContext.clearRect(0, 0, this._drawingCanvas.width, this._drawingCanvas.height);
  270. for (var index = 0; index < this._scene.meshes.length; index++) {
  271. var mesh = this._scene.meshes[index];
  272. mesh.renderOverlay = false;
  273. }
  274. };
  275. DebugLayer.prototype._generateheader = function (root, text) {
  276. var header = document.createElement("div");
  277. header.innerHTML = text + "&nbsp;";
  278. header.style.textAlign = "right";
  279. header.style.width = "100%";
  280. header.style.color = "white";
  281. header.style.backgroundColor = "Black";
  282. header.style.padding = "5px 5px 4px 0px";
  283. header.style.marginLeft = "-5px";
  284. root.appendChild(header);
  285. };
  286. DebugLayer.prototype._generateTexBox = function (root, title) {
  287. var label = document.createElement("label");
  288. label.innerHTML = title;
  289. root.appendChild(label);
  290. root.appendChild(document.createElement("br"));
  291. };
  292. DebugLayer.prototype._generateAdvancedCheckBox = function (root, leftTitle, rightTitle, initialState, task, tag) {
  293. if (typeof tag === "undefined") { tag = null; }
  294. var label = document.createElement("label");
  295. var boundingBoxesCheckbox = document.createElement("input");
  296. boundingBoxesCheckbox.type = "checkbox";
  297. boundingBoxesCheckbox.checked = initialState;
  298. boundingBoxesCheckbox.addEventListener("change", function (evt) {
  299. task(evt.target, tag);
  300. });
  301. label.appendChild(boundingBoxesCheckbox);
  302. var container = document.createElement("span");
  303. var leftPart = document.createElement("span");
  304. var rightPart = document.createElement("span");
  305. rightPart.style.cssFloat = "right";
  306. leftPart.innerHTML = leftTitle;
  307. rightPart.innerHTML = rightTitle;
  308. container.appendChild(leftPart);
  309. container.appendChild(rightPart);
  310. label.appendChild(container);
  311. root.appendChild(label);
  312. root.appendChild(document.createElement("br"));
  313. };
  314. DebugLayer.prototype._generateCheckBox = function (root, title, initialState, task, tag) {
  315. if (typeof tag === "undefined") { tag = null; }
  316. var label = document.createElement("label");
  317. var boundingBoxesCheckbox = document.createElement("input");
  318. boundingBoxesCheckbox.type = "checkbox";
  319. boundingBoxesCheckbox.checked = initialState;
  320. boundingBoxesCheckbox.addEventListener("change", function (evt) {
  321. task(evt.target, tag);
  322. });
  323. label.appendChild(boundingBoxesCheckbox);
  324. label.appendChild(document.createTextNode(title));
  325. root.appendChild(label);
  326. root.appendChild(document.createElement("br"));
  327. };
  328. DebugLayer.prototype._generateRadio = function (root, title, name, initialState, task, tag) {
  329. if (typeof tag === "undefined") { tag = null; }
  330. var label = document.createElement("label");
  331. var boundingBoxesRadio = document.createElement("input");
  332. boundingBoxesRadio.type = "radio";
  333. boundingBoxesRadio.name = name;
  334. boundingBoxesRadio.checked = initialState;
  335. boundingBoxesRadio.addEventListener("change", function (evt) {
  336. task(evt.target, tag);
  337. });
  338. label.appendChild(boundingBoxesRadio);
  339. label.appendChild(document.createTextNode(title));
  340. root.appendChild(label);
  341. root.appendChild(document.createElement("br"));
  342. };
  343. DebugLayer.prototype._generateDOMelements = function () {
  344. var _this = this;
  345. this._globalDiv.id = "DebugLayer";
  346. // Drawing canvas
  347. this._drawingCanvas = document.createElement("canvas");
  348. this._drawingCanvas.id = "DebugLayerDrawingCanvas";
  349. this._drawingCanvas.style.position = "absolute";
  350. this._drawingCanvas.style.pointerEvents = "none";
  351. this._drawingContext = this._drawingCanvas.getContext("2d");
  352. this._globalDiv.appendChild(this._drawingCanvas);
  353. if (this._showUI) {
  354. var background = "rgba(128, 128, 128, 0.4)";
  355. var border = "rgb(180, 180, 180) solid 1px";
  356. // Stats
  357. this._statsDiv = document.createElement("div");
  358. this._statsDiv.id = "DebugLayerStats";
  359. this._statsDiv.style.border = border;
  360. this._statsDiv.style.position = "absolute";
  361. this._statsDiv.style.background = background;
  362. this._statsDiv.style.padding = "0px 0px 0px 5px";
  363. this._statsDiv.style.pointerEvents = "none";
  364. this._statsDiv.style.overflowY = "auto";
  365. this._generateheader(this._statsDiv, "Statistics");
  366. this._statsSubsetDiv = document.createElement("div");
  367. this._statsSubsetDiv.style.paddingTop = "5px";
  368. this._statsSubsetDiv.style.paddingBottom = "5px";
  369. this._statsDiv.appendChild(this._statsSubsetDiv);
  370. // Tree
  371. this._treeDiv = document.createElement("div");
  372. this._treeDiv.id = "DebugLayerTree";
  373. this._treeDiv.style.border = border;
  374. this._treeDiv.style.position = "absolute";
  375. this._treeDiv.style.background = background;
  376. this._treeDiv.style.padding = "0px 0px 0px 5px";
  377. this._treeDiv.style.display = "none";
  378. this._generateheader(this._treeDiv, "Meshes tree");
  379. this._treeSubsetDiv = document.createElement("div");
  380. this._treeSubsetDiv.style.paddingTop = "5px";
  381. this._treeSubsetDiv.style.paddingRight = "5px";
  382. this._treeSubsetDiv.style.overflowY = "auto";
  383. this._treeSubsetDiv.style.maxHeight = "300px";
  384. this._treeDiv.appendChild(this._treeSubsetDiv);
  385. this._needToRefreshMeshesTree = true;
  386. // Logs
  387. this._logDiv = document.createElement("div");
  388. this._logDiv.style.border = border;
  389. this._logDiv.id = "DebugLayerLogs";
  390. this._logDiv.style.position = "absolute";
  391. this._logDiv.style.background = background;
  392. this._logDiv.style.padding = "0px 0px 0px 5px";
  393. this._logDiv.style.display = "none";
  394. this._generateheader(this._logDiv, "Logs");
  395. this._logSubsetDiv = document.createElement("div");
  396. this._logSubsetDiv.style.paddingTop = "5px";
  397. this._logSubsetDiv.style.overflowY = "auto";
  398. this._logSubsetDiv.style.fontSize = "12px";
  399. this._logSubsetDiv.style.fontFamily = "consolas";
  400. this._logSubsetDiv.innerHTML = BABYLON.Tools.LogCache;
  401. this._logDiv.appendChild(this._logSubsetDiv);
  402. BABYLON.Tools.OnNewCacheEntry = function (entry) {
  403. _this._logSubsetDiv.innerHTML = entry + _this._logSubsetDiv.innerHTML;
  404. };
  405. // Options
  406. this._optionsDiv = document.createElement("div");
  407. this._optionsDiv.id = "DebugLayerOptions";
  408. this._optionsDiv.style.border = border;
  409. this._optionsDiv.style.position = "absolute";
  410. this._optionsDiv.style.background = background;
  411. this._optionsDiv.style.padding = "0px 0px 0px 5px";
  412. this._optionsDiv.style.overflowY = "auto";
  413. this._generateheader(this._optionsDiv, "Options");
  414. this._optionsSubsetDiv = document.createElement("div");
  415. this._optionsSubsetDiv.style.paddingTop = "5px";
  416. this._optionsSubsetDiv.style.paddingBottom = "5px";
  417. this._optionsSubsetDiv.style.overflowY = "auto";
  418. this._optionsSubsetDiv.style.maxHeight = "200px";
  419. this._optionsDiv.appendChild(this._optionsSubsetDiv);
  420. this._generateTexBox(this._optionsSubsetDiv, "<b>General:</b>");
  421. this._generateCheckBox(this._optionsSubsetDiv, "Statistics", this._displayStatistics, function (element) {
  422. _this._displayStatistics = element.checked;
  423. });
  424. this._generateCheckBox(this._optionsSubsetDiv, "Logs", this._displayLogs, function (element) {
  425. _this._displayLogs = element.checked;
  426. });
  427. this._generateCheckBox(this._optionsSubsetDiv, "Meshes tree", this._displayTree, function (element) {
  428. _this._displayTree = element.checked;
  429. _this._needToRefreshMeshesTree = true;
  430. });
  431. this._generateCheckBox(this._optionsSubsetDiv, "Bounding boxes", this._scene.forceShowBoundingBoxes, function (element) {
  432. _this._scene.forceShowBoundingBoxes = element.checked;
  433. });
  434. this._generateCheckBox(this._optionsSubsetDiv, "Clickable labels", this._labelsEnabled, function (element) {
  435. _this._labelsEnabled = element.checked;
  436. if (!_this._labelsEnabled) {
  437. _this._clearLabels();
  438. }
  439. });
  440. this._generateCheckBox(this._optionsSubsetDiv, "Generate user marks", BABYLON.Tools.PerformanceLogLevel === BABYLON.Tools.PerformanceUserMarkLogLevel, function (element) {
  441. if (element.checked) {
  442. BABYLON.Tools.PerformanceLogLevel = BABYLON.Tools.PerformanceUserMarkLogLevel;
  443. } else {
  444. BABYLON.Tools.PerformanceLogLevel = BABYLON.Tools.PerformanceNoneLogLevel;
  445. }
  446. });
  447. ;
  448. this._optionsSubsetDiv.appendChild(document.createElement("br"));
  449. this._generateTexBox(this._optionsSubsetDiv, "<b>Rendering mode:</b>");
  450. this._generateRadio(this._optionsSubsetDiv, "Solid", "renderMode", !this._scene.forceWireframe && !this._scene.forcePointsCloud, function (element) {
  451. if (element.checked) {
  452. _this._scene.forceWireframe = false;
  453. _this._scene.forcePointsCloud = false;
  454. }
  455. });
  456. this._generateRadio(this._optionsSubsetDiv, "Wireframe", "renderMode", this._scene.forceWireframe, function (element) {
  457. if (element.checked) {
  458. _this._scene.forceWireframe = true;
  459. _this._scene.forcePointsCloud = false;
  460. }
  461. });
  462. this._generateRadio(this._optionsSubsetDiv, "Point", "renderMode", this._scene.forcePointsCloud, function (element) {
  463. if (element.checked) {
  464. _this._scene.forceWireframe = false;
  465. _this._scene.forcePointsCloud = true;
  466. }
  467. });
  468. this._optionsSubsetDiv.appendChild(document.createElement("br"));
  469. this._generateTexBox(this._optionsSubsetDiv, "<b>Texture channels:</b>");
  470. this._generateCheckBox(this._optionsSubsetDiv, "Diffuse", BABYLON.StandardMaterial.DiffuseTextureEnabled, function (element) {
  471. BABYLON.StandardMaterial.DiffuseTextureEnabled = element.checked;
  472. });
  473. this._generateCheckBox(this._optionsSubsetDiv, "Ambient", BABYLON.StandardMaterial.AmbientTextureEnabled, function (element) {
  474. BABYLON.StandardMaterial.AmbientTextureEnabled = element.checked;
  475. });
  476. this._generateCheckBox(this._optionsSubsetDiv, "Specular", BABYLON.StandardMaterial.SpecularTextureEnabled, function (element) {
  477. BABYLON.StandardMaterial.SpecularTextureEnabled = element.checked;
  478. });
  479. this._generateCheckBox(this._optionsSubsetDiv, "Emissive", BABYLON.StandardMaterial.EmissiveTextureEnabled, function (element) {
  480. BABYLON.StandardMaterial.EmissiveTextureEnabled = element.checked;
  481. });
  482. this._generateCheckBox(this._optionsSubsetDiv, "Bump", BABYLON.StandardMaterial.BumpTextureEnabled, function (element) {
  483. BABYLON.StandardMaterial.BumpTextureEnabled = element.checked;
  484. });
  485. this._generateCheckBox(this._optionsSubsetDiv, "Opacity", BABYLON.StandardMaterial.OpacityTextureEnabled, function (element) {
  486. BABYLON.StandardMaterial.OpacityTextureEnabled = element.checked;
  487. });
  488. this._generateCheckBox(this._optionsSubsetDiv, "Reflection", BABYLON.StandardMaterial.ReflectionTextureEnabled, function (element) {
  489. BABYLON.StandardMaterial.ReflectionTextureEnabled = element.checked;
  490. });
  491. this._generateCheckBox(this._optionsSubsetDiv, "Fresnel", BABYLON.StandardMaterial.FresnelEnabled, function (element) {
  492. BABYLON.StandardMaterial.FresnelEnabled = element.checked;
  493. });
  494. this._optionsSubsetDiv.appendChild(document.createElement("br"));
  495. this._generateTexBox(this._optionsSubsetDiv, "<b>Options:</b>");
  496. this._generateCheckBox(this._optionsSubsetDiv, "Animations", this._scene.animationsEnabled, function (element) {
  497. _this._scene.animationsEnabled = element.checked;
  498. });
  499. this._generateCheckBox(this._optionsSubsetDiv, "Collisions", this._scene.collisionsEnabled, function (element) {
  500. _this._scene.collisionsEnabled = element.checked;
  501. });
  502. this._generateCheckBox(this._optionsSubsetDiv, "Fog", this._scene.fogEnabled, function (element) {
  503. _this._scene.fogEnabled = element.checked;
  504. });
  505. this._generateCheckBox(this._optionsSubsetDiv, "Lens flares", this._scene.lensFlaresEnabled, function (element) {
  506. _this._scene.lensFlaresEnabled = element.checked;
  507. });
  508. this._generateCheckBox(this._optionsSubsetDiv, "Lights", this._scene.lightsEnabled, function (element) {
  509. _this._scene.lightsEnabled = element.checked;
  510. });
  511. this._generateCheckBox(this._optionsSubsetDiv, "Particles", this._scene.particlesEnabled, function (element) {
  512. _this._scene.particlesEnabled = element.checked;
  513. });
  514. this._generateCheckBox(this._optionsSubsetDiv, "Post-processes", this._scene.postProcessesEnabled, function (element) {
  515. _this._scene.postProcessesEnabled = element.checked;
  516. });
  517. this._generateCheckBox(this._optionsSubsetDiv, "Procedural textures", this._scene.proceduralTexturesEnabled, function (element) {
  518. _this._scene.proceduralTexturesEnabled = element.checked;
  519. });
  520. this._generateCheckBox(this._optionsSubsetDiv, "Render targets", this._scene.renderTargetsEnabled, function (element) {
  521. _this._scene.renderTargetsEnabled = element.checked;
  522. });
  523. this._generateCheckBox(this._optionsSubsetDiv, "Shadows", this._scene.shadowsEnabled, function (element) {
  524. _this._scene.shadowsEnabled = element.checked;
  525. });
  526. this._generateCheckBox(this._optionsSubsetDiv, "Skeletons", this._scene.skeletonsEnabled, function (element) {
  527. _this._scene.skeletonsEnabled = element.checked;
  528. });
  529. this._generateCheckBox(this._optionsSubsetDiv, "Textures", this._scene.texturesEnabled, function (element) {
  530. _this._scene.texturesEnabled = element.checked;
  531. });
  532. // Global
  533. this._globalDiv.style.position = "absolute";
  534. this._globalDiv.appendChild(this._statsDiv);
  535. this._globalDiv.appendChild(this._logDiv);
  536. this._globalDiv.appendChild(this._optionsDiv);
  537. this._globalDiv.appendChild(this._treeDiv);
  538. this._globalDiv.style.fontFamily = "Segoe UI, Arial";
  539. this._globalDiv.style.fontSize = "14px";
  540. this._globalDiv.style.color = "white";
  541. }
  542. };
  543. DebugLayer.prototype._displayStats = function () {
  544. var scene = this._scene;
  545. var engine = scene.getEngine();
  546. this._statsSubsetDiv.innerHTML = "Babylon.js v" + BABYLON.Engine.Version + " - <b>" + BABYLON.Tools.Format(BABYLON.Tools.GetFps(), 0) + " fps</b><br><br>" + "Total meshes: " + scene.meshes.length + "<br>" + "Total vertices: " + scene.getTotalVertices() + "<br>" + "Active meshes: " + scene.getActiveMeshes().length + "<br>" + "Active vertices: " + scene.getActiveVertices() + "<br>" + "Active bones: " + scene.getActiveBones() + "<br>" + "Active particles: " + scene.getActiveParticles() + "<br><br>" + "Frame duration: " + BABYLON.Tools.Format(scene.getLastFrameDuration()) + " ms<br>" + "<b>Draw calls: " + engine.drawCalls + "</b><br><br>" + "<i>Evaluate Active Meshes duration:</i> " + BABYLON.Tools.Format(scene.getEvaluateActiveMeshesDuration()) + " ms<br>" + "<i>Render Targets duration:</i> " + BABYLON.Tools.Format(scene.getRenderTargetsDuration()) + " ms<br>" + "<i>Particles duration:</i> " + BABYLON.Tools.Format(scene.getParticlesDuration()) + " ms<br>" + "<i>Sprites duration:</i> " + BABYLON.Tools.Format(scene.getSpritesDuration()) + " ms<br>" + "<i>Render duration:</i> <b>" + BABYLON.Tools.Format(scene.getRenderDuration()) + " ms</b>";
  547. };
  548. return DebugLayer;
  549. })();
  550. BABYLON.DebugLayer = DebugLayer;
  551. })(BABYLON || (BABYLON = {}));
  552. //# sourceMappingURL=babylon.debugLayer.js.map