@0b5vr/tweakpane-plugin-profiler

// https://github.com/0b5vr/tweakpane-plugin-profiler
// Ctrl+S or Ctrl+R to apply changes

// == setup tweakpane and the plugin ===============================================================
const pane = new Tweakpane.Pane();

pane.registerPlugin( TweakpaneProfilerBladePlugin );

const profiler = pane.addBlade( {
  view: 'profiler',
  label: 'profiler',
  targetDelta: 1, // 16ms by default
} );

console.log( profiler );

// == random expensive functions ===================================================================
function abuseRandom() {
  let sum = 0.0;
  for ( let sum = 0; sum < 1E4; sum ++ ) {
    sum += Math.random();
  }
}

function abuseSin() {
  let sum = 0.0;
  for ( let sum = 0; sum < 1E4; sum ++ ) {
    sum += Math.sin( 1.0 );
  }
}

function abuseFind() {
  for ( let sum = 0; sum < 1E4; sum ++ ) {
    /define/.test( 'undefined' );
  }
}

// == update =======================================================================================
let stop = false;

function update() {
  if ( stop ) { return; }

// the lambda inside the `profiler.measure` is measured
  profiler.measure( 'update', () => {
    // the `profiler.measure` can be nested and displayed in a hierarchy
    profiler.measure( 'math', () => {
      // even more hierarchy
      profiler.measure( 'abuseRandom', () => {
        abuseRandom();
      } );

// another item on the same level
      profiler.measure( 'abuseSin', () => {
        abuseSin();
      } );
    } );

// you can use a more classic way as well
    profiler.measureStart( 'abuseFind' );
    abuseFind();
    profiler.measureEnd();
  } );

requestAnimationFrame( update );
}
requestAnimationFrame( update );

// == unload handler ===============================================================================
playground.onUnload = () => {
  stop = true;
  pane.dispose();
};