Home Reference Source

cables_dev/cables_ui/src/ui/components/tabs/tab_profiler_drawcalls.js

  1. import { uuid } from "cables/src/core/utils.js";
  2. import { ele } from "cables-shared-client";
  3. import defaultOps from "../../defaultops.js";
  4. import Tab from "../../elements/tabpanel/tab.js";
  5. import { gui } from "../../gui.js";
  7. export class ProfilerDrawCalls
  8. {
  10.     /**
  11.      * @param {import("../../elements/tabpanel/tabpanel.js").default} tabs
  12.      */
  13.     constructor(tabs)
  14.     {
  15.         this._tab = new Tab("GPU Profiler", { "icon": "pie-chart", "singleton": true, "infotext": "tab_profiler", "padding": true });
  16.         tabs.addTab(this._tab, true);
  18.         const glQueryExt = gui.corePatch().cgl.gl.getExtension("EXT_disjoint_timer_query_webgl2");
  19.         if (glQueryExt)gui.corePatch().cgl.profileData.doProfileGlQuery = true;
  21.         // gui.corePatch().cgl.profileData.glQueryData = {};
  22.         // this.update();
  23.         let html = "<div class=\"tabContentScrollContainer\"><h2>Drawcalls</h2>";
  24.         html += "<a id=\"updatedc\" class=\"cblbutton\" >update</a>";
  25.         html += "<div id=\"dcresults\"></div>";
  27.         this._tab.html(html);
  28.         ele.clickable(ele.byId("updatedc"), () =>
  29.         {
  30.             this.update();
  32.         });
  33.         this.update();
  35.     }
  37.     update()
  38.     {
  39.         // const glQueryData = gui.corePatch().cgl.profileData.glQueryData;
  40.         const cgl = gui.corePatch().cgl;
  42.         const l1 = cgl.on("beginFrame", () =>
  43.         {
  45.             cgl.off(l1);
  46.             cgl.profileData.profileDrawCalls = [];
  48.             const l2 = cgl.on("endFrame", () =>
  49.             {
  50.                 console.log("sresresr", gui.corePatch().cgl.profileData.profileDrawCalls);
  51.                 cgl.off(l2);
  52.                 const calls = gui.corePatch().cgl.profileData.profileDrawCalls;
  54.                 let html = "";
  55.                 html += calls.length + " drawcalls";
  57.                 html += "<div class=\"editor_spreadsheet\">";
  58.                 html += "<table class=\"spreadsheet\">";
  59.                 html += "<tr>";
  60.                 html += "<td class=\"colname\">mesh</td>";
  61.                 html += "<td class=\"colname\">shader</td>";
  62.                 html += "<td class=\"colname\">verts</td>";
  63.                 html += "<td class=\"colname\">instances </td>";
  64.                 html += "<td class=\"colname\"></td>";
  65.                 html += "</tr>";
  67.                 for (let i = 0; i < calls.length; i++)
  68.                 {
  70.                     html += "<tr>";
  71.                     html += "<td>" + calls[i].name + "</td>";
  72.                     html += "<td>" + calls[i].shader + "</td>";
  73.                     html += "<td>" + calls[i].verts + "</td>";
  74.                     html += "<td>" + calls[i].instances || 1 + "</td>";
  75.                     if (calls[i].opId)html += "<td><a onclick=\"gui.patchView.focusOpAnim('" + calls[i].opId + "');gui.patchView.centerSelectOp('" + calls[i].opId + "');\" class=\"cblbutton\" >mesh</a></td>";
  76.                     html += "</tr>";
  77.                 }
  78.                 ele.byId("dcresults").innerHTML = html;
  79.                 cgl.profileData.profileDrawCalls = null;
  81.             });
  82.         });
  83.     }
  84. }