👦🏻

🚗 Differential Drive Kinematics Playground

Interactive 3D visualization comparing 4 robot drive systems (Differential, Ackermann, Mecanum, Omnidirectional) with dynamic physics, manual control, and click-to-drive autonomous mode
6 min read
Tech Stack:
TypeScript
React Three Fiber
Three.js
Leva
Loading 3D scene...

Differential Drive Kinematics Playground

An interactive 3D visualization comparing four fundamental robot drive systems with realistic physics simulation, manual control, and autonomous navigation capabilities.

Overview

This project demonstrates the kinematics and dynamics of four distinct robot drive configurations commonly used in mobile robotics. Each drive type has unique motion capabilities and constraints that make them suitable for different applications.

🔴 Differential Drive

  • Two independently controlled wheels
  • Can rotate in place (zero turning radius)
  • Cannot move sideways (non-holonomic)
  • Examples: Roomba, wheelchair robots
  • Applications: Indoor navigation, cost-effective mobile robots

🟢 Ackermann Steering

  • Car-like front wheel steering
  • Minimum turning radius constraint
  • Smooth, predictable paths
  • Examples: Autonomous cars, delivery robots
  • Applications: Outdoor navigation, road vehicles

🔵 Mecanum Drive

  • Four wheels with 45° angled rollers
  • Full omnidirectional motion
  • Can strafe sideways while maintaining heading
  • Examples: Warehouse robots, competition robots
  • Applications: Tight spaces, multi-directional tasks

🟡 Omnidirectional (Omni)

  • Three wheels at 120° spacing
  • True holonomic motion
  • Compact, agile maneuvering
  • Examples: Soccer robots, research platforms
  • Applications: Dynamic environments, precise positioning

Physics Model

This simulation uses a dynamic physics model based on Newton's laws of motion, not simple kinematic equations.

Force-Based Dynamics

The physics engine implements:

F = m × a

Where:

  • F = Applied force (N)
  • m = Robot mass (kg)
  • a = Acceleration (m/s²)

Key Physics Components

Acceleration Limiting

  • Real robots can't change velocity instantaneously
  • Maximum linear acceleration: 2.0 m/s²
  • Maximum angular acceleration: 3.0 rad/s²

Velocity Damping (Friction)

F_friction = -μ × v × |v|
  • Quadratic drag model simulates rolling resistance
  • Friction coefficient: 0.3 (default)
  • Prevents unrealistic perpetual motion

Euler Integration

v_new = v + a × dt
x_new = x + v × cos(θ) × dt
y_new = y + v × sin(θ) × dt
θ_new = θ + ω × dt
  • Time step: dt = 0.016s (60 FPS)
  • Stable for real-time simulation

Kinematics Equations

Differential Drive

Forward Kinematics (wheel speeds → robot velocity):

v = r(ω_R + ω_L) / 2
ω = r(ω_R - ω_L) / L

Inverse Kinematics (robot velocity → wheel speeds):

ω_L = (v - ωL/2) / r
ω_R = (v + ωL/2) / r

Instantaneous Center of Rotation (ICR):

ICR_y = L(ω_R + ω_L) / (2(ω_R - ω_L))
  • When ω_R = ω_L: Straight line (ICR at infinity)
  • When ω_R = -ω_L: Rotation in place (ICR at robot center)

Where:

  • v = Linear velocity (m/s)
  • ω = Angular velocity (rad/s)
  • ω_L, ω_R = Left/right wheel speeds (rad/s)
  • r = Wheel radius (m)
  • L = Wheelbase (distance between wheels, m)

Ackermann Steering

Forward Kinematics:

ω = v × tan(δ) / L
R = L / tan(δ)

Ackermann Geometry (inner/outer wheel angles):

δ_inner = atan(L / (R - T/2))
δ_outer = atan(L / (R + T/2))

ICR Position:

ICR_x = 0
ICR_y = L / tan(δ)

Where:

  • δ = Steering angle (rad)
  • R = Turning radius (m)
  • T = Track width (m)
  • L = Wheelbase (m)

Mecanum Drive

Forward Kinematics (4-wheel Jacobian):

vx = (r/4)(ω₁ + ω₂ + ω₃ + ω₄)
vy = (r/4)(-ω₁ + ω₂ + ω₃ - ω₄)
ω = (r/4d)(-ω₁ + ω₂ - ω₃ + ω₄)

