WebGPU Next-Gen Rendering

Write a production-ready WebGPU device initialization module in TypeScript. Requirements: (1) Feature detection: check navigator.gpu exists — if not, throw a descriptive error with a link to caniuse.com/webgpu. (2) Adapter request: navigator.gpu.requestAdapter({ powerPreference: "high-performance" }) — if null, try again with powerPreference: "low-power" — if still null, throw "No WebGPU adapter available". (3) Device request: call adapter.requestDevice() with requiredFeatures: ["texture-compression-bc"] if supported (check adapter.features), and requiredLimits that request maxStorageBufferBindingSize and maxComputeWorkgroupStorageSize at their adapter maximums. (4) Lost device handler: device.lost.then(info => { if (info.reason !== "destroyed") reinitialize() }) — implement a reinitialize() that re-runs the full init sequence up to 3 times with exponential backoff. (5) Canvas configuration: configure a GPUCanvasContext with format: navigator.gpu.getPreferredCanvasFormat(), alphaMode: "premultiplied", and usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC. (6) Export: { device, adapter, context, format, limits } as a WebGPUContext interface. Include JSDoc on every exported member. Handle all async errors with typed catch blocks.

Write a WebGPU compute shader pipeline in WGSL and TypeScript that simulates 1,000,000 particles entirely on the GPU using a ping-pong storage buffer pattern. Requirements: (1) WGSL compute shader: struct Particle { pos: vec4f, vel: vec4f, life: f32, pad: vec3f }. Bind group: @group(0) @binding(0) var<storage, read> particlesIn: array<Particle>; @group(0) @binding(1) var<storage, read_write> particlesOut: array<Particle>; @group(0) @binding(2) var<uniform> params: SimParams (dt: f32, gravity: vec3f, noiseScale: f32, time: f32). Workgroup size: @compute @workgroup_size(256). Each invocation: read particle, apply gravity, add curl noise displacement (provide the WGSL curl noise function — 3D, using sin/cos approximation for speed), decrement life, if life <= 0 respawn at origin with randomized velocity using a hash function of global_invocation_id. Write to particlesOut. (2) TypeScript: create two GPUBuffers (STORAGE | COPY_DST, size = 1M * 48 bytes), two bind groups alternating in/out, a GPUComputePipeline, and a SimParams uniform buffer. Each frame: update dt in uniform buffer via writeBuffer, dispatch ceil(1M/256) workgroups, swap bind groups. (3) Render pass: a separate GPURenderPipeline reads particlesOut as a vertex buffer (stepMode: "instance"), renders each particle as a point sprite. Provide the WGSL vertex and fragment shaders. Full TypeScript with WebGPU types.