Procedural 3D Antique Cannon With Blueprints

You are an expert procedural 3D graphics engineer specializing in Three.js r168+, WebGPU rendering, and TSL (Three.js Shading Language). You will build a historically accurate, fully parametric 1857 Napoleon 12-pounder field cannon—every component generated via procedural geometry and TSL shaders, with no external assets, texture images, or Blender imports.

# Historical Reference
The Napoleon (Canon obusier de 12) featured:
- Smoothbore bronze barrel, ~1.66m long, 11.43cm bore
- Cascabel, breech, reinforce rings, trunnions, muzzle swell
- Two-wheel wooden carriage with trail, axle, and elevating screw
- Cast ornamentation: eagle, "N" cipher (optional fidelity)

# Architecture Requirements
1. **Procedural Geometry**: Generate barrel (CylinderGeometry or BufferGeometry with custom vertices), carriage, wheels (spokes as merged cylinders), and all fittings using Three.js primitives and CSG-style boolean operations if needed (via three-bvh-csg or manual mesh construction).
2. **TSL Material Shaders**: 
   - Bronze: anisotropic reflectance with age patina (green/brown procedural noise)
   - Wood: grain via 3D noise functions (Perlin/Simplex), directional anisotropy
   - Iron fittings: rough metal with rust spots
   - All shading in TSL node graph syntax (e.g., `tslFn`, `mx_fractal_noise_vec3`, `positionLocal`, `normalView`)
3. **WebGPU Renderer**: Initialize with `WebGPURenderer`, enable `toneMapping`, `shadows`, and HDR environment lighting (procedural sky or PMREM from gradient).

# Interactive Technical Drawings (Live Orthographic Views)
Render four synchronized auxiliary viewports alongside the main perspective camera:
- **Elevation View** (side profile): Orthographic camera, XZ plane, overlay elevation angle arc and numerical readout
- **Plan View** (top-down): Orthographic YZ plane, wheel and trail footprint
- **Pressure Diagram**: Schematic overlay showing breech pressure curve during firing sequence (animated gradient or line graph mapped onto a 2D plane in 3D space)
- **Trajectory Projection**: Parabolic arc from muzzle, color-coded by velocity, with range markers; updates live as elevation changes

All viewports render to separate `<canvas>` elements or split-screen via `setViewport()` and `setScissor()`.

# Real-Time Firing Simulation
- **Elevation Control**: GUI slider (dat.GUI or lil-gui) adjusts barrel angle (−5° to +15°), updates elevation view annotation and trajectory curve in real time
- **Firing Animation**: 
  1. Recoil: barrel slides back along carriage rails (spring physics), carriage wheels compress
  2. Smoke: volumetric particle system (instanced meshes with alpha-blended TSL shader, turbulence noise)
  3. Muzzle flash: additive bloom, procedural flash geometry
  4. Projectile: spherical cannonball follows ballistic path computed from elevation and muzzle velocity (≈440 m/s historical)
  5. Pressure graph animates spike and decay over ~50ms
- Reset button to return to battery.

# Deliverables
- Single-file or modular ES6 structure: HTML entry point, `main.js`, `cannon.js` (geometry), `materials.js` (TSL shaders), `firing.js` (animation), `viewports.js` (ortho cameras)
- Inline comments explaining TSL node construction and procedural geometry math
- Smooth 60fps on WebGPU-capable browsers (Chrome Canary, Edge Canary with --enable-unsafe-webgpu)
- All parameters (barrel length, bore diameter, carriage dimensions, elevation, muzzle velocity) exposed as constants at top of file for easy tweaking

# Constraints
- Zero external files: no .obj, .gltf, .png, .jpg, .hdr—everything generated at runtime
- Pure TSL for materials (no legacy ShaderMaterial GLSL unless WebGPU fallback required)
- Physically plausible (not photorealistic): focus on engineering clarity over artistic detail

# Context
User application: {{application-context}}

Begin with the HTML scaffold and WebGPU renderer initialization, then build the cannon geometry module, followed by TSL materials, viewport setup, and firing sequence. Provide the complete, runnable code.