reze-engine 0.22.0 → 0.23.0

package/dist/physics-debug.js

@@ -0,0 +1,526 @@
+// Debug overlay drawing every rigidbody as a wireframe + semitransparent solid
+// primitive (sphere / box / capsule), color-coded by type:
+//   yellow = static (FollowBone)
+//   cyan   = kinematic
+//   red    = dynamic
+//
+// Rendered in its own swapchain pass AFTER composite (see Engine.renderPhysicsDebug),
+// so it sits cleanly on top of the final tonemapped image. No depth, no MSAA,
+// no MRT, no interaction with the HDR alpha gate — bodies are always fully
+// visible regardless of camera angle, model occlusion, or stacking. Reads body
+// transforms straight from RezePhysics' SoA store — zero per-frame allocations.
+import { Mat4 } from "./math";
+import { RigidbodyShape, RigidbodyType } from "./physics";
+import { PHYSICS_DEBUG_SHADER_WGSL } from "./shaders/passes/physics-debug";
+const STRIDE_BYTES = 96; // 4 mat4 cols + size+pad + color = 6 vec4
+const STRIDE_FLOATS = STRIDE_BYTES / 4;
+// Per-instance color.alpha is the WIREFRAME alpha (1.0 for crisp edges). Solid
+// pipelines override the SOLID_ALPHA shader constant to ~0.20 so the fill stays
+// gentle where many bodies overlap.
+// Hues chosen so wire+solid both read against the typical pink/grey reze studio
+// scene background. Red [1, 0.3, 0.3] sat too close to the pink bg's hue —
+// solid fill (α≈0.2) blended into the bg and the wire didn't separate from it.
+// Orange-red shifts ~30° on the hue wheel, giving real chroma against pink.
+const COLOR_STATIC = [1.0, 0.85, 0.15, 1.0]; // yellow
+const COLOR_KINEMATIC = [0.25, 0.7, 1.0, 1.0]; // cyan-blue
+const COLOR_DYNAMIC = [1.0, 0.35, 0.0, 1.0]; // orange-red
+const SOLID_ALPHA = 0.2;
+export class PhysicsDebugRenderer {
+    constructor(device, cameraUniformBuffer, presentationFormat) {
+        this.device = device;
+        const wireSphere = buildSphereWireGeometry();
+        const wireBox = buildBoxWireGeometry();
+        const wireCapsule = buildCapsuleWireGeometry();
+        this.wireSphereCount = wireSphere.length / 4;
+        this.wireBoxCount = wireBox.length / 4;
+        this.wireCapsuleCount = wireCapsule.length / 4;
+        const solidSphere = buildSphereSolidGeometry();
+        const solidBox = buildBoxSolidGeometry();
+        const solidCapsule = buildCapsuleSolidGeometry();
+        this.solidSphereCount = solidSphere.length / 4;
+        this.solidBoxCount = solidBox.length / 4;
+        this.solidCapsuleCount = solidCapsule.length / 4;
+        const upload = (label, data) => {
+            const buf = device.createBuffer({
+                label,
+                size: data.byteLength,
+                usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+            });
+            device.queue.writeBuffer(buf, 0, data.buffer, data.byteOffset, data.byteLength);
+            return buf;
+        };
+        this.wireSphereBuffer = upload("physics-debug wire sphere", wireSphere);
+        this.wireBoxBuffer = upload("physics-debug wire box", wireBox);
+        this.wireCapsuleBuffer = upload("physics-debug wire capsule", wireCapsule);
+        this.solidSphereBuffer = upload("physics-debug solid sphere", solidSphere);
+        this.solidBoxBuffer = upload("physics-debug solid box", solidBox);
+        this.solidCapsuleBuffer = upload("physics-debug solid capsule", solidCapsule);
+        this.instanceCapacity = 512;
+        this.instanceData = new Float32Array(this.instanceCapacity * STRIDE_FLOATS);
+        this.instanceBuffer = device.createBuffer({
+            label: "physics-debug instances",
+            size: this.instanceCapacity * STRIDE_BYTES,
+            usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+        });
+        const bgl = device.createBindGroupLayout({
+            label: "physics-debug bgl",
+            entries: [{ binding: 0, visibility: GPUShaderStage.VERTEX, buffer: { type: "uniform" } }],
+        });
+        this.bindGroup = device.createBindGroup({
+            label: "physics-debug bg",
+            layout: bgl,
+            entries: [{ binding: 0, resource: { buffer: cameraUniformBuffer } }],
+        });
+        const pipelineLayout = device.createPipelineLayout({ bindGroupLayouts: [bgl] });
+        const shader = device.createShaderModule({
+            label: "physics-debug shader",
+            code: PHYSICS_DEBUG_SHADER_WGSL,
+        });
+        const vertexBuffers = [
+            {
+                arrayStride: 16,
+                attributes: [{ shaderLocation: 0, offset: 0, format: "float32x4" }],
+            },
+            {
+                arrayStride: STRIDE_BYTES,
+                stepMode: "instance",
+                attributes: [
+                    { shaderLocation: 1, offset: 0, format: "float32x4" },
+                    { shaderLocation: 2, offset: 16, format: "float32x4" },
+                    { shaderLocation: 3, offset: 32, format: "float32x4" },
+                    { shaderLocation: 4, offset: 48, format: "float32x4" },
+                    { shaderLocation: 5, offset: 64, format: "float32x4" },
+                    { shaderLocation: 6, offset: 80, format: "float32x4" },
+                ],
+            },
+        ];
+        const targets = [
+            {
+                format: presentationFormat,
+                blend: {
+                    color: { srcFactor: "src-alpha", dstFactor: "one-minus-src-alpha", operation: "add" },
+                    alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
+                },
+            },
+        ];
+        const buildPipeline = (label, kind, topology, solidAlpha) => device.createRenderPipeline({
+            label,
+            layout: pipelineLayout,
+            vertex: {
+                module: shader,
+                entryPoint: "vsMain",
+                buffers: vertexBuffers,
+                constants: { SHAPE_KIND: kind },
+            },
+            fragment: {
+                module: shader,
+                entryPoint: "fsMain",
+                targets,
+                constants: { SOLID_ALPHA: solidAlpha },
+            },
+            primitive: { topology, cullMode: "none" },
+            // No depth attachment, single multisample — pass renders straight to
+            // the swapchain after composite, so the overlay sits on top of the
+            // tonemapped scene without interacting with depth/stencil/MSAA.
+            multisample: { count: 1 },
+        });
+        this.wirePipelineSphere = buildPipeline("physics-debug wire sphere", 0, "line-list", 1.0);
+        this.wirePipelineBox = buildPipeline("physics-debug wire box", 1, "line-list", 1.0);
+        this.wirePipelineCapsule = buildPipeline("physics-debug wire capsule", 2, "line-list", 1.0);
+        this.solidPipelineSphere = buildPipeline("physics-debug solid sphere", 0, "triangle-list", SOLID_ALPHA);
+        this.solidPipelineBox = buildPipeline("physics-debug solid box", 1, "triangle-list", SOLID_ALPHA);
+        this.solidPipelineCapsule = buildPipeline("physics-debug solid capsule", 2, "triangle-list", SOLID_ALPHA);
+    }
+    render(pass, physics) {
+        const rigidbodies = physics.getRigidbodies();
+        const N = rigidbodies.length;
+        if (N === 0)
+            return;
+        const store = physics.getStore();
+        const positions = store.positions;
+        const orientations = store.orientations;
+        if (N > this.instanceCapacity) {
+            this.instanceCapacity = Math.max(N, this.instanceCapacity * 2);
+            this.instanceData = new Float32Array(this.instanceCapacity * STRIDE_FLOATS);
+            this.instanceBuffer.destroy();
+            this.instanceBuffer = this.device.createBuffer({
+                label: "physics-debug instances",
+                size: this.instanceCapacity * STRIDE_BYTES,
+                usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+            });
+        }
+        // Two passes: count per-shape, then fill packed by shape so we can issue
+        // 3 instanced draws with vertex-buffer offsets.
+        let sphereCount = 0;
+        let boxCount = 0;
+        let capsuleCount = 0;
+        for (let i = 0; i < N; i++) {
+            const s = rigidbodies[i].shape;
+            if (s === RigidbodyShape.Sphere)
+                sphereCount++;
+            else if (s === RigidbodyShape.Box)
+                boxCount++;
+            else
+                capsuleCount++;
+        }
+        const sphereOffset = 0;
+        const boxOffset = sphereCount;
+        const capsuleOffset = sphereCount + boxCount;
+        const data = this.instanceData;
+        let sIdx = sphereOffset;
+        let bIdx = boxOffset;
+        let cIdx = capsuleOffset;
+        for (let i = 0; i < N; i++) {
+            const rb = rigidbodies[i];
+            const i3 = i * 3;
+            const i4 = i * 4;
+            let slot;
+            if (rb.shape === RigidbodyShape.Sphere)
+                slot = sIdx++;
+            else if (rb.shape === RigidbodyShape.Box)
+                slot = bIdx++;
+            else
+                slot = cIdx++;
+            const dst = slot * STRIDE_FLOATS;
+            // Model matrix: rotation from quat into [dst..dst+15], then translation.
+            Mat4.fromQuatInto(orientations[i4 + 0], orientations[i4 + 1], orientations[i4 + 2], orientations[i4 + 3], data, dst);
+            data[dst + 12] = positions[i3 + 0];
+            data[dst + 13] = positions[i3 + 1];
+            data[dst + 14] = positions[i3 + 2];
+            // size + pad
+            data[dst + 16] = rb.size.x;
+            data[dst + 17] = rb.size.y;
+            data[dst + 18] = rb.size.z;
+            data[dst + 19] = 0;
+            const c = rb.type === RigidbodyType.Static
+                ? COLOR_STATIC
+                : rb.type === RigidbodyType.Kinematic
+                    ? COLOR_KINEMATIC
+                    : COLOR_DYNAMIC;
+            data[dst + 20] = c[0];
+            data[dst + 21] = c[1];
+            data[dst + 22] = c[2];
+            data[dst + 23] = c[3];
+        }
+        this.device.queue.writeBuffer(this.instanceBuffer, 0, data.buffer, data.byteOffset, N * STRIDE_BYTES);
+        pass.setBindGroup(0, this.bindGroup);
+        // Solid fills first (gentle ~20% alpha for shape ID), wireframe edges on top
+        // (95% alpha for crisp silhouette).
+        if (sphereCount > 0) {
+            const off = sphereOffset * STRIDE_BYTES;
+            const size = sphereCount * STRIDE_BYTES;
+            pass.setPipeline(this.solidPipelineSphere);
+            pass.setVertexBuffer(0, this.solidSphereBuffer);
+            pass.setVertexBuffer(1, this.instanceBuffer, off, size);
+            pass.draw(this.solidSphereCount, sphereCount);
+            pass.setPipeline(this.wirePipelineSphere);
+            pass.setVertexBuffer(0, this.wireSphereBuffer);
+            pass.setVertexBuffer(1, this.instanceBuffer, off, size);
+            pass.draw(this.wireSphereCount, sphereCount);
+        }
+        if (boxCount > 0) {
+            const off = boxOffset * STRIDE_BYTES;
+            const size = boxCount * STRIDE_BYTES;
+            pass.setPipeline(this.solidPipelineBox);
+            pass.setVertexBuffer(0, this.solidBoxBuffer);
+            pass.setVertexBuffer(1, this.instanceBuffer, off, size);
+            pass.draw(this.solidBoxCount, boxCount);
+            pass.setPipeline(this.wirePipelineBox);
+            pass.setVertexBuffer(0, this.wireBoxBuffer);
+            pass.setVertexBuffer(1, this.instanceBuffer, off, size);
+            pass.draw(this.wireBoxCount, boxCount);
+        }
+        if (capsuleCount > 0) {
+            const off = capsuleOffset * STRIDE_BYTES;
+            const size = capsuleCount * STRIDE_BYTES;
+            pass.setPipeline(this.solidPipelineCapsule);
+            pass.setVertexBuffer(0, this.solidCapsuleBuffer);
+            pass.setVertexBuffer(1, this.instanceBuffer, off, size);
+            pass.draw(this.solidCapsuleCount, capsuleCount);
+            pass.setPipeline(this.wirePipelineCapsule);
+            pass.setVertexBuffer(0, this.wireCapsuleBuffer);
+            pass.setVertexBuffer(1, this.instanceBuffer, off, size);
+            pass.draw(this.wireCapsuleCount, capsuleCount);
+        }
+    }
+    destroy() {
+        this.wireSphereBuffer.destroy();
+        this.wireBoxBuffer.destroy();
+        this.wireCapsuleBuffer.destroy();
+        this.solidSphereBuffer.destroy();
+        this.solidBoxBuffer.destroy();
+        this.solidCapsuleBuffer.destroy();
+        this.instanceBuffer.destroy();
+    }
+}
+// ── Geometry builders ─────────────────────────────────────────────────────────
+// Each vertex is vec4(unitPos.xyz, axialAnchor) packed as 4 floats.
+function buildSphereWireGeometry() {
+    const segs = 32;
+    const out = new Float32Array(3 * segs * 2 * 4); // 3 great circles
+    let p = 0;
+    for (let plane = 0; plane < 3; plane++) {
+        for (let i = 0; i < segs; i++) {
+            const a0 = (i / segs) * Math.PI * 2;
+            const a1 = ((i + 1) / segs) * Math.PI * 2;
+            const c0 = Math.cos(a0), s0 = Math.sin(a0);
+            const c1 = Math.cos(a1), s1 = Math.sin(a1);
+            let p0x = 0, p0y = 0, p0z = 0;
+            let p1x = 0, p1y = 0, p1z = 0;
+            if (plane === 0) {
+                p0x = c0;
+                p0y = s0;
+                p1x = c1;
+                p1y = s1;
+            }
+            else if (plane === 1) {
+                p0x = c0;
+                p0z = s0;
+                p1x = c1;
+                p1z = s1;
+            }
+            else {
+                p0y = c0;
+                p0z = s0;
+                p1y = c1;
+                p1z = s1;
+            }
+            out[p++] = p0x;
+            out[p++] = p0y;
+            out[p++] = p0z;
+            out[p++] = 0;
+            out[p++] = p1x;
+            out[p++] = p1y;
+            out[p++] = p1z;
+            out[p++] = 0;
+        }
+    }
+    return out;
+}
+function buildBoxWireGeometry() {
+    const edges = [
+        // 4 along X
+        [-1, -1, -1, +1, -1, -1], [-1, -1, +1, +1, -1, +1],
+        [-1, +1, -1, +1, +1, -1], [-1, +1, +1, +1, +1, +1],
+        // 4 along Y
+        [-1, -1, -1, -1, +1, -1], [+1, -1, -1, +1, +1, -1],
+        [-1, -1, +1, -1, +1, +1], [+1, -1, +1, +1, +1, +1],
+        // 4 along Z
+        [-1, -1, -1, -1, -1, +1], [+1, -1, -1, +1, -1, +1],
+        [-1, +1, -1, -1, +1, +1], [+1, +1, -1, +1, +1, +1],
+    ];
+    const out = new Float32Array(edges.length * 2 * 4);
+    let p = 0;
+    for (const e of edges) {
+        out[p++] = e[0];
+        out[p++] = e[1];
+        out[p++] = e[2];
+        out[p++] = 0;
+        out[p++] = e[3];
+        out[p++] = e[4];
+        out[p++] = e[5];
+        out[p++] = 0;
+    }
+    return out;
+}
+function buildCapsuleWireGeometry() {
+    const ringSegs = 32;
+    const arcSegs = 16;
+    // 2 cap rings + 4 hemisphere arcs + 4 cylinder verticals
+    const lineCount = ringSegs * 2 + arcSegs * 4 + 4;
+    const out = new Float32Array(lineCount * 2 * 4);
+    let p = 0;
+    const push = (x, y, z, axial) => {
+        out[p++] = x;
+        out[p++] = y;
+        out[p++] = z;
+        out[p++] = axial;
+    };
+    // Top ring (axial=+1) in XZ plane
+    for (let i = 0; i < ringSegs; i++) {
+        const a0 = (i / ringSegs) * Math.PI * 2;
+        const a1 = ((i + 1) / ringSegs) * Math.PI * 2;
+        push(Math.cos(a0), 0, Math.sin(a0), +1);
+        push(Math.cos(a1), 0, Math.sin(a1), +1);
+    }
+    // Bottom ring (axial=-1)
+    for (let i = 0; i < ringSegs; i++) {
+        const a0 = (i / ringSegs) * Math.PI * 2;
+        const a1 = ((i + 1) / ringSegs) * Math.PI * 2;
+        push(Math.cos(a0), 0, Math.sin(a0), -1);
+        push(Math.cos(a1), 0, Math.sin(a1), -1);
+    }
+    // Top cap arcs in XY and YZ planes (θ ∈ [0, π], pos = (cosθ, sinθ, 0) etc.)
+    for (let i = 0; i < arcSegs; i++) {
+        const t0 = (i / arcSegs) * Math.PI;
+        const t1 = ((i + 1) / arcSegs) * Math.PI;
+        push(Math.cos(t0), Math.sin(t0), 0, +1);
+        push(Math.cos(t1), Math.sin(t1), 0, +1);
+    }
+    for (let i = 0; i < arcSegs; i++) {
+        const t0 = (i / arcSegs) * Math.PI;
+        const t1 = ((i + 1) / arcSegs) * Math.PI;
+        push(0, Math.sin(t0), Math.cos(t0), +1);
+        push(0, Math.sin(t1), Math.cos(t1), +1);
+    }
+    // Bottom cap arcs
+    for (let i = 0; i < arcSegs; i++) {
+        const t0 = (i / arcSegs) * Math.PI;
+        const t1 = ((i + 1) / arcSegs) * Math.PI;
+        push(Math.cos(t0), -Math.sin(t0), 0, -1);
+        push(Math.cos(t1), -Math.sin(t1), 0, -1);
+    }
+    for (let i = 0; i < arcSegs; i++) {
+        const t0 = (i / arcSegs) * Math.PI;
+        const t1 = ((i + 1) / arcSegs) * Math.PI;
+        push(0, -Math.sin(t0), Math.cos(t0), -1);
+        push(0, -Math.sin(t1), Math.cos(t1), -1);
+    }
+    // 4 cylinder verticals: bottom rim (axial=-1) → top rim (+1) at fixed θ
+    push(+1, 0, 0, -1);
+    push(+1, 0, 0, +1);
+    push(-1, 0, 0, -1);
+    push(-1, 0, 0, +1);
+    push(0, 0, +1, -1);
+    push(0, 0, +1, +1);
+    push(0, 0, -1, -1);
+    push(0, 0, -1, +1);
+    return out;
+}
+// ── Solid (triangle-list) geometry builders ─────────────────────────────────
+// Each vertex is vec4(unitPos.xyz, axialAnchor) — same layout as wireframe.
+// UV sphere — stacks × slices quads, each split into 2 triangles. Polar quads
+// degenerate to triangles, which the GPU silently drops.
+function buildSphereSolidGeometry() {
+    const stacks = 12;
+    const slices = 18;
+    const out = new Float32Array(stacks * slices * 6 * 4);
+    let p = 0;
+    const vert = (phi, theta) => {
+        out[p++] = Math.cos(phi) * Math.cos(theta);
+        out[p++] = Math.sin(phi);
+        out[p++] = Math.cos(phi) * Math.sin(theta);
+        out[p++] = 0;
+    };
+    for (let s = 0; s < stacks; s++) {
+        const phi0 = -Math.PI / 2 + (s / stacks) * Math.PI;
+        const phi1 = -Math.PI / 2 + ((s + 1) / stacks) * Math.PI;
+        for (let l = 0; l < slices; l++) {
+            const th0 = (l / slices) * Math.PI * 2;
+            const th1 = ((l + 1) / slices) * Math.PI * 2;
+            vert(phi0, th0);
+            vert(phi1, th0);
+            vert(phi1, th1);
+            vert(phi0, th0);
+            vert(phi1, th1);
+            vert(phi0, th1);
+        }
+    }
+    return out;
+}
+// 6 cube faces × 2 triangles × 3 verts = 36 verts.
+function buildBoxSolidGeometry() {
+    const faces = [
+        // +X face
+        [+1, -1, -1, +1, +1, -1, +1, +1, +1, +1, -1, +1],
+        // -X face
+        [-1, -1, -1, -1, -1, +1, -1, +1, +1, -1, +1, -1],
+        // +Y face
+        [-1, +1, -1, -1, +1, +1, +1, +1, +1, +1, +1, -1],
+        // -Y face
+        [-1, -1, -1, +1, -1, -1, +1, -1, +1, -1, -1, +1],
+        // +Z face
+        [-1, -1, +1, +1, -1, +1, +1, +1, +1, -1, +1, +1],
+        // -Z face
+        [-1, -1, -1, -1, +1, -1, +1, +1, -1, +1, -1, -1],
+    ];
+    const out = new Float32Array(faces.length * 6 * 4);
+    let p = 0;
+    const v = (x, y, z) => {
+        out[p++] = x;
+        out[p++] = y;
+        out[p++] = z;
+        out[p++] = 0;
+    };
+    for (const f of faces) {
+        // f = [a, b, c, d] as 4 corners; emit tris (a,b,c) (a,c,d)
+        v(f[0], f[1], f[2]);
+        v(f[3], f[4], f[5]);
+        v(f[6], f[7], f[8]);
+        v(f[0], f[1], f[2]);
+        v(f[6], f[7], f[8]);
+        v(f[9], f[10], f[11]);
+    }
+    return out;
+}
+// Capsule: two hemispheres at axial=±1 + cylinder side connecting their equators.
+// Vertex shader does: world.y = unit.y * radius + halfHeight * axial.
+function buildCapsuleSolidGeometry() {
+    const slices = 18;
+    const capStacks = 6;
+    const cylTris = slices * 2; // 1 stack of quads → 2 tris/slice
+    const capTris = capStacks * slices * 2;
+    const totalVerts = (cylTris + capTris * 2) * 3;
+    const out = new Float32Array(totalVerts * 4);
+    let p = 0;
+    const v = (x, y, z, axial) => {
+        out[p++] = x;
+        out[p++] = y;
+        out[p++] = z;
+        out[p++] = axial;
+    };
+    // Cylinder side: two rings at axial=±1, both at unit y=0.
+    for (let l = 0; l < slices; l++) {
+        const th0 = (l / slices) * Math.PI * 2;
+        const th1 = ((l + 1) / slices) * Math.PI * 2;
+        const c0 = Math.cos(th0), s0 = Math.sin(th0);
+        const c1 = Math.cos(th1), s1 = Math.sin(th1);
+        // bottom-left, top-left, top-right
+        v(c0, 0, s0, -1);
+        v(c0, 0, s0, +1);
+        v(c1, 0, s1, +1);
+        // bottom-left, top-right, bottom-right
+        v(c0, 0, s0, -1);
+        v(c1, 0, s1, +1);
+        v(c1, 0, s1, -1);
+    }
+    // Top hemisphere (axial=+1): φ ∈ [0, π/2], pos = (cosφ cosθ, sinφ, cosφ sinθ).
+    for (let s = 0; s < capStacks; s++) {
+        const ph0 = (s / capStacks) * (Math.PI / 2);
+        const ph1 = ((s + 1) / capStacks) * (Math.PI / 2);
+        for (let l = 0; l < slices; l++) {
+            const th0 = (l / slices) * Math.PI * 2;
+            const th1 = ((l + 1) / slices) * Math.PI * 2;
+            const a = (ph, th) => [
+                Math.cos(ph) * Math.cos(th), Math.sin(ph), Math.cos(ph) * Math.sin(th),
+            ];
+            const p00 = a(ph0, th0), p10 = a(ph1, th0), p11 = a(ph1, th1), p01 = a(ph0, th1);
+            v(p00[0], p00[1], p00[2], +1);
+            v(p10[0], p10[1], p10[2], +1);
+            v(p11[0], p11[1], p11[2], +1);
+            v(p00[0], p00[1], p00[2], +1);
+            v(p11[0], p11[1], p11[2], +1);
+            v(p01[0], p01[1], p01[2], +1);
+        }
+    }
+    // Bottom hemisphere (axial=-1): same but y = -sinφ.
+    for (let s = 0; s < capStacks; s++) {
+        const ph0 = (s / capStacks) * (Math.PI / 2);
+        const ph1 = ((s + 1) / capStacks) * (Math.PI / 2);
+        for (let l = 0; l < slices; l++) {
+            const th0 = (l / slices) * Math.PI * 2;
+            const th1 = ((l + 1) / slices) * Math.PI * 2;
+            const a = (ph, th) => [
+                Math.cos(ph) * Math.cos(th), -Math.sin(ph), Math.cos(ph) * Math.sin(th),
+            ];
+            const p00 = a(ph0, th0), p10 = a(ph1, th0), p11 = a(ph1, th1), p01 = a(ph0, th1);
+            v(p00[0], p00[1], p00[2], -1);
+            v(p11[0], p11[1], p11[2], -1);
+            v(p10[0], p10[1], p10[2], -1);
+            v(p00[0], p00[1], p00[2], -1);
+            v(p01[0], p01[1], p01[2], -1);
+            v(p11[0], p11[1], p11[2], -1);
+        }
+    }
+    return out;
+}

