@quake2ts/engine 0.0.849 → 0.0.850

package/dist/cjs/index.cjs

@@ -10737,7 +10737,7 @@ var SpriteRenderer2 = class {
 };
 
 // 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  // Pass the RAW position (not normalized) as direction\n  // This preserves the face-relative direction and avoids corner tie issues\n  // The cubemap sampler handles normalization internally\n  var dir = position;\n\n  // Apply scrolling in Quake horizontal plane (X/Y)\n  // Small scrolling offset that doesn't break dominant component detection\n  dir.x += uniforms.scroll.x * 0.01;\n  dir.y += uniforms.scroll.y * 0.01;\n\n  output.direction = dir;\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  // Transform from Quake coordinates to GL/WebGPU cubemap coordinates\n  // Quake: +X forward, +Y left, +Z up\n  // GL cubemap: +X right, +Y up, -Z forward\n  var cubemapDir: vec3<f32>;\n  cubemapDir.x = -direction.y;  // Quake +Y (left) \u2192 GL -X (left)\n  cubemapDir.y = direction.z;   // Quake +Z (up) \u2192 GL +Y (up)\n  cubemapDir.z = -direction.x;  // Quake +X (forward) \u2192 GL -Z (forward)\n\n  return textureSample(t_skybox, s_skybox, cubemapDir);\n}\n";
