@llc3233149/core 0.9.0

package/src/profiler/frame-capture.ts

@@ -0,0 +1,139 @@
+const hasPerformance = typeof performance !== "undefined"
+
+export interface NodeProfile {
+  nodeId: string
+  name: string
+  type: string
+  depth: number
+  startTime: number
+  endTime: number
+  selfTime: number
+  drawCalls: number
+  culled: boolean
+  children: NodeProfile[]
+}
+
+export interface FrameCapture {
+  timestamp: number
+  totalTimeMs: number
+  cpuTimeMs: number
+  gpuTimeMs: number
+  totalNodes: number
+  culledNodes: number
+  drawCalls: number
+  scenePictureCacheHit: boolean
+  rootProfiles: NodeProfile[]
+}
+
+export class CaptureStack {
+  private stack: NodeProfile[] = []
+  private roots: NodeProfile[] = []
+  private frameStart = 0
+
+  begin(nodeId: string, name: string, type: string, culled: boolean): void {
+    const profile: NodeProfile = {
+      nodeId,
+      name,
+      type,
+      depth: this.stack.length,
+      startTime: hasPerformance ? performance.now() - this.frameStart : 0,
+      endTime: 0,
+      selfTime: 0,
+      drawCalls: 0,
+      culled,
+      children: [],
+    }
+    this.stack.push(profile)
+  }
+
+  end(drawCallsDelta: number): void {
+    const profile = this.stack.pop()
+    if (!profile) return
+
+    profile.endTime = hasPerformance ? performance.now() - this.frameStart : 0
+    profile.drawCalls = drawCallsDelta
+
+    let childrenTime = 0
+    for (const child of profile.children) {
+      childrenTime += child.endTime - child.startTime
+    }
+    profile.selfTime = profile.endTime - profile.startTime - childrenTime
+
+    const parent = this.stack[this.stack.length - 1]
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (parent) {
+      parent.children.push(profile)
+    } else {
+      this.roots.push(profile)
+    }
+  }
+
+  reset(frameStart: number): void {
+    this.stack.length = 0
+    this.roots.length = 0
+    this.frameStart = frameStart
+  }
+
+  getRootProfiles(): NodeProfile[] {
+    return this.roots
+  }
+}
+
+interface SpeedscopeFrame {
+  name: string
+}
+
+interface SpeedscopeEvent {
+  type: "O" | "C"
+  at: number
+  frame: number
+}
+
+export function toSpeedscopeJSON(capture: FrameCapture): string {
+  const frames: SpeedscopeFrame[] = []
+  const frameIndex = new Map<string, number>()
+  const events: SpeedscopeEvent[] = []
+
+  function getFrameIdx(nodeId: string, name: string): number {
+    const key = `${nodeId}\0${name}`
+    let idx = frameIndex.get(key)
+    if (idx === undefined) {
+      idx = frames.length
+      frames.push({ name: `${name} (${nodeId})` })
+      frameIndex.set(key, idx)
+    }
+    return idx
+  }
+
+  function walk(profile: NodeProfile): void {
+    const idx = getFrameIdx(profile.nodeId, profile.name)
+    events.push({ type: "O", at: profile.startTime, frame: idx })
+    for (const child of profile.children) {
+      walk(child)
+    }
+    events.push({ type: "C", at: profile.endTime, frame: idx })
+  }
+
+  for (const root of capture.rootProfiles) {
+    walk(root)
+  }
+
+  return JSON.stringify(
+    {
+      $schema: "https://www.speedscope.app/file-format-schema.json",
+      shared: { frames },
+      profiles: [
+        {
+          type: "evented",
+          name: "Frame Render",
+          unit: "milliseconds",
+          startValue: 0,
+          endValue: capture.totalTimeMs,
+          events,
+        },
+      ],
+    },
+    null,
+    2,
+  )
+}

package/src/profiler/frame-stats.ts