Inverse Kinematics:

ω₁ = (1/r)(vx - vy - d×ω)
ω₂ = (1/r)(vx + vy + d×ω)
ω₃ = (1/r)(vx + vy - d×ω)
ω₄ = (1/r)(vx - vy + d×ω)

ICR Calculation:

ICR_x = -vy / ω
ICR_y = vx / ω

Where:

  • vx, vy = Velocity in x/y directions (m/s)
  • ω₁-₄ = Wheel speeds (rad/s)
  • d = Half of (wheelbase + track width) (m)
  • r = Wheel radius (m)

Omnidirectional Drive

Forward Kinematics (3-wheel at 120°):

vx = (2r/3)(ω₁ - ω₂/2 - ω₃/2)
vy = (2r/3)(√3/2 × ω₂ - √3/2 × ω₃)
ω = (r/3L)(ω₁ + ω₂ + ω₃)

Inverse Kinematics:

ω₁ = (3/2r)(vx) + (L/r)ω
ω₂ = (3/2r)(-vx/2 + √3/2×vy) + (L/r)ω
ω₃ = (3/2r)(-vx/2 - √3/2×vy) + (L/r)ω

Where:

  • Wheels positioned at 0°, 120°, 240°
  • L = Robot radius (m)

Instantaneous Center of Rotation (ICR)

The ICR is a fundamental concept in mobile robotics representing the point around which a robot rotates at any instant.

Physical Interpretation

Straight Line Motion:

  • ICR at infinity
  • All wheels parallel to motion direction
  • No rotation component

Rotation in Place:

  • ICR at robot center
  • Equal and opposite wheel velocities (differential)
  • Zero linear velocity

Arc Motion:

  • ICR offset from robot
  • Turning radius = distance from ICR
  • Inner wheels slower than outer wheels

Drive Type Differences

Non-Holonomic (Differential, Ackermann):

  • ICR always perpendicular to heading
  • Limited instantaneous motion directions
  • Must perform maneuvers for some goals

Holonomic (Mecanum, Omni):

  • ICR can be anywhere in 2D plane
  • Full directional freedom
  • Can reach any pose without maneuvering

Control Modes

Manual Control

Directly command robot actuators using sliders:

Differential: Control left/right wheel speeds independently

  • Forward: Both wheels positive, equal speed
  • Backward: Both wheels negative, equal speed
  • Turn left: Right wheel faster than left
  • Turn right: Left wheel faster than right
  • Spin: Equal opposite speeds

Ackermann: Control throttle and steering angle

  • Throttle: Forward/backward velocity
  • Steering: Wheel angle (±0.7 rad ≈ ±40°)
  • Minimum turning radius enforced by geometry

Mecanum/Omni: Control velocity components

  • vx: Forward/backward velocity
  • vy: Lateral (sideways) velocity
  • ω: Rotational velocity
  • All three can be combined simultaneously

Click-to-Drive Mode

Autonomous navigation using path planning:

  1. Click ground to set goal position
  2. Path generation: Creates waypoints with velocity profile
  3. Pure pursuit controller: Calculates control commands
  4. Dynamic execution: Robot follows path with physics constraints

Path Planning Algorithm:

1. Generate straight-line waypoints
2. For non-holonomic robots: Add rotation waypoint first
3. Apply trapezoidal velocity profile:
   - Accelerate (0-30% of path)
   - Cruise (30-70% of path)
   - Decelerate (70-100% of path)
4. Pure pursuit: Track lookahead point
5. Update path progress each frame

Pure Pursuit Controller:

1. Find lookahead point on path
2. Calculate angle to lookahead
3. Compute heading error
4. Apply proportional control:
   ω = Kp × heading_error
   v = target_velocity × cos(heading_error)

Visualization Features

ICR Display

  • Straight line: Forward arrow
  • Rotation in place: Circular arrow at robot center
  • Arc motion: Point marker + turning radius circle
  • Real-time update: Changes with control inputs

Velocity Constraints

Shows reachable velocity space:

  • Differential: Forward/backward line only
  • Ackermann: Forward/backward with turning arcs
  • Mecanum/Omni: Full omnidirectional circle

Trail Rendering

  • Device-adaptive point limits (50-200 points)
  • Color gradient: old (dim) → new (bright)
  • Disabled on low-tier devices for performance