+var skybox_default = "// Skybox shader using full-screen triangle approach\n// This avoids the w\u22480 issue with cube geometry at diagonal view angles\n// by computing the world-space direction analytically per-pixel\n\nstruct Uniforms {\n  // Inverse view rotation matrix (view\u2192world transform for directions)\n  // Stored as 3 vec4s due to std140 padding\n  inverseViewRotation_col0: vec4<f32>,\n  inverseViewRotation_col1: vec4<f32>,\n  inverseViewRotation_col2: vec4<f32>,\n  tanHalfFov: f32,\n  aspect: 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}\n\n@vertex\nfn vertexMain(@location(0) position: vec2<f32>) -> VertexOutput {\n  var output: VertexOutput;\n\n  // Position is already in NDC space (-1 to 1)\n  output.position = vec4<f32>(position, 0.999, 1.0);  // z near 1.0 for far plane\n\n  return output;\n}\n\n// Hard-coded screen size for now (should be passed as uniform)\nconst SCREEN_SIZE: vec2<f32> = vec2<f32>(256.0, 256.0);\n\n@fragment\nfn fragmentMain(@builtin(position) fragCoord: vec4<f32>) -> @location(0) vec4<f32> {\n  // Compute NDC from fragment coordinates\n  // fragCoord.xy is in framebuffer coordinates (0 to width, 0 to height)\n  // NDC.x: 0 -> -1, width -> +1\n  // NDC.y: 0 -> +1, height -> -1 (Y is flipped in WebGPU framebuffer)\n  let ndc = vec2<f32>(\n    (fragCoord.x / SCREEN_SIZE.x) * 2.0 - 1.0,\n    1.0 - (fragCoord.y / SCREEN_SIZE.y) * 2.0\n  );\n  // Get columns directly from uniforms\n  let col0 = uniforms.inverseViewRotation_col0.xyz;\n  let col1 = uniforms.inverseViewRotation_col1.xyz;\n  let col2 = uniforms.inverseViewRotation_col2.xyz;\n\n  // Compute view-space direction from NDC\n  // The view-space ray direction for a pixel at NDC (x, y) with perspective projection:\n  // viewDir = normalize(vec3(x * aspect * tanHalfFov, y * tanHalfFov, -1.0))\n  // Note: -1.0 for Z because we look down -Z in view space\n  let viewDir = normalize(vec3<f32>(\n    ndc.x * uniforms.aspect * uniforms.tanHalfFov,\n    ndc.y * uniforms.tanHalfFov,\n    -1.0\n  ));\n\n  // Transform view-space direction to world-space (Quake coordinates)\n  // Manually unroll: worldDir = col0 * viewDir.x + col1 * viewDir.y + col2 * viewDir.z\n  var worldDir = col0 * viewDir.x + col1 * viewDir.y + col2 * viewDir.z;\n\n  // Apply small scroll offset in Quake horizontal plane\n  worldDir.x += uniforms.scroll.x * 0.01;\n  worldDir.y += uniforms.scroll.y * 0.01;\n\n  // Transform from Quake coordinates to GL/WebGPU cubemap coordinates\n  // Quake: +X forward, +Y left, +Z up\n  // GL cubemap: +X right, +Y up, -Z forward\n  var cubemapDir: vec3<f32>;\n  cubemapDir.x = -worldDir.y;  // Quake +Y (left) \u2192 GL -X (left)\n  cubemapDir.y = worldDir.z;   // Quake +Z (up) \u2192 GL +Y (up)\n  cubemapDir.z = -worldDir.x;  // Quake +X (forward) \u2192 GL -Z (forward)\n\n  return textureSample(t_skybox, s_skybox, cubemapDir);\n}\n";
 
 // src/render/types/coordinates.ts
 var CoordinateSystem = /* @__PURE__ */ ((CoordinateSystem2) => {
@@ -10832,121 +10832,27 @@ var WebGPUMatrixBuilder = class {
     return view;
   }
 };
-var SKYBOX_POSITIONS2 = new Float32Array([
-  // Front face (+X) - Quake forward direction
-  1,
-  -1,
-  -1,
-  1,
-  1,
-  -1,
-  1,
-  1,
-  1,
-  1,
-  -1,
-  -1,
-  1,
-  1,
-  1,
-  1,
-  -1,
-  1,
-  // Back face (-X) - Quake backward direction
-  -1,
-  1,
-  -1,
-  -1,
-  -1,
-  -1,
-  -1,
-  -1,
-  1,
-  -1,
-  1,
-  -1,
-  -1,
-  -1,
-  1,
-  -1,
-  1,
-  1,
-  // Left face (+Y) - Quake left direction
-  -1,
-  1,
-  -1,
-  -1,
-  1,
-  1,
-  1,
-  1,
-  1,
-  -1,
-  1,
-  -1,
-  1,
-  1,
-  1,
-  1,
-  1,
-  -1,
-  // Right face (-Y) - Quake right direction
-  1,
-  -1,
-  -1,
-  1,
-  -1,
-  1,
-  -1,
-  -1,
-  1,
-  1,
-  -1,
-  -1,
+var FULLSCREEN_QUAD = new Float32Array([
+  // Triangle 1: bottom-left, bottom-right, top-right
   -1,
   -1,
+  // vertex 0: bottom-left
   1,
   -1,
-  -1,
-  -1,
-  // Top face (+Z) - Quake up direction
-  -1,
-  -1,
+  // vertex 1: bottom-right
   1,
   1,
+  // vertex 2: top-right
+  // Triangle 2: bottom-left, top-right, top-left
   -1,
-  1,
-  1,
-  1,
-  1,
   -1,
-  -1,
-  1,
-  1,
+  // vertex 3: bottom-left
   1,
   1,
+  // vertex 4: top-right
   -1,
-  1,
-  1,
-  // Bottom face (-Z) - Quake down direction
-  -1,
-  1,
-  -1,
-  1,
-  1,
-  -1,
-  1,
-  -1,
-  -1,
-  -1,
-  1,
-  -1,
-  1,
-  -1,
-  -1,
-  -1,
-  -1,
-  -1
+  1
+  // vertex 5: top-left
 ]);
 var SkyboxPipeline3 = class {
   constructor(device, format) {
@@ -10959,15 +10865,15 @@ var SkyboxPipeline3 = class {
     });
     this.vertexBuffer = device.createBuffer({
       label: "skybox-vertex-buffer",
-      size: SKYBOX_POSITIONS2.byteLength,
+      size: FULLSCREEN_QUAD.byteLength,
       usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
       mappedAtCreation: true
     });
-    new Float32Array(this.vertexBuffer.getMappedRange()).set(SKYBOX_POSITIONS2);
+    new Float32Array(this.vertexBuffer.getMappedRange()).set(FULLSCREEN_QUAD);
     this.vertexBuffer.unmap();
     this.uniformBuffer = device.createBuffer({
       label: "skybox-uniform-buffer",
-      size: 80,
+      size: 64,
       usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
     });
     this.sampler = device.createSampler({
@@ -10983,7 +10889,7 @@ var SkyboxPipeline3 = class {
       entries: [
         {
           binding: 0,
-          visibility: GPUShaderStage.VERTEX,
+          visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
           buffer: { type: "uniform" }
         },
         {
@@ -11007,12 +10913,12 @@ var SkyboxPipeline3 = class {
         module,
         entryPoint: "vertexMain",
         buffers: [{
-          arrayStride: 12,
-          // vec3<f32>
+          arrayStride: 8,
+          // vec2<f32> for full-screen triangle
           attributes: [{
             shaderLocation: 0,
             offset: 0,
-            format: "float32x3"
+            format: "float32x2"
           }]
         }]
       },
@@ -11038,48 +10944,63 @@ var SkyboxPipeline3 = class {
       },
       depthStencil: {
         format: "depth24plus",
-        depthWriteEnabled: true,
-        depthCompare: "less-equal"
-        // Proper depth testing ensures front faces occlude back faces
+        depthWriteEnabled: false,
+        // Skybox at infinite distance, don't affect depth
+        depthCompare: "always"
+        // Always draw skybox (rendered first as background)
       },
       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;
+    if (!options.cameraState) {
+      throw new Error("SkyboxPipeline: cameraState is required for full-screen skybox rendering");
+    }
+    const camera = options.cameraState;
+    const view = this.matrixBuilder.buildViewMatrix(camera);
+    const inverseViewRotation = glMatrix.mat3.fromValues(
+      view[0],
+      view[4],
+      view[8],
+      // First column becomes first row
+      view[1],
+      view[5],
+      view[9],
+      // Second column becomes second row
+      view[2],
+      view[6],
+      view[10]
+      // Third column becomes third row
+    );
+    const tanHalfFov = Math.tan(camera.fov * shared.DEG2RAD / 2);
+    const aspect = camera.aspect;
+    const uniformData = new Float32Array(16);
+    uniformData[0] = inverseViewRotation[0];
+    uniformData[1] = inverseViewRotation[1];
+    uniformData[2] = inverseViewRotation[2];
+    uniformData[3] = 0;
+    uniformData[4] = inverseViewRotation[3];
+    uniformData[5] = inverseViewRotation[4];
+    uniformData[6] = inverseViewRotation[5];
+    uniformData[7] = 0;
+    uniformData[8] = inverseViewRotation[6];
+    uniformData[9] = inverseViewRotation[7];
+    uniformData[10] = inverseViewRotation[8];
+    uniformData[11] = 0;
+    uniformData[12] = tanHalfFov;
+    uniformData[13] = aspect;
+    uniformData[14] = options.scroll[0];
+    uniformData[15] = options.scroll[1];
     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);
+    passEncoder.draw(6);
   }
   destroy() {
     this.vertexBuffer.destroy();