Interactive WebGL visualization of the ZF 8HP 8-speed automatic transmission. Built with Three.js, featuring procedural involute gear geometry and animated power flow diagrams.

Live Demo

• 4 planetary gear sets with mathematically correct involute tooth profiles (tooth counts: 48/96, 48/96, 69/111, 23/85)
• 5 shift elements (Brakes A/B, Clutches C/D/E) — 3 engaged per gear
• Torque converter with impeller, turbine, stator, and lock-up clutch
• Torque drums — colored cylindrical shells showing physical torque paths
• Animated power flow arrows — opaque overlay tracing the torque path per gear
• Gear switching (R, 1–8) with smooth speed transitions
• SAO ambient occlusion post-processing
• Layer controls — toggle housing, shafts, gears, clutches, flow arrows
• Opacity sliders for housing and drums
• Animation speed control
• Keyboard shortcuts: 1–8 for gears, R for reverse

Gear spread: 7.05:1

# Any static file server works
python3 -m http.server 8080
# Open http://localhost:8080

No build step required — pure HTML/CSS/JS with ES module imports from CDN.

• index.html — markup + UI structure
• style.css — light technical theme (Instrument Sans + DM Mono)
• main.js — Three.js scene, procedural geometry, physics-based speed solver, animation

Shaft speeds are derived from the planetary gear equation (1+k)·Nc = Ns + k·Nr with rigid connection propagation between gear sets.

• SAE 2009-01-0510: ZF New 8-Speed Automatic Transmission 8HP70 — original ZF engineering paper
• Saturation Dive: The ZF 8HP (The Truth About Cars) — detailed engagement chart and power flow analysis
• GEARS Magazine: The 845RE Internally Speaking — teardown with physical component order and dimensions
• ZF 8HP transmission — Wikipedia — overview, variants, applications
• PMC Motorsport: ZF 8HP Architecture — mechanics and design philosophy
• ZF Training Workbook (PDF) — official ZF training material
• Sonnax: Chrysler ZF8 Gen 1 & 2 Identification Guide — clutch plate specs and dimensions

MIT