package/dist/shaders/passes/physics-debug.d.ts

@@ -0,0 +1,2 @@
+export declare const PHYSICS_DEBUG_SHADER_WGSL = "\nstruct CameraUniforms {\n  view: mat4x4f,\n  projection: mat4x4f,\n  viewPos: vec3f,\n  _pad: f32,\n};\n\n@group(0) @binding(0) var<uniform> camera: CameraUniforms;\n\noverride SHAPE_KIND: u32 = 0u;\noverride SOLID_ALPHA: f32 = 1.0;\n\nstruct VsIn {\n  @location(0) unit: vec4f,       // xyz = unit pos; w = capsule axial anchor\n  @location(1) modelCol0: vec4f,\n  @location(2) modelCol1: vec4f,\n  @location(3) modelCol2: vec4f,\n  @location(4) modelCol3: vec4f,\n  @location(5) size: vec4f,       // xyz = size; w unused\n  @location(6) color: vec4f,\n};\n\nstruct VsOut {\n  @builtin(position) pos: vec4f,\n  @location(0) color: vec4f,\n};\n\n@vertex\nfn vsMain(in: VsIn) -> VsOut {\n  let model = mat4x4f(in.modelCol0, in.modelCol1, in.modelCol2, in.modelCol3);\n  var local: vec3f;\n  if (SHAPE_KIND == 1u) {\n    local = in.unit.xyz * in.size.xyz;\n  } else if (SHAPE_KIND == 2u) {\n    // PMX capsule: size.x = radius, size.y = full cylinder height. Bullet 2.x's\n    // btCapsuleShape(radius, height) stores height/2 internally, so the actual\n    // collision cylinder spans \u00B1size.y/2 \u2014 halve here to match.\n    let r = in.size.x;\n    let halfH = in.size.y * 0.5;\n    local = vec3f(in.unit.x * r, in.unit.y * r + halfH * in.unit.w, in.unit.z * r);\n  } else {\n    local = in.unit.xyz * in.size.x;\n  }\n  let world = model * vec4f(local, 1.0);\n  var out: VsOut;\n  out.pos = camera.projection * camera.view * world;\n  out.color = in.color;\n  return out;\n}\n\n@fragment\nfn fsMain(in: VsOut) -> @location(0) vec4f {\n  return vec4f(in.color.rgb, in.color.a * SOLID_ALPHA);\n}\n";
+//# sourceMappingURL=physics-debug.d.ts.map

