👦🏻

🅿️ MPC Parking Assistant

Interactive 3D visualization of Model Predictive Control for autonomous parallel parking with gradient descent solver, manual driving mode, and real-time parameter tuning
2 min read
Tech Stack:
TypeScript
React Three Fiber
Three.js
Leva
Loading 3D scene...

MPC Parking Assistant

Interactive 3D visualization of Model Predictive Control (MPC) applied to autonomous vehicle parking.

Overview

This project demonstrates how robots "look ahead" to plan optimal trajectories while respecting physical constraints. Unlike reactive PID controllers, MPC predicts future states and optimizes control inputs over a time horizon.

Key Features

Optimization-Based Control:

  • Gradient descent solver with shooting method
  • Real-time trajectory generation (re-planned every step)
  • Tunable cost function weights (position, angle, velocity, control effort)

Non-Holonomic Vehicle Physics:

  • Bicycle model kinematics
  • Ackermann steering constraints
  • Cannot move sideways - must perform complex maneuvers to park

Interactive Modes:

  • Manual Mode: Drive with WASD/arrow keys to feel the physics
  • Autopilot Mode: AI solver plans and executes parking trajectory

Visualization:

  • Ghost cars showing prediction horizon
  • Actual vs. predicted path
  • Real-time performance metrics (solver time, distance to target, cost)

How It Works

The MPC Algorithm

  1. Predict: Roll out vehicle trajectory over N future timesteps using bicycle model
  2. Optimize: Minimize cost function using gradient descent:
    • Cost = position_error² + angle_error² + velocity² + control_effort²
  3. Execute: Apply first control input, shift horizon, repeat

Non-Holonomic Constraint

The bicycle model enforces: ẏcos(θ) - ẋsin(θ) = 0

This constraint prevents sideways motion, forcing the S-curve maneuver in parallel parking.

Cost Function Tuning

  • Position weight: How much to prioritize reaching target location
  • Angle weight: How much to prioritize correct orientation
  • Velocity weight: Prefer slower parking (safer)
  • Control weights: Penalize aggressive acceleration/steering (smoother)

Technical Implementation

Algorithm: Gradient descent shooting method with backtracking line search Physics: Euler integration of bicycle model (5 state variables, 2 control inputs) Solver Performance: ~10-50ms per solve on desktop, 20-100ms on mobile Device Adaptive: Reduces horizon length and ghost count on low-power devices

Try It

Use the controls to:

  • Switch between Manual and Autopilot modes
  • Adjust MPC horizon length (how far ahead the robot looks)
  • Tune cost weights to see how they affect parking behavior
  • Watch the ghost cars show the predicted future trajectory

Learning Points

  • MPC vs PID: Predictive optimal control vs reactive error correction
  • Non-holonomic systems: Why cars need complex maneuvers
  • Optimization in real-time: Balancing solution quality with computation time
  • Multi-objective optimization: Trading off competing goals (speed, smoothness, accuracy)