@@ -0,0 +1,122 @@
+const BUFFER_SIZE = 120
+
+const hasPerformance = typeof performance !== 'undefined'
+
+export class FrameStats {
+  frameTime = 0
+  cpuTime = 0
+  gpuTime = 0
+
+  minFrameTime = Infinity
+  maxFrameTime = 0
+  avgFrameTime = 0
+
+  minCpuTime = Infinity
+  maxCpuTime = 0
+  avgCpuTime = 0
+
+  minGpuTime = Infinity
+  maxGpuTime = 0
+  avgGpuTime = 0
+
+  smoothedFps = 0
+
+  totalNodes = 0
+  culledNodes = 0
+  drawCalls = 0
+  scenePictureCacheHit = false
+
+  private frameTimeBuffer = new Float64Array(BUFFER_SIZE)
+  private cpuTimeBuffer = new Float64Array(BUFFER_SIZE)
+  private gpuTimeBuffer = new Float64Array(BUFFER_SIZE)
+  private bufferIndex = 0
+  private bufferCount = 0
+  private lastTimestamp = 0
+
+  recordFrame(cpuTimeMs: number): void {
+    const now = hasPerformance ? performance.now() : 0
+
+    if (this.lastTimestamp > 0) {
+      this.frameTime = now - this.lastTimestamp
+    }
+    this.lastTimestamp = now
+
+    this.cpuTime = cpuTimeMs
+
+    const i = this.bufferIndex
+    this.frameTimeBuffer[i] = this.frameTime
+    this.cpuTimeBuffer[i] = this.cpuTime
+    this.gpuTimeBuffer[i] = this.gpuTime
+
+    this.bufferIndex = (i + 1) % BUFFER_SIZE
+    if (this.bufferCount < BUFFER_SIZE) this.bufferCount++
+
+    this.computeStats()
+  }
+
+  getFrameTimeHistory(): Float64Array {
+    return this.frameTimeBuffer
+  }
+
+  getCpuTimeHistory(): Float64Array {
+    return this.cpuTimeBuffer
+  }
+
+  getGpuTimeHistory(): Float64Array {
+    return this.gpuTimeBuffer
+  }
+
+  getBufferIndex(): number {
+    return this.bufferIndex
+  }
+
+  getBufferCount(): number {
+    return this.bufferCount
+  }
+
+  private computeStats(): void {
+    const n = this.bufferCount
+    if (n === 0) return
+
+    let ftSum = 0
+    let ftMin = Infinity
+    let ftMax = 0
+    let cpuSum = 0
+    let cpuMin = Infinity
+    let cpuMax = 0
+    let gpuSum = 0
+    let gpuMin = Infinity
+    let gpuMax = 0
+
+    for (let j = 0; j < n; j++) {
+      const ft = this.frameTimeBuffer[j]
+      ftSum += ft
+      if (ft < ftMin) ftMin = ft
+      if (ft > ftMax) ftMax = ft
+
+      const cpu = this.cpuTimeBuffer[j]
+      cpuSum += cpu
+      if (cpu < cpuMin) cpuMin = cpu
+      if (cpu > cpuMax) cpuMax = cpu
+
+      const gpu = this.gpuTimeBuffer[j]
+      gpuSum += gpu
+      if (gpu < gpuMin) gpuMin = gpu
+      if (gpu > gpuMax) gpuMax = gpu
+    }
+
+    this.minFrameTime = ftMin
+    this.maxFrameTime = ftMax
+    this.avgFrameTime = ftSum / n
+
+    this.minCpuTime = cpuMin
+    this.maxCpuTime = cpuMax
+    this.avgCpuTime = cpuSum / n
+
+    this.minGpuTime = gpuMin
+    this.maxGpuTime = gpuMax
+    this.avgGpuTime = gpuSum / n
+
+    this.smoothedFps = this.avgFrameTime > 0 ? 1000 / this.avgFrameTime : 0
+  }
+}

package/src/profiler/gpu-timer.ts