package/dist/shaders/passes/physics-debug.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"physics-debug.d.ts","sourceRoot":"","sources":["../../../src/shaders/passes/physics-debug.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,yBAAyB,2kDAuDrC,CAAA"}

package/dist/shaders/passes/physics-debug.js

@@ -0,0 +1,69 @@
+// Wireframe + solid overlay for physics rigid bodies (sphere / box / capsule).
+// Rendered in its own pass after composite, straight to the swapchain — no
+// MSAA, no depth, no MRT — so it sits cleanly on top of the tonemapped scene
+// regardless of camera angle, model occlusion, or the composite alpha gate.
+//
+//   SHAPE_KIND   0 = sphere   → unit-sphere line/tri primitive scaled by size.x (radius)
+//                1 = box      → unit cube ±1 scaled by size.xyz (half-extents)
+//                2 = capsule  → unit cap+ring with per-vertex `axial` (-1/0/+1)
+//                               that lifts cap rings/arcs ±halfHeight along Y;
+//                               XZ scales by size.x (radius), Y by size.y/2.
+//   SOLID_ALPHA  fragment alpha multiplier. Wireframe pipelines leave this at
+//                1.0 for crisp edges; solid pipelines set it to ~0.2 so the fill
+//                stays gentle under stacked bodies.
+export const PHYSICS_DEBUG_SHADER_WGSL = /* wgsl */ `
+struct CameraUniforms {
+  view: mat4x4f,
+  projection: mat4x4f,
+  viewPos: vec3f,
+  _pad: f32,
+};
+
+@group(0) @binding(0) var<uniform> camera: CameraUniforms;
+
+override SHAPE_KIND: u32 = 0u;
+override SOLID_ALPHA: f32 = 1.0;
+
+struct VsIn {
+  @location(0) unit: vec4f,       // xyz = unit pos; w = capsule axial anchor
+  @location(1) modelCol0: vec4f,
+  @location(2) modelCol1: vec4f,
+  @location(3) modelCol2: vec4f,
+  @location(4) modelCol3: vec4f,
+  @location(5) size: vec4f,       // xyz = size; w unused
+  @location(6) color: vec4f,
+};
+
+struct VsOut {
+  @builtin(position) pos: vec4f,
+  @location(0) color: vec4f,
+};
+
+@vertex
+fn vsMain(in: VsIn) -> VsOut {
+  let model = mat4x4f(in.modelCol0, in.modelCol1, in.modelCol2, in.modelCol3);
+  var local: vec3f;
+  if (SHAPE_KIND == 1u) {
+    local = in.unit.xyz * in.size.xyz;
+  } else if (SHAPE_KIND == 2u) {
+    // PMX capsule: size.x = radius, size.y = full cylinder height. Bullet 2.x's
+    // btCapsuleShape(radius, height) stores height/2 internally, so the actual
+    // collision cylinder spans ±size.y/2 — halve here to match.
+    let r = in.size.x;
+    let halfH = in.size.y * 0.5;
+    local = vec3f(in.unit.x * r, in.unit.y * r + halfH * in.unit.w, in.unit.z * r);
+  } else {
+    local = in.unit.xyz * in.size.x;
+  }
+  let world = model * vec4f(local, 1.0);
+  var out: VsOut;
+  out.pos = camera.projection * camera.view * world;
+  out.color = in.color;
+  return out;
+}
+
+@fragment
+fn fsMain(in: VsOut) -> @location(0) vec4f {
+  return vec4f(in.color.rgb, in.color.a * SOLID_ALPHA);
+}
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "reze-engine",
-    "version": "0.22.0",
+    "version": "0.23.0",
     "description": "A lightweight WebGPU engine for real-time 3D MMD/PMX model rendering",
     "main": "./dist/index.js",
     "types": "./dist/index.d.ts",
@@ -23,7 +23,7 @@
         "build": "tsc",
         "dev": "tsc --watch",
         "test": "node --import ./tests/register.mjs --test tests/*.test.mjs",
-        "prepublishOnly": "cp ../README.md ./README.md && npm run build"
+        "prepublishOnly": "node -e \"require('fs').copyFileSync('../README.md','README.md')\" && npm run build"
     },
     "keywords": [
         "webgpu",
@@ -41,4 +41,4 @@
         "@types/node": "^20",
         "typescript": "^5"
     }
-}
+}

package/src/camera.ts

@@ -101,10 +101,11 @@ export class Camera {
       // MMD camera: look at `target` from `distance` back, oriented by the euler rotation.
       // forward = q·(0,0,1) (LH), up = q·(0,1,0) — read as columns 2 and 1 of the rot matrix.
       // eye = target + forward·distance (distance is negative in VMD, so eye sits behind).
-      // NOTE: euler sign/order follows the engine's fromEuler; if a loaded shot looks
-      // mirrored or rolled, this is the one line to flip (negate axes / reorder).
+      // Euler is NEGATED on all three axes: babylon-mmd builds the shot with
+      // RotationYawPitchRoll(-ry, -rx, -rz), and our fromEuler(rx,ry,rz) equals
+      // RotationYawPitchRoll(ry,rx,rz) — so the MMD-authentic rotation is fromEuler(-r).
       const r = this._vmdRotation
-      const q = Quat.fromEuler(r.x, r.y, r.z)
+      const q = Quat.fromEuler(-r.x, -r.y, -r.z)
       Mat4.fromQuatInto(q.x, q.y, q.z, q.w, this._quatScratch, 0)
       const s = this._quatScratch
       const t = this._vmdTarget
@@ -244,7 +245,7 @@ export class Camera {
   }
 
   private onMouseMove(e: MouseEvent) {
-    if (this.inputLocked) return
+    if (this.inputLocked || this.vmdDriven) return // VMD owns the camera; orbit/pan is inert
     if (!this.isDragging) return
 
     const deltaX = e.clientX - this.lastMousePos.x
@@ -272,6 +273,7 @@ export class Camera {
 
   private onWheel(e: WheelEvent) {
     e.preventDefault()
+    if (this.vmdDriven) return // VMD owns the camera; zoom is inert
 
     // Update camera radius (zoom)
     this.radius += e.deltaY * this.wheelPrecision
@@ -318,6 +320,7 @@ export class Camera {
   private onTouchMove(e: TouchEvent) {
     if (this.inputLocked) return
     e.preventDefault()
+    if (this.vmdDriven) return // VMD owns the camera; pinch/pan/rotate is inert
 
     if (this.isPinching && e.touches.length === 2) {
       // Two-finger gesture: can be pinch zoom or pan