@downdraft/engine 0.0.0 → 0.1.1

package/core/src/render/passes/shadow.ts

@@ -0,0 +1,220 @@
+import { createValidatedShaderModule } from "../shader-validator";
+import { mat4, vec3, type Mat4 } from "wgpu-matrix";
+import type { MeshData } from "../../mesh/builder";
+import { PassType, type FrameGraphBuilder, type GraphRenderContext, type TextureHandle } from "../frame-graph";
+import { RenderPass } from "../render-pass";
+import { destroyMapValues } from "../resource-tracker";
+import { TrackedRenderPass } from "../tracked-render-pass";
+
+const SHADOW_SHADER = `
+struct CameraUniforms {
+  lightViewProj: mat4x4<f32>,
+};
+@group(0) @binding(0) var<uniform> camera: CameraUniforms;
+@group(0) @binding(1) var modelUniform: mat4x4<f32>;
+
+struct VertexInput {
+  @location(0) position: vec3<f32>,
+};
+
+@vertex
+fn vs_main(input: VertexInput) -> @builtin(position) vec4<f32> {
+  let worldPos = modelUniform * vec4<f32>(input.position, 1.0);
+  return camera.lightViewProj * worldPos;
+}
+`;
+
+export class ShadowPass extends RenderPass {
+  name = "shadow";
+  passType = PassType.Custom;
+  shadowHandle: TextureHandle | null = null;
+  private device: GPUDevice;
+  private pipelines: Map<number, GPURenderPipeline> = new Map();
+  private bindGroups: Map<number, GPUBindGroup> = new Map();
+  private shaderModule: GPUShaderModule | null = null;
+  private shadowTexture: GPUTexture | null = null;
+  private shadowView: GPUTextureView | null = null;
+  private uniformBuffer: GPUBuffer | null = null;
+  private modelBuffer: GPUBuffer | null = null;
+  private shadowMapSize: number = 2048;
+  private lightViewProj: Mat4 = mat4.identity();
+  private vertexBuffers: Map<MeshData, GPUBuffer> = new Map();
+  private indexBuffers: Map<MeshData, GPUBuffer> = new Map();
+
+
+  constructor(device: GPUDevice) {
+    super();
+    this.device = device;
+  }
+
+  prepare(_device: GPUDevice): void {
+    if (!this.shaderModule) {
+      this.shaderModule = createValidatedShaderModule(this.device, { code: SHADOW_SHADER, label: "ShadowPass" });
+    }
+
+    this.shadowTexture = this.device.createTexture({
+      size: [this.shadowMapSize, this.shadowMapSize],
+      format: "depth32float",
+      usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
+    });
+    this.shadowView = this.shadowTexture.createView();
+
+    this.uniformBuffer = this.device.createBuffer({
+      size: 64,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    });
+
+    this.modelBuffer = this.device.createBuffer({
+      size: 64,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    });
+  }
+
+  private getPipeline(stride: number): GPURenderPipeline {
+    let pipeline = this.pipelines.get(stride);
+    if (!pipeline) {
+      pipeline = this.device.createRenderPipeline({
+        layout: "auto",
+        vertex: {
+          module: this.shaderModule!,
+          entryPoint: "vs_main",
+          buffers: [{
+            arrayStride: stride,
+            attributes: [
+              { shaderLocation: 0, offset: 0, format: "float32x3" },
+            ],
+          }],
+        },
+        primitive: { topology: "triangle-list", cullMode: "back" },
+        depthStencil: {
+          format: "depth32float",
+          depthWriteEnabled: true,
+          depthCompare: "less",
+        },
+      });
+      this.pipelines.set(stride, pipeline);
+      this.bindGroups.set(stride, this.device.createBindGroup({
+        layout: pipeline.getBindGroupLayout(0),
+        entries: [
+          { binding: 0, resource: { buffer: this.uniformBuffer! } },
+          { binding: 1, resource: { buffer: this.modelBuffer! } },
+        ],
+      }));
+    }
+    return pipeline;
+  }
+
+  setLightViewProj(viewProj: Mat4): void {
+    this.lightViewProj = viewProj;
+    this.device.queue.writeBuffer(this.uniformBuffer!, 0, viewProj as unknown as BufferSource);
+  }
+
+  setModelMatrix(model: Mat4): void {
+    this.device.queue.writeBuffer(this.modelBuffer!, 0, model as unknown as BufferSource);
+  }
+
+  setup(builder: FrameGraphBuilder): void {
+    if (this.shadowHandle) {
+      builder.write(this.shadowHandle);
+    }
+  }
+
+  getShadowTexture(): GPUTexture | null {
+    return this.shadowTexture;
+  }
+
+  execute(ctx: GraphRenderContext): void {
+    if (!this.shaderModule) return;
+    if (!ctx.shadowsEnabled) return;
+
+    if (!ctx.device) return;
+
+    this.setLightViewProj(ctx.lightViewProj);
+    this.setModelMatrix(ctx.modelMatrix);
+
+    const mesh = ctx.mesh;
+    const pipeline = this.getPipeline(mesh.layout.stride);
+    const bindGroup = this.bindGroups.get(mesh.layout.stride)!;
+
+    const encoder = ctx.device.createCommandEncoder();
+    const pass = encoder.beginRenderPass({
+      colorAttachments: [],
+      depthStencilAttachment: {
+        view: this.shadowView!,
+        depthClearValue: 1.0,
+        depthLoadOp: "clear",
+        depthStoreOp: "store",
+      },
+    });
+
+    const tracked = new TrackedRenderPass(pass);
+    tracked.setPipeline(pipeline);
+    tracked.setBindGroup(0, bindGroup);
+    tracked.setVertexBuffer(0, this.getVertexBuffer(mesh));
+    tracked.setIndexBuffer(this.getIndexBuffer(mesh), mesh.indices instanceof Uint16Array ? "uint16" : "uint32");
+    tracked.drawIndexed(mesh.indexCount);
+    tracked.end();
+
+    ctx.device.queue.submit([encoder.finish()]);
+    ctx.addDrawCalls(1);
+    ctx.addTriangles(Math.floor(mesh.indexCount / 3));
+  }
+
+  private getVertexBuffer(mesh: MeshData): GPUBuffer {
+    let buf = this.vertexBuffers.get(mesh);
+    if (!buf) {
+      buf = this.device.createBuffer({
+        size: mesh.vertices.byteLength,
+        usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+      });
+      this.device.queue.writeBuffer(buf, 0, mesh.vertices.buffer);
+      this.vertexBuffers.set(mesh, buf);
+    }
+    return buf;
+  }
+
+  private getIndexBuffer(mesh: MeshData): GPUBuffer {
+    let buf = this.indexBuffers.get(mesh);
+    if (!buf) {
+      buf = this.device.createBuffer({
+        size: mesh.indices.byteLength,
+        usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
+      });
+      this.device.queue.writeBuffer(buf, 0, mesh.indices.buffer);
+      this.indexBuffers.set(mesh, buf);
+    }
+    return buf;
+  }
+
+  getShadowView(): GPUTextureView | null {
+    return this.shadowView;
+  }
+
+  computeLightViewProj(
+    lightDir: [number, number, number],
+    sceneCenter: [number, number, number],
+    sceneRadius: number,
+  ): Mat4 {
+    const eye = vec3.create(
+      sceneCenter[0] - lightDir[0] * sceneRadius,
+      sceneCenter[1] - lightDir[1] * sceneRadius,
+      sceneCenter[2] - lightDir[2] * sceneRadius,
+    );
+    const view = mat4.lookAt(eye, vec3.create(...sceneCenter), vec3.create(0, 1, 0));
+    const orthoSize = sceneRadius;
+    const proj = mat4.ortho(-orthoSize, orthoSize, -orthoSize, orthoSize, 0.1, sceneRadius * 4);
+    return mat4.multiply(proj, view);
+  }
+
+  destroy(): void {
+    this.shadowTexture?.destroy();
+    this.uniformBuffer?.destroy();
+    this.modelBuffer?.destroy();
+    for (const buf of this.vertexBuffers.values()) buf.destroy();
+    for (const buf of this.indexBuffers.values()) buf.destroy();
+    this.vertexBuffers.clear();
+    this.indexBuffers.clear();
+    destroyMapValues(this.pipelines);
+    destroyMapValues(this.bindGroups);
+  }
+}

