@quake2ts/engine 0.0.837 → 0.0.838

package/dist/cjs/index.cjs

@@ -9614,6 +9614,2111 @@ var createRenderer = (gl) => {
     }
   };
 };
+
+// src/render/webgpu/context.ts
+async function createWebGPUContext(canvas, options) {
+  if (!navigator.gpu) {
+    throw new Error("WebGPU is not supported in this environment");
+  }
+  const adapter = await navigator.gpu.requestAdapter({
+    powerPreference: options?.powerPreference || "high-performance"
+  });
+  if (!adapter) {
+    throw new Error("No appropriate GPUAdapter found");
+  }
+  if (options?.requiredFeatures) {
+    for (const feature of options.requiredFeatures) {
+      if (!adapter.features.has(feature)) {
+        throw new Error(`Required feature not available: ${feature}`);
+      }
+    }
+  }
+  const deviceDescriptor = {
+    requiredFeatures: options?.requiredFeatures,
+    requiredLimits: options?.requiredLimits
+  };
+  const device = await adapter.requestDevice(deviceDescriptor);
+  let context;
+  let format = "rgba8unorm";
+  const depthFormat = "depth24plus";
+  let isHeadless = true;
+  let width = options?.width || 800;
+  let height = options?.height || 600;
+  if (canvas) {
+    context = canvas.getContext("webgpu");
+    if (!context) {
+      throw new Error("Failed to get WebGPU context from canvas");
+    }
+    isHeadless = false;
+    format = navigator.gpu.getPreferredCanvasFormat();
+    width = canvas.width;
+    height = canvas.height;
+    context.configure({
+      device,
+      format,
+      alphaMode: "opaque"
+      // Standard for game rendering
+    });
+  }
+  const features = /* @__PURE__ */ new Set();
+  for (const feature of adapter.features) {
+    features.add(feature);
+  }
+  return {
+    adapter,
+    device,
+    context,
+    format,
+    depthFormat,
+    features,
+    limits: device.limits,
+    isHeadless,
+    width,
+    height
+  };
+}
+function queryCapabilities(state) {
+  const { features, limits } = state;
+  return {
+    hasTimestampQuery: features.has("timestamp-query"),
+    hasDepthClipControl: features.has("depth-clip-control"),
+    hasTextureCompressionBC: features.has("texture-compression-bc"),
+    hasTextureCompressionETC2: features.has("texture-compression-etc2"),
+    hasTextureCompressionASTC: features.has("texture-compression-astc"),
+    maxTextureDimension2D: limits.maxTextureDimension2D,
+    maxBindGroups: limits.maxBindGroups,
+    maxUniformBufferBindingSize: limits.maxUniformBufferBindingSize,
+    maxStorageBufferBindingSize: limits.maxStorageBufferBindingSize
+  };
+}
+function evaluateLightStyle2(pattern, time) {
+  if (!pattern) return 1;
+  const frame = Math.floor(time * 10) % pattern.length;
+  const charCode = pattern.charCodeAt(frame);
+  return (charCode - 97) / 12;
+}
+function sortVisibleFacesFrontToBack2(faces) {
+  return [...faces].sort((a, b) => b.sortKey - a.sortKey);
+}
+function sortVisibleFacesBackToFront2(faces) {
+  return [...faces].sort((a, b) => a.sortKey - b.sortKey);
+}
+var FrameRenderer = class {
+  constructor(context, pipelines) {
+    this.context = context;
+    this.pipelines = pipelines;
+    this.depthTexture = null;
+    this.copyTexture = null;
+    // Separate texture for headless output if no context exists
+    this.headlessTarget = null;
+    this.lastWidth = 0;
+    this.lastHeight = 0;
+    this.lastFrameTime = 0;
+    // Current frame context (available during frame rendering)
+    this.currentFrameContext = null;
+  }
+  ensureDepthTexture(width, height) {
+    if (this.depthTexture && this.lastWidth === width && this.lastHeight === height) {
+      return this.depthTexture.createView();
+    }
+    if (this.depthTexture) {
+      this.depthTexture.destroy();
+    }
+    this.depthTexture = this.context.device.createTexture({
+      size: [width, height],
+      format: "depth24plus",
+      usage: GPUTextureUsage.RENDER_ATTACHMENT,
+      label: "depth-buffer"
+    });
+    if (this.copyTexture) {
+      this.copyTexture.destroy();
+      this.copyTexture = null;
+    }
+    this.lastWidth = width;
+    this.lastHeight = height;
+    return this.depthTexture.createView();
+  }
+  ensureCopyTexture(width, height) {
+    if (this.copyTexture && this.lastWidth === width && this.lastHeight === height) {
+      return this.copyTexture;
+    }
+    if (this.copyTexture) {
+      this.copyTexture.destroy();
+    }
+    this.copyTexture = this.context.device.createTexture({
+      size: [width, height],
+      format: this.context.format,
+      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
+      label: "frame-copy-texture"
+    });
+    return this.copyTexture;
+  }
+  ensureHeadlessTarget(width, height) {
+    if (this.headlessTarget && this.headlessTarget.width === width && this.headlessTarget.height === height) {
+      return this.headlessTarget.createView();
+    }
+    if (this.headlessTarget) {
+      this.headlessTarget.destroy();
+    }
+    this.headlessTarget = this.context.device.createTexture({
+      size: [width, height],
+      format: this.context.format,
+      usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC | GPUTextureUsage.TEXTURE_BINDING,
+      label: "headless-render-target"
+    });
+    return this.headlessTarget.createView();
+  }
+  beginFrame() {
+    const { device, context, width, height } = this.context;
+    const commandEncoder = device.createCommandEncoder({ label: "frame-command-encoder" });
+    let renderTarget;
+    if (context) {
+      renderTarget = context.getCurrentTexture().createView();
+    } else {
+      renderTarget = this.ensureHeadlessTarget(width, height);
+    }
+    const depthTexture = this.ensureDepthTexture(width, height);
+    return {
+      device,
+      commandEncoder,
+      renderTarget,
+      depthTexture,
+      width,
+      height
+    };
+  }
+  /**
+   * Begin 2D rendering pass. Called by WebGPURenderer.begin2D()
+   */
+  begin2DPass() {
+    if (!this.currentFrameContext) {
+      throw new Error("begin2DPass called outside of renderFrame");
+    }
+    const { commandEncoder, renderTarget, width, height } = this.currentFrameContext;
+    this.pipelines.sprite.setProjection(width, height);
+    this.pipelines.sprite.begin(commandEncoder, renderTarget);
+  }
+  /**
+   * End 2D rendering pass. Called by WebGPURenderer.end2D()
+   */
+  end2DPass() {
+    this.pipelines.sprite.end();
+  }
+  renderFrame(options) {
+    const now = performance.now();
+    const fps = this.lastFrameTime > 0 ? 1e3 / (now - this.lastFrameTime) : 0;
+    this.lastFrameTime = now;
+    const stats = {
+      batches: 0,
+      facesDrawn: 0,
+      drawCalls: 0,
+      skyDrawn: false,
+      viewModelDrawn: false,
+      fps: Math.round(fps),
+      vertexCount: 0
+    };
+    const frameCtx = this.beginFrame();
+    this.currentFrameContext = frameCtx;
+    const { commandEncoder, renderTarget, depthTexture } = frameCtx;
+    const {
+      clearColor = [0, 0, 0, 1],
+      world,
+      camera,
+      timeSeconds = 0,
+      dlights,
+      renderMode,
+      disableLightmaps,
+      lightmapOnly,
+      brightness,
+      gamma,
+      fullbright,
+      ambient,
+      lightStyleOverrides,
+      portalState
+    } = options;
+    const viewProjection = new Float32Array(options.camera.viewProjectionMatrix);
+    const opaquePassDescriptor = {
+      colorAttachments: [{
+        view: renderTarget,
+        clearValue: clearColor,
+        loadOp: "clear",
+        storeOp: "store"
+      }],
+      depthStencilAttachment: {
+        view: depthTexture,
+        depthClearValue: 1,
+        depthLoadOp: "clear",
+        depthStoreOp: "store"
+      },
+      label: "opaque-render-pass"
+    };
+    const opaquePass = commandEncoder.beginRenderPass(opaquePassDescriptor);
+    if (options.sky && options.sky.cubemap) {
+      {
+        const cameraState = options.cameraState ?? options.camera.toState();
+        const scroll = computeSkyScroll(options.timeSeconds ?? 0, options.sky.scrollSpeeds ?? [0.01, 0.02]);
+        this.pipelines.skybox.draw(opaquePass, {
+          cameraState,
+          // NEW: let pipeline build matrices
+          scroll,
+          cubemap: options.sky.cubemap
+        });
+      }
+      stats.skyDrawn = true;
+    }
+    const opaqueFaces = [];
+    const transparentFaces = [];
+    if (world) {
+      world.materials?.update(timeSeconds);
+      const frustum = extractFrustumPlanes(Array.from(viewProjection));
+      const cameraPosition = {
+        x: camera.position[0] ?? 0,
+        y: camera.position[1] ?? 0,
+        z: camera.position[2] ?? 0
+      };
+      const visibleFaces = gatherVisibleFaces(world.map, cameraPosition, frustum, portalState);
+      for (const face of visibleFaces) {
+        const geometry = world.surfaces[face.faceIndex];
+        if (!geometry) continue;
+        const isTransparent = (geometry.surfaceFlags & (shared.SURF_TRANS33 | shared.SURF_TRANS66 | shared.SURF_WARP)) !== 0;
+        if (isTransparent) {
+          transparentFaces.push(face);
+        } else {
+          opaqueFaces.push(face);
+        }
+      }
+      const sortedOpaque = sortVisibleFacesFrontToBack2(opaqueFaces);
+      let effectiveLightStyles = world.lightStyles || [];
+      if (lightStyleOverrides && lightStyleOverrides.size > 0) {
+        const styles = [...world.lightStyles || []];
+        for (const [index, pattern] of lightStyleOverrides) {
+          while (styles.length <= index) styles.push(1);
+          styles[index] = evaluateLightStyle2(pattern, timeSeconds);
+        }
+        effectiveLightStyles = styles;
+      }
+      const drawSurfaceBatch = (faces, pass, lightStyles) => {
+        for (const { faceIndex } of faces) {
+          const geometry = world.surfaces[faceIndex];
+          if (!geometry) continue;
+          if ((geometry.surfaceFlags & shared.SURF_SKY) !== 0) continue;
+          const faceStyles = world.map.faces[faceIndex]?.styles;
+          this.pipelines.bsp.bind(pass, {
+            modelViewProjection: viewProjection,
+            styleIndices: faceStyles,
+            styleValues: lightStyles,
+            surfaceFlags: geometry.surfaceFlags,
+            timeSeconds,
+            // diffuseTexture: diffuse?.gpuTexture.createView(), // Need view
+            // diffuseSampler: ...
+            // lightmapTexture: ...
+            // lightmapSampler: ...
+            dlights,
+            renderMode,
+            lightmapOnly,
+            brightness,
+            gamma,
+            fullbright,
+            ambient,
+            cameraPosition: options.camera.position
+          });
+          this.pipelines.bsp.draw(pass, geometry, renderMode);
+          stats.facesDrawn++;
+          stats.drawCalls++;
+          stats.vertexCount += geometry.vertexCount;
+        }
+      };
+      drawSurfaceBatch(sortedOpaque, opaquePass, effectiveLightStyles);
+      opaquePass.end();
+      const transparentPassDescriptor = {
+        colorAttachments: [{
+          view: renderTarget,
+          loadOp: "load",
+          storeOp: "store"
+        }],
+        depthStencilAttachment: {
+          view: depthTexture,
+          depthLoadOp: "load",
+          depthStoreOp: "store"
+        },
+        label: "transparent-render-pass"
+      };
+      const transparentPass = commandEncoder.beginRenderPass(transparentPassDescriptor);
+      if (transparentFaces.length > 0) {
+        const sortedTransparent = sortVisibleFacesBackToFront2(transparentFaces);
+        drawSurfaceBatch(sortedTransparent, transparentPass, effectiveLightStyles);
+      }
+      transparentPass.end();
+    } else {
+      opaquePass.end();
+    }
+    if (options.underwaterWarp || options.bloom) ;
+    if (options.onDraw2D) {
+      options.onDraw2D();
+    }
+    if (this.pipelines.sprite.isActive) {
+      console.warn("2D render pass was not properly closed - auto-closing to prevent resource leak");
+      this.end2DPass();
+    }
+    this.context.device.queue.submit([commandEncoder.finish()]);
+    this.currentFrameContext = null;
+    return stats;
+  }
+};
+
+// src/render/webgpu/shaders/mipmapShader.ts
+var MIPMAP_SHADER = `
+struct VSOutput {
+  @builtin(position) position: vec4f,
+  @location(0) texcoord: vec2f,
+};
+
+@vertex
+fn vs_main(@builtin(vertex_index) vertexIndex : u32) -> VSOutput {
+  var pos = array<vec2f, 6>(
+    vec2f(-1.0, -1.0), vec2f(1.0, -1.0), vec2f(-1.0, 1.0),
+    vec2f(-1.0, 1.0), vec2f(1.0, -1.0), vec2f(1.0, 1.0)
+  );
+
+  var output: VSOutput;
+  output.position = vec4f(pos[vertexIndex], 0.0, 1.0);
+  // Remap from [-1, 1] to [0, 1] for texcoord, Y is flipped in WebGPU clip space vs texture UV
+  // Clip space: (-1,-1) is bottom-left. UV: (0,0) is top-left usually?
+  // Wait, WebGPU clip space Y is up. UV (0,0) is top-left.
+  // Quad vertices are full screen.
+  output.texcoord = pos[vertexIndex] * vec2f(0.5, -0.5) + vec2f(0.5, 0.5);
+  return output;
+}
+
+@group(0) @binding(0) var imgSampler: sampler;
+@group(0) @binding(1) var img: texture_2d<f32>;
+
+@fragment
+fn fs_main(in: VSOutput) -> @location(0) vec4f {
+  return textureSample(img, imgSampler, in.texcoord);
+}
+`;
+var GPUBufferResource = class {
+  constructor(device, descriptor) {
+    this.device = device;
+    this.size = Math.ceil(descriptor.size / 4) * 4;
+    this.usage = descriptor.usage;
+    this.buffer = device.createBuffer({
+      size: this.size,
+      usage: this.usage,
+      label: descriptor.label,
+      mappedAtCreation: descriptor.mappedAtCreation
+    });
+  }
+  write(data, offset = 0) {
+    const dataSize = data.byteLength;
+    if (offset + dataSize > this.size) {
+      throw new Error(`Buffer write out of bounds: offset ${offset} + data ${dataSize} > buffer ${this.size}`);
+    }
+    this.device.queue.writeBuffer(
+      this.buffer,
+      offset,
+      data,
+      0
+      // dataOffset
+    );
+  }
+  async mapAsync(mode, offset = 0, size) {
+    await this.buffer.mapAsync(mode, offset, size);
+  }
+  getMappedRange(offset = 0, size) {
+    return this.buffer.getMappedRange(offset, size);
+  }
+  unmap() {
+    this.buffer.unmap();
+  }
+  destroy() {
+    this.buffer.destroy();
+  }
+};
+var VertexBuffer2 = class extends GPUBufferResource {
+  constructor(device, descriptor) {
+    super(device, {
+      size: descriptor.size,
+      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST | (descriptor.usage || 0),
+      label: descriptor.label
+    });
+  }
+};
+var IndexBuffer2 = class extends GPUBufferResource {
+  constructor(device, descriptor) {
+    super(device, {
+      size: descriptor.size,
+      usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST | (descriptor.usage || 0),
+      label: descriptor.label
+    });
+  }
+};
+var UniformBuffer = class extends GPUBufferResource {
+  constructor(device, descriptor) {
+    super(device, {
+      size: descriptor.size,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST | (descriptor.usage || 0),
+      label: descriptor.label
+    });
+  }
+};
+function getBlockSize(format) {
+  switch (format) {
+    case "rgba8unorm":
+    case "rgba8unorm-srgb":
+    case "bgra8unorm":
+    case "bgra8unorm-srgb":
+    case "rgba8sint":
+    case "rgba8uint":
+      return 4;
+    case "rg8unorm":
+    case "rg8sint":
+    case "rg8uint":
+    case "r16float":
+    case "r16sint":
+    case "r16uint":
+      return 2;
+    case "r8unorm":
+    case "r8sint":
+    case "r8uint":
+      return 1;
+    case "rgba16float":
+    case "rgba16sint":
+    case "rgba16uint":
+    case "rgba32float":
+      return 8;
+    // wait, rgba16 is 8 bytes. rgba32 is 16 bytes.
+    case "rgba32float":
+    case "rgba32sint":
+    case "rgba32uint":
+      return 16;
+    case "depth24plus":
+    case "depth24plus-stencil8":
+    // approximate
+    case "depth32float":
+      return 4;
+    default:
+      return 4;
+  }
+}
+var _Texture2D = class _Texture2D {
+  constructor(device, descriptor) {
+    this.device = device;
+    this.width = descriptor.width;
+    this.height = descriptor.height;
+    this.format = descriptor.format;
+    const usage = descriptor.usage ?? GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT;
+    this.texture = device.createTexture({
+      size: [this.width, this.height, 1],
+      format: this.format,
+      usage,
+      mipLevelCount: descriptor.mipLevelCount ?? 1,
+      label: descriptor.label
+    });
+  }
+  upload(data, options = {}) {
+    const width = options.width ?? this.width;
+    const height = options.height ?? this.height;
+    const depthOrArrayLayers = options.depthOrArrayLayers ?? 1;
+    const mipLevel = options.mipLevel ?? 0;
+    const blockSize = getBlockSize(this.format);
+    let bytesPerRow = options.bytesPerRow;
+    if (!bytesPerRow) {
+      bytesPerRow = width * blockSize;
+    }
+    this.device.queue.writeTexture(
+      { texture: this.texture, mipLevel, origin: { x: 0, y: 0, z: 0 } },
+      data,
+      {
+        offset: 0,
+        bytesPerRow,
+        rowsPerImage: options.rowsPerImage ?? height
+      },
+      { width, height, depthOrArrayLayers }
+    );
+  }
+  getMipmapPipeline(format) {
+    let devicePipelines = _Texture2D.mipmapPipelines.get(this.device);
+    if (!devicePipelines) {
+      devicePipelines = /* @__PURE__ */ new Map();
+      _Texture2D.mipmapPipelines.set(this.device, devicePipelines);
+    }
+    let pipeline = devicePipelines.get(format);
+    if (!pipeline) {
+      const module = this.device.createShaderModule({
+        code: MIPMAP_SHADER,
+        label: "mipmap-shader"
+      });
+      pipeline = this.device.createRenderPipeline({
+        layout: "auto",
+        vertex: {
+          module,
+          entryPoint: "vs_main"
+        },
+        fragment: {
+          module,
+          entryPoint: "fs_main",
+          targets: [{ format }]
+        },
+        primitive: {
+          topology: "triangle-list"
+        },
+        label: `mipmap-pipeline-${format}`
+      });
+      devicePipelines.set(format, pipeline);
+    }
+    return pipeline;
+  }
+  getMipmapSampler() {
+    let sampler = _Texture2D.mipmapSamplers.get(this.device);
+    if (!sampler) {
+      sampler = this.device.createSampler({
+        minFilter: "linear",
+        magFilter: "linear",
+        label: "mipmap-sampler"
+      });
+      _Texture2D.mipmapSamplers.set(this.device, sampler);
+    }
+    return sampler;
+  }
+  generateMipmaps(commandEncoder) {
+    const mipCount = this.texture.mipLevelCount;
+    if (mipCount <= 1) return;
+    const pipeline = this.getMipmapPipeline(this.format);
+    const sampler = this.getMipmapSampler();
+    for (let i = 1; i < mipCount; i++) {
+      const srcView = this.texture.createView({
+        baseMipLevel: i - 1,
+        mipLevelCount: 1,
+        label: `mipmap-src-${i - 1}`
+      });
+      const dstView = this.texture.createView({
+        baseMipLevel: i,
+        mipLevelCount: 1,
+        label: `mipmap-dst-${i}`
+      });
+      const passEncoder = commandEncoder.beginRenderPass({
+        colorAttachments: [{
+          view: dstView,
+          loadOp: "clear",
+          storeOp: "store"
+        }],
+        label: `mipmap-pass-${i}`
+      });
+      const bindGroup = this.device.createBindGroup({
+        layout: pipeline.getBindGroupLayout(0),
+        entries: [
+          { binding: 0, resource: sampler },
+          { binding: 1, resource: srcView }
+        ],
+        label: `mipmap-bindgroup-${i}`
+      });
+      passEncoder.setPipeline(pipeline);
+      passEncoder.setBindGroup(0, bindGroup);
+      passEncoder.draw(6);
+      passEncoder.end();
+    }
+  }
+  createView(descriptor) {
+    return this.texture.createView(descriptor);
+  }
+  destroy() {
+    this.texture.destroy();
+  }
+  get memorySize() {
+    const blockSize = getBlockSize(this.format);
+    let size = 0;
+    let w = this.width;
+    let h = this.height;
+    const mipCount = this.texture.mipLevelCount;
+    for (let i = 0; i < mipCount; i++) {
+      size += w * h * blockSize;
+      w = Math.max(1, Math.floor(w / 2));
+      h = Math.max(1, Math.floor(h / 2));
+    }
+    return size;
+  }
+};
+// Cache pipelines per device and per format
+_Texture2D.mipmapPipelines = /* @__PURE__ */ new WeakMap();
+_Texture2D.mipmapSamplers = /* @__PURE__ */ new WeakMap();
+var Texture2D2 = _Texture2D;
+var Sampler = class {
+  constructor(device, descriptor) {
+    this.sampler = device.createSampler({
+      ...descriptor,
+      label: descriptor.label
+    });
+  }
+  destroy() {
+  }
+};
+function createLinearSampler(device) {
+  return new Sampler(device, {
+    minFilter: "linear",
+    magFilter: "linear",
+    mipmapFilter: "linear",
+    label: "linear-sampler"
+  });
+}
+var ShaderModule = class {
+  constructor(device, descriptor) {
+    this.device = device;
+    this.module = device.createShaderModule({
+      code: descriptor.code,
+      label: descriptor.label
+    });
+  }
+  get compilationInfo() {
+    return this.module.getCompilationInfo();
+  }
+};
+var RenderPipeline = class {
+  constructor(device, descriptor) {
+    this.device = device;
+    const layout = descriptor.layout;
+    this.pipeline = device.createRenderPipeline({
+      layout,
+      vertex: {
+        module: descriptor.vertex.module.module,
+        entryPoint: descriptor.vertex.entryPoint,
+        buffers: descriptor.vertex.buffers
+      },
+      fragment: descriptor.fragment ? {
+        module: descriptor.fragment.module.module,
+        entryPoint: descriptor.fragment.entryPoint,
+        targets: descriptor.fragment.targets
+      } : void 0,
+      primitive: descriptor.primitive,
+      depthStencil: descriptor.depthStencil,
+      multisample: descriptor.multisample,
+      label: descriptor.label
+    });
+  }
+  get layout() {
+    throw new Error("Cannot retrieve layout from pipeline created with 'auto' layout");
+  }
+  destroy() {
+  }
+};
+var BindGroupLayout = class {
+  constructor(device, descriptor) {
+    this.device = device;
+    this.layout = device.createBindGroupLayout({
+      entries: descriptor.entries,
+      label: descriptor.label
+    });
+  }
+};
+var BindGroup = class {
+  constructor(device, layout, entries, label) {
+    this.device = device;
+    const gpuEntries = entries.map((entry) => {
+      let resource;
+      if (entry.resource instanceof GPUBufferResource) {
+        resource = { buffer: entry.resource.buffer };
+      } else if (entry.resource instanceof Sampler) {
+        resource = entry.resource.sampler;
+      } else {
+        resource = entry.resource;
+      }
+      return {
+        binding: entry.binding,
+        resource
+      };
+    });
+    this.bindGroup = device.createBindGroup({
+      layout: layout.layout,
+      entries: gpuEntries,
+      label
+    });
+  }
+  destroy() {
+  }
+};
+var BindGroupBuilder = class {
+  constructor(label) {
+    this.label = label;
+    this.entries = [];
+  }
+  addUniformBuffer(binding, visibility) {
+    this.entries.push({
+      binding,
+      visibility,
+      buffer: { type: "uniform" }
+    });
+    return this;
+  }
+  addStorageBuffer(binding, visibility, type = "read-only-storage") {
+    this.entries.push({
+      binding,
+      visibility,
+      buffer: { type }
+    });
+    return this;
+  }
+  addTexture(binding, visibility, sampleType = "float", viewDimension = "2d") {
+    this.entries.push({
+      binding,
+      visibility,
+      texture: { sampleType, viewDimension }
+    });
+    return this;
+  }
+  addSampler(binding, visibility, type = "filtering") {
+    this.entries.push({
+      binding,
+      visibility,
+      sampler: { type }
+    });
+    return this;
+  }
+  build(device) {
+    return new BindGroupLayout(device, {
+      entries: this.entries,
+      label: this.label
+    });
+  }
+};
+
+// src/render/webgpu/shaders/spriteShader.ts
+var SPRITE_SHADER = `
+// Sprite Rendering Shader (WGSL)
+
+struct VertexInput {
+  @location(0) position: vec2f,
+  @location(1) texcoord: vec2f,
+  @location(2) color: vec4f,
+}
+
+struct VertexOutput {
+  @builtin(position) position: vec4f,
+  @location(0) texcoord: vec2f,
+  @location(1) color: vec4f,
+}
+
+struct Uniforms {
+  projection: mat4x4f,
+}
+
+@group(0) @binding(0) var<uniform> uniforms: Uniforms;
+
+@vertex
+fn vs_main(input: VertexInput) -> VertexOutput {
+  var output: VertexOutput;
+  // Orthographic projection: Input is screen coords (pixels), Z is 0.0, W is 1.0
+  output.position = uniforms.projection * vec4f(input.position, 0.0, 1.0);
+  output.texcoord = input.texcoord;
+  output.color = input.color;
+  return output;
+}
+
+@group(1) @binding(0) var texSampler: sampler;
+@group(1) @binding(1) var tex: texture_2d<f32>;
+
+@fragment
+fn fs_main(input: VertexOutput) -> @location(0) vec4f {
+  let texColor = textureSample(tex, texSampler, input.texcoord);
+  return texColor * input.color;
+}
+
+@fragment
+fn fs_solid(input: VertexOutput) -> @location(0) vec4f {
+  return input.color;
+}
+`;
+
+// src/render/webgpu/pipelines/sprite.ts
+var MAX_SPRITES = 2048;
+var VERTICES_PER_SPRITE = 4;
+var INDICES_PER_SPRITE = 6;
+var FLOATS_PER_VERTEX = 8;
+var SpriteRenderer2 = class {
+  constructor(device, format) {
+    this.device = device;
+    this.format = format;
+    this.currentVertexCount = 0;
+    this.currentIndexCount = 0;
+    this.currentTexture = null;
+    this.drawCommands = [];
+    this.textureBindGroups = /* @__PURE__ */ new Map();
+    this._activeEncoder = null;
+    this._activeRenderTarget = null;
+    const shaderModule = new ShaderModule(device, {
+      code: SPRITE_SHADER,
+      label: "sprite-shader"
+    });
+    const vertexBufferLayout = {
+      arrayStride: FLOATS_PER_VERTEX * 4,
+      stepMode: "vertex",
+      attributes: [
+        { format: "float32x2", offset: 0, shaderLocation: 0 },
+        // position
+        { format: "float32x2", offset: 8, shaderLocation: 1 },
+        // texcoord
+        { format: "float32x4", offset: 16, shaderLocation: 2 }
+        // color
+      ]
+    };
+    const bindGroupBuilder = new BindGroupBuilder("sprite-uniform-layout");
+    bindGroupBuilder.addUniformBuffer(0, GPUShaderStage.VERTEX);
+    const uniformBindGroupLayout = bindGroupBuilder.build(device);
+    const textureBindGroupBuilder = new BindGroupBuilder("sprite-texture-layout");
+    textureBindGroupBuilder.addSampler(0, GPUShaderStage.FRAGMENT);
+    textureBindGroupBuilder.addTexture(1, GPUShaderStage.FRAGMENT);
+    this.textureBindGroupLayout = textureBindGroupBuilder.build(device);
+    const pipelineLayout = device.createPipelineLayout({
+      bindGroupLayouts: [
+        uniformBindGroupLayout.layout,
+        this.textureBindGroupLayout.layout
+      ],
+      label: "sprite-pipeline-layout"
+    });
+    const pipelineLayoutSolid = device.createPipelineLayout({
+      bindGroupLayouts: [
+        uniformBindGroupLayout.layout
+      ],
+      label: "sprite-pipeline-solid-layout"
+    });
+    const blendState = {
+      color: {
+        srcFactor: "src-alpha",
+        dstFactor: "one-minus-src-alpha",
+        operation: "add"
+      },
+      alpha: {
+        srcFactor: "one",
+        dstFactor: "one-minus-src-alpha",
+        operation: "add"
+      }
+    };
+    this.pipelineTextured = new RenderPipeline(device, {
+      layout: pipelineLayout,
+      vertex: {
+        module: shaderModule,
+        entryPoint: "vs_main",
+        buffers: [vertexBufferLayout]
+      },
+      fragment: {
+        module: shaderModule,
+        entryPoint: "fs_main",
+        targets: [{
+          format: this.format,
+          blend: blendState
+        }]
+      },
+      primitive: {
+        topology: "triangle-list",
+        cullMode: "none"
+        // Sprites are 2D, no culling usually needed
+      },
+      label: "sprite-pipeline-textured"
+    });
+    this.pipelineSolid = new RenderPipeline(device, {
+      layout: pipelineLayoutSolid,
+      vertex: {
+        module: shaderModule,
+        entryPoint: "vs_main",
+        buffers: [vertexBufferLayout]
+      },
+      fragment: {
+        module: shaderModule,
+        entryPoint: "fs_solid",
+        targets: [{
+          format: this.format,
+          blend: blendState
+        }]
+      },
+      primitive: {
+        topology: "triangle-list",
+        cullMode: "none"
+      },
+      label: "sprite-pipeline-solid"
+    });
+    this.vertexBuffer = new VertexBuffer2(device, {
+      size: MAX_SPRITES * VERTICES_PER_SPRITE * FLOATS_PER_VERTEX * 4,
+      label: "sprite-vertex-buffer",
+      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
+    });
+    this.indexBuffer = new IndexBuffer2(device, {
+      size: MAX_SPRITES * INDICES_PER_SPRITE * 2,
+      // Uint16
+      label: "sprite-index-buffer",
+      usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST
+    });
+    this.uniformBuffer = new UniformBuffer(device, {
+      size: 64,
+      // mat4
+      label: "sprite-uniform-buffer",
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    });
+    this.uniformBindGroup = new BindGroup(
+      device,
+      uniformBindGroupLayout,
+      [
+        { binding: 0, resource: this.uniformBuffer }
+      ],
+      "sprite-uniform-bind-group"
+    );
+    this.vertexData = new Float32Array(MAX_SPRITES * VERTICES_PER_SPRITE * FLOATS_PER_VERTEX);
+    const indices = new Uint16Array(MAX_SPRITES * INDICES_PER_SPRITE);
+    for (let i = 0; i < MAX_SPRITES; i++) {
+      const v = i * 4;
+      const ii = i * 6;
+      indices[ii] = v;
+      indices[ii + 1] = v + 1;
+      indices[ii + 2] = v + 2;
+      indices[ii + 3] = v;
+      indices[ii + 4] = v + 2;
+      indices[ii + 5] = v + 3;
+    }
+    this.indexBuffer.write(indices);
+    this.projectionMatrix = glMatrix.mat4.create();
+    this.defaultSampler = createLinearSampler(device);
+  }
+  setProjection(width, height) {
+    glMatrix.mat4.ortho(this.projectionMatrix, 0, width, height, 0, -1, 1);
+    this.uniformBuffer.write(this.projectionMatrix);
+  }
+  begin(commandEncoder, renderTarget) {
+    this.currentVertexCount = 0;
+    this.currentIndexCount = 0;
+    this.drawCommands = [];
+    this.currentTexture = null;
+    this._activeEncoder = commandEncoder;
+    this._activeRenderTarget = renderTarget;
+  }
+  drawTexturedQuad(x, y, w, h, texture, u1 = 0, v1 = 0, u2 = 1, v2 = 1, color = [1, 1, 1, 1]) {
+    if (this.currentVertexCount + VERTICES_PER_SPRITE > MAX_SPRITES * VERTICES_PER_SPRITE) {
+      this.flush();
+    }
+    if (this.drawCommands.length === 0 || this.currentTexture !== texture) {
+      this.drawCommands.push({
+        texture,
+        start: this.currentIndexCount,
+        count: 0
+      });
+      this.currentTexture = texture;
+    }
+    const offset = this.currentVertexCount * FLOATS_PER_VERTEX;
+    const [r, g, b, a] = color;
+    this.vertexData[offset] = x;
+    this.vertexData[offset + 1] = y;
+    this.vertexData[offset + 2] = u1;
+    this.vertexData[offset + 3] = v1;
+    this.vertexData[offset + 4] = r;
+    this.vertexData[offset + 5] = g;
+    this.vertexData[offset + 6] = b;
+    this.vertexData[offset + 7] = a;
+    this.vertexData[offset + 8] = x;
+    this.vertexData[offset + 9] = y + h;
+    this.vertexData[offset + 10] = u1;
+    this.vertexData[offset + 11] = v2;
+    this.vertexData[offset + 12] = r;
+    this.vertexData[offset + 13] = g;
+    this.vertexData[offset + 14] = b;
+    this.vertexData[offset + 15] = a;
+    this.vertexData[offset + 16] = x + w;
+    this.vertexData[offset + 17] = y + h;
+    this.vertexData[offset + 18] = u2;
+    this.vertexData[offset + 19] = v2;
+    this.vertexData[offset + 20] = r;
+    this.vertexData[offset + 21] = g;
+    this.vertexData[offset + 22] = b;
+    this.vertexData[offset + 23] = a;
+    this.vertexData[offset + 24] = x + w;
+    this.vertexData[offset + 25] = y;
+    this.vertexData[offset + 26] = u2;
+    this.vertexData[offset + 27] = v1;
+    this.vertexData[offset + 28] = r;
+    this.vertexData[offset + 29] = g;
+    this.vertexData[offset + 30] = b;
+    this.vertexData[offset + 31] = a;
+    this.currentVertexCount += 4;
+    this.currentIndexCount += 6;
+    this.drawCommands[this.drawCommands.length - 1].count += 6;
+  }
+  drawSolidRect(x, y, w, h, color) {
+    if (this.currentTexture !== null) {
+      this.drawCommands.push({
+        texture: null,
+        start: this.currentIndexCount,
+        count: 0
+      });
+      this.currentTexture = null;
+    }
+    this.drawTexturedQuad(x, y, w, h, null, 0, 0, 0, 0, color);
+  }
+  flush() {
+    if (this.currentVertexCount === 0) return;
+    if (!this._activeEncoder || !this._activeRenderTarget) return;
+    const usedFloats = this.currentVertexCount * FLOATS_PER_VERTEX;
+    this.vertexBuffer.write(this.vertexData.subarray(0, usedFloats));
+    const passEncoder = this._activeEncoder.beginRenderPass({
+      colorAttachments: [{
+        view: this._activeRenderTarget,
+        loadOp: "load",
+        storeOp: "store"
+      }],
+      label: "sprite-pass"
+    });
+    passEncoder.setBindGroup(0, this.uniformBindGroup.bindGroup);
+    passEncoder.setVertexBuffer(0, this.vertexBuffer.buffer);
+    passEncoder.setIndexBuffer(this.indexBuffer.buffer, "uint16");
+    for (const cmd of this.drawCommands) {
+      if (cmd.count === 0) continue;
+      if (cmd.texture) {
+        passEncoder.setPipeline(this.pipelineTextured.pipeline);
+        let bindGroup = this.textureBindGroups.get(cmd.texture);
+        if (!bindGroup) {
+          bindGroup = new BindGroup(
+            this.device,
+            this.textureBindGroupLayout,
+            [
+              { binding: 0, resource: this.defaultSampler },
+              { binding: 1, resource: cmd.texture.createView() }
+            ],
+            `sprite-texture-bind-group-${cmd.texture.texture.label}`
+          );
+          this.textureBindGroups.set(cmd.texture, bindGroup);
+        }
+        passEncoder.setBindGroup(1, bindGroup.bindGroup);
+      } else {
+        passEncoder.setPipeline(this.pipelineSolid.pipeline);
+      }
+      passEncoder.drawIndexed(cmd.count, 1, cmd.start, 0, 0);
+    }
+    passEncoder.end();
+    this.currentVertexCount = 0;
+    this.currentIndexCount = 0;
+    this.drawCommands = [];
+    this.currentTexture = null;
+  }
+  end() {
+    this.flush();
+    this._activeEncoder = null;
+    this._activeRenderTarget = null;
+  }
+  /**
+   * Check if sprite renderer is currently in an active render pass
+   * Ref: Defensive check to prevent GPU resource leaks
+   */
+  get isActive() {
+    return this._activeEncoder !== null;
+  }
+  destroy() {
+    this.vertexBuffer.destroy();
+    this.indexBuffer.destroy();
+    this.uniformBuffer.destroy();
+  }
+};
+
+// raw-loader:/home/runner/work/quake2/quake2/quake2ts/packages/engine/src/render/webgpu/shaders/skybox.wgsl
+var skybox_default = "struct Uniforms {\n  viewProjection: mat4x4<f32>,\n  scroll: vec2<f32>,\n}\n\n@group(0) @binding(0) var<uniform> uniforms: Uniforms;\n@group(0) @binding(1) var t_skybox: texture_cube<f32>;\n@group(0) @binding(2) var s_skybox: sampler;\n\nstruct VertexOutput {\n  @builtin(position) position: vec4<f32>,\n  @location(0) direction: vec3<f32>,\n}\n\n@vertex\nfn vertexMain(@location(0) position: vec3<f32>) -> VertexOutput {\n  var output: VertexOutput;\n\n  // Normalize input position (Quake Coordinates)\n  var qDir = normalize(position);\n\n  // Apply scrolling in Quake Coordinates (Horizontal Plane X/Y)\n  // This ensures clouds scroll horizontally regardless of the final mapping.\n  qDir.x += uniforms.scroll.x;\n  qDir.y += uniforms.scroll.y;\n\n  // Transform Quake coordinates (X-Fwd, Y-Left, Z-Up)\n  // to WebGPU/GL cubemap coordinates (Right-handed? -Z Fwd, +X Right, +Y Up)\n  // Quake X  -> GL -Z\n  // Quake Y  -> GL -X\n  // Quake Z  -> GL Y\n  var dir = vec3<f32>(-qDir.y, qDir.z, -qDir.x);\n\n  output.direction = dir;\n\n  output.position = uniforms.viewProjection * vec4<f32>(position, 1.0);\n  return output;\n}\n\n@fragment\nfn fragmentMain(@location(0) direction: vec3<f32>) -> @location(0) vec4<f32> {\n  return textureSample(t_skybox, s_skybox, direction);\n}\n";
+
+// src/render/types/coordinates.ts
+var CoordinateSystem = /* @__PURE__ */ ((CoordinateSystem2) => {
+  CoordinateSystem2["QUAKE"] = "quake";
+  CoordinateSystem2["OPENGL"] = "opengl";
+  CoordinateSystem2["WEBGPU"] = "webgpu";
+  return CoordinateSystem2;
+})(CoordinateSystem || {});
+
+// src/render/matrix/webgpu.ts
+var WebGPUMatrixBuilder = class {
+  constructor() {
+    this.coordinateSystem = "webgpu" /* WEBGPU */;
+  }
+  buildProjectionMatrix(camera) {
+    const projection = glMatrix.mat4.create();
+    const f = 1 / Math.tan(camera.fov * shared.DEG2RAD / 2);
+    const rangeInv = 1 / (camera.near - camera.far);
+    projection[0] = f / camera.aspect;
+    projection[5] = f;
+    projection[10] = camera.far * rangeInv;
+    projection[11] = -1;
+    projection[14] = camera.near * camera.far * rangeInv;
+    return projection;
+  }
+  buildViewMatrix(camera) {
+    const [pitch, yaw, roll] = camera.angles;
+    const pitchRad = pitch * shared.DEG2RAD;
+    const yawRad = yaw * shared.DEG2RAD;
+    const rollRad = roll * shared.DEG2RAD;
+    const rotationQuake = glMatrix.mat4.create();
+    glMatrix.mat4.identity(rotationQuake);
+    glMatrix.mat4.rotateZ(rotationQuake, rotationQuake, -yawRad);
+    glMatrix.mat4.rotateY(rotationQuake, rotationQuake, -pitchRad);
+    glMatrix.mat4.rotateX(rotationQuake, rotationQuake, -rollRad);
+    glMatrix.mat4.fromValues(
+      0,
+      0,
+      -1,
+      0,
+      // Column 0: Quake X maps to View Z? Wait.
+      -1,
+      0,
+      0,
+      0,
+      // Column 1: Quake Y maps to View X?
+      0,
+      1,
+      0,
+      0,
+      // Column 2: Quake Z maps to View Y?
+      0,
+      0,
+      0,
+      1
+    );
+    const quakeToWgpu = glMatrix.mat4.fromValues(
+      0,
+      0,
+      -1,
+      0,
+      // Col 0: X -> -Z
+      -1,
+      0,
+      0,
+      0,
+      // Col 1: Y -> -X
+      0,
+      1,
+      0,
+      0,
+      // Col 2: Z -> Y
+      0,
+      0,
+      0,
+      1
+    );
+    const rotationView = glMatrix.mat4.create();
+    glMatrix.mat4.multiply(rotationView, quakeToWgpu, rotationQuake);
+    const cameraPos = glMatrix.vec3.fromValues(
+      camera.position[0],
+      camera.position[1],
+      camera.position[2]
+    );
+    const t = glMatrix.vec3.transformMat4(glMatrix.vec3.create(), cameraPos, rotationView);
+    glMatrix.vec3.negate(t, t);
+    const view = glMatrix.mat4.clone(rotationView);
+    view[12] = t[0];
+    view[13] = t[1];
+    view[14] = t[2];
+    return view;
+  }
+};
+var SKYBOX_POSITIONS2 = new Float32Array([
+  // Front face (+X) - looking forward
+  1,
+  -1,
+  -1,
+  1,
+  1,
+  -1,
+  1,
+  1,
+  1,
+  1,
+  -1,
+  -1,
+  1,
+  1,
+  1,
+  1,
+  -1,
+  1,
+  // Back face (-X) - looking backward
+  -1,
+  1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  1,
+  -1,
+  1,
+  -1,
+  -1,
+  -1,
+  1,
+  -1,
+  1,
+  1,
+  // Left face (+Y) - looking left
+  -1,
+  1,
+  -1,
+  -1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  -1,
+  1,
+  -1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  -1,
+  // Right face (-Y) - looking right
+  1,
+  -1,
+  -1,
+  1,
+  -1,
+  1,
+  -1,
+  -1,
+  1,
+  1,
+  -1,
+  -1,
+  -1,
+  -1,
+  1,
+  -1,
+  -1,
+  -1,
+  // Top face (+Z) - looking up
+  -1,
+  -1,
+  1,
+  1,
+  -1,
+  1,
+  1,
+  1,
+  1,
+  -1,
+  -1,
+  1,
+  1,
+  1,
+  1,
+  -1,
+  1,
+  1,
+  // Bottom face (-Z) - looking down
+  -1,
+  1,
+  -1,
+  1,
+  1,
+  -1,
+  1,
+  -1,
+  -1,
+  -1,
+  1,
+  -1,
+  1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1
+]);
+var SkyboxPipeline3 = class {
+  constructor(device, format) {
+    this.device = device;
+    this.format = format;
+    this.matrixBuilder = new WebGPUMatrixBuilder();
+    const module = device.createShaderModule({
+      label: "skybox-shader",
+      code: skybox_default
+    });
+    this.vertexBuffer = device.createBuffer({
+      label: "skybox-vertex-buffer",
+      size: SKYBOX_POSITIONS2.byteLength,
+      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+      mappedAtCreation: true
+    });
+    new Float32Array(this.vertexBuffer.getMappedRange()).set(SKYBOX_POSITIONS2);
+    this.vertexBuffer.unmap();
+    this.uniformBuffer = device.createBuffer({
+      label: "skybox-uniform-buffer",
+      size: 80,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    });
+    this.sampler = device.createSampler({
+      label: "skybox-sampler",
+      minFilter: "linear",
+      magFilter: "linear",
+      addressModeU: "clamp-to-edge",
+      addressModeV: "clamp-to-edge",
+      addressModeW: "clamp-to-edge"
+    });
+    const bindGroupLayout = device.createBindGroupLayout({
+      label: "skybox-bind-group-layout",
+      entries: [
+        {
+          binding: 0,
+          visibility: GPUShaderStage.VERTEX,
+          buffer: { type: "uniform" }
+        },
+        {
+          binding: 1,
+          visibility: GPUShaderStage.FRAGMENT,
+          texture: { viewDimension: "cube" }
+        },
+        {
+          binding: 2,
+          visibility: GPUShaderStage.FRAGMENT,
+          sampler: { type: "filtering" }
+        }
+      ]
+    });
+    this.pipeline = device.createRenderPipeline({
+      label: "skybox-pipeline",
+      layout: device.createPipelineLayout({
+        bindGroupLayouts: [bindGroupLayout]
+      }),
+      vertex: {
+        module,
+        entryPoint: "vertexMain",
+        buffers: [{
+          arrayStride: 12,
+          // vec3<f32>
+          attributes: [{
+            shaderLocation: 0,
+            offset: 0,
+            format: "float32x3"
+          }]
+        }]
+      },
+      fragment: {
+        module,
+        entryPoint: "fragmentMain",
+        targets: [{
+          format: this.format,
+          blend: {
+            // Standard alpha blending (though skybox is usually opaque)
+            color: {
+              srcFactor: "src-alpha",
+              dstFactor: "one-minus-src-alpha",
+              operation: "add"
+            },
+            alpha: {
+              srcFactor: "one",
+              dstFactor: "one-minus-src-alpha",
+              operation: "add"
+            }
+          }
+        }]
+      },
+      depthStencil: {
+        format: "depth24plus",
+        depthWriteEnabled: false,
+        depthCompare: "always"
+        // Skybox is usually drawn first or last. If first, always pass.
+      },
+      primitive: {
+        topology: "triangle-list",
+        cullMode: "none"
+        // Inside the box
+      }
+    });
+    this.bindGroupHelper = new SkyboxBindGroupHelper(device, bindGroupLayout, this.uniformBuffer, this.sampler);
+  }
+  draw(passEncoder, options) {
+    let viewProjection;
+    let useNative = 0;
+    if (options.cameraState) {
+      const view = this.matrixBuilder.buildViewMatrix(options.cameraState);
+      const projection = this.matrixBuilder.buildProjectionMatrix(options.cameraState);
+      view[12] = 0;
+      view[13] = 0;
+      view[14] = 0;
+      const vp = glMatrix.mat4.create();
+      glMatrix.mat4.multiply(vp, projection, view);
+      viewProjection = vp;
+      useNative = 1;
+    } else if (options.viewProjection) {
+      viewProjection = options.viewProjection;
+      useNative = 0;
+    } else {
+      throw new Error("SkyboxPipeline: Either cameraState or viewProjection must be provided");
+    }
+    const uniformData = new Float32Array(20);
+    uniformData.set(viewProjection);
+    uniformData[16] = options.scroll[0];
+    uniformData[17] = options.scroll[1];
+    uniformData[18] = useNative;
+    this.device.queue.writeBuffer(this.uniformBuffer, 0, uniformData);
+    const bindGroup = this.bindGroupHelper.getBindGroup(options.cubemap);
+    passEncoder.setPipeline(this.pipeline);
+    passEncoder.setBindGroup(0, bindGroup);
+    passEncoder.setVertexBuffer(0, this.vertexBuffer);
+    passEncoder.draw(SKYBOX_POSITIONS2.length / 3);
+  }
+  destroy() {
+    this.vertexBuffer.destroy();
+    this.uniformBuffer.destroy();
+  }
+};
+var SkyboxBindGroupHelper = class {
+  constructor(device, layout, uniformBuffer, sampler) {
+    this.device = device;
+    this.layout = layout;
+    this.uniformBuffer = uniformBuffer;
+    this.sampler = sampler;
+    this.bindGroupCache = /* @__PURE__ */ new Map();
+  }
+  getBindGroup(cubemap) {
+    if (this.bindGroupCache.has(cubemap)) {
+      return this.bindGroupCache.get(cubemap);
+    }
+    const bindGroup = this.device.createBindGroup({
+      layout: this.layout,
+      entries: [
+        {
+          binding: 0,
+          resource: { buffer: this.uniformBuffer }
+        },
+        {
+          binding: 1,
+          resource: cubemap.createView()
+        },
+        {
+          binding: 2,
+          resource: this.sampler
+        }
+      ]
+    });
+    this.bindGroupCache.set(cubemap, bindGroup);
+    return bindGroup;
+  }
+};
+
+// raw-loader:/home/runner/work/quake2/quake2/quake2ts/packages/engine/src/render/webgpu/shaders/bsp.wgsl
+var bsp_default = "struct DLight {\n    position: vec3<f32>,\n    intensity: f32,\n    color: vec3<f32>,\n    padding: f32,\n}\n\nstruct FrameUniforms {\n    viewProjection: mat4x4<f32>,    // 0-64\n    cameraPosition: vec3<f32>,      // 64-76\n    pad0: f32,                      // 76-80 (Explicit padding to align next field to 80)\n    time: f32,                      // 80-84\n    brightness: f32,                // 84-88\n    gamma: f32,                     // 88-92\n    ambient: f32,                   // 92-96\n    numDlights: u32,                // 96-100\n    fullbright: u32,                // 100-104\n    pad1: vec2<f32>,                // 104-112 (Aligns next field to 112)\n    pad2: vec4<f32>,                // 112-128 (Aligns next field to 128)\n    dlights: array<DLight, 32>,     // Starts at 128\n}\n\nstruct SurfaceUniforms {\n    texScroll: vec2<f32>,\n    lightmapScroll: vec2<f32>,\n    lightStyleFactors: vec4<f32>,\n    styleLayerMapping: vec4<f32>,\n    solidColor: vec4<f32>,\n    alpha: f32,\n    applyLightmap: u32,\n    warp: u32,\n    lightmapOnly: u32,\n    renderMode: u32, // 0: Texture, 1: Solid, 2: Faceted\n    padding: vec3<f32>,\n}\n\n@group(0) @binding(0) var<uniform> frame: FrameUniforms;\n@group(1) @binding(0) var<uniform> surface: SurfaceUniforms;\n@group(2) @binding(0) var diffuseMap: texture_2d<f32>;\n@group(2) @binding(1) var diffuseSampler: sampler;\n@group(2) @binding(2) var lightmapAtlas: texture_2d<f32>;\n@group(2) @binding(3) var lightmapSampler: sampler;\n\nstruct VertexInput {\n    @location(0) position: vec3<f32>,\n    @location(1) texCoord: vec2<f32>,\n    @location(2) lightmapCoord: vec2<f32>,\n    @location(3) lightmapStep: f32,\n}\n\nstruct VertexOutput {\n    @builtin(position) position: vec4<f32>,\n    @location(0) texCoord: vec2<f32>,\n    @location(1) lightmapCoord: vec2<f32>,\n    @location(2) lightmapStep: f32,\n    @location(3) worldPos: vec3<f32>,\n    @location(4) screenPos: vec4<f32>,\n}\n\n@vertex\nfn vertexMain(input: VertexInput) -> VertexOutput {\n    var output: VertexOutput;\n\n    var pos = input.position;\n    var tex = input.texCoord;\n    var lm = input.lightmapCoord;\n\n    // Vertex Warping\n    if (surface.warp != 0u) {\n        let amp = 0.125;\n        let s = tex.x + sin((tex.y * 0.125 + frame.time) * 1.0) * amp;\n        let t = tex.y + sin((tex.x * 0.125 + frame.time) * 1.0) * amp;\n        tex = vec2<f32>(s, t);\n    }\n\n    output.texCoord = tex + surface.texScroll;\n    output.lightmapCoord = lm + surface.lightmapScroll;\n    output.lightmapStep = input.lightmapStep;\n    output.worldPos = pos;\n    output.position = frame.viewProjection * vec4<f32>(pos, 1.0);\n    output.screenPos = output.position;\n\n    return output;\n}\n\n@fragment\nfn fragmentMain(input: VertexOutput) -> @location(0) vec4<f32> {\n    var finalColor: vec4<f32>;\n\n    if (surface.renderMode == 0u) {\n        // TEXTURED MODE\n        var base = vec4<f32>(1.0, 1.0, 1.0, 1.0);\n        if (surface.lightmapOnly == 0u) {\n            base = textureSample(diffuseMap, diffuseSampler, input.texCoord);\n        }\n\n        var totalLight = vec3<f32>(0.0, 0.0, 0.0);\n\n        if (frame.fullbright != 0u) {\n            totalLight = vec3<f32>(1.0, 1.0, 1.0);\n        } else {\n            // Apply Lightmaps\n            if (surface.applyLightmap != 0u) {\n                var hasLight = false;\n                for (var i = 0; i < 4; i++) {\n                    let layer = surface.styleLayerMapping[i];\n                    let factor = surface.lightStyleFactors[i];\n\n                    if (layer >= -0.5) {\n                        let offset = vec2<f32>(0.0, layer * input.lightmapStep);\n                        totalLight += textureSample(lightmapAtlas, lightmapSampler, input.lightmapCoord + offset).rgb * factor;\n                        hasLight = true;\n                    }\n                }\n\n                // If lightmap enabled but no active layers, fallback to white?\n                // Quake 2 logic usually implies at least one style is active if surfaced has SURF_LIGHT\n                // But if we have no lightmap data, we start black.\n                if (!hasLight) {\n                    // Fallback to avoid pitch black if lightmap intended but missing?\n                    // totalLight = vec3<f32>(1.0, 1.0, 1.0);\n                }\n            }\n\n            // Apply Dynamic Lights\n            for (var i = 0u; i < 32u; i++) {\n                if (i >= frame.numDlights) {\n                    break;\n                }\n                let dlight = frame.dlights[i];\n                let dist = distance(input.worldPos, dlight.position);\n\n                if (dist < dlight.intensity) {\n                    let contribution = (dlight.intensity - dist) * (1.0 / 255.0);\n                    totalLight += dlight.color * contribution;\n                }\n            }\n        }\n\n        totalLight = max(totalLight, vec3<f32>(frame.ambient));\n        totalLight *= frame.brightness;\n        base = vec4<f32>(base.rgb * totalLight, base.a);\n\n        // Gamma correction\n        if (frame.gamma != 1.0) {\n            base = vec4<f32>(pow(base.rgb, vec3<f32>(1.0 / frame.gamma)), base.a);\n        }\n\n        finalColor = vec4<f32>(base.rgb, base.a * surface.alpha);\n\n    } else {\n        // SOLID / WIREFRAME / FACETED\n        var color = surface.solidColor.rgb;\n        if (surface.renderMode == 2u) {\n            // FACETED\n            let fdx = dpdx(input.worldPos);\n            let fdy = dpdy(input.worldPos);\n            let faceNormal = normalize(cross(fdx, fdy));\n            let lightDir = normalize(vec3<f32>(0.5, 0.5, 1.0));\n            let diff = max(dot(faceNormal, lightDir), 0.2);\n            color *= diff;\n        }\n        finalColor = vec4<f32>(color, surface.solidColor.a * surface.alpha);\n    }\n\n    // Alpha Test (Simple discard for fence textures if alpha is very low)\n    if (finalColor.a < 0.01) {\n        discard;\n    }\n\n    return finalColor;\n}\n";
+
+// src/render/webgpu/pipelines/bspPipeline.ts
+var DEFAULT_STYLE_INDICES2 = [0, 255, 255, 255];
+var DEFAULT_STYLE_LAYERS2 = [0, -1, -1, -1];
+function resolveLightStyles2(styleIndices = DEFAULT_STYLE_INDICES2, styleValues = []) {
+  const factors = new Float32Array(4);
+  for (let i = 0; i < 4; i += 1) {
+    const styleIndex = styleIndices[i] ?? 255;
+    if (styleIndex === 255) {
+      factors[i] = 0;
+      continue;
+    }
+    const value = styleValues[styleIndex];
+    factors[i] = value !== void 0 ? value : 1;
+  }
+  return factors;
+}
+function computeFlowOffset2(timeSeconds) {
+  const cycle = timeSeconds * 0.25 % 1;
+  return [-cycle, 0];
+}
+function deriveSurfaceRenderState2(surfaceFlags = shared.SURF_NONE, timeSeconds = 0) {
+  const flowing = (surfaceFlags & shared.SURF_FLOWING) !== 0;
+  const warp = (surfaceFlags & shared.SURF_WARP) !== 0;
+  const sky = (surfaceFlags & shared.SURF_SKY) !== 0;
+  const trans33 = (surfaceFlags & shared.SURF_TRANS33) !== 0;
+  const trans66 = (surfaceFlags & shared.SURF_TRANS66) !== 0;
+  const alpha = trans33 ? 0.33 : trans66 ? 0.66 : 1;
+  const blend = trans33 || trans66 || warp;
+  const depthWrite = !blend && !sky;
+  const flowOffset = flowing ? computeFlowOffset2(timeSeconds) : [0, 0];
+  return {
+    alpha,
+    blend,
+    depthWrite,
+    warp,
+    flowOffset,
+    sky
+  };
+}
+var BspSurfacePipeline3 = class {
+  constructor(device, format, depthFormat) {
+    // Cache for texture bind groups
+    this.textureBindGroupCache = /* @__PURE__ */ new Map();
+    this.device = device;
+    const frameBufferSize = 2048;
+    const surfaceBufferSize = 256;
+    this.frameUniformBuffer = device.createBuffer({
+      size: frameBufferSize,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    });
+    this.surfaceUniformBuffer = device.createBuffer({
+      size: surfaceBufferSize,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    });
+    this.frameBindGroupLayout = device.createBindGroupLayout({
+      entries: [{ binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } }]
+    });
+    this.surfaceBindGroupLayout = device.createBindGroupLayout({
+      entries: [{ binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } }]
+    });
+    this.textureBindGroupLayout = device.createBindGroupLayout({
+      entries: [
+        { binding: 0, visibility: GPUShaderStage.FRAGMENT, texture: {} },
+        { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: {} },
+        { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: {} },
+        { binding: 3, visibility: GPUShaderStage.FRAGMENT, sampler: {} }
+      ]
+    });
+    this.defaultSampler = createLinearSampler(device);
+    this.defaultWhiteTexture = new Texture2D2(device, {
+      width: 1,
+      height: 1,
+      format: "rgba8unorm",
+      label: "bsp-default-white"
+    });
+    this.defaultWhiteTexture.upload(new Uint8Array([255, 255, 255, 255]));
+    this.defaultBindGroup = device.createBindGroup({
+      layout: this.textureBindGroupLayout,
+      entries: [
+        { binding: 0, resource: this.defaultWhiteTexture.createView() },
+        { binding: 1, resource: this.defaultSampler.sampler },
+        { binding: 2, resource: this.defaultWhiteTexture.createView() },
+        // Use white texture as lightmap fallback
+        { binding: 3, resource: this.defaultSampler.sampler }
+      ]
+    });
+    this.createPipelines(format, depthFormat);
+    this.frameBindGroup = device.createBindGroup({
+      layout: this.frameBindGroupLayout,
+      entries: [{ binding: 0, resource: { buffer: this.frameUniformBuffer } }]
+    });
+  }
+  createPipelines(format, depthFormat) {
+    const module = this.device.createShaderModule({
+      code: bsp_default
+    });
+    const pipelineLayout = this.device.createPipelineLayout({
+      bindGroupLayouts: [
+        this.frameBindGroupLayout,
+        this.surfaceBindGroupLayout,
+        this.textureBindGroupLayout
+      ]
+    });
+    const vertexState = {
+      module,
+      entryPoint: "vertexMain",
+      buffers: [
+        {
+          // Interleaved buffer: pos(3), tex(2), lm(2), step(1) -> 8 floats -> 32 bytes
+          arrayStride: 32,
+          attributes: [
+            { shaderLocation: 0, offset: 0, format: "float32x3" },
+            // Position
+            { shaderLocation: 1, offset: 12, format: "float32x2" },
+            // TexCoord
+            { shaderLocation: 2, offset: 20, format: "float32x2" },
+            // LightmapCoord
+            { shaderLocation: 3, offset: 28, format: "float32" }
+            // LightmapStep
+          ]
+        }
+      ]
+    };
+    this.pipeline = this.device.createRenderPipeline({
+      layout: pipelineLayout,
+      vertex: vertexState,
+      fragment: {
+        module,
+        entryPoint: "fragmentMain",
+        targets: [{
+          format,
+          blend: {
+            color: {
+              srcFactor: "src-alpha",
+              dstFactor: "one-minus-src-alpha",
+              operation: "add"
+            },
+            alpha: {
+              srcFactor: "one",
+              dstFactor: "one-minus-src-alpha",
+              operation: "add"
+            }
+          }
+        }]
+      },
+      primitive: {
+        topology: "triangle-list",
+        cullMode: "back"
+        // Quake 2 is usually back-face culled
+      },
+      depthStencil: {
+        format: depthFormat,
+        depthWriteEnabled: true,
+        depthCompare: "less"
+      }
+    });
+    this.pipelineWireframe = this.device.createRenderPipeline({
+      layout: pipelineLayout,
+      vertex: vertexState,
+      fragment: {
+        module,
+        entryPoint: "fragmentMain",
+        targets: [{ format, writeMask: GPUColorWrite.ALL }]
+      },
+      primitive: {
+        topology: "line-list"
+      },
+      depthStencil: {
+        format: depthFormat,
+        depthWriteEnabled: true,
+        depthCompare: "less"
+      }
+    });
+  }
+  bind(passEncoder, options) {
+    const {
+      modelViewProjection,
+      styleIndices = DEFAULT_STYLE_INDICES2,
+      styleLayers = DEFAULT_STYLE_LAYERS2,
+      styleValues = [],
+      diffuseTexture,
+      diffuseSampler,
+      lightmapTexture,
+      lightmapSampler,
+      surfaceFlags = shared.SURF_NONE,
+      timeSeconds = 0,
+      texScroll,
+      alpha,
+      warp,
+      dlights = [],
+      renderMode,
+      lightmapOnly,
+      brightness = 1,
+      gamma = 1,
+      fullbright = false,
+      ambient = 0,
+      cameraPosition = [0, 0, 0]
+    } = options;
+    const state = deriveSurfaceRenderState2(surfaceFlags, timeSeconds);
+    const styles = resolveLightStyles2(styleIndices, styleValues);
+    const finalScrollX = texScroll ? texScroll[0] : state.flowOffset[0];
+    const finalScrollY = texScroll ? texScroll[1] : state.flowOffset[1];
+    const finalAlpha = alpha !== void 0 ? alpha : state.alpha;
+    const finalWarp = warp !== void 0 ? warp : state.warp;
+    const frameData = new Float32Array(512);
+    frameData.set(modelViewProjection, 0);
+    frameData.set(cameraPosition, 16);
+    frameData[19] = 0;
+    frameData[20] = timeSeconds;
+    frameData[21] = brightness;
+    frameData[22] = gamma;
+    frameData[23] = ambient;
+    const numDlights = Math.min(dlights.length, MAX_DLIGHTS);
+    const numDlightsView = new Uint32Array(frameData.buffer, 24 * 4, 1);
+    numDlightsView[0] = numDlights;
+    const fullbrightView = new Uint32Array(frameData.buffer, 25 * 4, 1);
+    fullbrightView[0] = fullbright ? 1 : 0;
+    let lightOffset = 32;
+    for (let i = 0; i < numDlights; i++) {
+      const l = dlights[i];
+      frameData[lightOffset + 0] = l.origin.x;
+      frameData[lightOffset + 1] = l.origin.y;
+      frameData[lightOffset + 2] = l.origin.z;
+      frameData[lightOffset + 3] = l.intensity;
+      frameData[lightOffset + 4] = l.color.x;
+      frameData[lightOffset + 5] = l.color.y;
+      frameData[lightOffset + 6] = l.color.z;
+      frameData[lightOffset + 7] = 0;
+      lightOffset += 8;
+    }
+    this.device.queue.writeBuffer(this.frameUniformBuffer, 0, frameData, 0, lightOffset);
+    const surfaceData = new Float32Array(32);
+    surfaceData[0] = finalScrollX;
+    surfaceData[1] = finalScrollY;
+    surfaceData[2] = state.flowOffset[0];
+    surfaceData[3] = state.flowOffset[1];
+    surfaceData.set(styles, 4);
+    surfaceData.set(styleLayers, 8);
+    let modeInt = 0;
+    let color = [1, 1, 1, 1];
+    if (renderMode) {
+      if (renderMode.mode === "solid" || renderMode.mode === "wireframe") {
+        modeInt = 1;
+      } else if (renderMode.mode === "solid-faceted") {
+        modeInt = 2;
+      }
+      if (renderMode.color) {
+        color = [...renderMode.color];
+      } else if (renderMode.generateRandomColor) {
+        color = [1, 1, 1, 1];
+      }
+    }
+    surfaceData.set(color, 12);
+    surfaceData[16] = finalAlpha;
+    const surfaceUint = new Uint32Array(surfaceData.buffer);
+    const applyLightmap = !state.sky && lightmapSampler !== void 0 && !finalWarp;
+    surfaceUint[17] = applyLightmap ? 1 : 0;
+    surfaceUint[18] = finalWarp ? 1 : 0;
+    surfaceUint[19] = lightmapOnly ? 1 : 0;
+    surfaceUint[20] = modeInt;
+    this.device.queue.writeBuffer(this.surfaceUniformBuffer, 0, surfaceData);
+    const surfaceBindGroup = this.device.createBindGroup({
+      layout: this.surfaceBindGroupLayout,
+      entries: [{ binding: 0, resource: { buffer: this.surfaceUniformBuffer } }]
+    });
+    if (diffuseTexture && diffuseSampler && lightmapTexture && lightmapSampler) {
+      const textureBindGroup = this.device.createBindGroup({
+        layout: this.textureBindGroupLayout,
+        entries: [
+          { binding: 0, resource: diffuseTexture },
+          { binding: 1, resource: diffuseSampler },
+          { binding: 2, resource: lightmapTexture },
+          { binding: 3, resource: lightmapSampler }
+        ]
+      });
+      passEncoder.setBindGroup(2, textureBindGroup);
+    } else {
+      passEncoder.setBindGroup(2, this.defaultBindGroup);
+    }
+    const pipeline = renderMode && renderMode.mode === "wireframe" ? this.pipelineWireframe : this.pipeline;
+    passEncoder.setPipeline(pipeline);
+    passEncoder.setBindGroup(0, this.frameBindGroup);
+    passEncoder.setBindGroup(1, surfaceBindGroup);
+    return state;
+  }
+  draw(passEncoder, geometry, renderMode) {
+    if (!geometry.gpuIndexBuffer) return;
+    if (renderMode && renderMode.mode === "wireframe") ; else {
+      passEncoder.setVertexBuffer(0, geometry.gpuVertexBuffer);
+      passEncoder.setIndexBuffer(geometry.gpuIndexBuffer, "uint16");
+      passEncoder.drawIndexed(geometry.indexCount);
+    }
+  }
+  destroy() {
+    this.frameUniformBuffer.destroy();
+    this.surfaceUniformBuffer.destroy();
+    this.defaultWhiteTexture.destroy();
+  }
+};
+
+// src/render/webgpu/renderer.ts
+var WebGPURendererImpl = class {
+  constructor(context, frameRenderer, pipelines) {
+    this.context = context;
+    this.frameRenderer = frameRenderer;
+    this.pipelines = pipelines;
+    this.type = "webgpu";
+    // Texture cache for registered pics
+    this.picCache = /* @__PURE__ */ new Map();
+    this.font = null;
+    // 2D rendering state
+    this.is2DActive = false;
+    this.whiteTexture = new Texture2D2(context.device, {
+      width: 1,
+      height: 1,
+      format: context.format,
+      label: "white-texture"
+    });
+    this.whiteTexture.upload(new Uint8Array([255, 255, 255, 255]));
+    this.collisionVis = null;
+    this.debug = null;
+    this.particleSystem = null;
+  }
+  get device() {
+    return this.context.device;
+  }
+  get width() {
+    return this.context.width;
+  }
+  get height() {
+    return this.context.height;
+  }
+  // =========================================================================
+  // Frame Rendering
+  // =========================================================================
+  renderFrame(options, entities = [], renderOptions) {
+    const localOptions = options;
+    let culledLights = localOptions.dlights;
+    if (localOptions.dlights && localOptions.dlights.length > 0) {
+      const viewProjection = new Float32Array(localOptions.camera.viewProjectionMatrix);
+      const frustumPlanes = extractFrustumPlanes(viewProjection);
+      const cameraPos = { x: localOptions.camera.position[0], y: localOptions.camera.position[1], z: localOptions.camera.position[2] };
+      culledLights = cullLights(
+        localOptions.dlights,
+        frustumPlanes,
+        cameraPos,
+        32
+        // Max lights
+      );
+    }
+    const augmentedOptions = {
+      ...localOptions,
+      dlights: culledLights
+    };
+    this.frameRenderer.renderFrame(augmentedOptions);
+  }
+  // =========================================================================
+  // Geometry Management
+  // =========================================================================
+  uploadBspGeometry(surfaces) {
+    for (const surface of surfaces) {
+      if (surface.gpuVertexBuffer && surface.gpuIndexBuffer) continue;
+      const vb = new VertexBuffer2(this.device, {
+        size: surface.vertexData.byteLength,
+        label: `bsp-surface-vb-${surface.texture}`
+      });
+      vb.write(surface.vertexData);
+      const ib = new IndexBuffer2(this.device, {
+        size: surface.indexData.byteLength,
+        label: `bsp-surface-ib-${surface.texture}`
+      });
+      ib.write(surface.indexData);
+      const mutableSurface = surface;
+      mutableSurface.gpuVertexBuffer = vb.buffer;
+      mutableSurface.gpuIndexBuffer = ib.buffer;
+    }
+  }
+  // =========================================================================
+  // Texture Management
+  // =========================================================================
+  async registerPic(name, data) {
+    if (this.picCache.has(name)) {
+      return this.picCache.get(name);
+    }
+    const texture = new Texture2D2(this.device, {
+      width: 256,
+      height: 256,
+      format: this.context.format,
+      label: `pic-${name}`
+    });
+    texture.upload(data);
+    this.picCache.set(name, texture);
+    return texture;
+  }
+  registerTexture(name, texture) {
+    if (this.picCache.has(name)) {
+      return this.picCache.get(name);
+    }
+    const gpuTexture = new Texture2D2(this.device, {
+      width: texture.width,
+      height: texture.height,
+      format: this.context.format,
+      mipLevelCount: texture.levels.length,
+      label: `texture-${name}`
+    });
+    for (const mipLevel of texture.levels) {
+      gpuTexture.upload(mipLevel.rgba, {
+        width: mipLevel.width,
+        height: mipLevel.height,
+        mipLevel: mipLevel.level
+      });
+    }
+    this.picCache.set(name, gpuTexture);
+    return gpuTexture;
+  }
+  // =========================================================================
+  // 2D Drawing API
+  // =========================================================================
+  begin2D() {
+    this.frameRenderer.begin2DPass();
+    this.is2DActive = true;
+  }
+  end2D() {
+    this.frameRenderer.end2DPass();
+    this.is2DActive = false;
+  }
+  drawPic(x, y, pic, color = [1, 1, 1, 1]) {
+    if (!this.is2DActive) {
+      throw new Error("drawPic called outside begin2D/end2D");
+    }
+    this.pipelines.sprite.drawTexturedQuad(
+      x,
+      y,
+      pic.width,
+      pic.height,
+      pic,
+      0,
+      0,
+      1,
+      1,
+      color
+    );
+  }
+  drawfillRect(x, y, width, height, color) {
+    if (!this.is2DActive) {
+      throw new Error("drawfillRect called outside begin2D/end2D");
+    }
+    this.pipelines.sprite.drawSolidRect(x, y, width, height, color);
+  }
+  drawString(x, y, text, color = [1, 1, 1, 1]) {
+    if (!this.is2DActive) {
+      throw new Error("drawString called outside begin2D/end2D");
+    }
+    if (!this.font) {
+      return;
+    }
+    const segments = parseColorString(text);
+    let currentX = x;
+    const charWidth = 8;
+    const charHeight = 8;
+    for (const segment of segments) {
+      const segmentColor = segment.color || color;
+      for (const char of segment.text) {
+        const code = char.charCodeAt(0);
+        const col = code % 16;
+        const row = Math.floor(code / 16);
+        const u0 = col / 16;
+        const v0 = row / 16;
+        const u1 = (col + 1) / 16;
+        const v1 = (row + 1) / 16;
+        this.pipelines.sprite.drawTexturedQuad(
+          currentX,
+          y,
+          charWidth,
+          charHeight,
+          this.font,
+          u0,
+          v0,
+          u1,
+          v1,
+          segmentColor
+        );
+        currentX += charWidth;
+      }
+    }
+  }
+  drawCenterString(y, text) {
+    if (!this.is2DActive) {
+      throw new Error("drawCenterString called outside begin2D/end2D");
+    }
+    const stripped = text.replace(/\^[0-9]/g, "");
+    const charWidth = 8;
+    const width = stripped.length * charWidth;
+    const x = (this.width - width) / 2;
+    this.drawString(x, y, text);
+  }
+  // =========================================================================
+  // Entity Highlighting (Stubs)
+  // =========================================================================
+  setEntityHighlight(entityId, color) {
+  }
+  clearEntityHighlight(entityId) {
+  }
+  highlightSurface(faceIndex, color) {
+  }
+  removeSurfaceHighlight(faceIndex) {
+  }
+  // =========================================================================
+  // Render Settings (Stubs)
+  // =========================================================================
+  setDebugMode(mode) {
+  }
+  setBrightness(value) {
+  }
+  setGamma(value) {
+  }
+  setFullbright(enabled) {
+  }
+  setAmbient(value) {
+  }
+  setLightStyle(index, pattern) {
+  }
+  setUnderwaterWarp(enabled) {
+  }
+  setBloom(enabled) {
+  }
+  setBloomIntensity(value) {
+  }
+  setLodBias(bias) {
+  }
+  // =========================================================================
+  // Instanced Rendering (Stub)
+  // =========================================================================
+  renderInstanced(model, instances) {
+  }
+  // =========================================================================
+  // Performance and Memory
+  // =========================================================================
+  getPerformanceReport() {
+    return {
+      frameTimeMs: 0,
+      gpuTimeMs: 0,
+      cpuFrameTimeMs: 0,
+      drawCalls: 0,
+      triangles: 0,
+      vertices: 0,
+      textureBinds: 0,
+      shaderSwitches: 0,
+      visibleSurfaces: 0,
+      culledSurfaces: 0,
+      visibleEntities: 0,
+      culledEntities: 0,
+      memoryUsageMB: {
+        textures: 0,
+        geometry: 0,
+        total: 0
+      }
+    };
+  }
+  getMemoryUsage() {
+    return {
+      texturesBytes: 0,
+      geometryBytes: 0,
+      shadersBytes: 0,
+      buffersBytes: 0,
+      totalBytes: 0
+    };
+  }
+  // =========================================================================
+  // Lifecycle
+  // =========================================================================
+  resize(width, height) {
+    if (this.context.context && !this.context.isHeadless) {
+      this.context.width = width;
+      this.context.height = height;
+    } else {
+      this.context.width = width;
+      this.context.height = height;
+    }
+  }
+  dispose() {
+    this.pipelines.sprite.destroy();
+    this.pipelines.skybox.destroy();
+    this.pipelines.bsp.destroy();
+    for (const texture of this.picCache.values()) {
+      texture.destroy();
+    }
+    this.picCache.clear();
+    this.whiteTexture.destroy();
+    this.context.device.destroy();
+  }
+  destroy() {
+    this.dispose();
+  }
+};
+async function createWebGPURenderer(canvas, options) {
+  const context = await createWebGPUContext(canvas, options);
+  const spriteRenderer = new SpriteRenderer2(context.device, context.format);
+  const skyboxPipeline = new SkyboxPipeline3(context.device, context.format);
+  const bspPipeline = new BspSurfacePipeline3(
+    context.device,
+    context.format,
+    context.depthFormat || "depth24plus"
+  );
+  const pipelines = {
+    sprite: spriteRenderer,
+    skybox: skyboxPipeline,
+    bsp: bspPipeline
+  };
+  if (canvas) {
+    context.width = canvas.width;
+    context.height = canvas.height;
+  } else {
+    context.width = 800;
+    context.height = 600;
+  }
+  const frameRenderer = new FrameRenderer(context, pipelines);
+  return new WebGPURendererImpl(context, frameRenderer, pipelines);
+}
 var DemoReader = class {
   constructor(buffer) {
     this.messageOffsets = [];
@@ -17430,83 +19535,6 @@ function validateEntity(entity) {
   };
 }
 
-// src/render/webgpu/context.ts
-async function createWebGPUContext(canvas, options) {
-  if (!navigator.gpu) {
-    throw new Error("WebGPU is not supported in this environment");
-  }
-  const adapter = await navigator.gpu.requestAdapter({
-    powerPreference: options?.powerPreference || "high-performance"
-  });
-  if (!adapter) {
-    throw new Error("No appropriate GPUAdapter found");
-  }
-  if (options?.requiredFeatures) {
-    for (const feature of options.requiredFeatures) {
-      if (!adapter.features.has(feature)) {
-        throw new Error(`Required feature not available: ${feature}`);
-      }
-    }
-  }
-  const deviceDescriptor = {
-    requiredFeatures: options?.requiredFeatures,
-    requiredLimits: options?.requiredLimits
-  };
-  const device = await adapter.requestDevice(deviceDescriptor);
-  let context;
-  let format = "rgba8unorm";
-  const depthFormat = "depth24plus";
-  let isHeadless = true;
-  let width = options?.width || 800;
-  let height = options?.height || 600;
-  if (canvas) {
-    context = canvas.getContext("webgpu");
-    if (!context) {
-      throw new Error("Failed to get WebGPU context from canvas");
-    }
-    isHeadless = false;
-    format = navigator.gpu.getPreferredCanvasFormat();
-    width = canvas.width;
-    height = canvas.height;
-    context.configure({
-      device,
-      format,
-      alphaMode: "opaque"
-      // Standard for game rendering
-    });
-  }
-  const features = /* @__PURE__ */ new Set();
-  for (const feature of adapter.features) {
-    features.add(feature);
-  }
-  return {
-    adapter,
-    device,
-    context,
-    format,
-    depthFormat,
-    features,
-    limits: device.limits,
-    isHeadless,
-    width,
-    height
-  };
-}
-function queryCapabilities(state) {
-  const { features, limits } = state;
-  return {
-    hasTimestampQuery: features.has("timestamp-query"),
-    hasDepthClipControl: features.has("depth-clip-control"),
-    hasTextureCompressionBC: features.has("texture-compression-bc"),
-    hasTextureCompressionETC2: features.has("texture-compression-etc2"),
-    hasTextureCompressionASTC: features.has("texture-compression-astc"),
-    maxTextureDimension2D: limits.maxTextureDimension2D,
-    maxBindGroups: limits.maxBindGroups,
-    maxUniformBufferBindingSize: limits.maxUniformBufferBindingSize,
-    maxStorageBufferBindingSize: limits.maxStorageBufferBindingSize
-  };
-}
-
 // src/render/webgpu/headless.ts
 function createHeadlessRenderTarget(device, width, height, format = "rgba8unorm") {
   const usage = typeof GPUTextureUsage !== "undefined" ? GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC : 17;
@@ -17690,16 +19718,6 @@ var NullRenderer = class {
     return this.frameCount;
   }
 };
-
-// src/render/types/coordinates.ts
-var CoordinateSystem = /* @__PURE__ */ ((CoordinateSystem2) => {
-  CoordinateSystem2["QUAKE"] = "quake";
-  CoordinateSystem2["OPENGL"] = "opengl";
-  CoordinateSystem2["WEBGPU"] = "webgpu";
-  return CoordinateSystem2;
-})(CoordinateSystem || {});
-
-// src/render/matrix/webgl.ts
 var WebGLMatrixBuilder = class {
   constructor() {
     this.coordinateSystem = "opengl" /* OPENGL */;
@@ -17766,89 +19784,6 @@ var WebGLMatrixBuilder = class {
     return view;
   }
 };
-var WebGPUMatrixBuilder = class {
-  constructor() {
-    this.coordinateSystem = "webgpu" /* WEBGPU */;
-  }
-  buildProjectionMatrix(camera) {
-    const projection = glMatrix.mat4.create();
-    const f = 1 / Math.tan(camera.fov * shared.DEG2RAD / 2);
-    const rangeInv = 1 / (camera.near - camera.far);
-    projection[0] = f / camera.aspect;
-    projection[5] = f;
-    projection[10] = camera.far * rangeInv;
-    projection[11] = -1;
-    projection[14] = camera.near * camera.far * rangeInv;
-    return projection;
-  }
-  buildViewMatrix(camera) {
-    const [pitch, yaw, roll] = camera.angles;
-    const pitchRad = pitch * shared.DEG2RAD;
-    const yawRad = yaw * shared.DEG2RAD;
-    const rollRad = roll * shared.DEG2RAD;
-    const rotationQuake = glMatrix.mat4.create();
-    glMatrix.mat4.identity(rotationQuake);
-    glMatrix.mat4.rotateZ(rotationQuake, rotationQuake, -yawRad);
-    glMatrix.mat4.rotateY(rotationQuake, rotationQuake, -pitchRad);
-    glMatrix.mat4.rotateX(rotationQuake, rotationQuake, -rollRad);
-    glMatrix.mat4.fromValues(
-      0,
-      0,
-      -1,
-      0,
-      // Column 0: Quake X maps to View Z? Wait.
-      -1,
-      0,
-      0,
-      0,
-      // Column 1: Quake Y maps to View X?
-      0,
-      1,
-      0,
-      0,
-      // Column 2: Quake Z maps to View Y?
-      0,
-      0,
-      0,
-      1
-    );
-    const quakeToWgpu = glMatrix.mat4.fromValues(
-      0,
-      0,
-      -1,
-      0,
-      // Col 0: X -> -Z
-      -1,
-      0,
-      0,
-      0,
-      // Col 1: Y -> -X
-      0,
-      1,
-      0,
-      0,
-      // Col 2: Z -> Y
-      0,
-      0,
-      0,
-      1
-    );
-    const rotationView = glMatrix.mat4.create();
-    glMatrix.mat4.multiply(rotationView, quakeToWgpu, rotationQuake);
-    const cameraPos = glMatrix.vec3.fromValues(
-      camera.position[0],
-      camera.position[1],
-      camera.position[2]
-    );
-    const t = glMatrix.vec3.transformMat4(glMatrix.vec3.create(), cameraPos, rotationView);
-    glMatrix.vec3.negate(t, t);
-    const view = glMatrix.mat4.clone(rotationView);
-    view[12] = t[0];
-    view[13] = t[1];
-    view[14] = t[2];
-    return view;
-  }
-};
 var IdentityMatrixBuilder = class {
   constructor() {
     this.coordinateSystem = "quake" /* QUAKE */;
@@ -18668,6 +20603,7 @@ exports.createProgramFromSources = createProgramFromSources;
 exports.createRenderer = createRenderer;
 exports.createWebGLContext = createWebGLContext;
 exports.createWebGPUContext = createWebGPUContext;
+exports.createWebGPURenderer = createWebGPURenderer;
 exports.decodeOgg = decodeOgg;
 exports.deriveSurfaceRenderState = deriveSurfaceRenderState;
 exports.detectFileType = detectFileType;