@@ -0,0 +1,93 @@
+interface EXTDisjointTimerQuery {
+  TIME_ELAPSED_EXT: 0x88bf
+  GPU_DISJOINT_EXT: 0x8fbb
+}
+
+const MAX_PENDING_QUERIES = 4
+
+export class GPUTimer {
+  private gl: WebGL2RenderingContext | null
+  private ext: EXTDisjointTimerQuery | null = null
+  private pending: WebGLQuery[] = []
+  private activeQuery: WebGLQuery | null = null
+  private _lastGpuTimeMs = NaN
+
+  get available(): boolean {
+    return this.ext !== null
+  }
+
+  get lastGpuTimeMs(): number {
+    return this._lastGpuTimeMs
+  }
+
+  constructor(gl: WebGL2RenderingContext | null) {
+    this.gl = gl
+    if (gl) {
+      this.ext =
+        (gl.getExtension('EXT_disjoint_timer_query_webgl2') as EXTDisjointTimerQuery | null) ??
+        null
+    }
+  }
+
+  beginFrame(): void {
+    if (!this.gl || !this.ext) return
+    if (this.pending.length >= MAX_PENDING_QUERIES) return
+
+    const query = this.gl.createQuery()
+
+    this.gl.beginQuery(this.ext.TIME_ELAPSED_EXT, query)
+    this.activeQuery = query
+  }
+
+  endFrame(): void {
+    if (!this.gl || !this.ext || !this.activeQuery) return
+
+    this.gl.endQuery(this.ext.TIME_ELAPSED_EXT)
+    this.pending.push(this.activeQuery)
+    this.activeQuery = null
+  }
+
+  pollResults(): number | null {
+    if (!this.gl || !this.ext) return null
+
+    const disjoint = this.gl.getParameter(this.ext.GPU_DISJOINT_EXT) as boolean
+
+    let result: number | null = null
+    const remaining: WebGLQuery[] = []
+
+    for (const query of this.pending) {
+      const ready = this.gl.getQueryParameter(query, this.gl.QUERY_RESULT_AVAILABLE) as boolean
+
+      if (ready) {
+        if (!disjoint) {
+          const ns = this.gl.getQueryParameter(query, this.gl.QUERY_RESULT) as number
+          this._lastGpuTimeMs = ns / 1_000_000
+          result = this._lastGpuTimeMs
+        }
+        this.gl.deleteQuery(query)
+      } else {
+        remaining.push(query)
+      }
+    }
+
+    this.pending = remaining
+    return result
+  }
+
+  destroy(): void {
+    if (!this.gl) return
+
+    if (this.activeQuery) {
+      if (this.ext) {
+        this.gl.endQuery(this.ext.TIME_ELAPSED_EXT)
+      }
+      this.gl.deleteQuery(this.activeQuery)
+      this.activeQuery = null
+    }
+
+    for (const query of this.pending) {
+      this.gl.deleteQuery(query)
+    }
+    this.pending = []
+  }
+}

package/src/profiler/hud-renderer.ts