Wheel Animation

  • Real-time rotation based on angular velocity
  • Mecanum: Visible 45° rollers
  • Ackermann: Steering angle visualization
  • Device-adaptive detail levels

Educational Value

Concepts Demonstrated

Robotics Fundamentals:

  • Forward/inverse kinematics
  • Holonomic vs non-holonomic constraints
  • Instantaneous center of rotation
  • Ackermann geometry

Physics Simulation:

  • Newton's laws (F=ma)
  • Friction and damping
  • Acceleration limiting
  • Numerical integration

Control Systems:

  • Manual teleoperation
  • Path planning algorithms
  • Pure pursuit controller
  • Proportional feedback control

Software Engineering:

  • Generator pattern for pausable simulation
  • Hook composition in React
  • Device-adaptive rendering
  • Real-time parameter tuning

Technical Implementation

Architecture Patterns

Generator Pattern:

function* differentialStep(robot, input, config) { while (true) { // Calculate desired velocity // Apply dynamics // Update robot state yield updatedRobot; } }

Benefits:

  • Pausable/resumable simulation
  • Explicit iteration control
  • Memory efficient

Hook Composition:

// State management const { state, actions } = useDriveState(config); // Physics simulation const runner = useDriveRunner({ robot, config, input }); // Interaction useClickToDrive({ enabled, onGoalSet, bounds });

Device Adaptivity:

const maxTrailPoints = tier === 'high' ? 200 : tier === 'medium' ? 100 : 0;

Performance Optimizations

  1. Instanced rendering for wheels (if multiple robots)
  2. Adaptive geometry detail based on device tier
  3. Trail point limiting to prevent memory issues
  4. Conditional rendering of complex visualizations
  5. 60 FPS physics on high-tier, 30 FPS on low-tier

Try It Yourself

Experiment Ideas

Compare Drive Types:

  1. Set same goal for each drive type
  2. Observe different paths and maneuvers
  3. Note which reaches goal fastest

Test Physics Parameters:

  1. Increase friction → slower acceleration
  2. Decrease mass → more responsive
  3. Lower max acceleration → smoother motion

Explore ICR Behavior:

  1. Differential: Try different wheel speed ratios
  2. Ackermann: Vary steering angle at different speeds
  3. Mecanum: Combine vx, vy, and ω simultaneously

Manual vs Autonomous:

  1. Try reaching goal manually
  2. Switch to click-to-drive
  3. Compare efficiency and smoothness

Technical References

Papers & Books

  1. "Introduction to Autonomous Mobile Robots" - Siegwart & Nourbakhsh

    • Chapter 3: Mobile Robot Kinematics
    • Forward/inverse kinematics for all drive types
  2. "Robotics: Modelling, Planning and Control" - Siciliano et al.

    • Differential drive constraints
    • Motion planning for non-holonomic systems
  3. "Omnidirectional Mobile Robot" - Taheri et al.

    • Mecanum and omni wheel kinematics
    • Jacobian matrix derivations
  4. "Ackermann Steering Geometry" - Wikipedia

    • Historical context
    • Geometric derivations

Online Resources

Source Code

View the complete implementation on GitHub:

  • Library layer: /lib/differential-drive/
  • React hooks: /components/r3f/projects/differential-drive/
  • Main component: /components/r3f/projects/differential-drive.tsx

Key files:

  • differential-drive.ts: Two-wheel kinematics
  • ackermann-drive.ts: Car-like steering
  • mecanum-drive.ts: 4-wheel omnidirectional
  • omni-drive.ts: 3-wheel holonomic
  • dynamics-integration.ts: Force-based physics
  • path-planning.ts: Pure pursuit controller

Future Enhancements

Potential additions:

  • Obstacle avoidance with dynamic replanning
  • Multiple robots with collision detection
  • Custom path drawing tool
  • PID controller tuning interface
  • Sensor visualization (lidar, sonar)
  • ROS integration for real robot control
  • Export control sequences for replay

Acknowledgments

This project builds upon fundamental concepts from robotics education and draws inspiration from:

  • MIT OpenCourseWare robotics courses
  • Carnegie Mellon's Robot Kinematics course
  • FIRST Robotics Competition drive systems
  • ROS navigation stack implementations