@nice2dev/game-engine 1.3.15 → 1.3.17

package/dist/cjs/performance/WebGPURenderer.js

@@ -1,701 +1,674 @@
-'use strict';
-
-/// <reference types="@webgpu/types" />
-/**
- * @file WebGPURenderer.ts
- * @description Next-gen rendering backend using WebGPU
- * PRO-1.5: Runtime & Performance
- *
- * Features:
- * - WebGPU initialization
- * - Render pipeline management
- * - Shader compilation
- * - Buffer management
- * - Texture handling
- * - Compute shaders
- * - Multi-pass rendering
- * - Instanced rendering
- * - Bindless resources
- */
-// ============================================================
-// WebGPU Renderer
-// ============================================================
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 class WebGPURenderer {
-    constructor() {
-        this.adapter = null;
-        this.device = null;
-        this.context = null;
-        this.canvas = null;
-        // Resources
-        this.renderPipelines = new Map();
-        this.computePipelines = new Map();
-        this.buffers = new Map();
-        this.textures = new Map();
-        this.textureViews = new Map();
-        this.samplers = new Map();
-        this.shaderModules = new Map();
-        this.bindGroupLayouts = new Map();
-        this.pipelineLayouts = new Map();
-        // Rendering state
-        this.currentEncoder = null;
-        this.currentRenderPass = null;
-        this.currentComputePass = null;
-        // Stats
-        this.stats = {
-            drawCalls: 0,
-            triangles: 0,
-            instances: 0,
-            bufferUploads: 0,
-            textureUploads: 0,
-            pipelineSwitches: 0,
-            bindGroupSwitches: 0,
-            frameTime: 0,
-        };
+  constructor() {
+    this.adapter = null;
+    this.device = null;
+    this.context = null;
+    this.canvas = null;
+    this.renderPipelines = /* @__PURE__ */ new Map();
+    this.computePipelines = /* @__PURE__ */ new Map();
+    this.buffers = /* @__PURE__ */ new Map();
+    this.textures = /* @__PURE__ */ new Map();
+    this.textureViews = /* @__PURE__ */ new Map();
+    this.samplers = /* @__PURE__ */ new Map();
+    this.shaderModules = /* @__PURE__ */ new Map();
+    this.bindGroupLayouts = /* @__PURE__ */ new Map();
+    this.pipelineLayouts = /* @__PURE__ */ new Map();
+    this.currentEncoder = null;
+    this.currentRenderPass = null;
+    this.currentComputePass = null;
+    this.stats = {
+      drawCalls: 0,
+      triangles: 0,
+      instances: 0,
+      bufferUploads: 0,
+      textureUploads: 0,
+      pipelineSwitches: 0,
+      bindGroupSwitches: 0,
+      frameTime: 0
+    };
+  }
+  // ─── Initialization ────────────────────────────────────
+  async initialize(canvas) {
+    if (!navigator.gpu) {
+      this.onError?.(new Error("WebGPU not supported"));
+      return false;
     }
-    // ─── Initialization ────────────────────────────────────
-    async initialize(canvas) {
-        if (!navigator.gpu) {
-            this.onError?.(new Error('WebGPU not supported'));
-            return false;
-        }
-        try {
-            this.adapter = await navigator.gpu.requestAdapter({
-                powerPreference: 'high-performance',
-            });
-            if (!this.adapter) {
-                this.onError?.(new Error('Failed to get GPU adapter'));
-                return false;
-            }
-            this.device = await this.adapter.requestDevice({
-                requiredFeatures: this.getRequiredFeatures(),
-                requiredLimits: this.getRequiredLimits(),
-            });
-            this.device.lost.then(() => {
-                this.onDeviceLost?.();
-            });
-            this.context = canvas.getContext('webgpu');
-            if (!this.context) {
-                this.onError?.(new Error('Failed to get WebGPU context'));
-                return false;
-            }
-            const preferredFormat = navigator.gpu.getPreferredCanvasFormat();
-            this.context.configure({
-                device: this.device,
-                format: preferredFormat,
-                alphaMode: 'premultiplied',
-            });
-            this.canvas = canvas;
-            return true;
-        }
-        catch (error) {
-            this.onError?.(error);
-            return false;
-        }
-    }
-    getRequiredFeatures() {
-        const features = [];
-        // Add features as needed
-        return features;
-    }
-    getRequiredLimits() {
-        return {};
-    }
-    isInitialized() {
-        return this.device !== null && this.context !== null;
-    }
-    getCapabilities() {
-        if (!this.adapter || !this.device) {
-            return null;
-        }
-        const limits = this.device.limits;
+    try {
+      this.adapter = await navigator.gpu.requestAdapter({
+        powerPreference: "high-performance"
+      });
+      if (!this.adapter) {
+        this.onError?.(new Error("Failed to get GPU adapter"));
+        return false;
+      }
+      this.device = await this.adapter.requestDevice({
+        requiredFeatures: this.getRequiredFeatures(),
+        requiredLimits: this.getRequiredLimits()
+      });
+      this.device.lost.then(() => {
+        this.onDeviceLost?.();
+      });
+      this.context = canvas.getContext("webgpu");
+      if (!this.context) {
+        this.onError?.(new Error("Failed to get WebGPU context"));
+        return false;
+      }
+      const preferredFormat = navigator.gpu.getPreferredCanvasFormat();
+      this.context.configure({
+        device: this.device,
+        format: preferredFormat,
+        alphaMode: "premultiplied"
+      });
+      this.canvas = canvas;
+      return true;
+    } catch (error) {
+      this.onError?.(error);
+      return false;
+    }
+  }
+  getRequiredFeatures() {
+    const features = [];
+    return features;
+  }
+  getRequiredLimits() {
+    return {};
+  }
+  isInitialized() {
+    return this.device !== null && this.context !== null;
+  }
+  getCapabilities() {
+    if (!this.adapter || !this.device) {
+      return null;
+    }
+    const limits = this.device.limits;
+    return {
+      maxTextureSize: limits.maxTextureDimension2D,
+      maxBufferSize: limits.maxBufferSize,
+      maxBindGroups: limits.maxBindGroups,
+      maxSamplers: limits.maxSamplersPerShaderStage,
+      maxVertexBuffers: limits.maxVertexBuffers,
+      maxVertexAttributes: limits.maxVertexAttributes,
+      maxComputeWorkgroupSize: [
+        limits.maxComputeWorkgroupSizeX,
+        limits.maxComputeWorkgroupSizeY,
+        limits.maxComputeWorkgroupSizeZ
+      ],
+      supportsTimestampQuery: this.device.features.has("timestamp-query"),
+      supportsIndirectFirstInstance: this.device.features.has("indirect-first-instance")
+    };
+  }
+  // ─── Shader Management ─────────────────────────────────
+  createShaderModule(id, code) {
+    if (!this.device) {
+      return null;
+    }
+    const module2 = this.device.createShaderModule({
+      code,
+      label: id
+    });
+    this.shaderModules.set(id, module2);
+    return module2;
+  }
+  getShaderModule(id) {
+    return this.shaderModules.get(id);
+  }
+  // ─── Pipeline Management ───────────────────────────────
+  createRenderPipeline(descriptor) {
+    if (!this.device) {
+      return null;
+    }
+    let vertexModule = this.shaderModules.get(`${descriptor.id}_vertex`);
+    if (!vertexModule) {
+      vertexModule = this.createShaderModule(`${descriptor.id}_vertex`, descriptor.vertex.code) ?? void 0;
+    }
+    if (!vertexModule) {
+      return null;
+    }
+    let fragmentModule;
+    if (descriptor.fragment) {
+      fragmentModule = this.shaderModules.get(`${descriptor.id}_fragment`);
+      if (!fragmentModule) {
+        fragmentModule = this.createShaderModule(`${descriptor.id}_fragment`, descriptor.fragment.code) ?? void 0;
+      }
+    }
+    const vertexBuffers = descriptor.vertexLayout.map((layout) => ({
+      arrayStride: layout.stride,
+      stepMode: layout.stepMode,
+      attributes: layout.attributes.map((attr) => ({
+        format: attr.format,
+        offset: attr.offset,
+        shaderLocation: attr.shaderLocation
+      }))
+    }));
+    let blend;
+    if (descriptor.blend && descriptor.blend !== "none") {
+      blend = this.getBlendState(descriptor.blend);
+    }
+    const pipelineDescriptor = {
+      label: descriptor.id,
+      layout: "auto",
+      vertex: {
+        module: vertexModule,
+        entryPoint: descriptor.vertex.entryPoint,
+        buffers: vertexBuffers
+      },
+      primitive: {
+        topology: descriptor.primitive.topology,
+        cullMode: descriptor.primitive.cullMode,
+        frontFace: descriptor.primitive.frontFace ?? "ccw"
+      }
+    };
+    if (fragmentModule && descriptor.fragment) {
+      pipelineDescriptor.fragment = {
+        module: fragmentModule,
+        entryPoint: descriptor.fragment.entryPoint,
+        targets: [
+          {
+            format: descriptor.colorFormat,
+            blend
+          }
+        ]
+      };
+    }
+    if (descriptor.depthStencil) {
+      pipelineDescriptor.depthStencil = {
+        format: descriptor.depthStencil.format,
+        depthWriteEnabled: descriptor.depthStencil.depthWrite,
+        depthCompare: descriptor.depthStencil.depthCompare
+      };
+    }
+    if (descriptor.multisample && descriptor.multisample > 1) {
+      pipelineDescriptor.multisample = {
+        count: descriptor.multisample
+      };
+    }
+    const pipeline = this.device.createRenderPipeline(pipelineDescriptor);
+    this.renderPipelines.set(descriptor.id, pipeline);
+    return pipeline;
+  }
+  getBlendState(mode) {
+    switch (mode) {
+      case "alpha":
         return {
-            maxTextureSize: limits.maxTextureDimension2D,
-            maxBufferSize: limits.maxBufferSize,
-            maxBindGroups: limits.maxBindGroups,
-            maxSamplers: limits.maxSamplersPerShaderStage,
-            maxVertexBuffers: limits.maxVertexBuffers,
-            maxVertexAttributes: limits.maxVertexAttributes,
-            maxComputeWorkgroupSize: [
-                limits.maxComputeWorkgroupSizeX,
-                limits.maxComputeWorkgroupSizeY,
-                limits.maxComputeWorkgroupSizeZ,
-            ],
-            supportsTimestampQuery: this.device.features.has('timestamp-query'),
-            supportsIndirectFirstInstance: this.device.features.has('indirect-first-instance'),
+          color: {
+            srcFactor: "src-alpha",
+            dstFactor: "one-minus-src-alpha",
+            operation: "add"
+          },
+          alpha: {
+            srcFactor: "one",
+            dstFactor: "one-minus-src-alpha",
+            operation: "add"
+          }
         };
-    }
-    // ─── Shader Management ─────────────────────────────────
-    createShaderModule(id, code) {
-        if (!this.device) {
-            return null;
-        }
-        const module = this.device.createShaderModule({
-            code,
-            label: id,
-        });
-        this.shaderModules.set(id, module);
-        return module;
-    }
-    getShaderModule(id) {
-        return this.shaderModules.get(id);
-    }
-    // ─── Pipeline Management ───────────────────────────────
-    createRenderPipeline(descriptor) {
-        if (!this.device) {
-            return null;
-        }
-        // Create or get shader modules
-        let vertexModule = this.shaderModules.get(`${descriptor.id}_vertex`);
-        if (!vertexModule) {
-            vertexModule =
-                this.createShaderModule(`${descriptor.id}_vertex`, descriptor.vertex.code) ?? undefined;
-        }
-        if (!vertexModule) {
-            return null;
-        }
-        let fragmentModule;
-        if (descriptor.fragment) {
-            fragmentModule = this.shaderModules.get(`${descriptor.id}_fragment`);
-            if (!fragmentModule) {
-                fragmentModule =
-                    this.createShaderModule(`${descriptor.id}_fragment`, descriptor.fragment.code) ??
-                        undefined;
-            }
-        }
-        // Build vertex buffers
-        const vertexBuffers = descriptor.vertexLayout.map((layout) => ({
-            arrayStride: layout.stride,
-            stepMode: layout.stepMode,
-            attributes: layout.attributes.map((attr) => ({
-                format: attr.format,
-                offset: attr.offset,
-                shaderLocation: attr.shaderLocation,
-            })),
-        }));
-        // Build blend state
-        let blend;
-        if (descriptor.blend && descriptor.blend !== 'none') {
-            blend = this.getBlendState(descriptor.blend);
-        }
-        const pipelineDescriptor = {
-            label: descriptor.id,
-            layout: 'auto',
-            vertex: {
-                module: vertexModule,
-                entryPoint: descriptor.vertex.entryPoint,
-                buffers: vertexBuffers,
-            },
-            primitive: {
-                topology: descriptor.primitive.topology,
-                cullMode: descriptor.primitive.cullMode,
-                frontFace: descriptor.primitive.frontFace ?? 'ccw',
-            },
+      case "additive":
+        return {
+          color: {
+            srcFactor: "src-alpha",
+            dstFactor: "one",
+            operation: "add"
+          },
+          alpha: {
+            srcFactor: "one",
+            dstFactor: "one",
+            operation: "add"
+          }
         };
-        if (fragmentModule && descriptor.fragment) {
-            pipelineDescriptor.fragment = {
-                module: fragmentModule,
-                entryPoint: descriptor.fragment.entryPoint,
-                targets: [
-                    {
-                        format: descriptor.colorFormat,
-                        blend,
-                    },
-                ],
-            };
-        }
-        if (descriptor.depthStencil) {
-            pipelineDescriptor.depthStencil = {
-                format: descriptor.depthStencil.format,
-                depthWriteEnabled: descriptor.depthStencil.depthWrite,
-                depthCompare: descriptor.depthStencil.depthCompare,
-            };
-        }
-        if (descriptor.multisample && descriptor.multisample > 1) {
-            pipelineDescriptor.multisample = {
-                count: descriptor.multisample,
-            };
-        }
-        const pipeline = this.device.createRenderPipeline(pipelineDescriptor);
-        this.renderPipelines.set(descriptor.id, pipeline);
-        return pipeline;
-    }
-    getBlendState(mode) {
-        switch (mode) {
-            case 'alpha':
-                return {
-                    color: {
-                        srcFactor: 'src-alpha',
-                        dstFactor: 'one-minus-src-alpha',
-                        operation: 'add',
-                    },
-                    alpha: {
-                        srcFactor: 'one',
-                        dstFactor: 'one-minus-src-alpha',
-                        operation: 'add',
-                    },
-                };
-            case 'additive':
-                return {
-                    color: {
-                        srcFactor: 'src-alpha',
-                        dstFactor: 'one',
-                        operation: 'add',
-                    },
-                    alpha: {
-                        srcFactor: 'one',
-                        dstFactor: 'one',
-                        operation: 'add',
-                    },
-                };
-            case 'multiply':
-                return {
-                    color: {
-                        srcFactor: 'dst',
-                        dstFactor: 'zero',
-                        operation: 'add',
-                    },
-                    alpha: {
-                        srcFactor: 'dst-alpha',
-                        dstFactor: 'zero',
-                        operation: 'add',
-                    },
-                };
-            case 'screen':
-                return {
-                    color: {
-                        srcFactor: 'one',
-                        dstFactor: 'one-minus-src',
-                        operation: 'add',
-                    },
-                    alpha: {
-                        srcFactor: 'one',
-                        dstFactor: 'one-minus-src-alpha',
-                        operation: 'add',
-                    },
-                };
-            default:
-                return {
-                    color: { srcFactor: 'one', dstFactor: 'zero', operation: 'add' },
-                    alpha: { srcFactor: 'one', dstFactor: 'zero', operation: 'add' },
-                };
-        }
-    }
-    createComputePipeline(descriptor) {
-        if (!this.device) {
-            return null;
-        }
-        let shaderModule = this.shaderModules.get(`${descriptor.id}_compute`);
-        if (!shaderModule) {
-            shaderModule =
-                this.createShaderModule(`${descriptor.id}_compute`, descriptor.shader.code) ?? undefined;
-        }
-        if (!shaderModule) {
-            return null;
-        }
-        const pipeline = this.device.createComputePipeline({
-            label: descriptor.id,
-            layout: 'auto',
-            compute: {
-                module: shaderModule,
-                entryPoint: descriptor.shader.entryPoint,
-            },
-        });
-        this.computePipelines.set(descriptor.id, pipeline);
-        return pipeline;
-    }
-    getRenderPipeline(id) {
-        return this.renderPipelines.get(id);
-    }
-    getComputePipeline(id) {
-        return this.computePipelines.get(id);
-    }
-    // ─── Buffer Management ─────────────────────────────────
-    createBuffer(descriptor) {
-        if (!this.device) {
-            return null;
-        }
-        let usage = 0;
-        for (const u of descriptor.usage) {
-            switch (u) {
-                case 'vertex':
-                    usage |= GPUBufferUsage.VERTEX;
-                    break;
-                case 'index':
-                    usage |= GPUBufferUsage.INDEX;
-                    break;
-                case 'uniform':
-                    usage |= GPUBufferUsage.UNIFORM;
-                    break;
-                case 'storage':
-                    usage |= GPUBufferUsage.STORAGE;
-                    break;
-                case 'indirect':
-                    usage |= GPUBufferUsage.INDIRECT;
-                    break;
-                case 'query':
-                    usage |= GPUBufferUsage.QUERY_RESOLVE;
-                    break;
-            }
-        }
-        usage |= GPUBufferUsage.COPY_DST;
-        const buffer = this.device.createBuffer({
-            label: descriptor.id,
-            size: descriptor.size,
-            usage,
-            mappedAtCreation: descriptor.mappedAtCreation ?? false,
-        });
-        this.buffers.set(descriptor.id, buffer);
-        return buffer;
-    }
-    writeBuffer(id, data, offset = 0) {
-        if (!this.device) {
-            return false;
-        }
-        const buffer = this.buffers.get(id);
-        if (!buffer) {
-            return false;
-        }
-        this.device.queue.writeBuffer(buffer, offset, data);
-        this.stats.bufferUploads++;
-        return true;
-    }
-    getBuffer(id) {
-        return this.buffers.get(id);
-    }
-    destroyBuffer(id) {
-        const buffer = this.buffers.get(id);
-        if (buffer) {
-            buffer.destroy();
-            this.buffers.delete(id);
-        }
-    }
-    // ─── Texture Management ────────────────────────────────
-    createTexture(descriptor) {
-        if (!this.device) {
-            return null;
-        }
-        let usage = 0;
-        for (const u of descriptor.usage) {
-            switch (u) {
-                case 'sampled':
-                    usage |= GPUTextureUsage.TEXTURE_BINDING;
-                    break;
-                case 'storage':
-                    usage |= GPUTextureUsage.STORAGE_BINDING;
-                    break;
-                case 'render_target':
-                    usage |= GPUTextureUsage.RENDER_ATTACHMENT;
-                    break;
-                case 'copy_src':
-                    usage |= GPUTextureUsage.COPY_SRC;
-                    break;
-                case 'copy_dst':
-                    usage |= GPUTextureUsage.COPY_DST;
-                    break;
-            }
-        }
-        const texture = this.device.createTexture({
-            label: descriptor.id,
-            size: {
-                width: descriptor.width,
-                height: descriptor.height,
-                depthOrArrayLayers: descriptor.depth ?? 1,
-            },
-            format: descriptor.format,
-            usage,
-            mipLevelCount: descriptor.mipLevels ?? 1,
-            sampleCount: descriptor.samples ?? 1,
-        });
-        this.textures.set(descriptor.id, texture);
-        this.textureViews.set(descriptor.id, texture.createView());
-        return texture;
-    }
-    writeTexture(id, data, width, height, bytesPerRow) {
-        if (!this.device) {
-            return false;
-        }
-        const texture = this.textures.get(id);
-        if (!texture) {
-            return false;
-        }
-        this.device.queue.writeTexture({ texture }, data, { bytesPerRow: bytesPerRow ?? width * 4, rowsPerImage: height }, { width, height });
-        this.stats.textureUploads++;
-        return true;
-    }
-    getTexture(id) {
-        return this.textures.get(id);
-    }
-    getTextureView(id) {
-        return this.textureViews.get(id);
-    }
-    destroyTexture(id) {
-        const texture = this.textures.get(id);
-        if (texture) {
-            texture.destroy();
-            this.textures.delete(id);
-            this.textureViews.delete(id);
-        }
-    }
-    // ─── Sampler Management ────────────────────────────────
-    createSampler(id, options = {}) {
-        if (!this.device) {
-            return null;
-        }
-        const sampler = this.device.createSampler({
-            label: id,
-            addressModeU: options.addressModeU ?? 'repeat',
-            addressModeV: options.addressModeV ?? 'repeat',
-            addressModeW: options.addressModeW ?? 'repeat',
-            magFilter: options.magFilter ?? 'linear',
-            minFilter: options.minFilter ?? 'linear',
-            mipmapFilter: options.mipmapFilter ?? 'linear',
-            maxAnisotropy: options.maxAnisotropy ?? 1,
-        });
-        this.samplers.set(id, sampler);
-        return sampler;
-    }
-    getSampler(id) {
-        return this.samplers.get(id);
-    }
-    // ─── Bind Group Management ─────────────────────────────
-    createBindGroup(pipeline, groupIndex, entries) {
-        if (!this.device) {
-            return null;
-        }
-        return this.device.createBindGroup({
-            layout: pipeline.getBindGroupLayout(groupIndex),
-            entries,
-        });
-    }
-    // ─── Rendering ─────────────────────────────────────────
-    beginFrame() {
-        if (!this.device) {
-            return null;
-        }
-        this.resetStats();
-        this.currentEncoder = this.device.createCommandEncoder();
-        return this.currentEncoder;
-    }
-    endFrame() {
-        if (!this.device || !this.currentEncoder) {
-            return;
-        }
-        this.device.queue.submit([this.currentEncoder.finish()]);
-        this.currentEncoder = null;
-    }
-    beginRenderPass(descriptor) {
-        if (!this.currentEncoder) {
-            return null;
-        }
-        const colorAttachments = descriptor.colorAttachments.map((att) => ({
-            view: att.view,
-            loadOp: att.loadOp,
-            storeOp: att.storeOp,
-            clearValue: att.clearColor
-                ? {
-                    r: att.clearColor[0],
-                    g: att.clearColor[1],
-                    b: att.clearColor[2],
-                    a: att.clearColor[3],
-                }
-                : undefined,
-        }));
-        const passDescriptor = {
-            colorAttachments,
+      case "multiply":
+        return {
+          color: {
+            srcFactor: "dst",
+            dstFactor: "zero",
+            operation: "add"
+          },
+          alpha: {
+            srcFactor: "dst-alpha",
+            dstFactor: "zero",
+            operation: "add"
+          }
         };
-        if (descriptor.depthStencilAttachment) {
-            passDescriptor.depthStencilAttachment = {
-                view: descriptor.depthStencilAttachment.view,
-                depthLoadOp: descriptor.depthStencilAttachment.depthLoadOp,
-                depthStoreOp: descriptor.depthStencilAttachment.depthStoreOp,
-                depthClearValue: descriptor.depthStencilAttachment.depthClearValue ?? 1.0,
-            };
-        }
-        this.currentRenderPass = this.currentEncoder.beginRenderPass(passDescriptor);
-        return this.currentRenderPass;
-    }
-    endRenderPass() {
-        if (this.currentRenderPass) {
-            this.currentRenderPass.end();
-            this.currentRenderPass = null;
-        }
-    }
-    draw(command) {
-        if (!this.currentRenderPass) {
-            return;
-        }
-        const pipeline = this.renderPipelines.get(command.pipeline);
-        if (!pipeline) {
-            return;
-        }
-        this.currentRenderPass.setPipeline(pipeline);
-        this.stats.pipelineSwitches++;
-        // Set vertex buffers
-        for (let i = 0; i < command.vertexBuffers.length; i++) {
-            const buffer = this.buffers.get(command.vertexBuffers[i]);
-            if (buffer) {
-                this.currentRenderPass.setVertexBuffer(i, buffer);
-            }
-        }
-        // Set index buffer
-        if (command.indexBuffer) {
-            const indexBuffer = this.buffers.get(command.indexBuffer);
-            if (indexBuffer) {
-                this.currentRenderPass.setIndexBuffer(indexBuffer, command.indexFormat ?? 'uint16');
-            }
-        }
-        // Set bind groups
-        for (let i = 0; i < command.bindGroups.length; i++) {
-            this.currentRenderPass.setBindGroup(i, command.bindGroups[i]);
-            this.stats.bindGroupSwitches++;
-        }
-        // Draw
-        if (command.indexBuffer && command.indexCount) {
-            this.currentRenderPass.drawIndexed(command.indexCount, command.instanceCount ?? 1, command.firstIndex ?? 0, 0, command.firstInstance ?? 0);
-            this.stats.triangles += (command.indexCount / 3) * (command.instanceCount ?? 1);
-        }
-        else if (command.vertexCount) {
-            this.currentRenderPass.draw(command.vertexCount, command.instanceCount ?? 1, command.firstVertex ?? 0, command.firstInstance ?? 0);
-            this.stats.triangles += (command.vertexCount / 3) * (command.instanceCount ?? 1);
-        }
-        this.stats.drawCalls++;
-        this.stats.instances += command.instanceCount ?? 1;
-    }
-    // ─── Compute ───────────────────────────────────────────
-    beginComputePass() {
-        if (!this.currentEncoder) {
-            return null;
-        }
-        this.currentComputePass = this.currentEncoder.beginComputePass();
-        return this.currentComputePass;
-    }
-    endComputePass() {
-        if (this.currentComputePass) {
-            this.currentComputePass.end();
-            this.currentComputePass = null;
-        }
-    }
-    dispatch(command) {
-        if (!this.currentComputePass) {
-            return;
-        }
-        const pipeline = this.computePipelines.get(command.pipeline);
-        if (!pipeline) {
-            return;
-        }
-        this.currentComputePass.setPipeline(pipeline);
-        for (let i = 0; i < command.bindGroups.length; i++) {
-            this.currentComputePass.setBindGroup(i, command.bindGroups[i]);
-        }
-        this.currentComputePass.dispatchWorkgroups(...command.workgroups);
-    }
-    // ─── Canvas ────────────────────────────────────────────
-    getCurrentTexture() {
-        return this.context?.getCurrentTexture() ?? null;
-    }
-    getCurrentTextureView() {
-        return this.context?.getCurrentTexture().createView() ?? null;
-    }
-    getCanvasSize() {
-        if (!this.canvas) {
-            return null;
-        }
-        return { width: this.canvas.width, height: this.canvas.height };
-    }
-    resize(width, height) {
-        if (this.canvas) {
-            this.canvas.width = width;
-            this.canvas.height = height;
-        }
-    }
-    // ─── Stats ─────────────────────────────────────────────
-    resetStats() {
-        this.stats = {
-            drawCalls: 0,
-            triangles: 0,
-            instances: 0,
-            bufferUploads: 0,
-            textureUploads: 0,
-            pipelineSwitches: 0,
-            bindGroupSwitches: 0,
-            frameTime: 0,
+      case "screen":
+        return {
+          color: {
+            srcFactor: "one",
+            dstFactor: "one-minus-src",
+            operation: "add"
+          },
+          alpha: {
+            srcFactor: "one",
+            dstFactor: "one-minus-src-alpha",
+            operation: "add"
+          }
+        };
+      default:
+        return {
+          color: { srcFactor: "one", dstFactor: "zero", operation: "add" },
+          alpha: { srcFactor: "one", dstFactor: "zero", operation: "add" }
         };
     }
-    getStats() {
-        return { ...this.stats };
-    }
-    // ─── Cleanup ───────────────────────────────────────────
-    destroy() {
-        // Destroy all resources
-        for (const buffer of this.buffers.values()) {
-            buffer.destroy();
-        }
-        this.buffers.clear();
-        for (const texture of this.textures.values()) {
-            texture.destroy();
-        }
-        this.textures.clear();
-        this.textureViews.clear();
-        this.renderPipelines.clear();
-        this.computePipelines.clear();
-        this.shaderModules.clear();
-        this.samplers.clear();
-        this.device?.destroy();
-        this.device = null;
-        this.adapter = null;
-        this.context = null;
-    }
-    // ─── Callbacks ─────────────────────────────────────────
-    setOnError(callback) {
-        this.onError = callback;
-    }
-    setOnDeviceLost(callback) {
-        this.onDeviceLost = callback;
-    }
+  }
+  createComputePipeline(descriptor) {
+    if (!this.device) {
+      return null;
+    }
+    let shaderModule = this.shaderModules.get(`${descriptor.id}_compute`);
+    if (!shaderModule) {
+      shaderModule = this.createShaderModule(`${descriptor.id}_compute`, descriptor.shader.code) ?? void 0;
+    }
+    if (!shaderModule) {
+      return null;
+    }
+    const pipeline = this.device.createComputePipeline({
+      label: descriptor.id,
+      layout: "auto",
+      compute: {
+        module: shaderModule,
+        entryPoint: descriptor.shader.entryPoint
+      }
+    });
+    this.computePipelines.set(descriptor.id, pipeline);
+    return pipeline;
+  }
+  getRenderPipeline(id) {
+    return this.renderPipelines.get(id);
+  }
+  getComputePipeline(id) {
+    return this.computePipelines.get(id);
+  }
+  // ─── Buffer Management ─────────────────────────────────
+  createBuffer(descriptor) {
+    if (!this.device) {
+      return null;
+    }
+    let usage = 0;
+    for (const u of descriptor.usage) {
+      switch (u) {
+        case "vertex":
+          usage |= GPUBufferUsage.VERTEX;
+          break;
+        case "index":
+          usage |= GPUBufferUsage.INDEX;
+          break;
+        case "uniform":
+          usage |= GPUBufferUsage.UNIFORM;
+          break;
+        case "storage":
+          usage |= GPUBufferUsage.STORAGE;
+          break;
+        case "indirect":
+          usage |= GPUBufferUsage.INDIRECT;
+          break;
+        case "query":
+          usage |= GPUBufferUsage.QUERY_RESOLVE;
+          break;
+      }
+    }
+    usage |= GPUBufferUsage.COPY_DST;
+    const buffer = this.device.createBuffer({
+      label: descriptor.id,
+      size: descriptor.size,
+      usage,
+      mappedAtCreation: descriptor.mappedAtCreation ?? false
+    });
+    this.buffers.set(descriptor.id, buffer);
+    return buffer;
+  }
+  writeBuffer(id, data, offset = 0) {
+    if (!this.device) {
+      return false;
+    }
+    const buffer = this.buffers.get(id);
+    if (!buffer) {
+      return false;
+    }
+    this.device.queue.writeBuffer(buffer, offset, data);
+    this.stats.bufferUploads++;
+    return true;
+  }
+  getBuffer(id) {
+    return this.buffers.get(id);
+  }
+  destroyBuffer(id) {
+    const buffer = this.buffers.get(id);
+    if (buffer) {
+      buffer.destroy();
+      this.buffers.delete(id);
+    }
+  }
+  // ─── Texture Management ────────────────────────────────
+  createTexture(descriptor) {
+    if (!this.device) {
+      return null;
+    }
+    let usage = 0;
+    for (const u of descriptor.usage) {
+      switch (u) {
+        case "sampled":
+          usage |= GPUTextureUsage.TEXTURE_BINDING;
+          break;
+        case "storage":
+          usage |= GPUTextureUsage.STORAGE_BINDING;
+          break;
+        case "render_target":
+          usage |= GPUTextureUsage.RENDER_ATTACHMENT;
+          break;
+        case "copy_src":
+          usage |= GPUTextureUsage.COPY_SRC;
+          break;
+        case "copy_dst":
+          usage |= GPUTextureUsage.COPY_DST;
+          break;
+      }
+    }
+    const texture = this.device.createTexture({
+      label: descriptor.id,
+      size: {
+        width: descriptor.width,
+        height: descriptor.height,
+        depthOrArrayLayers: descriptor.depth ?? 1
+      },
+      format: descriptor.format,
+      usage,
+      mipLevelCount: descriptor.mipLevels ?? 1,
+      sampleCount: descriptor.samples ?? 1
+    });
+    this.textures.set(descriptor.id, texture);
+    this.textureViews.set(descriptor.id, texture.createView());
+    return texture;
+  }
+  writeTexture(id, data, width, height, bytesPerRow) {
+    if (!this.device) {
+      return false;
+    }
+    const texture = this.textures.get(id);
+    if (!texture) {
+      return false;
+    }
+    this.device.queue.writeTexture(
+      { texture },
+      data,
+      { bytesPerRow: bytesPerRow ?? width * 4, rowsPerImage: height },
+      { width, height }
+    );
+    this.stats.textureUploads++;
+    return true;
+  }
+  getTexture(id) {
+    return this.textures.get(id);
+  }
+  getTextureView(id) {
+    return this.textureViews.get(id);
+  }
+  destroyTexture(id) {
+    const texture = this.textures.get(id);
+    if (texture) {
+      texture.destroy();
+      this.textures.delete(id);
+      this.textureViews.delete(id);
+    }
+  }
+  // ─── Sampler Management ────────────────────────────────
+  createSampler(id, options = {}) {
+    if (!this.device) {
+      return null;
+    }
+    const sampler = this.device.createSampler({
+      label: id,
+      addressModeU: options.addressModeU ?? "repeat",
+      addressModeV: options.addressModeV ?? "repeat",
+      addressModeW: options.addressModeW ?? "repeat",
+      magFilter: options.magFilter ?? "linear",
+      minFilter: options.minFilter ?? "linear",
+      mipmapFilter: options.mipmapFilter ?? "linear",
+      maxAnisotropy: options.maxAnisotropy ?? 1
+    });
+    this.samplers.set(id, sampler);
+    return sampler;
+  }
+  getSampler(id) {
+    return this.samplers.get(id);
+  }
+  // ─── Bind Group Management ─────────────────────────────
+  createBindGroup(pipeline, groupIndex, entries) {
+    if (!this.device) {
+      return null;
+    }
+    return this.device.createBindGroup({
+      layout: pipeline.getBindGroupLayout(groupIndex),
+      entries
+    });
+  }
+  // ─── Rendering ─────────────────────────────────────────
+  beginFrame() {
+    if (!this.device) {
+      return null;
+    }
+    this.resetStats();
+    this.currentEncoder = this.device.createCommandEncoder();
+    return this.currentEncoder;
+  }
+  endFrame() {
+    if (!this.device || !this.currentEncoder) {
+      return;
+    }
+    this.device.queue.submit([this.currentEncoder.finish()]);
+    this.currentEncoder = null;
+  }
+  beginRenderPass(descriptor) {
+    if (!this.currentEncoder) {
+      return null;
+    }
+    const colorAttachments = descriptor.colorAttachments.map(
+      (att) => ({
+        view: att.view,
+        loadOp: att.loadOp,
+        storeOp: att.storeOp,
+        clearValue: att.clearColor ? {
+          r: att.clearColor[0],
+          g: att.clearColor[1],
+          b: att.clearColor[2],
+          a: att.clearColor[3]
+        } : void 0
+      })
+    );
+    const passDescriptor = {
+      colorAttachments
+    };
+    if (descriptor.depthStencilAttachment) {
+      passDescriptor.depthStencilAttachment = {
+        view: descriptor.depthStencilAttachment.view,
+        depthLoadOp: descriptor.depthStencilAttachment.depthLoadOp,
+        depthStoreOp: descriptor.depthStencilAttachment.depthStoreOp,
+        depthClearValue: descriptor.depthStencilAttachment.depthClearValue ?? 1
+      };
+    }
+    this.currentRenderPass = this.currentEncoder.beginRenderPass(passDescriptor);
+    return this.currentRenderPass;
+  }
+  endRenderPass() {
+    if (this.currentRenderPass) {
+      this.currentRenderPass.end();
+      this.currentRenderPass = null;
+    }
+  }
+  draw(command) {
+    if (!this.currentRenderPass) {
+      return;
+    }
+    const pipeline = this.renderPipelines.get(command.pipeline);
+    if (!pipeline) {
+      return;
+    }
+    this.currentRenderPass.setPipeline(pipeline);
+    this.stats.pipelineSwitches++;
+    for (let i = 0; i < command.vertexBuffers.length; i++) {
+      const buffer = this.buffers.get(command.vertexBuffers[i]);
+      if (buffer) {
+        this.currentRenderPass.setVertexBuffer(i, buffer);
+      }
+    }
+    if (command.indexBuffer) {
+      const indexBuffer = this.buffers.get(command.indexBuffer);
+      if (indexBuffer) {
+        this.currentRenderPass.setIndexBuffer(indexBuffer, command.indexFormat ?? "uint16");
+      }
+    }
+    for (let i = 0; i < command.bindGroups.length; i++) {
+      this.currentRenderPass.setBindGroup(i, command.bindGroups[i]);
+      this.stats.bindGroupSwitches++;
+    }
+    if (command.indexBuffer && command.indexCount) {
+      this.currentRenderPass.drawIndexed(
+        command.indexCount,
+        command.instanceCount ?? 1,
+        command.firstIndex ?? 0,
+        0,
+        command.firstInstance ?? 0
+      );
+      this.stats.triangles += command.indexCount / 3 * (command.instanceCount ?? 1);
+    } else if (command.vertexCount) {
+      this.currentRenderPass.draw(
+        command.vertexCount,
+        command.instanceCount ?? 1,
+        command.firstVertex ?? 0,
+        command.firstInstance ?? 0
+      );
+      this.stats.triangles += command.vertexCount / 3 * (command.instanceCount ?? 1);
+    }
+    this.stats.drawCalls++;
+    this.stats.instances += command.instanceCount ?? 1;
+  }
+  // ─── Compute ───────────────────────────────────────────
+  beginComputePass() {
+    if (!this.currentEncoder) {
+      return null;
+    }
+    this.currentComputePass = this.currentEncoder.beginComputePass();
+    return this.currentComputePass;
+  }
+  endComputePass() {
+    if (this.currentComputePass) {
+      this.currentComputePass.end();
+      this.currentComputePass = null;
+    }
+  }
+  dispatch(command) {
+    if (!this.currentComputePass) {
+      return;
+    }
+    const pipeline = this.computePipelines.get(command.pipeline);
+    if (!pipeline) {
+      return;
+    }
+    this.currentComputePass.setPipeline(pipeline);
+    for (let i = 0; i < command.bindGroups.length; i++) {
+      this.currentComputePass.setBindGroup(i, command.bindGroups[i]);
+    }
+    this.currentComputePass.dispatchWorkgroups(...command.workgroups);
+  }
+  // ─── Canvas ────────────────────────────────────────────
+  getCurrentTexture() {
+    return this.context?.getCurrentTexture() ?? null;
+  }
+  getCurrentTextureView() {
+    return this.context?.getCurrentTexture().createView() ?? null;
+  }
+  getCanvasSize() {
+    if (!this.canvas) {
+      return null;
+    }
+    return { width: this.canvas.width, height: this.canvas.height };
+  }
+  resize(width, height) {
+    if (this.canvas) {
+      this.canvas.width = width;
+      this.canvas.height = height;
+    }
+  }
+  // ─── Stats ─────────────────────────────────────────────
+  resetStats() {
+    this.stats = {
+      drawCalls: 0,
+      triangles: 0,
+      instances: 0,
+      bufferUploads: 0,
+      textureUploads: 0,
+      pipelineSwitches: 0,
+      bindGroupSwitches: 0,
+      frameTime: 0
+    };
+  }
+  getStats() {
+    return { ...this.stats };
+  }
+  // ─── Cleanup ───────────────────────────────────────────
+  destroy() {
+    for (const buffer of this.buffers.values()) {
+      buffer.destroy();
+    }
+    this.buffers.clear();
+    for (const texture of this.textures.values()) {
+      texture.destroy();
+    }
+    this.textures.clear();
+    this.textureViews.clear();
+    this.renderPipelines.clear();
+    this.computePipelines.clear();
+    this.shaderModules.clear();
+    this.samplers.clear();
+    this.device?.destroy();
+    this.device = null;
+    this.adapter = null;
+    this.context = null;
+  }
+  // ─── Callbacks ─────────────────────────────────────────
+  setOnError(callback) {
+    this.onError = callback;
+  }
+  setOnDeviceLost(callback) {
+    this.onDeviceLost = callback;
+  }
 }
-// ============================================================
-// Factory Functions
-// ============================================================
 function createWebGPURenderer() {
-    return new WebGPURenderer();
+  return new WebGPURenderer();
 }
 function createPipelineDescriptor(id, vertexCode, fragmentCode, options = {}) {
-    return {
-        id,
-        vertex: {
-            code: vertexCode,
-            stage: 'vertex',
-            entryPoint: 'main',
-        },
-        fragment: {
-            code: fragmentCode,
-            stage: 'fragment',
-            entryPoint: 'main',
-        },
-        vertexLayout: options.vertexLayout ?? [],
-        primitive: options.primitive ?? {
-            topology: 'triangle-list',
-            cullMode: 'back',
-        },
-        colorFormat: options.colorFormat ?? 'rgba8unorm',
-        depthStencil: options.depthStencil,
-        blend: options.blend,
-        multisample: options.multisample,
-    };
+  return {
+    id,
+    vertex: {
+      code: vertexCode,
+      stage: "vertex",
+      entryPoint: "main"
+    },
+    fragment: {
+      code: fragmentCode,
+      stage: "fragment",
+      entryPoint: "main"
+    },
+    vertexLayout: options.vertexLayout ?? [],
+    primitive: options.primitive ?? {
+      topology: "triangle-list",
+      cullMode: "back"
+    },
+    colorFormat: options.colorFormat ?? "rgba8unorm",
+    depthStencil: options.depthStencil,
+    blend: options.blend,
+    multisample: options.multisample
+  };
 }
 async function isWebGPUSupported() {
-    if (!navigator.gpu) {
-        return false;
-    }
-    try {
-        const adapter = await navigator.gpu.requestAdapter();
-        return adapter !== null;
-    }
-    catch {
-        return false;
-    }
+  if (!navigator.gpu) {
+    return false;
+  }
+  try {
+    const adapter = await navigator.gpu.requestAdapter();
+    return adapter !== null;
+  } catch {
+    return false;
+  }
 }
-
 exports.WebGPURenderer = WebGPURenderer;
 exports.createPipelineDescriptor = createPipelineDescriptor;
 exports.createWebGPURenderer = createWebGPURenderer;