@@ -0,0 +1,242 @@
+import type { FrameStats } from './frame-stats'
+import type { CanvasKit, Canvas, Paint, Font, Typeface } from 'canvaskit-wasm'
+
+const BUFFER_SIZE = 120
+const LINE_HEIGHT = 13
+const PADDING = 6
+const BAR_WIDTH = 2
+const BAR_GAP = 0.5
+const GRAPH_HEIGHT = 40
+const MAX_SCALE_MS = 50
+const BUDGET_MS = 16.67
+const FAST_MS = 16.7
+const SLOW_MS = 33.3
+const CORNER_RADIUS = 4
+const RULER_SIZE = 20
+const SWATCH_SIZE = 6
+const SWATCH_GAP = 3
+const LEGEND_ITEM_GAP = 10
+const GRAPH_WIDTH = BUFFER_SIZE * (BAR_WIDTH + BAR_GAP)
+const COL_WIDTH = 130
+const PANEL_WIDTH = Math.max(COL_WIDTH * 2, GRAPH_WIDTH) + PADDING * 2
+
+export class HudRenderer {
+  private bgPaint: Paint
+  private textPaint: Paint
+  private dimTextPaint: Paint
+  private greenPaint: Paint
+  private yellowPaint: Paint
+  private redPaint: Paint
+  private gpuPaint: Paint
+  private budgetLinePaint: Paint
+  private graphBgPaint: Paint
+  private hudFont: Font
+
+  constructor(private ck: CanvasKit) {
+    this.bgPaint = new ck.Paint()
+    this.bgPaint.setStyle(ck.PaintStyle.Fill)
+    this.bgPaint.setColor(ck.Color4f(0.1, 0.1, 0.1, 0.85))
+    this.bgPaint.setAntiAlias(true)
+
+    this.textPaint = new ck.Paint()
+    this.textPaint.setStyle(ck.PaintStyle.Fill)
+    this.textPaint.setColor(ck.Color4f(0.9, 0.9, 0.9, 1))
+    this.textPaint.setAntiAlias(true)
+
+    this.dimTextPaint = new ck.Paint()
+    this.dimTextPaint.setStyle(ck.PaintStyle.Fill)
+    this.dimTextPaint.setColor(ck.Color4f(0.55, 0.55, 0.55, 1))
+    this.dimTextPaint.setAntiAlias(true)
+
+    this.greenPaint = new ck.Paint()
+    this.greenPaint.setStyle(ck.PaintStyle.Fill)
+    this.greenPaint.setColor(ck.Color4f(0.3, 0.85, 0.4, 1))
+    this.greenPaint.setAntiAlias(true)
+
+    this.yellowPaint = new ck.Paint()
+    this.yellowPaint.setStyle(ck.PaintStyle.Fill)
+    this.yellowPaint.setColor(ck.Color4f(1.0, 0.85, 0.2, 1))
+    this.yellowPaint.setAntiAlias(true)
+
+    this.redPaint = new ck.Paint()
+    this.redPaint.setStyle(ck.PaintStyle.Fill)
+    this.redPaint.setColor(ck.Color4f(1.0, 0.3, 0.3, 1))
+    this.redPaint.setAntiAlias(true)
+
+    this.gpuPaint = new ck.Paint()
+    this.gpuPaint.setStyle(ck.PaintStyle.Fill)
+    this.gpuPaint.setColor(ck.Color4f(0.4, 0.6, 1.0, 1))
+    this.gpuPaint.setAntiAlias(true)
+
+    this.budgetLinePaint = new ck.Paint()
+    this.budgetLinePaint.setStyle(ck.PaintStyle.Stroke)
+    this.budgetLinePaint.setStrokeWidth(1)
+    this.budgetLinePaint.setColor(ck.Color4f(1, 1, 1, 0.3))
+    this.budgetLinePaint.setAntiAlias(true)
+    this.budgetLinePaint.setPathEffect(ck.PathEffect.MakeDash([3, 3], 0))
+
+    this.graphBgPaint = new ck.Paint()
+    this.graphBgPaint.setStyle(ck.PaintStyle.Fill)
+    this.graphBgPaint.setColor(ck.Color4f(0.05, 0.05, 0.05, 0.5))
+    this.graphBgPaint.setAntiAlias(true)
+
+    this.hudFont = new ck.Font(null, 10)
+  }
+
+  setTypeface(typeface: Typeface): void {
+    this.hudFont.delete()
+    this.hudFont = new this.ck.Font(typeface, 10)
+  }
+
+  draw(canvas: Canvas, stats: FrameStats, phases: Map<string, number>, showRulers: boolean): void {
+    const rulerOffset = showRulers ? RULER_SIZE : 0
+    const hasGraph = stats.getBufferCount() > 0
+
+    const phaseNames = [
+      'render:scene',
+      'render:drawPicture',
+      'render:recordPicture',
+      'render:volatile',
+      'render:sectionTitles',
+      'render:componentLabels',
+      'render:selection',
+      'render:rulers',
+      'render:flush'
+    ]
+    const visiblePhases = phaseNames.filter((n) => (phases.get(n) ?? 0) > 0.01)
+
+    const statsRows = 3
+    const phaseRows = visiblePhases.length > 0 ? 1 + visiblePhases.length : 0
+    const statsHeight = (statsRows + phaseRows) * LINE_HEIGHT
+    const graphSection = hasGraph ? GRAPH_HEIGHT + PADDING + LINE_HEIGHT : 0
+    const contentHeight = statsHeight + PADDING * 2 + graphSection
+
+    const bgX = rulerOffset + PADDING
+    const bgY = rulerOffset + PADDING
+
+    const bgRect = this.ck.LTRBRect(bgX, bgY, bgX + PANEL_WIDTH, bgY + contentHeight)
+    canvas.drawRRect(this.ck.RRectXY(bgRect, CORNER_RADIUS, CORNER_RADIUS), this.bgPaint)
+
+    const col1 = bgX + PADDING
+    const col2 = col1 + COL_WIDTH
+    let y = bgY + PADDING + LINE_HEIGHT
+
+    const fps = Math.round(stats.smoothedFps)
+    const avgFrame = stats.avgFrameTime.toFixed(1)
+    const avgCpu = stats.avgCpuTime.toFixed(1)
+    const gpuAvailable = !Number.isNaN(stats.avgGpuTime) && stats.avgGpuTime > 0
+    const avgGpu = gpuAvailable ? stats.avgGpuTime.toFixed(1) : 'n/a'
+    const cacheStatus = stats.scenePictureCacheHit ? 'HIT' : 'MISS'
+
+    canvas.drawText(`FPS: ${fps} (${avgFrame}ms)`, col1, y, this.textPaint, this.hudFont)
+    canvas.drawText(`Nodes: ${stats.totalNodes} (${stats.culledNodes} culled)`, col2, y, this.textPaint, this.hudFont)
+    y += LINE_HEIGHT
+
+    canvas.drawText(`CPU: ${avgCpu}ms`, col1, y, this.textPaint, this.hudFont)
+    canvas.drawText(`Draws: ${stats.drawCalls}`, col2, y, this.textPaint, this.hudFont)
+    y += LINE_HEIGHT
+
+    canvas.drawText(`GPU: ${avgGpu}${gpuAvailable ? 'ms' : ''}`, col1, y, this.textPaint, this.hudFont)
+    canvas.drawText(`Cache: ${cacheStatus}`, col2, y, this.textPaint, this.hudFont)
+
+    if (visiblePhases.length > 0) {
+      y += LINE_HEIGHT
+      canvas.drawText('Phases:', col1, y, this.dimTextPaint, this.hudFont)
+      for (const name of visiblePhases) {
+        y += LINE_HEIGHT
+        const ms = (phases.get(name) ?? 0).toFixed(2)
+        const label = name.replace('render:', '')
+        canvas.drawText(`  ${label}: ${ms}ms`, col1, y, this.dimTextPaint, this.hudFont)
+      }
+    }
+
+    if (hasGraph) {
+      const graphX = bgX + PADDING
+      const graphY = y + PADDING
+      this.drawBarGraph(canvas, stats, graphX, graphY)
+      this.drawLegendRow(canvas, graphX, graphY + GRAPH_HEIGHT + LINE_HEIGHT - 2)
+    }
+  }
+
+  private drawLegendRow(canvas: Canvas, x: number, y: number): void {
+    const items: [Paint, string][] = [
+      [this.greenPaint, '60fps'],
+      [this.yellowPaint, '30fps'],
+      [this.redPaint, 'slow'],
+      [this.gpuPaint, 'GPU']
+    ]
+    let cx = x
+    for (const [paint, label] of items) {
+      const swatchY = y - SWATCH_SIZE + 1
+      canvas.drawRect(
+        this.ck.LTRBRect(cx, swatchY, cx + SWATCH_SIZE, swatchY + SWATCH_SIZE),
+        paint
+      )
+      cx += SWATCH_SIZE + SWATCH_GAP
+      canvas.drawText(label, cx, y, this.dimTextPaint, this.hudFont)
+      cx += label.length * 5.5 + LEGEND_ITEM_GAP
+    }
+  }
+
+  private drawBarGraph(canvas: Canvas, stats: FrameStats, graphX: number, graphY: number): void {
+    const graphRect = this.ck.LTRBRect(graphX, graphY, graphX + GRAPH_WIDTH, graphY + GRAPH_HEIGHT)
+    canvas.drawRRect(this.ck.RRectXY(graphRect, 2, 2), this.graphBgPaint)
+
+    const cpuHistory = stats.getCpuTimeHistory()
+    const gpuHistory = stats.getGpuTimeHistory()
+    const bufferCount = stats.getBufferCount()
+    const bufferIndex = stats.getBufferIndex()
+
+    const barOffset = BUFFER_SIZE - bufferCount
+
+    for (let i = 0; i < bufferCount; i++) {
+      const histIndex = (bufferIndex + i) % BUFFER_SIZE
+
+      const cpuTime = cpuHistory[histIndex]
+      if (cpuTime <= 0) continue
+
+      const barHeight = Math.min((cpuTime / MAX_SCALE_MS) * GRAPH_HEIGHT, GRAPH_HEIGHT)
+      const barX = graphX + (i + barOffset) * (BAR_WIDTH + BAR_GAP)
+      const barY = graphY + GRAPH_HEIGHT - barHeight
+
+      let paint: Paint
+      if (cpuTime < FAST_MS) {
+        paint = this.greenPaint
+      } else if (cpuTime < SLOW_MS) {
+        paint = this.yellowPaint
+      } else {
+        paint = this.redPaint
+      }
+
+      canvas.drawRect(
+        this.ck.LTRBRect(barX, barY, barX + BAR_WIDTH, graphY + GRAPH_HEIGHT),
+        paint
+      )
+
+      const gpuTime = gpuHistory[histIndex]
+      if (!Number.isNaN(gpuTime) && gpuTime > 0) {
+        const gpuBarHeight = Math.min((gpuTime / MAX_SCALE_MS) * GRAPH_HEIGHT, GRAPH_HEIGHT)
+        canvas.drawRect(
+          this.ck.LTRBRect(barX, graphY + GRAPH_HEIGHT - gpuBarHeight, barX + BAR_WIDTH, graphY + GRAPH_HEIGHT),
+          this.gpuPaint
+        )
+      }
+    }
+
+    const budgetY = graphY + GRAPH_HEIGHT - (BUDGET_MS / MAX_SCALE_MS) * GRAPH_HEIGHT
+    canvas.drawLine(graphX, budgetY, graphX + GRAPH_WIDTH, budgetY, this.budgetLinePaint)
+  }
+
+  destroy(): void {
+    this.bgPaint.delete()
+    this.textPaint.delete()
+    this.dimTextPaint.delete()
+    this.greenPaint.delete()
+    this.yellowPaint.delete()
+    this.redPaint.delete()
+    this.gpuPaint.delete()
+    this.budgetLinePaint.delete()
+    this.graphBgPaint.delete()
+    this.hudFont.delete()
+  }
+}

