FpsGraph

A control for monitoring and graphing frame rates over time.

Integrates the FPS Graph control from Tweakpane-creator Hiroki Kokubun's Essentials plugin.

By default, the component creates an internal requestAnimationFrame loop to measure the overall performance of the page. If you want to measure the performance of a specific block of code, you can bind the begin and end props for access to functions to fence the code of interest. (The default internal loop will be cleaned up automatically on the bound functions first use.)

See the <Profiler> component for a more advanced measurement and visualization strategies.

If you'd like to observe or visualize the frame rate data elsewhere, a change event is provided to notify when the FPS value changes.

Usage outside of a <Pane> component will implicitly wrap the FPS graph in <Pane position="inline">.

Note that Svelte Tweakpane UI embeds a functionally identical fork of the plugin with build optimizations. The fork also changes the package name from @tweakpane/plugin-essentials to @kitschpatrol/tweakpane-plugin-essentials for consistency with other plugins.

---

Example

Demo

Code

FpsGraphExample.svelte

<script lang="ts">
  import { onMount } from 'svelte'
  import { FpsGraph, Monitor, Slider } from 'svelte-tweakpane-ui'

  let rotation = 0
  let rotationSpeed = 3
  let phase = 500
  let scale = 1.25
  let intensity = 4

  onMount(() => {
    let animationFrameHandle: number

    function tick() {
      rotation += rotationSpeed
      animationFrameHandle = requestAnimationFrame(tick)
    }

    tick()

    return () => {
      cancelAnimationFrame(animationFrameHandle)
    }
  })

  $: gridSize = intensity ** 2
</script>

<FpsGraph interval={50} label="FPS" rows={5} />
<Slider
  bind:value={intensity}
  min={1}
  max={10}
  label="Intensity (Careful)"
  step={1}
/>
<Monitor
  value={gridSize ** 2}
  format={(v) => v.toFixed(0)}
  label="Boxes (Monitor)"
/>
<Slider bind:value={scale} min={0.25} max={2} label="Scale" />
<Slider bind:value={phase} min={0} max={2000} label="Phase" />
<Slider bind:value={rotationSpeed} label="Rotation Speed" />

<div class="demo">
  {#each Array.from({ length: gridSize }, (_, index) => index) as x}
    {#each Array.from({ length: gridSize }, (_, index) => index) as y}
      <div
        class="box"
        style:left="{(x / gridSize) * 100}%"
        style:scale
        style:top="{(y / gridSize) * 100}%"
        style:transform="rotateZ({rotation +
          (x / gridSize) * phase +
          (y / gridSize) * phase}deg)"
        style:width="{100 / gridSize}%"
      ></div>
    {/each}
  {/each}
</div>

<style>
  .demo {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
    width: 100%;
    background: linear-gradient(to top, gold, rebeccapurple);
  }

  .box {
    position: absolute;
    transform-origin: center;
    aspect-ratio: 1;
    opacity: 0.5;
    background: linear-gradient(to bottom, orange, magenta);
  }
</style>

---

Props

begin optional
Description	Function to start a single frame measurement sample. If undefined, a requestAnimationFrame is used to indicate the overall performance of the page.
Type	((() => void) & (() => void))
Default	undefined

end optional
Description	Function to end a single frame measurement sample. If undefined, a requestAnimationFrame is used to indicate the overall performance of the page.
Type	((() => void) & (() => void))
Default	undefined

min optional
Description	Lower bound of the FPS graph.
Type	number
Default	0

max optional
Description	Upper bound of the FPS graph.
Type	number
Default	90

interval optional
Description	Time in milliseconds between updates to the graph.
Type	number
Default	1000

label optional
Description	Text displayed next to the FPS graph.
Type	string
Default	undefined

rows optional
Description	Height of the FPS graph, in rows.
Type	number
Default	2

disabled optional
Description	Prevent interactivity and gray out the control.
Type	boolean
Default	false

theme optional
Description	Custom color scheme.
Type	Theme
Default	undefined Inherits default Tweakpane theme equivalent to ThemeUtils.presets.standard, or the theme set with setGlobalDefaultTheme().

---

Events

change
Description	Fires when the FPS value changes, passing the latest FPS measurement. Note that the values described in the FpsGraphChangeEvent type are available on the event.detail parameter.
Type	FpsGraphChangeEvent