@quake2ts/engine 0.0.776 → 0.0.778

package/dist/cjs/index.cjs

@@ -5040,6 +5040,25 @@ function boxIntersectsFrustum(mins, maxs, planes) {
   }
   return true;
 }
+function transformAabb(mins, maxs, transform) {
+  const cx = (mins.x + maxs.x) * 0.5;
+  const cy = (mins.y + maxs.y) * 0.5;
+  const cz = (mins.z + maxs.z) * 0.5;
+  const ex = (maxs.x - mins.x) * 0.5;
+  const ey = (maxs.y - mins.y) * 0.5;
+  const ez = (maxs.z - mins.z) * 0.5;
+  const m = transform;
+  const tcx = m[0] * cx + m[4] * cy + m[8] * cz + m[12];
+  const tcy = m[1] * cx + m[5] * cy + m[9] * cz + m[13];
+  const tcz = m[2] * cx + m[6] * cy + m[10] * cz + m[14];
+  const tex = Math.abs(m[0]) * ex + Math.abs(m[4]) * ey + Math.abs(m[8]) * ez;
+  const tey = Math.abs(m[1]) * ex + Math.abs(m[5]) * ey + Math.abs(m[9]) * ez;
+  const tez = Math.abs(m[2]) * ex + Math.abs(m[6]) * ey + Math.abs(m[10]) * ez;
+  return {
+    mins: { x: tcx - tex, y: tcy - tey, z: tcz - tez },
+    maxs: { x: tcx + tex, y: tcy + tey, z: tcz + tez }
+  };
+}
 
 // src/render/bspTraversal.ts
 function childIsLeaf(index) {
@@ -7383,6 +7402,562 @@ function spawnBfgExplosion(context) {
   }
 }
 
