@nice2dev/game-engine 1.0.5 → 1.0.11

package/dist/esm/performance/WebGPURenderer.js

@@ -0,0 +1,697 @@
+/**
+ * @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
+// ============================================================
+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,
+        };
+    }
+    // ─── 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;
+        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 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',
+            },
+        };
+        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,
+        };
+        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,
+        };
+    }
+    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;
+    }
+}
+// ============================================================
+// Factory Functions
+// ============================================================
+function createWebGPURenderer() {
+    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,
+    };
+}
+async function isWebGPUSupported() {
+    if (!navigator.gpu) {
+        return false;
+    }
+    try {
+        const adapter = await navigator.gpu.requestAdapter();
+        return adapter !== null;
+    }
+    catch {
+        return false;
+    }
+}
+
+export { WebGPURenderer, createPipelineDescriptor, createWebGPURenderer, isWebGPUSupported };
+//# sourceMappingURL=WebGPURenderer.js.map