docs/techniques/media/frame-pacing/pacing-overview.svg

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 500 480" style="background:white; font-size:10">
    <!-- Hand written by OH -->
    <defs>
        <marker id="arrow" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="10" markerHeight="10"
            orient="auto-start-reverse">
            <path d="M 1 1 9 5 1 9" stroke="black" fill="none" stroke-linecap="round" />
        </marker>
    </defs>
    <text x="50" y="20" text-anchor="middle">Game</text>
    <text x="150" y="20" text-anchor="middle">FSR3</text>
    <text x="250" y="20" text-anchor="middle">Pacing thread</text>
    <text x="350" y="20" text-anchor="middle">Present thread</text>
    <text x="450" y="20" text-anchor="middle">GPU</text>
    <path d="M50,75V90m0,135v15m0,135v15M150,30V500M250,30V85m0,30v120m0,30v120m0,30v120M350,30V115m0,70v80m0,70v80M450,30V500" stroke="black" />
    <path d="M47 30 v45h6v-45 a 3 3 180 0 1 -3 0 a 3 3 180 0 0 -3 0" stroke="black" fill="none" />
    <g id="frame-arrows">
        <path d="M50,90v30" stroke="black" marker-end="url(#arrow)" />
        <rect x="47" y="120" width="6" height="105" fill="white" stroke="black" />
        <text text-anchor="middle" x="100" y="75">Present()</text>
        <path d="M50 80 h97" marker-end="url(#arrow)" stroke="black" />
        <rect x="147" y="80" width="6" height="10" fill="white" stroke="black" />
        <path d="M147 90 h-97" marker-end="url(#arrow)" stroke="black" stroke-dasharray="1" />
        <text text-anchor="middle" x="200" y="80">PresentEvent</text>
        <path d="M153 85 h97" marker-end="url(#arrow)" stroke="black" stroke-dasharray="3" />
        <text text-anchor="end" x="247" y="100">Wait for GPU</text>
        <path d="M250 85 v30" stroke="black" stroke-dasharray="1 2" />
        <text text-anchor="middle" x="300" y="110">PacerEvent</text>
        <path d="M250 115 h100" marker-end="url(#arrow)" stroke="black" stroke-dasharray="3" />
        <text text-anchor="middle" x="400" y="110">UI comp</text>
        <path d="M350 115 h100" marker-end="url(#arrow)" stroke="black" stroke-dasharray="3" />
        <path d="M350 120 h100" marker-end="url(#arrow)" stroke="black" stroke-dasharray="3" />
        <text text-anchor="middle" x="400" y="130">Present int.</text>
        <text text-anchor="end" x="347" y="155">Pacing wait</text>
        <path d="M350 115 v70" stroke="black" stroke-dasharray="1 2" />
        <text text-anchor="middle" x="400" y="180">UI comp.</text>
        <path d="M350 185 h100" marker-end="url(#arrow)" stroke="black" stroke-dasharray="3" />
        <path d="M350 190 h100" marker-end="url(#arrow)" stroke="black" stroke-dasharray="3" />
        <text text-anchor="middle" x="400" y="200">Present real</text>
    </g>
    <use href="#frame-arrows" y="150" />
    <use href="#frame-arrows" y="300" />
</svg>