Spine Benchmark

A performance analysis and visualization tool that performs frame-by-frame analysis to identify performance bottlenecks in Spine 4.2.x animations.

Core Features

Quantitative Performance Metrics

Implements a logarithmic scoring system (0-100 scale) with weighted component analysis:

• Bone structure complexity evaluation
• Mesh complexity analysis
• Clipping masks performance impact
• Blend modes overhead detection
• Constraint performance (IK, physics, path)

Debug Visualization

Real-time visual debugging tools for:

• Mesh wireframes and vertex density
• Physics constraint visualization
• IK constraint chains
• Bone hierarchy display

File Support

Multi-format loading capabilities:

• JSON and binary SKEL formats
• Atlas texture loading
• URL-based remote loading
• Drag-and-drop with full folder support (Chrome/Edge)

Technical Implementation

Built with modern web technologies for optimal performance:

// Performance sampling at 60 FPS
interface FrameMetrics {
  renderTime: number;
  updateTime: number;
  drawCalls: number;
  triangles: number;
  constraintCost: number;
}

// Logarithmic scoring for intuitive results
function calculateScore(metrics: FrameMetrics): number {
  const normalized = normalizeMetrics(metrics);
  return Math.round(100 - Math.log10(normalized + 1) * 25);
}

Tech Stack

• React 18.2 - UI components
• PIXI.js 8.0 - WebGL rendering
• @esotericsoftware/spine-pixi-v8 - Spine runtime
• Vite 5.0 - Build tooling
• TypeScript 5.3 - Type safety
• i18next - 8 language support

User Experience

• Command palette interface (Ctrl/Cmd+K)
• Responsive design for all screen sizes
• Real-time metric updates
• Export analysis reports

The tool helps game developers optimize their Spine animations before integration, reducing performance issues in production.