GTA-style open-city driving: technical patterns used in this demo

Playable Press E near a parked car, then drive with WASD. Use SPACE for handbrake drifts. Hit traffic or speed to raise wanted stars; cops spawn and chase at 2+ stars.

1. Arcade car physics: acceleration, steering, grip, drift

Keep velocity in world space, but compute forward/lateral components in car local space. Kill lateral velocity with a tunable grip coefficient. Handbrake lowers grip and increases yaw authority, creating controllable slip.

forward = vec(sin(yaw), 0, cos(yaw))
right   = vec(cos(yaw), 0,-sin(yaw))

vForward = dot(velocity, forward)
vSide    = dot(velocity, right)

velocity += forward * throttle * engineAccel * dt

speedSteer = clamp(abs(vForward) / maxSpeed, .15, 1)
yaw += steer * steerRate * speedSteer * sign(vForward) * dt

grip = handbrake ? driftGrip : normalGrip
velocity += right * (-vSide * min(1, grip * dt))

slipAngle = atan2(vSide, abs(vForward)+.001)
spawnTireSmoke if abs(slipAngle) > threshold

2. Traffic AI roads/lane following

Represent the city as a grid of road centerlines. Each AI car stores a cardinal lane direction, current lane offset, target intersection and cruise speed. At intersections it picks straight/left/right, snaps to the new lane center, and continues. A cheap obstacle check uses dot/cross products against nearby cars and the player.

toObstacle = obstacle.pos - car.pos
ahead = dot(normalize(toObstacle), car.forward)
side  = abs(dot(toObstacle, car.right))
if ahead > .45 && side < laneWidth && length(toObstacle) < brakeDist:
    targetSpeed = 0

3. Cop chase AI

Cops use pursuit steering: seek a predicted future player position. Spawn them off-screen on road grid points when wanted level is high enough. Give cops higher acceleration and siren lighting, and let them ignore normal cruising routes while chasing.

lead = clamp(distance/copSpeed, .25, 1.6)
target = player.pos + player.velocity * lead
desiredYaw = atan2(target.x-cop.x, target.z-cop.z)
steer = signedAngle(cop.yaw, desiredYaw)
cop.throttle = 1

4. Wanted stars

Use a heat meter and map thresholds to 0–5 stars. Raise heat for collisions, hitting cops, stealing cars, or speeding. Decay heat when the player avoids crimes and police line-of-sight.

heat += crimeAmount
stars = heat > 260 ? 5 : heat > 180 ? 4 : heat > 115 ? 3 :
        heat > 55  ? 2 : heat > 15  ? 1 : 0
if noRecentCrime: heat -= decayRate * dt

5. Damage model

This demo uses health plus visual deformation: impact impulse reduces health, darkens the material, compresses the body mesh and emits smoke/fire at low health. Production games add per-vertex dents or detachable panels.

6. HUD: speedometer, minimap, wanted stars

The speedometer and stars are DOM for crispness. The minimap is a 2D canvas redrawn each frame: roads are lines, traffic/cops/player are blips transformed from world to minimap coordinates.

7. Sunset lighting

Use a sky dome shader blending purple horizon to deep blue zenith, exponential fog, warm low-angle directional light with shadows, emissive windows, CSS glow/vignette and particles for atmosphere.

8. Procedural city

Generate grid roads every block. Fill non-road blocks with randomized box buildings using emissive window textures. Place palms along boulevards with instancing or repeated low-poly meshes.

9. Smooth chase camera

desired = car.pos - car.forward * distance + vec3(0,height,0)
camera.position.lerp(desired, 1 - exp(-smooth * dt))
lookAt.lerp(car.pos + car.forward*8 + vec3(0,2,0), sameFactor)

10. Performance tips

Use InstancedMesh for palms, windows, road props, repeated vehicles.
Merge static city geometry by material; avoid thousands of separate draw calls.
Update AI in distance bands: nearby every frame, far cars 5–10 Hz.
Use simple collision proxies: circles/OBBs instead of mesh collision.
Pool particles and vehicles; do not allocate in hot loops.

Find a parked car and press E to steal it

W/S accelerate/brake · A/D steer · SPACE handbrake drift · E steal/exit
Cause mayhem to raise wanted stars. Cops chase at ★★ and above.

MPH

### ~google/gemini-pro-latest GTA-Style Open City Canvas

Health

MPH

WASD: Drive/Move • SPACE: Handbrake • [E]: Enter/Exit Vehicle