+// src/render/postprocessing/pipeline.ts
+var VERTEX_SOURCE = `#version 300 es
+layout(location = 0) in vec2 a_position;
+
+out vec2 v_texCoord;
+
+void main() {
+    v_texCoord = a_position * 0.5 + 0.5;
+    gl_Position = vec4(a_position, 0.0, 1.0);
+}
+`;
+var FRAGMENT_SOURCE = `#version 300 es
+precision mediump float;
+
+in vec2 v_texCoord;
+
+uniform sampler2D u_texture;
+uniform float u_time;
+uniform float u_strength; // Distortion strength
+
+out vec4 o_color;
+
+void main() {
+    vec2 uv = v_texCoord;
+
+    // Simple sine wave distortion
+    // Corresponds to gl_warp.c TURBSCALE somewhat
+    float xOffset = sin(uv.y * 10.0 + u_time * 2.0) * 0.01 * u_strength;
+    float yOffset = cos(uv.x * 10.0 + u_time * 2.0) * 0.01 * u_strength;
+
+    uv += vec2(xOffset, yOffset);
+
+    // Clamp UVs to avoid edge artifacts
+    uv = clamp(uv, 0.001, 0.999);
+
+    o_color = texture(u_texture, uv);
+}
+`;
+var PostProcessPipeline = class {
+  constructor(gl) {
+    this.gl = gl;
+    this.program = ShaderProgram.create(
+      gl,
+      { vertex: VERTEX_SOURCE, fragment: FRAGMENT_SOURCE },
+      { a_position: 0 }
+    );
+    this.uTime = this.program.getUniformLocation("u_time");
+    this.uStrength = this.program.getUniformLocation("u_strength");
+    this.uTexture = this.program.getUniformLocation("u_texture");
+    this.vao = gl.createVertexArray();
+    gl.bindVertexArray(this.vao);
+    const vertices = new Float32Array([
+      -1,
+      -1,
+      1,
+      -1,
+      -1,
+      1,
+      1,
+      1
+    ]);
+    const vbo = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+    gl.bindVertexArray(null);
+  }
+  render(texture, time, strength = 1) {
+    this.program.use();
+    this.gl.activeTexture(this.gl.TEXTURE0);
+    this.gl.bindTexture(this.gl.TEXTURE_2D, texture);
+    this.gl.uniform1i(this.uTexture, 0);
+    this.gl.uniform1f(this.uTime, time);
+    this.gl.uniform1f(this.uStrength, strength);
+    this.gl.bindVertexArray(this.vao);
+    this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
+    this.gl.bindVertexArray(null);
+  }
+  dispose() {
+    this.program.dispose();
+    this.gl.deleteVertexArray(this.vao);
+  }
+};
+
+// src/render/bloom.ts
+var QUAD_VERTEX_SOURCE = `#version 300 es
+layout(location = 0) in vec2 a_position;
+
+out vec2 v_texCoord;
+
+void main() {
+    v_texCoord = a_position * 0.5 + 0.5;
+    gl_Position = vec4(a_position, 0.0, 1.0);
+}
+`;
+var EXTRACT_FRAGMENT_SOURCE = `#version 300 es
+precision mediump float;
+
+in vec2 v_texCoord;
+uniform sampler2D u_texture;
+uniform float u_threshold;
+
+out vec4 o_color;
+
+void main() {
+    vec4 color = texture(u_texture, v_texCoord);
+    float brightness = dot(color.rgb, vec3(0.2126, 0.7152, 0.0722));
+    if (brightness > u_threshold) {
+        o_color = vec4(color.rgb, 1.0);
+    } else {
+        o_color = vec4(0.0, 0.0, 0.0, 1.0);
+    }
+}
+`;
+var BLUR_FRAGMENT_SOURCE = `#version 300 es
+precision mediump float;
+
+in vec2 v_texCoord;
+uniform sampler2D u_texture;
+uniform bool u_horizontal;
+uniform float u_weight[5];
+
+out vec4 o_color;
+
+void main() {
+    vec2 tex_offset = 1.0 / vec2(textureSize(u_texture, 0)); // gets size of single texel
+    vec3 result = texture(u_texture, v_texCoord).rgb * u_weight[0];
+
+    if (u_horizontal) {
+        for(int i = 1; i < 5; ++i) {
+            result += texture(u_texture, v_texCoord + vec2(tex_offset.x * float(i), 0.0)).rgb * u_weight[i];
+            result += texture(u_texture, v_texCoord - vec2(tex_offset.x * float(i), 0.0)).rgb * u_weight[i];
+        }
+    } else {
+        for(int i = 1; i < 5; ++i) {
+            result += texture(u_texture, v_texCoord + vec2(0.0, tex_offset.y * float(i))).rgb * u_weight[i];
+            result += texture(u_texture, v_texCoord - vec2(0.0, tex_offset.y * float(i))).rgb * u_weight[i];
+        }
+    }
+    o_color = vec4(result, 1.0);
+}
+`;
+var COMPOSITE_FRAGMENT_SOURCE = `#version 300 es
+precision mediump float;
+
+in vec2 v_texCoord;
+uniform sampler2D u_texture;
+uniform float u_intensity;
+
+out vec4 o_color;
+
+void main() {
+    vec4 color = texture(u_texture, v_texCoord);
+    o_color = vec4(color.rgb * u_intensity, 1.0);
+}
+`;
+var BloomPipeline = class {
+  constructor(gl) {
+    this.width = 0;
+    this.height = 0;
+    this.gl = gl;
+    this.extractProgram = ShaderProgram.create(gl, { vertex: QUAD_VERTEX_SOURCE, fragment: EXTRACT_FRAGMENT_SOURCE }, { a_position: 0 });
+    this.blurProgram = ShaderProgram.create(gl, { vertex: QUAD_VERTEX_SOURCE, fragment: BLUR_FRAGMENT_SOURCE }, { a_position: 0 });
+    this.compositeProgram = ShaderProgram.create(gl, { vertex: QUAD_VERTEX_SOURCE, fragment: COMPOSITE_FRAGMENT_SOURCE }, { a_position: 0 });
+    this.framebuffer1 = new Framebuffer(gl);
+    this.framebuffer2 = new Framebuffer(gl);
+    this.texture1 = new Texture2D(gl);
+    this.texture2 = new Texture2D(gl);
+    this.texture1.setParameters({ minFilter: gl.LINEAR, magFilter: gl.LINEAR, wrapS: gl.CLAMP_TO_EDGE, wrapT: gl.CLAMP_TO_EDGE });
+    this.texture2.setParameters({ minFilter: gl.LINEAR, magFilter: gl.LINEAR, wrapS: gl.CLAMP_TO_EDGE, wrapT: gl.CLAMP_TO_EDGE });
+    this.vao = gl.createVertexArray();
+    gl.bindVertexArray(this.vao);
+    const vertices = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);
+    const vbo = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+    gl.bindVertexArray(null);
+  }
+  resize(width, height) {
+    if (this.width !== width || this.height !== height) {
+      this.width = width;
+      this.height = height;
+      const w = Math.floor(width / 2) || 1;
+      const h = Math.floor(height / 2) || 1;
+      this.texture1.upload(w, h, null);
+      this.framebuffer1.attachTexture2D(this.gl.COLOR_ATTACHMENT0, this.texture1);
+      this.texture2.upload(w, h, null);
+      this.framebuffer2.attachTexture2D(this.gl.COLOR_ATTACHMENT0, this.texture2);
+    }
+  }
+  render(sceneTexture, intensity = 0.5) {
+    const gl = this.gl;
+    const w = Math.floor(this.width / 2) || 1;
+    const h = Math.floor(this.height / 2) || 1;
+    gl.bindVertexArray(this.vao);
+    this.framebuffer1.bind();
+    gl.viewport(0, 0, w, h);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    this.extractProgram.use();
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, sceneTexture.texture);
+    gl.uniform1i(this.extractProgram.getUniformLocation("u_texture"), 0);
+    gl.uniform1f(this.extractProgram.getUniformLocation("u_threshold"), 0.7);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    this.blurProgram.use();
+    gl.uniform1fv(this.blurProgram.getUniformLocation("u_weight"), [0.227027, 0.1945946, 0.1216216, 0.054054, 0.016216]);
+    const locHorizontal = this.blurProgram.getUniformLocation("u_horizontal");
+    const locTexture = this.blurProgram.getUniformLocation("u_texture");
+    const amount = 4;
+    let horizontal = true;
+    for (let i = 0; i < amount; i++) {
+      this.framebuffer2.bind();
+      if (horizontal) {
+        this.framebuffer2.bind();
+        gl.bindTexture(gl.TEXTURE_2D, this.texture1.texture);
+      } else {
+        this.framebuffer1.bind();
+        gl.bindTexture(gl.TEXTURE_2D, this.texture2.texture);
+      }
+      gl.uniform1i(locHorizontal, horizontal ? 1 : 0);
+      gl.uniform1i(locTexture, 0);
+      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+      horizontal = !horizontal;
+    }
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    gl.viewport(0, 0, this.width, this.height);
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.ONE, gl.ONE);
+    gl.disable(gl.DEPTH_TEST);
+    this.compositeProgram.use();
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, this.texture1.texture);
+    gl.uniform1i(this.compositeProgram.getUniformLocation("u_texture"), 0);
+    gl.uniform1f(this.compositeProgram.getUniformLocation("u_intensity"), intensity);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+    gl.enable(gl.DEPTH_TEST);
+    gl.bindVertexArray(null);
+  }
+  dispose() {
+    this.extractProgram.dispose();
+    this.blurProgram.dispose();
+    this.compositeProgram.dispose();
+    this.framebuffer1.dispose();
+    this.framebuffer2.dispose();
+    this.texture1.dispose();
+    this.texture2.dispose();
+    this.gl.deleteVertexArray(this.vao);
+  }
+};
+
+// src/render/frame.ts
+var DEFAULT_DEPS = {
+  gatherVisibleFaces,
+  extractFrustumPlanes,
+  computeSkyScroll,
+  removeViewTranslation
+};
+function renderSky(skyboxPipeline, camera, timeSeconds, options, deps) {
+  if (!options) {
+    return;
+  }
+  const viewNoTranslation = deps.removeViewTranslation(camera.viewMatrix);
+  const skyViewProjection = glMatrix.mat4.create();
+  glMatrix.mat4.multiply(skyViewProjection, camera.projectionMatrix, viewNoTranslation);
+  const scroll = deps.computeSkyScroll(timeSeconds, options.scrollSpeeds ?? [0.01, 0.02]);
+  skyboxPipeline.bind({
+    viewProjection: skyViewProjection,
+    scroll,
+    textureUnit: options.textureUnit ?? 0
+  });
+  skyboxPipeline.draw();
+  skyboxPipeline.gl.depthMask(true);
+}
+function sortVisibleFacesFrontToBack(faces) {
+  return [...faces].sort((a, b) => b.sortKey - a.sortKey);
+}
+function sortVisibleFacesBackToFront(faces) {
+  return [...faces].sort((a, b) => a.sortKey - b.sortKey);
+}
+function resolveSurfaceTextures(geometry, world, refractionTexture) {
+  const material = world?.materials?.getMaterial(geometry.texture);
+  let diffuse;
+  if (material) {
+    const matTex = material.texture;
+    if (matTex) {
+      diffuse = matTex;
+    }
+  }
+  if (!diffuse) {
+    diffuse = world?.textures?.get(geometry.texture);
+  }
+  const lightmapIndex = geometry.lightmap?.atlasIndex;
+  const lightmap = lightmapIndex !== void 0 ? world?.lightmaps?.[lightmapIndex]?.texture : void 0;
+  return { diffuse, lightmap, refraction: refractionTexture };
+}
+function bindSurfaceTextures(geometry, world, cache, resolved) {
+  const diffuse = resolved.diffuse;
+  if (diffuse && cache.diffuse !== diffuse) {
+    diffuse.bind(0);
+    cache.diffuse = diffuse;
+  }
+  const lightmap = resolved.lightmap;
+  if (lightmap && cache.lightmap !== lightmap) {
+    lightmap.bind(1);
+    cache.lightmap = lightmap;
+  }
+  if (!lightmap) {
+    cache.lightmap = void 0;
+  }
+  const refraction = resolved.refraction;
+  let refractionSampler;
+  if (refraction && geometry.surfaceFlags & shared.SURF_WARP) {
+    if (cache.refraction !== refraction) {
+      refraction.bind(2);
+      cache.refraction = refraction;
+    }
+    refractionSampler = 2;
+  } else {
+    cache.refraction = void 0;
+  }
+  return { diffuse: 0, lightmap: lightmap ? 1 : void 0, refraction: refractionSampler };
+}
+function renderViewModel(gl, camera, viewModel, removeTranslation) {
+  if (!viewModel) {
+    return false;
+  }
+  const projection = viewModel.fov ? camera.getViewmodelProjectionMatrix(viewModel.fov) : camera.projectionMatrix;
+  const view = removeTranslation(camera.viewMatrix);
+  const viewProjection = glMatrix.mat4.create();
+  glMatrix.mat4.multiply(viewProjection, projection, view);
+  if (viewModel.depthRange) {
+    gl.depthRange(viewModel.depthRange[0], viewModel.depthRange[1]);
+  }
+  viewModel.draw(new Float32Array(viewProjection));
+  if (viewModel.depthRange) {
+    gl.depthRange(0, 1);
+  }
+  return true;
+}
+function evaluateLightStyle(pattern, time) {
+  if (!pattern) return 1;
+  const frame = Math.floor(time * 10) % pattern.length;
+  const charCode = pattern.charCodeAt(frame);
+  return (charCode - 97) / 12;
+}
+var createFrameRenderer = (gl, bspPipeline, skyboxPipeline, deps = DEFAULT_DEPS) => {
+  const postProcess = new PostProcessPipeline(gl);
+  const bloomPipeline = new BloomPipeline(gl);
+  let lastFrameTime = 0;
+  let copyTexture;
+  let copyTextureWidth = 0;
+  let copyTextureHeight = 0;
+  const ensureCopyTexture = (width, height) => {
+    if (!copyTexture || copyTextureWidth !== width || copyTextureHeight !== height) {
+      copyTexture = new Texture2D(gl);
+      copyTexture.upload(width, height, null);
+      copyTexture.setParameters({
+        minFilter: gl.LINEAR,
+        magFilter: gl.LINEAR,
+        wrapS: gl.CLAMP_TO_EDGE,
+        wrapT: gl.CLAMP_TO_EDGE
+      });
+      copyTextureWidth = width;
+      copyTextureHeight = height;
+    }
+    return copyTexture;
+  };
+  const renderFrame = (options) => {
+    const now = performance.now();
+    const fps = lastFrameTime > 0 ? 1e3 / (now - lastFrameTime) : 0;
+    lastFrameTime = now;
+    const stats = {
+      batches: 0,
+      facesDrawn: 0,
+      drawCalls: 0,
+      skyDrawn: false,
+      viewModelDrawn: false,
+      fps: Math.round(fps),
+      vertexCount: 0
+    };
+    const {
+      camera,
+      world,
+      sky,
+      clearColor = [0, 0, 0, 1],
+      timeSeconds = 0,
+      viewModel,
+      dlights,
+      renderMode,
+      disableLightmaps,
+      lightmapOnly,
+      brightness,
+      gamma,
+      fullbright,
+      ambient,
+      lightStyleOverrides,
+      waterTint,
+      underwaterWarp,
+      bloom,
+      bloomIntensity,
+      portalState
+    } = options;
+    const viewProjection = new Float32Array(camera.viewProjectionMatrix);
+    gl.clearColor(clearColor[0], clearColor[1], clearColor[2], clearColor[3]);
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+    renderSky(skyboxPipeline, camera, timeSeconds, sky, deps);
+    stats.skyDrawn = Boolean(sky);
+    if (world) {
+      world.materials?.update(timeSeconds);
+      const frustum = deps.extractFrustumPlanes(Array.from(viewProjection));
+      const cameraPosition = {
+        x: camera.position[0] ?? 0,
+        y: camera.position[1] ?? 0,
+        z: camera.position[2] ?? 0
+      };
+      const visibleFaces = deps.gatherVisibleFaces(world.map, cameraPosition, frustum, portalState);
+      const opaqueFaces = [];
+      const transparentFaces = [];
+      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 = sortVisibleFacesFrontToBack(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] = evaluateLightStyle(pattern, timeSeconds);
+        }
+        effectiveLightStyles = styles;
+      }
+      const drawSurfaceBatch = (faces, useRefraction) => {
+        let lastBatchKey;
+        let cachedState;
+        const cache = {};
+        const currentRefractionTexture = useRefraction ? copyTexture : void 0;
+        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;
+          const material = world.materials?.getMaterial(geometry.texture);
+          const resolvedTextures = resolveSurfaceTextures(geometry, world, currentRefractionTexture);
+          let activeRenderMode = renderMode;
+          if (renderMode && !renderMode.applyToAll && resolvedTextures.diffuse) {
+            activeRenderMode = void 0;
+          } else if (renderMode && !renderMode.applyToAll && !resolvedTextures.diffuse) {
+            activeRenderMode = renderMode;
+          }
+          let effectiveLightmap = resolvedTextures.lightmap;
+          if (disableLightmaps) {
+            effectiveLightmap = void 0;
+          }
+          const batchKey = {
+            diffuse: resolvedTextures.diffuse,
+            lightmap: effectiveLightmap,
+            surfaceFlags: geometry.surfaceFlags,
+            styleKey: faceStyles?.join(",") ?? ""
+          };
+          const isSameBatch = lastBatchKey && lastBatchKey.diffuse === batchKey.diffuse && lastBatchKey.lightmap === batchKey.lightmap && lastBatchKey.surfaceFlags === batchKey.surfaceFlags && lastBatchKey.styleKey === batchKey.styleKey;
+          if (!isSameBatch) {
+            stats.batches += 1;
+            cache.diffuse = void 0;
+            cache.lightmap = void 0;
+            cache.refraction = void 0;
+            const effectiveTextures = { ...resolvedTextures, lightmap: effectiveLightmap };
+            const textures = bindSurfaceTextures(geometry, world, cache, effectiveTextures);
+            const texScroll = material ? material.scrollOffset : void 0;
+            const warp = material ? material.warp : void 0;
+            cachedState = bspPipeline.bind({
+              modelViewProjection: viewProjection,
+              styleIndices: faceStyles,
+              styleValues: effectiveLightStyles,
+              surfaceFlags: geometry.surfaceFlags,
+              timeSeconds,
+              diffuseSampler: textures.diffuse,
+              lightmapSampler: textures.lightmap,
+              refractionSampler: textures.refraction,
+              texScroll,
+              warp,
+              dlights,
+              renderMode: activeRenderMode,
+              lightmapOnly,
+              brightness,
+              gamma,
+              fullbright,
+              ambient
+            });
+            applySurfaceState(gl, cachedState);
+            lastBatchKey = batchKey;
+          } else {
+            const effectiveTextures = { ...resolvedTextures, lightmap: effectiveLightmap };
+            bindSurfaceTextures(geometry, world, cache, effectiveTextures);
+            if (cachedState) {
+              applySurfaceState(gl, cachedState);
+            }
+          }
+          bspPipeline.draw(geometry, activeRenderMode);
+          stats.facesDrawn += 1;
+          stats.drawCalls += 1;
+          stats.vertexCount += geometry.vertexCount;
+        }
+      };
+      drawSurfaceBatch(sortedOpaque, false);
+      if (transparentFaces.length > 0) {
+        const width = gl.canvas.width;
+        const height = gl.canvas.height;
+        const rt = ensureCopyTexture(width, height);
+        rt.bind(2);
+        gl.copyTexImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 0, 0, width, height, 0);
+      }
+      const sortedTransparent = sortVisibleFacesBackToFront(transparentFaces);
+      drawSurfaceBatch(sortedTransparent, true);
+    }
+    if (renderViewModel(gl, camera, viewModel, deps.removeViewTranslation)) {
+      stats.viewModelDrawn = true;
+    }
+    if (underwaterWarp) {
+      const width = gl.canvas.width;
+      const height = gl.canvas.height;
+      const rt = ensureCopyTexture(width, height);
+      rt.bind(0);
+      gl.copyTexImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 0, 0, width, height, 0);
+      gl.disable(gl.DEPTH_TEST);
+      gl.depthMask(false);
+      postProcess.render(rt.texture, timeSeconds);
+      gl.enable(gl.DEPTH_TEST);
+      gl.depthMask(true);
+    }
+    if (bloom) {
+      const width = gl.canvas.width;
+      const height = gl.canvas.height;
+      bloomPipeline.resize(width, height);
+      const rt = ensureCopyTexture(width, height);
+      rt.bind(0);
+      gl.copyTexImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 0, 0, width, height, 0);
+      bloomPipeline.render(rt, bloomIntensity ?? 0.5);
+    }
+    return stats;
+  };
+  return {
+    renderFrame
+  };
+};
+
 // src/render/sprite.ts
 var SPRITE_VERTEX_SHADER = `#version 300 es
 precision highp float;
@@ -7474,6 +8049,1523 @@ var SpriteRenderer = class {
     this.draw(x, y, width, height, 0, 0, 1, 1, color);
   }
 };
+
+// src/render/collisionVis.ts
+var LINE_VERTEX_SHADER = `#version 300 es
+precision highp float;
+
+layout(location = 0) in vec3 a_position;
+layout(location = 1) in vec4 a_color;
+
+uniform mat4 u_viewProjection;
+
+out vec4 v_color;
+
+void main() {
+  v_color = a_color;
+  gl_Position = u_viewProjection * vec4(a_position, 1.0);
+}`;
+var LINE_FRAGMENT_SHADER = `#version 300 es
+precision highp float;
+
+in vec4 v_color;
+out vec4 o_color;
+
+void main() {
+  o_color = v_color;
+}`;
+var CollisionVisRenderer = class {
+  constructor(gl) {
+    this.vertices = [];
+    this.gl = gl;
+    this.program = ShaderProgram.create(
+      gl,
+      { vertex: LINE_VERTEX_SHADER, fragment: LINE_FRAGMENT_SHADER },
+      { a_position: 0, a_color: 1 }
+    );
+    this.uniformViewProjection = this.program.getUniformLocation("u_viewProjection");
+    this.vao = new VertexArray(gl);
+    this.vbo = new VertexBuffer(gl, gl.STREAM_DRAW);
+    this.vao.configureAttributes(
+      [
+        { index: 0, size: 3, type: gl.FLOAT, stride: 28, offset: 0 },
+        { index: 1, size: 4, type: gl.FLOAT, stride: 28, offset: 12 }
+      ],
+      this.vbo
+    );
+  }
+  get shaderSize() {
+    return this.program.sourceSize;
+  }
+  addLine(start, end, color = { r: 1, g: 0, b: 0, a: 1 }) {
+    this.vertices.push(
+      start.x,
+      start.y,
+      start.z,
+      color.r,
+      color.g,
+      color.b,
+      color.a,
+      end.x,
+      end.y,
+      end.z,
+      color.r,
+      color.g,
+      color.b,
+      color.a
+    );
+  }
+  addBBox(mins, maxs, color = { r: 0, g: 1, b: 0, a: 1 }) {
+    const p0 = { x: mins.x, y: mins.y, z: mins.z };
+    const p1 = { x: maxs.x, y: mins.y, z: mins.z };
+    const p2 = { x: maxs.x, y: maxs.y, z: mins.z };
+    const p3 = { x: mins.x, y: maxs.y, z: mins.z };
+    const p4 = { x: mins.x, y: mins.y, z: maxs.z };
+    const p5 = { x: maxs.x, y: mins.y, z: maxs.z };
+    const p6 = { x: maxs.x, y: maxs.y, z: maxs.z };
+    const p7 = { x: mins.x, y: maxs.y, z: maxs.z };
+    this.addLine(p0, p1, color);
+    this.addLine(p1, p2, color);
+    this.addLine(p2, p3, color);
+    this.addLine(p3, p0, color);
+    this.addLine(p4, p5, color);
+    this.addLine(p5, p6, color);
+    this.addLine(p6, p7, color);
+    this.addLine(p7, p4, color);
+    this.addLine(p0, p4, color);
+    this.addLine(p1, p5, color);
+    this.addLine(p2, p6, color);
+    this.addLine(p3, p7, color);
+  }
+  clear() {
+    this.vertices = [];
+  }
+  render(viewProjection) {
+    if (this.vertices.length === 0) return;
+    this.program.use();
+    this.gl.uniformMatrix4fv(this.uniformViewProjection, false, viewProjection);
+    this.vbo.upload(new Float32Array(this.vertices), this.gl.STREAM_DRAW);
+    this.vao.bind();
+    this.gl.drawArrays(this.gl.LINES, 0, this.vertices.length / 7);
+  }
+};
+
+// src/render/light.ts
+function findLeaf(map, point) {
+  let nodeIndex = map.models[0].headNode;
+  while (nodeIndex >= 0) {
+    const node = map.nodes[nodeIndex];
+    const plane = map.planes[node.planeIndex];
+    const dist = plane.normal[0] * point.x + plane.normal[1] * point.y + plane.normal[2] * point.z - plane.dist;
+    if (dist >= 0) {
+      nodeIndex = node.children[0];
+    } else {
+      nodeIndex = node.children[1];
+    }
+  }
+  const index = -(nodeIndex + 1);
+  return { leaf: map.leafs[index], index };
+}
+function getMinLight(map) {
+  if (map.entities.worldspawn?.properties["light"]) {
+    const val = parseInt(map.entities.worldspawn.properties["light"], 10);
+    if (!isNaN(val)) return val / 255;
+  }
+  if (map.entities.worldspawn?.properties["_minlight"]) {
+    const val = parseInt(map.entities.worldspawn.properties["_minlight"], 10);
+    if (!isNaN(val)) return val / 255;
+  }
+  return 0.2;
+}
+function sampleLightmap(map, faceIndex, u, v) {
+  const face = map.faces[faceIndex];
+  if (!face || face.lightOffset < 0) {
+    return 0;
+  }
+  const info = map.lightMapInfo[faceIndex];
+  if (!info) return 0;
+  const texInfo = map.texInfo[face.texInfo];
+  let minS = Infinity, maxS = -Infinity, minT = Infinity, maxT = -Infinity;
+  let edgeIndex = face.firstEdge;
+  for (let i = 0; i < face.numEdges; i++) {
+    const eIndex = map.surfEdges[edgeIndex + i];
+    const vIndex = eIndex >= 0 ? map.edges[eIndex].vertices[0] : map.edges[Math.abs(eIndex)].vertices[1];
+    const vert = map.vertices[vIndex];
+    const s = vert[0] * texInfo.s[0] + vert[1] * texInfo.s[1] + vert[2] * texInfo.s[2] + texInfo.sOffset;
+    const t = vert[0] * texInfo.t[0] + vert[1] * texInfo.t[1] + vert[2] * texInfo.t[2] + texInfo.tOffset;
+    if (s < minS) minS = s;
+    if (s > maxS) maxS = s;
+    if (t < minT) minT = t;
+    if (t > maxT) maxT = t;
+  }
+  const floorMinS = Math.floor(minS / 16);
+  const floorMinT = Math.floor(minT / 16);
+  const lmWidth = Math.ceil(maxS / 16) - floorMinS + 1;
+  const lmHeight = Math.ceil(maxT / 16) - floorMinT + 1;
+  const ls = u / 16 - floorMinS;
+  const lt = v / 16 - floorMinT;
+  const x = Math.max(0, Math.min(lmWidth - 1, Math.floor(ls)));
+  const y = Math.max(0, Math.min(lmHeight - 1, Math.floor(lt)));
+  const offset = face.lightOffset + (y * lmWidth + x) * 3;
+  if (offset + 2 >= map.lightMaps.length) return 0;
+  const r = map.lightMaps[offset];
+  const g = map.lightMaps[offset + 1];
+  const b = map.lightMaps[offset + 2];
+  return Math.max(r, g, b) / 255;
+}
+function calculateEntityLight(map, origin) {
+  if (!map) return 1;
+  const minLight = getMinLight(map);
+  const { leaf, index: leafIndex } = findLeaf(map, origin);
+  if (leaf.contents & 1) {
+    return minLight;
+  }
+  const leafFaces = map.leafLists.leafFaces[leafIndex];
+  if (leafFaces) {
+    for (const faceIndex of leafFaces) {
+      const face = map.faces[faceIndex];
+      const plane = map.planes[face.planeIndex];
+      const side = face.side;
+      const nx = side ? -plane.normal[0] : plane.normal[0];
+      const ny = side ? -plane.normal[1] : plane.normal[1];
+      const nz = side ? -plane.normal[2] : plane.normal[2];
+      const dist = side ? -plane.dist : plane.dist;
+      if (nz > 0.7) {
+        const d = nx * origin.x + ny * origin.y + nz * origin.z - dist;
+        if (d >= 0 && d < 64) {
+          const texInfo = map.texInfo[face.texInfo];
+          const s = origin.x * texInfo.s[0] + origin.y * texInfo.s[1] + origin.z * texInfo.s[2] + texInfo.sOffset;
+          const t = origin.x * texInfo.t[0] + origin.y * texInfo.t[1] + origin.z * texInfo.t[2] + texInfo.tOffset;
+          const light = sampleLightmap(map, faceIndex, s, t);
+          if (light > minLight) {
+            return light;
+          }
+        }
+      }
+    }
+  }
+  return Math.max(minLight, 0.2);
+}
+
+// src/render/gpuProfiler.ts
+var GpuProfiler = class {
+  constructor(gl) {
+    this.activeQueries = [];
+    this.queryPool = [];
+    this.currentQuery = null;
+    this.lastGpuTimeMs = 0;
+    // CPU-side counters
+    this.frameStartTime = 0;
+    this.lastCpuFrameTimeMs = 0;
+    // Resource Tracking
+    this.textureMemoryBytes = 0;
+    this.bufferMemoryBytes = 0;
+    this.shaderMemoryBytes = 0;
+    this.gl = gl;
+    this.ext = gl.getExtension("EXT_disjoint_timer_query_webgl2");
+  }
+  get available() {
+    return !!this.ext;
+  }
+  // To be called by Renderer to construct the final report
+  getPerformanceReport(frameStats) {
+    const textureMB = this.textureMemoryBytes / (1024 * 1024);
+    const geometryMB = this.bufferMemoryBytes / (1024 * 1024);
+    return {
+      frameTimeMs: this.lastCpuFrameTimeMs,
+      // Main frame time (CPU)
+      gpuTimeMs: this.lastGpuTimeMs,
+      cpuFrameTimeMs: this.lastCpuFrameTimeMs,
+      drawCalls: frameStats.drawCalls,
+      triangles: Math.floor(frameStats.vertexCount / 3),
+      // Approximation if mostly triangles
+      vertices: frameStats.vertexCount,
+      textureBinds: frameStats.batches,
+      // Using batches as proxy for texture binds
+      shaderSwitches: frameStats.shaderSwitches,
+      visibleSurfaces: frameStats.visibleSurfaces,
+      culledSurfaces: frameStats.culledSurfaces,
+      visibleEntities: frameStats.visibleEntities,
+      culledEntities: frameStats.culledEntities,
+      memoryUsageMB: {
+        textures: textureMB,
+        geometry: geometryMB,
+        total: textureMB + geometryMB
+      }
+    };
+  }
+  startFrame() {
+    this.frameStartTime = performance.now();
+    if (!this.ext) return;
+    if (this.currentQuery) {
+      return;
+    }
+    const query = this.getQuery();
+    if (query) {
+      this.gl.beginQuery(this.ext.TIME_ELAPSED_EXT, query);
+      this.currentQuery = query;
+    }
+  }
+  endFrame() {
+    this.lastCpuFrameTimeMs = performance.now() - this.frameStartTime;
+    if (!this.ext || !this.currentQuery) return;
+    this.gl.endQuery(this.ext.TIME_ELAPSED_EXT);
+    this.activeQueries.push(this.currentQuery);
+    this.currentQuery = null;
+    this.pollQueries();
+  }
+  trackTextureMemory(bytes) {
+    this.textureMemoryBytes += bytes;
+  }
+  trackBufferMemory(bytes) {
+    this.bufferMemoryBytes += bytes;
+  }
+  trackShaderMemory(bytes) {
+    this.shaderMemoryBytes += bytes;
+  }
+  getMemoryUsage() {
+    const texturesBytes = this.textureMemoryBytes;
+    const geometryBytes = this.bufferMemoryBytes;
+    const shadersBytes = this.shaderMemoryBytes;
+    const buffersBytes = this.bufferMemoryBytes;
+    const totalBytes = texturesBytes + geometryBytes + shadersBytes;
+    return {
+      texturesBytes,
+      geometryBytes,
+      shadersBytes,
+      buffersBytes,
+      totalBytes
+    };
+  }
+  getQuery() {
+    if (this.queryPool.length > 0) {
+      return this.queryPool.pop();
+    }
+    return this.gl.createQuery();
+  }
+  pollQueries() {
+    if (this.activeQueries.length === 0) return;
+    const query = this.activeQueries[0];
+    const available = this.gl.getQueryParameter(query, this.gl.QUERY_RESULT_AVAILABLE);
+    const disjoint = this.gl.getParameter(this.ext.GPU_DISJOINT_EXT);
+    if (available) {
+      if (disjoint) {
+        this.activeQueries.forEach((q) => this.queryPool.push(q));
+        this.activeQueries.length = 0;
+      } else {
+        const timeElapsedNs = this.gl.getQueryParameter(query, this.gl.QUERY_RESULT);
+        this.lastGpuTimeMs = timeElapsedNs / 1e6;
+        this.activeQueries.shift();
+        this.queryPool.push(query);
+      }
+    }
+  }
+  dispose() {
+    [...this.activeQueries, ...this.queryPool].forEach((q) => this.gl.deleteQuery(q));
+    this.activeQueries.length = 0;
+    this.queryPool.length = 0;
+  }
+};
+
+// src/render/colors.ts
+var QUAKE2_COLORS = {
+  "1": [1, 0, 0, 1],
+  // Red
+  "2": [0, 1, 0, 1],
+  // Green
+  "3": [1, 1, 0, 1],
+  // Yellow
+  "4": [0, 0, 1, 1],
+  // Blue
+  "5": [0, 1, 1, 1],
+  // Cyan
+  "6": [1, 0, 1, 1],
+  // Magenta
+  "7": [1, 1, 1, 1],
+  // White
+  "0": [0, 0, 0, 1]
+  // Black (or default?)
+};
+function parseColorString(text) {
+  const segments = [];
+  let currentText = "";
+  let currentColor = void 0;
+  for (let i = 0; i < text.length; i++) {
+    if (text[i] === "^" && i + 1 < text.length) {
+      const code = text[i + 1];
+      if (QUAKE2_COLORS[code]) {
+        if (currentText.length > 0) {
+          segments.push({ text: currentText, color: currentColor });
+          currentText = "";
+        }
+        currentColor = QUAKE2_COLORS[code];
+        i++;
+        continue;
+      }
+    }
+    currentText += text[i];
+  }
+  if (currentText.length > 0) {
+    segments.push({ text: currentText, color: currentColor });
+  }
+  return segments;
+}
+var VS_SOURCE = `
+attribute vec3 a_position;
+attribute vec3 a_color;
+uniform mat4 u_viewProjection;
+varying vec3 v_color;
+
+void main() {
+  gl_Position = u_viewProjection * vec4(a_position, 1.0);
+  v_color = a_color;
+}
+`;
+var FS_SOURCE = `
+precision mediump float;
+varying vec3 v_color;
+
+void main() {
+  gl_FragColor = vec4(v_color, 1.0);
+}
+`;
+var VS_SOLID = `
+attribute vec3 a_position;
+attribute vec3 a_color;
+attribute vec3 a_normal;
+
+uniform mat4 u_viewProjection;
+uniform bool u_lightingEnabled;
+
+varying vec3 v_color;
+varying vec3 v_normal;
+
+void main() {
+  gl_Position = u_viewProjection * vec4(a_position, 1.0);
+  v_color = a_color;
+  v_normal = a_normal;
+}
+`;
+var FS_SOLID = `
+precision mediump float;
+varying vec3 v_color;
+varying vec3 v_normal;
+
+uniform bool u_lightingEnabled;
+
+void main() {
+  vec3 color = v_color;
+
+  if (u_lightingEnabled) {
+      // Simple directional light from top-left
+      vec3 lightDir = normalize(vec3(0.5, 0.7, 1.0));
+      float diff = max(dot(v_normal, lightDir), 0.3); // 0.3 ambient
+      color = color * diff;
+  }
+
+  gl_FragColor = vec4(color, 1.0);
+}
+`;
+function toGlVec3(v) {
+  return glMatrix.vec3.fromValues(v.x, v.y, v.z);
+}
+function fromGlVec3(v) {
+  return { x: v[0], y: v[1], z: v[2] };
+}
+var DebugRenderer = class {
+  constructor(gl) {
+    this.vertices = [];
+    this.solidVertices = [];
+    this.labels = [];
+    this.gl = gl;
+    this.shader = ShaderProgram.create(gl, { vertex: VS_SOURCE, fragment: FS_SOURCE });
+    this.vao = new VertexArray(gl);
+    this.vbo = new VertexBuffer(gl, gl.DYNAMIC_DRAW);
+    this.vao.configureAttributes([
+      { index: 0, size: 3, type: gl.FLOAT, stride: 24, offset: 0 },
+      // position
+      { index: 1, size: 3, type: gl.FLOAT, stride: 24, offset: 12 }
+      // color
+    ], this.vbo);
+    this.shaderSolid = ShaderProgram.create(gl, { vertex: VS_SOLID, fragment: FS_SOLID });
+    this.vaoSolid = new VertexArray(gl);
+    this.vboSolid = new VertexBuffer(gl, gl.DYNAMIC_DRAW);
+    this.vaoSolid.configureAttributes([
+      { index: 0, size: 3, type: gl.FLOAT, stride: 36, offset: 0 },
+      // position
+      { index: 1, size: 3, type: gl.FLOAT, stride: 36, offset: 12 },
+      // color
+      { index: 2, size: 3, type: gl.FLOAT, stride: 36, offset: 24 }
+      // normal
+    ], this.vboSolid);
+  }
+  get shaderSize() {
+    return this.shader.sourceSize + this.shaderSolid.sourceSize;
+  }
+  drawLine(start, end, color) {
+    this.vertices.push(
+      start.x,
+      start.y,
+      start.z,
+      color.r,
+      color.g,
+      color.b,
+      end.x,
+      end.y,
+      end.z,
+      color.r,
+      color.g,
+      color.b
+    );
+  }
+  drawBoundingBox(mins, maxs, color) {
+    const { x: x1, y: y1, z: z1 } = mins;
+    const { x: x2, y: y2, z: z2 } = maxs;
+    this.drawLine({ x: x1, y: y1, z: z1 }, { x: x2, y: y1, z: z1 }, color);
+    this.drawLine({ x: x2, y: y1, z: z1 }, { x: x2, y: y2, z: z1 }, color);
+    this.drawLine({ x: x2, y: y2, z: z1 }, { x: x1, y: y2, z: z1 }, color);
+    this.drawLine({ x: x1, y: y2, z: z1 }, { x: x1, y: y1, z: z1 }, color);
+    this.drawLine({ x: x1, y: y1, z: z2 }, { x: x2, y: y1, z: z2 }, color);
+    this.drawLine({ x: x2, y: y1, z: z2 }, { x: x2, y: y2, z: z2 }, color);
+    this.drawLine({ x: x2, y: y2, z: z2 }, { x: x1, y: y2, z: z2 }, color);
+    this.drawLine({ x: x1, y: y2, z: z2 }, { x: x1, y: y1, z: z2 }, color);
+    this.drawLine({ x: x1, y: y1, z: z1 }, { x: x1, y: y1, z: z2 }, color);
+    this.drawLine({ x: x2, y: y1, z: z1 }, { x: x2, y: y1, z: z2 }, color);
+    this.drawLine({ x: x2, y: y2, z: z1 }, { x: x2, y: y2, z: z2 }, color);
+    this.drawLine({ x: x1, y: y2, z: z1 }, { x: x1, y: y2, z: z2 }, color);
+  }
+  drawPoint(position, size, color) {
+    const s = size / 2;
+    this.drawBoundingBox(
+      { x: position.x - s, y: position.y - s, z: position.z - s },
+      { x: position.x + s, y: position.y + s, z: position.z + s },
+      color
+    );
+  }
+  drawAxes(position, size) {
+    this.drawLine(position, { x: position.x + size, y: position.y, z: position.z }, { r: 1, g: 0, b: 0 });
+    this.drawLine(position, { x: position.x, y: position.y + size, z: position.z }, { r: 0, g: 1, b: 0 });
+    this.drawLine(position, { x: position.x, y: position.y, z: position.z + size }, { r: 0, g: 0, b: 1 });
+  }
+  drawText3D(text, position) {
+    this.labels.push({ text, position });
+  }
+  addTriangle(v1, v2, v3, normal, color) {
+    this.solidVertices.push(v1.x, v1.y, v1.z);
+    this.solidVertices.push(color.r, color.g, color.b);
+    this.solidVertices.push(normal.x, normal.y, normal.z);
+    this.solidVertices.push(v2.x, v2.y, v2.z);
+    this.solidVertices.push(color.r, color.g, color.b);
+    this.solidVertices.push(normal.x, normal.y, normal.z);
+    this.solidVertices.push(v3.x, v3.y, v3.z);
+    this.solidVertices.push(color.r, color.g, color.b);
+    this.solidVertices.push(normal.x, normal.y, normal.z);
+  }
+  addCone(apex, baseCenter, baseRadius, color) {
+    const segments = 16;
+    const apexGl = toGlVec3(apex);
+    const baseCenterGl = toGlVec3(baseCenter);
+    const axis = glMatrix.vec3.create();
+    glMatrix.vec3.subtract(axis, apexGl, baseCenterGl);
+    glMatrix.vec3.normalize(axis, axis);
+    let up = glMatrix.vec3.fromValues(0, 0, 1);
+    if (Math.abs(glMatrix.vec3.dot(axis, up)) > 0.99) {
+      up = glMatrix.vec3.fromValues(0, 1, 0);
+    }
+    const right = glMatrix.vec3.create();
+    glMatrix.vec3.cross(right, up, axis);
+    glMatrix.vec3.normalize(right, right);
+    const forward = glMatrix.vec3.create();
+    glMatrix.vec3.cross(forward, axis, right);
+    const basePoints = [];
+    for (let i = 0; i < segments; i++) {
+      const angle = i / segments * Math.PI * 2;
+      const x = Math.cos(angle) * baseRadius;
+      const y = Math.sin(angle) * baseRadius;
+      const point = glMatrix.vec3.clone(baseCenterGl);
+      glMatrix.vec3.scaleAndAdd(point, point, right, x);
+      glMatrix.vec3.scaleAndAdd(point, point, forward, y);
+      basePoints.push(point);
+    }
+    const baseNormal = glMatrix.vec3.clone(axis);
+    glMatrix.vec3.scale(baseNormal, baseNormal, -1);
+    const baseNormalVec3 = fromGlVec3(baseNormal);
+    const center = baseCenter;
+    for (let i = 0; i < segments; i++) {
+      const p1 = fromGlVec3(basePoints[i]);
+      const p2 = fromGlVec3(basePoints[(i + 1) % segments]);
+      this.addTriangle(center, p2, p1, baseNormalVec3, color);
+    }
+    for (let i = 0; i < segments; i++) {
+      const p1Gl = basePoints[i];
+      const p2Gl = basePoints[(i + 1) % segments];
+      const p1 = fromGlVec3(p1Gl);
+      const p2 = fromGlVec3(p2Gl);
+      const v1 = glMatrix.vec3.create();
+      glMatrix.vec3.subtract(v1, p2Gl, p1Gl);
+      const v2 = glMatrix.vec3.create();
+      glMatrix.vec3.subtract(v2, apexGl, p1Gl);
+      const normal = glMatrix.vec3.create();
+      glMatrix.vec3.cross(normal, v1, v2);
+      glMatrix.vec3.normalize(normal, normal);
+      const normalVec3 = fromGlVec3(normal);
+      this.addTriangle(p1, p2, apex, normalVec3, color);
+    }
+  }
+  addTorus(center, radius, tubeRadius, color, axis = { x: 0, y: 0, z: 1 }) {
+    const segments = 16;
+    const tubeSegments = 8;
+    const axisVec = toGlVec3(axis);
+    glMatrix.vec3.normalize(axisVec, axisVec);
+    const centerGl = toGlVec3(center);
+    const zAxis = glMatrix.vec3.fromValues(0, 0, 1);
+    const rotation = glMatrix.mat4.create();
+    if (Math.abs(glMatrix.vec3.dot(axisVec, zAxis)) > 0.999) {
+      if (axisVec[2] < 0) {
+        glMatrix.mat4.rotateX(rotation, rotation, Math.PI);
+      }
+    } else {
+      const rotAxis = glMatrix.vec3.create();
+      glMatrix.vec3.cross(rotAxis, zAxis, axisVec);
+      glMatrix.vec3.normalize(rotAxis, rotAxis);
+      const angle = Math.acos(glMatrix.vec3.dot(zAxis, axisVec));
+      glMatrix.mat4.fromRotation(rotation, angle, rotAxis);
+    }
+    const vertices = [];
+    for (let i = 0; i <= segments; i++) {
+      const u = i / segments * Math.PI * 2;
+      const cosU = Math.cos(u);
+      const sinU = Math.sin(u);
+      const ringVerts = [];
+      const ringNorms = [];
+      for (let j = 0; j <= tubeSegments; j++) {
+        const v = j / tubeSegments * Math.PI * 2;
+        const cosV = Math.cos(v);
+        const sinV = Math.sin(v);
+        const cx = (radius + tubeRadius * cosV) * cosU;
+        const cy = (radius + tubeRadius * cosV) * sinU;
+        const cz = tubeRadius * sinV;
+        const pt = glMatrix.vec3.fromValues(cx, cy, cz);
+        const nx = cosV * cosU;
+        const ny = cosV * sinU;
+        const nz = sinV;
+        const n = glMatrix.vec3.fromValues(nx, ny, nz);
+        glMatrix.vec3.transformMat4(pt, pt, rotation);
+        glMatrix.vec3.transformMat4(n, n, rotation);
+        glMatrix.vec3.add(pt, pt, centerGl);
+        ringVerts.push(pt);
+        ringNorms.push(n);
+      }
+      vertices.push(ringVerts);
+    }
+    for (let i = 0; i < segments; i++) {
+      for (let j = 0; j < tubeSegments; j++) {
+        const p1 = vertices[i][j];
+        const p2 = vertices[i + 1][j];
+        const p3 = vertices[i + 1][j + 1];
+        const p4 = vertices[i][j + 1];
+        const p1V = fromGlVec3(p1);
+        const p2V = fromGlVec3(p2);
+        const p3V = fromGlVec3(p3);
+        const p4V = fromGlVec3(p4);
+        const v1 = glMatrix.vec3.create();
+        glMatrix.vec3.subtract(v1, p2, p1);
+        const v2 = glMatrix.vec3.create();
+        glMatrix.vec3.subtract(v2, p3, p1);
+        const faceN1 = glMatrix.vec3.create();
+        glMatrix.vec3.cross(faceN1, v1, v2);
+        glMatrix.vec3.normalize(faceN1, faceN1);
+        this.addTriangle(p1V, p2V, p3V, fromGlVec3(faceN1), color);
+        const v3 = glMatrix.vec3.create();
+        glMatrix.vec3.subtract(v3, p3, p1);
+        const v4 = glMatrix.vec3.create();
+        glMatrix.vec3.subtract(v4, p4, p1);
+        const faceN2 = glMatrix.vec3.create();
+        glMatrix.vec3.cross(faceN2, v3, v4);
+        glMatrix.vec3.normalize(faceN2, faceN2);
+        this.addTriangle(p1V, p3V, p4V, fromGlVec3(faceN2), color);
+      }
+    }
+  }
+  // Updated render method
+  render(viewProjection, alwaysOnTop = false) {
+    if (alwaysOnTop) {
+      this.gl.disable(this.gl.DEPTH_TEST);
+    }
+    if (this.vertices.length > 0) {
+      this.shader.use();
+      const loc = this.shader.getUniformLocation("u_viewProjection");
+      if (loc) {
+        this.gl.uniformMatrix4fv(loc, false, viewProjection);
+      }
+      this.vbo.upload(new Float32Array(this.vertices));
+      this.vao.bind();
+      this.gl.drawArrays(this.gl.LINES, 0, this.vertices.length / 6);
+    }
+    if (this.solidVertices.length > 0) {
+      this.shaderSolid.use();
+      const loc = this.shaderSolid.getUniformLocation("u_viewProjection");
+      if (loc) {
+        this.gl.uniformMatrix4fv(loc, false, viewProjection);
+      }
+      const locLight = this.shaderSolid.getUniformLocation("u_lightingEnabled");
+      if (locLight) {
+        this.gl.uniform1i(locLight, 1);
+      }
+      this.vboSolid.upload(new Float32Array(this.solidVertices));
+      this.vaoSolid.bind();
+      this.gl.drawArrays(this.gl.TRIANGLES, 0, this.solidVertices.length / 9);
+    }
+    if (alwaysOnTop) {
+      this.gl.enable(this.gl.DEPTH_TEST);
+    }
+  }
+  // New method to retrieve 2D projected labels for external rendering (e.g. by Renderer using drawString)
+  // Returns list of { text, x, y } where x,y are canvas coords
+  getLabels(viewProjection, width, height) {
+    const results = [];
+    for (const label of this.labels) {
+      const v = glMatrix.vec4.fromValues(label.position.x, label.position.y, label.position.z, 1);
+      const clip = glMatrix.vec4.create();
+      const vp = viewProjection;
+      const m = vp;
+      const x = v[0], y = v[1], z = v[2], w = v[3];
+      clip[0] = m[0] * x + m[4] * y + m[8] * z + m[12] * w;
+      clip[1] = m[1] * x + m[5] * y + m[9] * z + m[13] * w;
+      clip[2] = m[2] * x + m[6] * y + m[10] * z + m[14] * w;
+      clip[3] = m[3] * x + m[7] * y + m[11] * z + m[15] * w;
+      if (clip[3] > 0) {
+        const ndcX = clip[0] / clip[3];
+        const ndcY = clip[1] / clip[3];
+        const screenX = (ndcX + 1) * 0.5 * width;
+        const screenY = (1 - ndcY) * 0.5 * height;
+        if (screenX >= 0 && screenX <= width && screenY >= 0 && screenY <= height) {
+          results.push({ text: label.text, x: screenX, y: screenY });
+        }
+      }
+    }
+    return results;
+  }
+  clear() {
+    this.vertices = [];
+    this.solidVertices = [];
+    this.labels = [];
+  }
+};
+
+// src/render/lightCulling.ts
+function cullLights(lights, planes, cameraPosition, maxLights = 32) {
+  const visibleLights = [];
+  for (const light of lights) {
+    let visible = true;
+    for (const plane of planes) {
+      const dist = plane.normal.x * light.origin.x + plane.normal.y * light.origin.y + plane.normal.z * light.origin.z + plane.distance;
+      if (dist < -light.intensity) {
+        visible = false;
+        break;
+      }
+    }
+    if (visible) {
+      let distSq = 0;
+      if (cameraPosition) {
+        const dx = light.origin.x - cameraPosition.x;
+        const dy = light.origin.y - cameraPosition.y;
+        const dz = light.origin.z - cameraPosition.z;
+        distSq = dx * dx + dy * dy + dz * dz;
+      }
+      visibleLights.push({ light, distSq });
+    }
+  }
+  if (cameraPosition) {
+    visibleLights.sort((a, b) => a.distSq - b.distSq);
+  }
+  const result = [];
+  const count = Math.min(visibleLights.length, maxLights);
+  for (let i = 0; i < count; i++) {
+    result.push(visibleLights[i].light);
+  }
+  return result;
+}
+
+// src/render/renderer.ts
+function colorFromId(id) {
+  const r = (id * 1664525 + 1013904223 >>> 0) / 4294967296;
+  const g = (id * 25214903917 + 11 >>> 0) / 4294967296;
+  const b = (id * 69069 + 1 >>> 0) / 4294967296;
+  return [r, g, b, 1];
+}
+var createRenderer = (gl) => {
+  const bspPipeline = new BspSurfacePipeline(gl);
+  const skyboxPipeline = new SkyboxPipeline(gl);
+  const md2Pipeline = new Md2Pipeline(gl);
+  const md3Pipeline = new Md3Pipeline(gl);
+  const spriteRenderer = new SpriteRenderer(gl);
+  const collisionVis = new CollisionVisRenderer(gl);
+  const debugRenderer = new DebugRenderer(gl);
+  const gpuProfiler = new GpuProfiler(gl);
+  const particleRng = new shared.RandomGenerator({ seed: Date.now() });
+  const particleSystem = new ParticleSystem(4096, particleRng);
+  const particleRenderer = new ParticleRenderer(gl, particleSystem);
+  const shaderBytes = bspPipeline.shaderSize + skyboxPipeline.shaderSize + md2Pipeline.shaderSize + md3Pipeline.shaderSize + spriteRenderer.shaderSize + collisionVis.shaderSize + debugRenderer.shaderSize + particleRenderer.shaderSize;
+  gpuProfiler.trackShaderMemory(shaderBytes);
+  const md3MeshCache = /* @__PURE__ */ new Map();
+  const md2MeshCache = /* @__PURE__ */ new Map();
+  const picCache = /* @__PURE__ */ new Map();
+  const entityLeafCache = /* @__PURE__ */ new Map();
+  let frameCounter = 0;
+  const CACHE_CLEANUP_INTERVAL = 600;
+  const CACHE_MAX_AGE = 300;
+  let font = null;
+  let lastFrameStats = {
+    drawCalls: 0,
+    vertexCount: 0,
+    batches: 0,
+    shaderSwitches: 0,
+    visibleSurfaces: 0,
+    culledSurfaces: 0,
+    visibleEntities: 0,
+    culledEntities: 0
+  };
+  const highlightedEntities = /* @__PURE__ */ new Map();
+  const highlightedSurfaces = /* @__PURE__ */ new Map();
+  let debugMode = 0 /* None */;
+  let brightness = 1;
+  let gamma = 1;
+  let fullbright = false;
+  let ambient = 0;
+  const lightStyleOverrides = /* @__PURE__ */ new Map();
+  let underwaterWarp = false;
+  let bloom = false;
+  let bloomIntensity = 0.5;
+  let lodBias = 1;
+  const portalState = new Array(1024).fill(true);
+  const frameRenderer = createFrameRenderer(gl, bspPipeline, skyboxPipeline);
+  const MAX_INSTANCES = 1e4;
+  const instancePool = [];
+  let instanceCount = 0;
+  const tempQuat = glMatrix.quat.create();
+  const tempVec3Pos = glMatrix.vec3.create();
+  const tempVec3Scale = glMatrix.vec3.create();
+  for (let i = 0; i < MAX_INSTANCES; i++) {
+    const entity = {
+      id: -1,
+      model: void 0,
+      transform: new Float32Array(16),
+      type: "md3",
+      blend: { frame0: 0, frame1: 0, lerp: 0 },
+      tint: [1, 1, 1, 1],
+      lighting: {
+        ambient: [0.5, 0.5, 0.5],
+        dynamicLights: [],
+        modelMatrix: void 0
+      }
+    };
+    if (entity.lighting) {
+      entity.lighting.modelMatrix = entity.transform;
+    }
+    instancePool.push(entity);
+  }
+  const queuedInstances = [];
+  let begin2D;
+  let end2D;
+  let drawfillRect;
+  const selectLod = (entity, cameraPos) => {
+    if (entity.type === "md2") {
+      const model = entity.model;
+      if (!model.lods || model.lods.length === 0) {
+        return { model: entity.model, type: entity.type };
+      }
+      const dx = entity.transform[12] - cameraPos.x;
+      const dy = entity.transform[13] - cameraPos.y;
+      const dz = entity.transform[14] - cameraPos.z;
+      const distance = Math.sqrt(dx * dx + dy * dy + dz * dz);
+      const lodIndex = Math.floor(distance * lodBias / 500);
+      if (lodIndex <= 0) {
+        return { model: entity.model, type: entity.type };
+      }
+      const availableLods = model.lods;
+      const selectedLodIndex = Math.min(lodIndex - 1, availableLods.length - 1);
+      return { model: availableLods[selectedLodIndex], type: entity.type };
+    }
+    return { model: entity.model, type: entity.type };
+  };
+  const renderFrame = (options, entities, renderOptions) => {
+    gpuProfiler.startFrame();
+    frameCounter++;
+    const allEntities = queuedInstances.length > 0 ? [...entities, ...queuedInstances] : entities;
+    queuedInstances.length = 0;
+    instanceCount = 0;
+    if (options.deltaTime) {
+      particleSystem.update(options.deltaTime);
+    }
+    gl.disable(gl.BLEND);
+    gl.enable(gl.DEPTH_TEST);
+    gl.depthMask(true);
+    const currentRenderMode = options.renderMode;
+    let effectiveRenderMode = currentRenderMode;
+    let lightmapOnly = false;
+    if (renderOptions?.wireframe || debugMode === 6 /* Wireframe */) {
+      effectiveRenderMode = {
+        mode: "wireframe",
+        applyToAll: true,
+        color: [1, 1, 1, 1]
+      };
+    } else if (debugMode === 5 /* Lightmaps */) {
+      lightmapOnly = true;
+    }
+    let effectiveSky = options.sky;
+    if (renderOptions?.showSkybox === false) {
+      effectiveSky = void 0;
+    }
+    const viewProjection = new Float32Array(options.camera.viewProjectionMatrix);
+    const frustumPlanes = extractFrustumPlanes(viewProjection);
+    const culledLights = options.dlights ? cullLights(
+      options.dlights,
+      frustumPlanes,
+      { x: options.camera.position[0], y: options.camera.position[1], z: options.camera.position[2] },
+      32
+    ) : void 0;
+    const augmentedOptions = {
+      ...options,
+      sky: effectiveSky,
+      renderMode: effectiveRenderMode,
+      disableLightmaps: renderOptions?.showLightmaps === false && debugMode !== 5 /* Lightmaps */,
+      dlights: culledLights,
+      lightmapOnly,
+      brightness,
+      gamma,
+      fullbright,
+      ambient,
+      lightStyleOverrides,
+      underwaterWarp,
+      bloom,
+      bloomIntensity,
+      portalState
+      // Pass it here.
+    };
+    const stats = frameRenderer.renderFrame(augmentedOptions);
+    let visibleSurfaces = stats.facesDrawn || 0;
+    let totalSurfaces = 0;
+    if (options.world && options.world.map && options.world.map.faces) {
+      totalSurfaces = options.world.map.faces.length;
+    }
+    let culledSurfaces = totalSurfaces - visibleSurfaces;
+    let viewCluster = -1;
+    let viewArea = -1;
+    let reachableAreas = null;
+    if (options.world && renderOptions?.cullingEnabled !== false) {
+      const cameraPosition = {
+        x: options.camera.position[0],
+        y: options.camera.position[1],
+        z: options.camera.position[2]
+      };
+      const viewLeafIndex = findLeafForPoint(options.world.map, cameraPosition);
+      if (viewLeafIndex >= 0) {
+        const leaf = options.world.map.leafs[viewLeafIndex];
+        viewCluster = leaf.cluster;
+        viewArea = leaf.area;
+        if (viewArea >= 0 && options.world.map.areas.length > 0) {
+          reachableAreas = calculateReachableAreas(options.world.map, viewArea, portalState);
+        }
+      }
+    }
+    let lastTexture;
+    let entityDrawCalls = 0;
+    let entityVertices = 0;
+    let visibleEntities = 0;
+    let culledEntities = 0;
+    const cameraPos = {
+      x: options.camera.position[0],
+      y: options.camera.position[1],
+      z: options.camera.position[2]
+    };
+    if (frameCounter % CACHE_CLEANUP_INTERVAL === 0) {
+      for (const [id, entry] of entityLeafCache) {
+        if (frameCounter - entry.lastFrameSeen > CACHE_MAX_AGE) {
+          entityLeafCache.delete(id);
+        }
+      }
+    }
+    for (const entity of allEntities) {
+      if (options.world && viewCluster >= 0) {
+        const origin = {
+          x: entity.transform[12],
+          y: entity.transform[13],
+          z: entity.transform[14]
+        };
+        let entityLeafIndex = -1;
+        if (entity.id !== void 0) {
+          const cached = entityLeafCache.get(entity.id);
+          if (cached && cached.position[12] === entity.transform[12] && cached.position[13] === entity.transform[13] && cached.position[14] === entity.transform[14]) {
+            entityLeafIndex = cached.leafIndex;
+            cached.lastFrameSeen = frameCounter;
+          } else {
+            entityLeafIndex = findLeafForPoint(options.world.map, origin);
+            if (entityLeafIndex >= 0) {
+              entityLeafCache.set(entity.id, {
+                leafIndex: entityLeafIndex,
+                position: new Float32Array(entity.transform),
+                // Clone
+                lastFrameSeen: frameCounter
+              });
+            }
+          }
+        } else {
+          entityLeafIndex = findLeafForPoint(options.world.map, origin);
+        }
+        if (entityLeafIndex >= 0) {
+          const leaf = options.world.map.leafs[entityLeafIndex];
+          const entityCluster = leaf.cluster;
+          const entityArea = leaf.area;
+          if (reachableAreas && entityArea >= 0 && !reachableAreas.has(entityArea)) {
+            culledEntities++;
+            continue;
+          }
+          if (!isClusterVisible(options.world.map.visibility, viewCluster, entityCluster)) {
+            culledEntities++;
+            continue;
+          }
+        }
+      }
+      const { model: activeModel, type: activeType } = selectLod(entity, cameraPos);
+      let minBounds;
+      let maxBounds;
+      if (activeType === "md2") {
+        const md2Model = activeModel;
+        const frame0 = md2Model.frames[entity.blend.frame0 % md2Model.frames.length];
+        const frame1 = md2Model.frames[entity.blend.frame1 % md2Model.frames.length];
+        if (frame0 && frame1) {
+          minBounds = {
+            x: Math.min(frame0.minBounds.x, frame1.minBounds.x),
+            y: Math.min(frame0.minBounds.y, frame1.minBounds.y),
+            z: Math.min(frame0.minBounds.z, frame1.minBounds.z)
+          };
+          maxBounds = {
+            x: Math.max(frame0.maxBounds.x, frame1.maxBounds.x),
+            y: Math.max(frame0.maxBounds.y, frame1.maxBounds.y),
+            z: Math.max(frame0.maxBounds.z, frame1.maxBounds.z)
+          };
+        }
+      } else if (activeType === "md3") {
+        const md3Model = activeModel;
+        const frame0 = md3Model.frames[entity.blend.frame0 % md3Model.frames.length];
+        const frame1 = md3Model.frames[entity.blend.frame1 % md3Model.frames.length];
+        if (frame0 && frame1) {
+          minBounds = {
+            x: Math.min(frame0.minBounds.x, frame1.minBounds.x),
+            y: Math.min(frame0.minBounds.y, frame1.minBounds.y),
+            z: Math.min(frame0.minBounds.z, frame1.minBounds.z)
+          };
+          maxBounds = {
+            x: Math.max(frame0.maxBounds.x, frame1.maxBounds.x),
+            y: Math.max(frame0.maxBounds.y, frame1.maxBounds.y),
+            z: Math.max(frame0.maxBounds.z, frame1.maxBounds.z)
+          };
+        } else {
+          minBounds = { x: -32, y: -32, z: -32 };
+          maxBounds = { x: 32, y: 32, z: 32 };
+        }
+      }
+      if (minBounds && maxBounds) {
+        const worldBounds = transformAabb(minBounds, maxBounds, entity.transform);
+        if (!boxIntersectsFrustum(worldBounds.mins, worldBounds.maxs, frustumPlanes)) {
+          culledEntities++;
+          continue;
+        }
+      }
+      visibleEntities++;
+      const position = {
+        x: entity.transform[12],
+        y: entity.transform[13],
+        z: entity.transform[14]
+      };
+      const light = calculateEntityLight(options.world?.map, position);
+      const highlightColor = entity.id !== void 0 ? highlightedEntities.get(entity.id) : void 0;
+      switch (activeType) {
+        case "md2":
+          {
+            const md2Model = activeModel;
+            let mesh = md2MeshCache.get(md2Model);
+            if (!mesh) {
+              mesh = new Md2MeshBuffers(gl, md2Model, entity.blend);
+              md2MeshCache.set(md2Model, mesh);
+              const vertexBytes = mesh.geometry.vertices.length * 8 * 4;
+              const indexBytes = mesh.geometry.indices.length * 2;
+              gpuProfiler.trackBufferMemory(vertexBytes + indexBytes);
+            } else {
+              mesh.update(md2Model, entity.blend);
+            }
+            const modelViewProjection = shared.multiplyMat4(viewProjection, entity.transform);
+            const skinName = entity.skin;
+            const texture = skinName ? options.world?.textures?.get(skinName) : void 0;
+            if (texture && texture !== lastTexture) {
+              texture.bind(0);
+              lastTexture = texture;
+            }
+            let activeRenderMode = effectiveRenderMode;
+            if (activeRenderMode && !activeRenderMode.applyToAll && texture) {
+              activeRenderMode = void 0;
+            }
+            if (activeRenderMode?.generateRandomColor && entity.id !== void 0) {
+              const randColor = colorFromId(entity.id);
+              activeRenderMode = { ...activeRenderMode, color: randColor };
+            }
+            md2Pipeline.bind({
+              modelViewProjection,
+              modelMatrix: entity.transform,
+              ambientLight: light,
+              dlights: options.dlights,
+              renderMode: activeRenderMode,
+              tint: entity.tint,
+              brightness,
+              gamma,
+              fullbright,
+              ambient
+            });
+            md2Pipeline.draw(mesh, activeRenderMode);
+            entityDrawCalls++;
+            entityVertices += mesh.geometry.vertices.length;
+            if (highlightColor) {
+              const highlightMode = {
+                mode: "wireframe",
+                applyToAll: true,
+                color: highlightColor
+              };
+              md2Pipeline.bind({
+                modelViewProjection,
+                modelMatrix: entity.transform,
+                ambientLight: 1,
+                renderMode: highlightMode,
+                tint: [1, 1, 1, 1],
+                brightness: 1,
+                gamma: 1,
+                fullbright: true,
+                ambient: 0
+              });
+              md2Pipeline.draw(mesh, highlightMode);
+              entityDrawCalls++;
+            }
+          }
+          break;
+        case "md3":
+          {
+            const md3Model = activeModel;
+            let mesh = md3MeshCache.get(md3Model);
+            const md3Entity = entity;
+            const md3Dlights = options.dlights ? options.dlights.map((d) => ({
+              origin: d.origin,
+              color: [d.color.x, d.color.y, d.color.z],
+              radius: d.intensity
+            })) : void 0;
+            const lighting = {
+              ...md3Entity.lighting,
+              ambient: [light, light, light],
+              dynamicLights: md3Dlights,
+              modelMatrix: entity.transform
+            };
+            if (!mesh) {
+              mesh = new Md3ModelMesh(gl, md3Model, entity.blend, lighting);
+              md3MeshCache.set(md3Model, mesh);
+            } else {
+              mesh.update(entity.blend, lighting);
+            }
+            const modelViewProjection = shared.multiplyMat4(viewProjection, entity.transform);
+            md3Pipeline.bind(modelViewProjection);
+            for (const surface of md3Model.surfaces) {
+              const surfaceMesh = mesh.surfaces.get(surface.name);
+              if (surfaceMesh) {
+                const textureName = md3Entity.skins?.get(surface.name);
+                const texture = textureName ? options.world?.textures?.get(textureName) : void 0;
+                if (texture && texture !== lastTexture) {
+                  texture.bind(0);
+                  lastTexture = texture;
+                }
+                let activeRenderMode = effectiveRenderMode;
+                if (activeRenderMode && !activeRenderMode.applyToAll && texture) {
+                  activeRenderMode = void 0;
+                }
+                if (activeRenderMode?.generateRandomColor && entity.id !== void 0) {
+                  const randColor = colorFromId(entity.id);
+                  activeRenderMode = { ...activeRenderMode, color: randColor };
+                }
+                const material = {
+                  renderMode: activeRenderMode,
+                  brightness,
+                  gamma,
+                  fullbright,
+                  globalAmbient: ambient
+                };
+                md3Pipeline.drawSurface(surfaceMesh, material);
+                entityDrawCalls++;
+                entityVertices += surfaceMesh.geometry.vertices.length;
+                if (highlightColor) {
+                  const highlightMode = {
+                    mode: "wireframe",
+                    applyToAll: true,
+                    color: highlightColor
+                  };
+                  const highlightMaterial = {
+                    renderMode: highlightMode,
+                    brightness: 1,
+                    gamma: 1,
+                    fullbright: true,
+                    globalAmbient: 0
+                  };
+                  md3Pipeline.drawSurface(surfaceMesh, highlightMaterial);
+                  entityDrawCalls++;
+                }
+              }
+            }
+          }
+          break;
+      }
+    }
+    const viewMatrix = options.camera.viewMatrix;
+    if (viewMatrix) {
+      const viewRight = { x: viewMatrix[0], y: viewMatrix[4], z: viewMatrix[8] };
+      const viewUp = { x: viewMatrix[1], y: viewMatrix[5], z: viewMatrix[9] };
+      particleRenderer.render({
+        viewProjection,
+        viewRight,
+        viewUp
+      });
+    }
+    if (augmentedOptions.waterTint) {
+      begin2D();
+      drawfillRect(0, 0, gl.canvas.width, gl.canvas.height, augmentedOptions.waterTint);
+      end2D();
+    }
+    collisionVis.render(viewProjection);
+    collisionVis.clear();
+    if (options.world && (highlightedSurfaces.size > 0 || debugMode === 3 /* PVSClusters */)) {
+      const surfacesToDraw = new Map(highlightedSurfaces);
+      if (debugMode === 3 /* PVSClusters */ && options.world) {
+        const frustum = extractFrustumPlanes(viewProjection);
+        const cameraPosition = {
+          x: options.camera.position[0],
+          y: options.camera.position[1],
+          z: options.camera.position[2]
+        };
+        const visibleFaces = gatherVisibleFaces(options.world.map, cameraPosition, frustum, portalState);
+        for (const { faceIndex, leafIndex } of visibleFaces) {
+          const leaf = options.world.map.leafs[leafIndex];
+          if (leaf && !surfacesToDraw.has(faceIndex)) {
+            surfacesToDraw.set(faceIndex, colorFromId(leaf.cluster));
+          }
+        }
+      }
+      for (const [faceIndex, color] of surfacesToDraw) {
+        const geometry = options.world.surfaces[faceIndex];
+        if (geometry && geometry.vertexCount > 0) {
+          const vertices = [];
+          const stride = 7;
+          for (let i = 0; i < geometry.vertexCount; i++) {
+            vertices.push({
+              x: geometry.vertexData[i * stride],
+              y: geometry.vertexData[i * stride + 1],
+              z: geometry.vertexData[i * stride + 2]
+            });
+          }
+          const c = { r: color[0], g: color[1], b: color[2] };
+          for (let i = 0; i < vertices.length; i++) {
+            const p0 = vertices[i];
+            const p1 = vertices[(i + 1) % vertices.length];
+            debugRenderer.drawLine(p0, p1, c);
+          }
+          debugRenderer.drawLine(vertices[0], vertices[vertices.length / 2 | 0], c);
+        }
+      }
+    }
+    if ((renderOptions?.showNormals || debugMode === 2 /* Normals */) && options.world) {
+      const frustum = extractFrustumPlanes(viewProjection);
+      const cameraPosition = {
+        x: options.camera.position[0],
+        y: options.camera.position[1],
+        z: options.camera.position[2]
+      };
+      const visibleFaces = gatherVisibleFaces(options.world.map, cameraPosition, frustum, portalState);
+      for (const { faceIndex } of visibleFaces) {
+        const face = options.world.map.faces[faceIndex];
+        const plane = options.world.map.planes[face.planeIndex];
+        const geometry = options.world.surfaces[faceIndex];
+        if (!geometry) continue;
+        let cx = 0, cy = 0, cz = 0;
+        const count = geometry.vertexCount;
+        for (let i = 0; i < count; i++) {
+          const idx = i * 7;
+          cx += geometry.vertexData[idx];
+          cy += geometry.vertexData[idx + 1];
+          cz += geometry.vertexData[idx + 2];
+        }
+        if (count > 0) {
+          cx /= count;
+          cy /= count;
+          cz /= count;
+          const nx = face.side === 0 ? plane.normal[0] : -plane.normal[0];
+          const ny = face.side === 0 ? plane.normal[1] : -plane.normal[1];
+          const nz = face.side === 0 ? plane.normal[2] : -plane.normal[2];
+          const center = { x: cx, y: cy, z: cz };
+          const end = { x: cx + nx * 8, y: cy + ny * 8, z: cz + nz * 8 };
+          debugRenderer.drawLine(center, end, { r: 1, g: 1, b: 0 });
+        }
+      }
+    }
+    debugRenderer.render(viewProjection);
+    const labels = debugRenderer.getLabels(viewProjection, gl.canvas.width, gl.canvas.height);
+    if (labels.length > 0) {
+      begin2D();
+      for (const label of labels) {
+        drawString(label.x, label.y, label.text, [1, 1, 1, 1]);
+      }
+      end2D();
+    }
+    debugRenderer.clear();
+    lastFrameStats = {
+      drawCalls: stats.drawCalls + entityDrawCalls,
+      vertexCount: stats.vertexCount + entityVertices,
+      batches: stats.batches,
+      shaderSwitches: 0,
+      visibleSurfaces,
+      culledSurfaces,
+      visibleEntities,
+      culledEntities
+    };
+    gpuProfiler.endFrame();
+  };
+  const registerPic = async (name, data) => {
+    if (picCache.has(name)) {
+      return picCache.get(name);
+    }
+    const blob = new Blob([data]);
+    const imageBitmap = await createImageBitmap(blob);
+    const texture = new Texture2D(gl);
+    texture.upload(imageBitmap.width, imageBitmap.height, imageBitmap);
+    picCache.set(name, texture);
+    gpuProfiler.trackTextureMemory(imageBitmap.width * imageBitmap.height * 4);
+    if (name.includes("conchars")) {
+      font = texture;
+    }
+    return texture;
+  };
+  const registerTexture = (name, texture) => {
+    if (picCache.has(name)) {
+      return picCache.get(name);
+    }
+    const tex = new Texture2D(gl);
+    const level = texture.levels[0];
+    tex.upload(level.width, level.height, level.rgba);
+    picCache.set(name, tex);
+    gpuProfiler.trackTextureMemory(level.width * level.height * 4);
+    if (name.includes("conchars")) {
+      font = tex;
+    }
+    return tex;
+  };
+  begin2D = () => {
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+    gl.disable(gl.DEPTH_TEST);
+    gl.depthMask(false);
+    const projection = glMatrix.mat4.create();
+    glMatrix.mat4.ortho(projection, 0, gl.canvas.width, gl.canvas.height, 0, -1, 1);
+    spriteRenderer.begin(projection);
+  };
+  end2D = () => {
+    gl.disable(gl.BLEND);
+    gl.enable(gl.DEPTH_TEST);
+    gl.depthMask(true);
+  };
+  const drawPic = (x, y, pic, color) => {
+    pic.bind(0);
+    spriteRenderer.draw(x, y, pic.width, pic.height, 0, 0, 1, 1, color);
+  };
+  const drawChar = (x, y, char, color) => {
+    if (!font) {
+      return;
+    }
+    const charWidth = 8;
+    const charHeight = 8;
+    const numCols = font.width / charWidth;
+    const charIndex = char & 255;
+    const u0 = charIndex % numCols * charWidth / font.width;
+    const v0 = Math.floor(charIndex / numCols) * charHeight / font.height;
+    const u1 = u0 + charWidth / font.width;
+    const v1 = v0 + charHeight / font.height;
+    font.bind(0);
+    spriteRenderer.draw(x, y, charWidth, charHeight, u0, v0, u1, v1, color);
+  };
+  const drawString = (x, y, text, color) => {
+    const segments = parseColorString(text);
+    let currentX = x;
+    const charWidth = 8;
+    for (const segment of segments) {
+      const segmentColor = segment.color || color;
+      for (let i = 0; i < segment.text.length; i++) {
+        drawChar(currentX, y, segment.text.charCodeAt(i), segmentColor);
+        currentX += charWidth;
+      }
+    }
+  };
+  const drawCenterString = (y, text) => {
+    const charWidth = 8;
+    const stripped = text.replace(/\^[0-9]/g, "");
+    const width = stripped.length * charWidth;
+    const x = (gl.canvas.width - width) / 2;
+    drawString(x, y, text);
+  };
+  drawfillRect = (x, y, width, height, color) => {
+    spriteRenderer.drawRect(x, y, width, height, color);
+  };
+  const setEntityHighlight = (entityId, color) => {
+    highlightedEntities.set(entityId, color);
+  };
+  const clearEntityHighlight = (entityId) => {
+    highlightedEntities.delete(entityId);
+  };
+  const highlightSurface = (faceIndex, color) => {
+    highlightedSurfaces.set(faceIndex, color);
+  };
+  const removeSurfaceHighlight = (faceIndex) => {
+    highlightedSurfaces.delete(faceIndex);
+  };
+  const setDebugMode = (mode) => {
+    debugMode = mode;
+  };
+  const setBrightness = (value) => {
+    brightness = Math.max(0, Math.min(2, value));
+  };
+  const setGamma = (value) => {
+    gamma = Math.max(0.5, Math.min(3, value));
+  };
+  const setFullbright = (enabled) => {
+    fullbright = enabled;
+  };
+  const setAmbient = (value) => {
+    ambient = Math.max(0, Math.min(1, value));
+  };
+  const setLightStyle = (index, pattern) => {
+    if (pattern === null) {
+      lightStyleOverrides.delete(index);
+    } else {
+      lightStyleOverrides.set(index, pattern);
+    }
+  };
+  const setUnderwaterWarp = (enabled) => {
+    underwaterWarp = enabled;
+  };
+  const setBloom = (enabled) => {
+    bloom = enabled;
+  };
+  const setBloomIntensity = (value) => {
+    bloomIntensity = value;
+  };
+  const setLodBias = (bias) => {
+    lodBias = Math.max(0, Math.min(2, bias));
+  };
+  const setAreaPortalState = (portalNum, open) => {
+    if (portalNum >= 0 && portalNum < portalState.length) {
+      portalState[portalNum] = open;
+    }
+  };
+  const renderInstanced = (model, instances) => {
+    const isMd2 = "glCommands" in model;
+    const type = isMd2 ? "md2" : "md3";
+    for (const instance of instances) {
+      if (instanceCount >= MAX_INSTANCES) {
+        console.warn("Max instances reached");
+        break;
+      }
+      const entity = instancePool[instanceCount++];
+      entity.model = model;
+      entity.type = type;
+      const blend = entity.blend;
+      if (instance.frame !== void 0) {
+        blend.frame0 = instance.frame;
+        blend.frame1 = instance.frame;
+        blend.lerp = 0;
+      } else {
+        blend.frame0 = instance.frame0 || 0;
+        blend.frame1 = instance.frame1 || 0;
+        blend.lerp = instance.lerp || 0;
+      }
+      if (isMd2) {
+        entity.skin = instance.skin !== void 0 ? "skin" + instance.skin : void 0;
+      }
+      instance.rotation;
+      instance.position;
+      instance.scale || { };
+      glMatrix.mat4.fromRotationTranslationScale(
+        entity.transform,
+        tempQuat,
+        tempVec3Pos,
+        tempVec3Scale
+      );
+      const lighting = entity.lighting;
+      if (lighting) {
+        if (lighting.dynamicLights) {
+          lighting.dynamicLights.length = 0;
+        } else {
+          lighting.dynamicLights = [];
+        }
+        if (!lighting.ambient) {
+          lighting.ambient = [0.5, 0.5, 0.5];
+        } else {
+          lighting.ambient[0] = 0.5;
+          lighting.ambient[1] = 0.5;
+          lighting.ambient[2] = 0.5;
+        }
+      }
+      queuedInstances.push(entity);
+    }
+  };
+  return {
+    get width() {
+      return gl.canvas.width;
+    },
+    get height() {
+      return gl.canvas.height;
+    },
+    get collisionVis() {
+      return collisionVis;
+    },
+    get debug() {
+      return debugRenderer;
+    },
+    get particleSystem() {
+      return particleSystem;
+    },
+    getPerformanceReport: () => gpuProfiler.getPerformanceReport(lastFrameStats),
+    getMemoryUsage: () => gpuProfiler.getMemoryUsage(),
+    renderFrame,
+    registerPic,
+    registerTexture,
+    begin2D,
+    end2D,
+    drawPic,
+    drawString,
+    drawCenterString,
+    drawfillRect,
+    setEntityHighlight,
+    clearEntityHighlight,
+    highlightSurface,
+    removeSurfaceHighlight,
+    setDebugMode,
+    setBrightness,
+    setGamma,
+    setFullbright,
+    setAmbient,
+    setLightStyle,
+    setUnderwaterWarp,
+    setBloom,
+    setBloomIntensity,
+    setLodBias,
+    setAreaPortalState,
+    renderInstanced,
+    dispose: () => {
+      gpuProfiler.dispose();
+    }
+  };
+};
 var DemoReader = class {
   constructor(buffer) {
     this.messageOffsets = [];
@@ -15991,6 +18083,7 @@ exports.createHeadlessRenderTarget = createHeadlessRenderTarget;
 exports.createInitialChannels = createInitialChannels;
 exports.createOcclusionResolver = createOcclusionResolver;
 exports.createProgramFromSources = createProgramFromSources;
+exports.createRenderer = createRenderer;
 exports.createWebGLContext = createWebGLContext;
 exports.createWebGPUContext = createWebGPUContext;
 exports.decodeOgg = decodeOgg;