package/src/profiler/index.ts

@@ -0,0 +1,8 @@
+export { RenderProfiler } from './render-profiler'
+export { FrameStats } from './frame-stats'
+export { GPUTimer } from './gpu-timer'
+export { DrawCallCounter } from './draw-call-counter'
+export { PhaseTimer } from './phase-timer'
+export { HudRenderer } from './hud-renderer'
+export { CaptureStack, toSpeedscopeJSON } from './frame-capture'
+export type { NodeProfile, FrameCapture } from './frame-capture'

package/src/profiler/phase-timer.ts

@@ -0,0 +1,62 @@
+type DevToolsColor =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'tertiary-dark'
+  | 'secondary-dark'
+  | 'secondary-light'
+
+function colorForPhase(name: string): DevToolsColor {
+  if (name === 'frame') return 'primary'
+  if (name === 'render:flush') return 'tertiary-dark'
+  if (name === 'render:recordPicture') return 'tertiary'
+  if (name.startsWith('render:')) return 'secondary'
+  if (name.startsWith('layout:')) return 'secondary-dark'
+  return 'secondary-light'
+}
+
+const SMOOTH = 0.05
+
+export class PhaseTimer {
+  enabled = false
+  readonly averages = new Map<string, number>()
+
+  private starts = new Map<string, number>()
+
+  beginPhase(name: string): void {
+    if (!this.enabled || typeof performance === 'undefined') return
+    this.starts.set(name, performance.now())
+  }
+
+  endPhase(name: string): void {
+    if (!this.enabled || typeof performance === 'undefined') return
+
+    const startTime = this.starts.get(name)
+    if (startTime === undefined) return
+    this.starts.delete(name)
+
+    const duration = performance.now() - startTime
+    const prev = this.averages.get(name)
+    this.averages.set(
+      name,
+      prev === undefined ? duration : prev + (duration - prev) * SMOOTH
+    )
+
+    performance.measure(name, {
+      start: startTime,
+      detail: {
+        devtools: {
+          dataType: 'track-entry',
+          track: 'Renderer',
+          trackGroup: 'Lutris',
+          color: colorForPhase(name)
+        }
+      }
+    })
+  }
+
+  clearPhases(): void {
+    this.starts.clear()
+    this.averages.clear()
+  }
+}