package/core/src/render/passes/skinning-vs.ts

@@ -0,0 +1,121 @@
+import type { WgslStruct } from "@downdraft/engine/shader-graph";
+import { mat4x4f, vec4f, wgsl } from "@downdraft/engine/shader-graph";
+
+export const MAX_BONES_VS = 256;
+export const MAX_BONE_INFLUENCES = 8;
+
+const BoneTransforms: WgslStruct = wgsl.struct("BoneTransforms", {
+  transforms: wgsl.array(vec4f, MAX_BONES_VS * 3),
+});
+
+const InverseBindMatrices: WgslStruct = wgsl.struct("InverseBindMatrices", {
+  matrices: wgsl.array(mat4x4f, MAX_BONES_VS),
+});
+
+export const SKINNING_VS_GLSL = `
+uniform vec4 uBoneTransforms[${256}];
+uniform mat4 uInverseBindMatrices[${256}];
+uniform int uBoneCount;
+
+mat4 composeMat4(vec3 pos, vec4 rot, vec3 scale) {
+  vec4 nq = normalize(rot);
+  float xx = nq.x * nq.x;
+  float yy = nq.y * nq.y;
+  float zz = nq.z * nq.z;
+  float xy = nq.x * nq.y;
+  float xz = nq.x * nq.z;
+  float yz = nq.y * nq.z;
+  float wx = nq.w * nq.x;
+  float wy = nq.w * nq.y;
+  float wz = nq.w * nq.z;
+
+  mat4 m = mat4(1.0);
+  m[0] = vec4((1.0 - 2.0 * (yy + zz)) * scale.x, (2.0 * (xy + wz)) * scale.x, (2.0 * (xz - wy)) * scale.x, 0.0);
+  m[1] = vec4((2.0 * (xy - wz)) * scale.y, (1.0 - 2.0 * (xx + zz)) * scale.y, (2.0 * (yz + wx)) * scale.y, 0.0);
+  m[2] = vec4((2.0 * (xz + wy)) * scale.z, (2.0 * (yz - wx)) * scale.z, (1.0 - 2.0 * (xx + yy)) * scale.z, 0.0);
+  m[3] = vec4(pos.x, pos.y, pos.z, 1.0);
+  return m;
+}
+
+mat4 computeSkinMatrixVS(vec4 boneIndices, vec4 boneWeights) {
+  mat4 skinMatrix = mat4(0.0);
+  for (int i = 0; i < 4; i++) {
+    int boneIdx = int(boneIndices[i]);
+    if (boneIdx < 0 || boneIdx >= uBoneCount) continue;
+    vec4 bonePosRot0 = uBoneTransforms[boneIdx * 3];
+    vec4 boneRot1Scale0 = uBoneTransforms[boneIdx * 3 + 1];
+    vec4 boneScale1Pad = uBoneTransforms[boneIdx * 3 + 2];
+    vec3 bPos = bonePosRot0.xyz;
+    vec4 bRot = vec4(bonePosRot0.w, boneRot1Scale0.xy);
+    vec3 bScale = vec4(boneRot1Scale0.zw, boneScale1Pad.xy).xyz;
+    mat4 localMat = composeMat4(bPos, bRot, bScale);
+    mat4 skinMat = localMat * uInverseBindMatrices[boneIdx];
+    skinMatrix += skinMat * boneWeights[i];
+  }
+  return skinMatrix;
+}
+`;
+
+export const SKINNING_VS_WGSL = `
+${BoneTransforms.wgsl}
+
+${InverseBindMatrices.wgsl}
+
+@group(2) @binding(0) var<uniform> boneTransforms: BoneTransforms;
+@group(2) @binding(1) var<uniform> inverseBindMatrices: InverseBindMatrices;
+@group(2) @binding(2) var<uniform> boneCount: u32;
+
+fn composeMat4VS(pos: vec3<f32>, rot: vec4<f32>, scale: vec3<f32>) -> mat4x4<f32> {
+  let nq = normalize(rot);
+  let xx = nq.x * nq.x;
+  let yy = nq.y * nq.y;
+  let zz = nq.z * nq.z;
+  let xy = nq.x * nq.y;
+  let xz = nq.x * nq.z;
+  let yz = nq.y * nq.z;
+  let wx = nq.w * nq.x;
+  let wy = nq.w * nq.y;
+  let wz = nq.w * nq.z;
+
+  var m: mat4x4<f32>;
+  m[0] = vec4<f32>((1.0 - 2.0 * (yy + zz)) * scale.x, (2.0 * (xy + wz)) * scale.x, (2.0 * (xz - wy)) * scale.x, 0.0);
+  m[1] = vec4<f32>((2.0 * (xy - wz)) * scale.y, (1.0 - 2.0 * (xx + zz)) * scale.y, (2.0 * (yz + wx)) * scale.y, 0.0);
+  m[2] = vec4<f32>((2.0 * (xz + wy)) * scale.z, (2.0 * (yz - wx)) * scale.z, (1.0 - 2.0 * (xx + yy)) * scale.z, 0.0);
+  m[3] = vec4<f32>(pos.x, pos.y, pos.z, 1.0);
+  return m;
+}
+
+fn computeSkinMatrixVS(boneIndices: vec4<u32>, boneWeights: vec4<f32>) -> mat4x4<f32> {
+  var skinMatrix: mat4x4<f32> = mat4x4<f32>(0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0);
+  for (var i: u32 = 0u; i < 4u; i++) {
+    let boneIdx = boneIndices[i];
+    if boneIdx >= boneCount { continue; }
+    let posRot0 = boneTransforms.transforms[boneIdx * 3u];
+    let rot1Scale0 = boneTransforms.transforms[boneIdx * 3u + 1u];
+    let scale1Pad = boneTransforms.transforms[boneIdx * 3u + 2u];
+    let bPos = vec3<f32>(posRot0.xyz);
+    let bRot = vec4<f32>(posRot0.w, rot1Scale0.xy);
+    let bScale = vec3<f32>(rot1Scale0.zw, scale1Pad.xy);
+    let localMat = composeMat4VS(bPos, bRot, bScale);
+    let skinMat = localMat * inverseBindMatrices.matrices[boneIdx];
+    skinMatrix += skinMat * boneWeights[i];
+  }
+  return skinMatrix;
+}
+`;
+
+export type SkinningMode = "compute" | "vertex";
+
+export interface SkinningPass {
+  mode: SkinningMode;
+  updateBoneTransforms(transforms: Float32Array): void;
+  updateInverseBindMatrices(matrices: Float32Array): void;
+  updateBoneCount(count: number): void;
+  destroy(): void;
+}
+
+export function createSkinningPass(
+  hasCompute: boolean,
+): SkinningMode {
+  return hasCompute ? "compute" : "vertex";
+}