## Analysis **Consensus** - Arcade car physics should decompose world velocity into local forward/lateral components, apply strong lateral friction normally, and reduce lateral grip on handbrake to produce controllable drift/slip. - Steering authority should scale with speed (little/no turning when nearly stopped) using a speed factor. - Traffic AI reuses the car model but is driven by an AI controller emitting the same throttle/steer/brake inputs, follows a road grid, and uses cheap forward-cone dot-product checks for obstacle/player braking. - Cop AI uses pursuit steering (seek toward player, optionally lead/predicted position) and spawns off-screen scaled to wanted level. - Wanted level is backed by a continuous heat/score float mapped to 0-5 stars, raised by crimes (stealing, ramming, hitting cops, speeding) and decayed after a no-crime cooldown. - Damage uses a health scalar reduced by impact magnitude, with smoke/fire particles at low health rather than true mesh deformation; true per-vertex deformation is mentioned only as a production upgrade. - HUD uses DOM/CSS for crisp speedometer and stars, and a 2D canvas (or DOM blips) minimap that transforms world coordinates to map space centered on the player. - Sunset sky uses a BackSide sphere with a custom gradient fragment shader (horizon-to-zenith), plus FogExp2, a warm low-angle DirectionalLight with PCF soft shadows, emissive lit windows, and ACES filmic tone mapping. - Procedural city is a grid of blocks with box buildings using canvas window textures as emissiveMap, palms lining boulevards, and merged/instanced road geometry. - Chase camera computes an ideal position behind the car and a look-at point ahead, then lerps both with frame-rate-independent smoothing (1 - exp(-k*dt) or pow-based). - Performance relies on InstancedMesh for repeated objects (buildings, palms, windows), merged static geometry, simple circle/AABB collision proxies instead of mesh raycasting, particle pooling/caps, and clamped delta time and pixelRatio. - Collision resolution uses distance-based overlap separation plus impulse exchange along the contact normal, with damage/wanted triggered above an impact threshold. **Contradictions** - **Frame-rate independence of grip/friction damping** - ~anthropic/claude-opus-latest: Explicitly uses Math.pow(base, dt*60) for all damping to ensure identical behavior at 30-144fps. - ~openai/gpt-latest: Uses exp-based lerp for AI speed but applies raw per-frame multipliers like vel.multiplyScalar(1 - dt*.32) and fixed-magnitude friction, partially frame-dependent. - ~google/gemini-pro-latest: Uses raw fixed multipliers this.fwdSpeed *= 0.98 per frame, which is frame-rate dependent despite clamping dt. - evidence: Constant per-frame multipliers like *0.98 are frame-rate dependent; correct approach is pow/exp with dt as Claude notes. - **Use of post-processing bloom** - ~anthropic/claude-opus-latest: Describes UnrealBloomPass so headlights/windows/cop lights glow. - ~google/gemini-pro-latest: Actually implements EffectComposer + RenderPass + UnrealBloomPass in code. - ~openai/gpt-latest: Omits real bloom; relies on CSS vignette/glow overlays and emissive materials instead. - **Player starting state (on-foot vs in-car steal beat)** - ~anthropic/claude-opus-latest: Deliberately starts player on foot next to a guaranteed parked car so E-to-steal is the opening beat. - ~openai/gpt-latest: Starts on foot with an avatar; parked cars are a distinct pool that get removed from traffic when stolen. - ~google/gemini-pro-latest: Any vehicle is enterable; there is no distinct 'parked/stealable' concept, and entering a cop car spikes wanted. - **Building collision fidelity** - ~anthropic/claude-opus-latest: Stores flat AABB boxes per building for cheap 2D overlap collision. - ~openai/gpt-latest: Implements only car-vs-car collision; buildings have no collision, cars can drive through them. - ~google/gemini-pro-latest: Stores building matrices as 'rough collision' but never actually tests against them; only world-bounds clamping and car-car collision exist. - **Shadow frustum strategy** - ~anthropic/claude-opus-latest: Uses a tight ortho frustum sized to the play area for crisp shadow texels. - ~google/gemini-pro-latest: Uses a modest ortho frustum but moves the directional light/target to follow the camera each frame. - ~openai/gpt-latest: Uses a large static ortho frustum (+/-360) that does not follow the player, wasting shadow resolution far from the action. **Partial coverage** - ~anthropic/claude-opus-latest: Cosmetic body roll/pitch (rotation.z from steer, rotation.x from brake) to sell arcade feel without affecting physics. - ~anthropic/claude-opus-latest, ~openai/gpt-latest: Wanted decay gated on both a cooldown AND no cops actively engaged, with cops despawning ('giving up') when level drops. - ~openai/gpt-latest: Updating AI in distance bands (nearby every frame, far cars at 5-10 Hz) as a scaling optimization. - ~openai/gpt-latest, ~google/gemini-pro-latest: Explicit slip-angle computation via atan2(vLat, |vFwd|) used as the trigger threshold for tire smoke. - ~google/gemini-pro-latest: Feeding drift/slip angle into the camera heading for a dramatic 'lean into the drift' feel. - ~google/gemini-pro-latest: Reverse steering inversion (flip steer sign when fwdSpeed < 0) so reversing feels correct. - ~anthropic/claude-opus-latest: Sky shader includes an explicit sun disk + broad haze glow via pow(dot(viewDir,sunDir), n) with two exponents. - ~anthropic/claude-opus-latest, ~openai/gpt-latest: Regenerating star DOM/SVG only when the integer wanted level changes to avoid per-frame DOM thrash. - ~google/gemini-pro-latest: On-foot shooting/aiming mechanic and screen-space red damage flash overlay (features beyond the spec). - ~google/gemini-pro-latest: Per-instance building color variation via setColorAt and an onBeforeCompile shader hack to color palm trunk vs fronds by Y height. **Unique insights** - ~anthropic/claude-opus-latest: Frames the drift as emergent rather than scripted: when grip drops, surviving lateral velocity plus faster nose rotation IS the drift, so no special-case code is needed. - ~openai/gpt-latest: Structures traffic AI as an explicit intersection state machine (cardinal lane dir, lane offset, target intersection, snap-to-lane-center on turn) rather than continuous steer-to-cardinal snapping. - ~google/gemini-pro-latest: Uses onBeforeCompile to inject GLSL into MeshStandardMaterial (varying vPosition, per-Y diffuse override) to color a merged tree geometry without separate materials or textures. I've synthesized the best techniques into a single polished game. Here it is: ```html SUNSET HEIST — Open City Drive

MPH

CONDITION

Walk to the glowing car · press E to steal it

WASD drive/move · SPACE handbrake drift · E steal / exit
Ram cars & speed to raise your wanted level — cops chase at ★★

BUSTED