package/core/src/render/passes/skinning.ts

@@ -0,0 +1,326 @@
+
+import { createValidatedShaderModule } from "../shader-validator";
+const SKINNING_COMPUTE_SHADER = `
+struct BoneTransform {
+  position: vec3<f32>,
+  _pad0: f32,
+  rotation: vec4<f32>,
+  scale: vec3<f32>,
+  _pad1: f32,
+};
+
+struct BoneInput {
+  transforms: array<BoneTransform>,
+};
+
+struct InverseBindInput {
+  matrices: array<mat4x4<f32>>,
+};
+
+struct SkinMatrixOutput {
+  matrices: array<mat4x4<f32>>,
+};
+
+@group(0) @binding(0) var<uniform> boneCount: u32;
+@group(0) @binding(1) var<storage, read> boneData: BoneInput;
+@group(0) @binding(2) var<storage, read> inverseBindData: InverseBindInput;
+@group(0) @binding(3) var<storage, read_write> skinMatrices: SkinMatrixOutput;
+
+fn composeMatrix(pos: vec3<f32>, rot: vec4<f32>, scale: vec3<f32>) -> mat4x4<f32> {
+  let nq = normalize(rot);
+  let xx = nq.x * nq.x;
+  let yy = nq.y * nq.y;
+  let zz = nq.z * nq.z;
+  let xy = nq.x * nq.y;
+  let xz = nq.x * nq.z;
+  let yz = nq.y * nq.z;
+  let wx = nq.w * nq.x;
+  let wy = nq.w * nq.y;
+  let wz = nq.w * nq.z;
+
+  var m: mat4x4<f32>;
+  m[0] = vec4<f32>(
+    (1.0 - 2.0 * (yy + zz)) * scale.x,
+    (2.0 * (xy + wz)) * scale.x,
+    (2.0 * (xz - wy)) * scale.x,
+    0.0,
+  );
+  m[1] = vec4<f32>(
+    (2.0 * (xy - wz)) * scale.y,
+    (1.0 - 2.0 * (xx + zz)) * scale.y,
+    (2.0 * (yz + wx)) * scale.y,
+    0.0,
+  );
+  m[2] = vec4<f32>(
+    (2.0 * (xz + wy)) * scale.z,
+    (2.0 * (yz - wx)) * scale.z,
+    (1.0 - 2.0 * (xx + yy)) * scale.z,
+    0.0,
+  );
+  m[3] = vec4<f32>(pos.x, pos.y, pos.z, 1.0);
+  return m;
+}
+
+@compute @workgroup_size(64)
+fn cs_main(@builtin(global_invocation_id) gid: vec3<u32>) {
+  let idx = gid.x;
+  if (idx >= boneCount) {
+    return;
+  }
+
+  let bone = boneData.transforms[idx];
+  let localMatrix = composeMatrix(bone.position, bone.rotation, bone.scale);
+  let inverseBind = inverseBindData.matrices[idx];
+  skinMatrices.matrices[idx] = localMatrix * inverseBind;
+}
+`;
+
+export interface SkinningComputePassResources {
+  boneTransformBuffer: GPUBuffer;
+  inverseBindBuffer: GPUBuffer;
+  skinMatrixBuffer: GPUBuffer;
+  boneCountBuffer: GPUBuffer;
+  bindGroup: GPUBindGroup;
+  pipeline: GPUComputePipeline;
+}
+
+export class SkinningComputePass {
+  readonly name = "skinning-compute";
+  private device: GPUDevice;
+  private pipeline: GPUComputePipeline | null = null;
+  private bindGroupLayout: GPUBindGroupLayout | null = null;
+  private boneCountBuffer: GPUBuffer | null = null;
+  private boneTransformBuffer: GPUBuffer | null = null;
+  private inverseBindBuffer: GPUBuffer | null = null;
+  private skinMatrixBuffer: GPUBuffer | null = null;
+  private bindGroup: GPUBindGroup | null = null;
+  private maxBones: number;
+
+  constructor(device: GPUDevice, maxBones: number = 256) {
+    this.device = device;
+    this.maxBones = maxBones;
+  }
+
+  prepare(boneCount: number): void {
+    const shaderModule = createValidatedShaderModule(this.device, {
+      label: "skinning-compute",
+      code: SKINNING_COMPUTE_SHADER,
+    });
+
+    this.bindGroupLayout = this.device.createBindGroupLayout({
+      entries: [
+      { binding: 0, visibility: GPUShaderStage.COMPUTE, buffer: { type: "uniform" } },
+      { binding: 1, visibility: GPUShaderStage.COMPUTE, buffer: { type: "read-only-storage" } },
+      { binding: 2, visibility: GPUShaderStage.COMPUTE, buffer: { type: "read-only-storage" } },
+      { binding: 3, visibility: GPUShaderStage.COMPUTE, buffer: { type: "storage" } },
+      ],
+    });
+
+    const pipelineLayout = this.device.createPipelineLayout({
+      bindGroupLayouts: [this.bindGroupLayout],
+    });
+
+    this.pipeline = this.device.createComputePipeline({
+      label: "skinning-compute",
+      layout: pipelineLayout,
+      compute: { module: shaderModule, entryPoint: "cs_main" },
+    });
+
+    const boneTransformSize = this.maxBones * 12 * 4;
+    const inverseBindSize = this.maxBones * 16 * 4;
+    const skinMatrixSize = this.maxBones * 16 * 4;
+
+    this.boneCountBuffer = this.device.createBuffer({
+      size: 4,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    });
+
+    this.boneTransformBuffer = this.device.createBuffer({
+      size: boneTransformSize,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+    });
+
+    this.inverseBindBuffer = this.device.createBuffer({
+      size: inverseBindSize,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+    });
+
+    this.skinMatrixBuffer = this.device.createBuffer({
+      size: skinMatrixSize,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST,
+    });
+
+    const boneCountBuf = new Uint32Array([boneCount]);
+    this.device.queue.writeBuffer(this.boneCountBuffer, 0, boneCountBuf.buffer as ArrayBuffer, 0, boneCountBuf.byteLength);
+
+    this.bindGroup = this.device.createBindGroup({
+      layout: this.bindGroupLayout,
+      entries: [
+      { binding: 0, resource: { buffer: this.boneCountBuffer } },
+      { binding: 1, resource: { buffer: this.boneTransformBuffer } },
+      { binding: 2, resource: { buffer: this.inverseBindBuffer } },
+      { binding: 3, resource: { buffer: this.skinMatrixBuffer } },
+      ],
+    });
+  }
+
+  updateBoneTransforms(transforms: Float32Array): void {
+    if (!this.boneTransformBuffer) return;
+    this.device.queue.writeBuffer(this.boneTransformBuffer, 0, transforms.buffer as ArrayBuffer, 0, transforms.byteLength);
+  }
+
+  updateInverseBindMatrices(matrices: Float32Array): void {
+    if (!this.inverseBindBuffer) return;
+    this.device.queue.writeBuffer(this.inverseBindBuffer, 0, matrices.buffer as ArrayBuffer, 0, matrices.byteLength);
+  }
+
+  updateBoneCount(count: number): void {
+    if (!this.boneCountBuffer) return;
+    const buf = new Uint32Array([count]);
+    this.device.queue.writeBuffer(this.boneCountBuffer, 0, buf.buffer as ArrayBuffer, 0, buf.byteLength);
+  }
+
+  getSkinMatrixBuffer(): GPUBuffer | null {
+    return this.skinMatrixBuffer;
+  }
+
+  execute(encoder: GPUCommandEncoder, boneCount: number): void {
+    if (!this.pipeline || !this.bindGroup) return;
+
+    const workgroupCount = Math.ceil(boneCount / 64);
+    const pass = encoder.beginComputePass();
+    pass.setPipeline(this.pipeline);
+    pass.setBindGroup(0, this.bindGroup);
+    pass.dispatchWorkgroups(workgroupCount);
+    pass.end();
+  }
+
+  destroy(): void {
+    this.boneCountBuffer?.destroy();
+    this.boneTransformBuffer?.destroy();
+    this.inverseBindBuffer?.destroy();
+    this.skinMatrixBuffer?.destroy();
+    this.boneCountBuffer = null;
+    this.boneTransformBuffer = null;
+    this.inverseBindBuffer = null;
+    this.skinMatrixBuffer = null;
+    this.bindGroup = null;
+    this.pipeline = null;
+    this.bindGroupLayout = null;
+  }
+}
+
+export function packBoneTransforms(
+  positions: Array<[number, number, number]>,
+  rotations: Array<[number, number, number, number]>,
+  scales: Array<[number, number, number]>,
+): Float32Array {
+  const boneCount = positions.length;
+  const buffer = new Float32Array(boneCount * 12);
+  for (let i = 0; i < boneCount; i++) {
+    const offset = i * 12;
+    buffer[offset + 0] = positions[i][0];
+    buffer[offset + 1] = positions[i][1];
+    buffer[offset + 2] = positions[i][2];
+    buffer[offset + 3] = 0;
+    buffer[offset + 4] = rotations[i][0];
+    buffer[offset + 5] = rotations[i][1];
+    buffer[offset + 6] = rotations[i][2];
+    buffer[offset + 7] = rotations[i][3];
+    buffer[offset + 8] = scales[i][0];
+    buffer[offset + 9] = scales[i][1];
+    buffer[offset + 10] = scales[i][2];
+    buffer[offset + 11] = 0;
+  }
+  return buffer;
+}
+
+export function packBoneTransformsVec4(
+  positions: Array<[number, number, number]>,
+  rotations: Array<[number, number, number, number]>,
+  scales: Array<[number, number, number]>,
+): Float32Array {
+  const boneCount = positions.length;
+  const buffer = new Float32Array(boneCount * 12);
+  for (let i = 0; i < boneCount; i++) {
+    const offset = i * 12;
+    buffer[offset + 0] = positions[i][0];
+    buffer[offset + 1] = positions[i][1];
+    buffer[offset + 2] = positions[i][2];
+    buffer[offset + 3] = rotations[i][0];
+    buffer[offset + 4] = rotations[i][1];
+    buffer[offset + 5] = rotations[i][2];
+    buffer[offset + 6] = rotations[i][3];
+    buffer[offset + 7] = scales[i][0];
+    buffer[offset + 8] = scales[i][1];
+    buffer[offset + 9] = scales[i][2];
+    buffer[offset + 10] = 0;
+    buffer[offset + 11] = 0;
+  }
+  return buffer;
+}
+
+export class VertexSkinningPass {
+  readonly name = "skinning-vertex";
+  private device: GPUDevice | null;
+  private boneTransformBuffer: GPUBuffer | null = null;
+  private inverseBindBuffer: GPUBuffer | null = null;
+  private boneCountBuffer: GPUBuffer | null = null;
+  private maxBones: number;
+
+  constructor(device: GPUDevice | null, maxBones: number = 256) {
+    this.device = device;
+    this.maxBones = maxBones;
+  }
+
+  prepare(): void {
+    if (!this.device) return;
+
+    const boneTransformSize = this.maxBones * 12 * 4;
+    const inverseBindSize = this.maxBones * 16 * 4;
+
+    this.boneTransformBuffer = this.device.createBuffer({
+      size: boneTransformSize,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    });
+
+    this.inverseBindBuffer = this.device.createBuffer({
+      size: inverseBindSize,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    });
+
+    this.boneCountBuffer = this.device.createBuffer({
+      size: 4,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    });
+  }
+
+  updateBoneTransforms(transforms: Float32Array): void {
+    if (!this.boneTransformBuffer || !this.device) return;
+    this.device.queue.writeBuffer(this.boneTransformBuffer, 0, transforms.buffer as ArrayBuffer, 0, transforms.byteLength);
+  }
+
+  updateInverseBindMatrices(matrices: Float32Array): void {
+    if (!this.inverseBindBuffer || !this.device) return;
+    this.device.queue.writeBuffer(this.inverseBindBuffer, 0, matrices.buffer as ArrayBuffer, 0, matrices.byteLength);
+  }
+
+  updateBoneCount(count: number): void {
+    if (!this.boneCountBuffer || !this.device) return;
+    const buf = new Uint32Array([count]);
+    this.device.queue.writeBuffer(this.boneCountBuffer, 0, buf.buffer as ArrayBuffer, 0, buf.byteLength);
+  }
+
+  getBoneTransformBuffer(): GPUBuffer | null { return this.boneTransformBuffer; }
+  getInverseBindBuffer(): GPUBuffer | null { return this.inverseBindBuffer; }
+  getBoneCountBuffer(): GPUBuffer | null { return this.boneCountBuffer; }
+
+  destroy(): void {
+    this.boneTransformBuffer?.destroy();
+    this.inverseBindBuffer?.destroy();
+    this.boneCountBuffer?.destroy();
+    this.boneTransformBuffer = null;
+    this.inverseBindBuffer = null;
+    this.boneCountBuffer = null;
+  }
+}