@codexo/exojs-particles 0.15.3 → 0.16.0

package/dist/esm/renderers/WebGpuParticleRenderer.js

@@ -1,557 +1,548 @@
-import { AbstractWebGpuRenderer, Texture, getWebGpuBlendState, stencilContentDepthStencilState } from '@codexo/exojs/renderer-sdk';
+import { assertVertexGeometryCompatible } from "../renderModes/ParticleBufferLayout.js";
+import { AbstractWebGpuRenderer, DataTexture, Texture, getWebGpuBlendState, stencilContentDepthStencilState } from "@codexo/exojs/renderer-sdk";
 
-/// <reference types="@webgpu/types" />
-const particleShaderSource = `
-struct ProjectionUniforms {
-    projection: mat4x4<f32>,
-    translation: mat4x4<f32>,
-    flags: vec4<f32>,
-    localBounds: vec4<f32>,    // quadMin.xy, quadSize.xy
-    uvBounds: vec4<f32>,       // uvMin.xy, uvMax.xy
+//#region src/renderers/WebGpuParticleRenderer.ts
+const uniformByteLength = 176;
+/**
+* Stride of one draw call's slot in the uniform ring. `setBindGroup`'s dynamic
+* offset must be a multiple of the device's `minUniformBufferOffsetAlignment`,
+* whose spec-mandated maximum is 256 - so a fixed 256 is valid on every device
+* and needs no limit query.
+*/
+const uniformSlotStride = 256;
+/**
+* WebGPU vertex formats by `<n?><type>x<size>` key, where the leading `n`
+* marks a normalised integer attribute. WebGPU has no 1- or 3-component 8/16-bit
+* formats, so those combinations are deliberately absent and reported as an
+* error rather than silently widened.
+*/
+const vertexFormatsByKey = {
+	f32x1: "float32",
+	f32x2: "float32x2",
+	f32x3: "float32x3",
+	f32x4: "float32x4",
+	u8x2: "uint8x2",
+	u8x4: "uint8x4",
+	nu8x2: "unorm8x2",
+	nu8x4: "unorm8x4",
+	u16x2: "uint16x2",
+	u16x4: "uint16x4",
+	nu16x2: "unorm16x2",
+	nu16x4: "unorm16x4",
+	u32x1: "uint32",
+	u32x2: "uint32x2",
+	u32x3: "uint32x3",
+	u32x4: "uint32x4",
+	i32x1: "sint32",
+	i32x2: "sint32x2",
+	i32x3: "sint32x3",
+	i32x4: "sint32x4"
 };
-
-@group(0) @binding(0)
-var<uniform> uniforms: ProjectionUniforms;
-
-@group(1) @binding(0)
-var particleTexture: texture_2d<f32>;
-
-@group(1) @binding(1)
-var particleSampler: sampler;
-
-// Per-instance attributes (one entry per particle, 40 bytes total).
-struct VertexInput {
-    @location(0) unitPosition: vec2<f32>,    // per-vertex (static unit quad)
-    @location(1) translation: vec2<f32>,
-    @location(2) scale: vec2<f32>,
-    @location(3) rotation: f32,
-    @location(4) color: vec4<f32>,
-    @location(5) uvMin: vec2<f32>,            // pre-resolved frame UV (top-left)
-    @location(6) uvMax: vec2<f32>,            // pre-resolved frame UV (bottom-right)
+const resolveVertexFormat = (attribute) => {
+	const normalized = attribute.normalized && attribute.type !== "f32";
+	const format = vertexFormatsByKey[`${normalized ? "n" : ""}${attribute.type}x${attribute.size}`];
+	if (format === void 0) throw new Error(`WebGpuParticleRenderer: attribute "${attribute.name}" (${attribute.type} x${attribute.size}) has no WebGPU vertex format.`);
+	return format;
 };
-
-struct VertexOutput {
-    @builtin(position) position: vec4<f32>,
-    @location(0) texcoord: vec2<f32>,
-    @location(1) color: vec4<f32>,
+/**
+* Particle renderer for WebGPU.
+*
+* One ParticleSystem = one draw call. The system's {@link ParticleRenderMode}
+* owns the *how* - vertex layout, shader, draw model and the loop that fills
+* the buffer - and this renderer is the executor: it holds the system-level
+* uniforms (projection, transform, local bounds, texture flags), uploads what
+* the mode built and issues the draw the mode declares.
+*
+* Everything mode-specific is read off the mode's `dataLayout`/`Material`
+* rather than hard-coded: the render pipeline's vertex layout comes from the
+* layout's attributes and stride, its shader from the material's WGSL, and the
+* draw is instanced or plain per `ParticleRenderMode.instanced`. A mode
+* declaring a `vertexGeometry` gets a second buffer stepping per vertex, and
+* that geometry supplies the topology and indices instead.
+*
+* WGSL binds vertex inputs by number rather than by name, and `GeometryAttribute`
+* carries no location, so the binding rule is positional: `@location(i)` is
+* `dataLayout.attributes[i]`, with any per-vertex attributes taking the
+* locations after them. This is the WebGPU counterpart of the WebGL2 renderer's
+* name lookup through the compiled program.
+*
+* A system running in GPU compute mode bypasses the mode's builder entirely:
+* its compute pipeline has already written the interleaved instance data
+* GPU-side, so that buffer is bound directly.
+*/
+var WebGpuParticleRenderer = class extends AbstractWebGpuRenderer {
+	/**
+	* The particle system's transform is bound as a uniform and each particle is
+	* positioned system-locally, so this renderer never reads the shared transform
+	* storage; the plan player skips writing transform records for particle draws.
+	* @internal
+	*/
+	_consumesSharedTransform = false;
+	_drawCalls = [];
+	_drawCallCount = 0;
+	_uniformData = new Float32Array(uniformByteLength / Float32Array.BYTES_PER_ELEMENT);
+	_device = null;
+	_uniformBindGroupLayout = null;
+	_textureBindGroupLayout = null;
+	_pipelineLayout = null;
+	_uniformBuffer = null;
+	_uniformBindGroup = null;
+	_uniformBufferCapacity = 0;
+	/**
+	* Slots of the uniform ring the open pass has consumed, and the pass they are
+	* scoped to. One draw call takes one slot; the base is added as the bind
+	* group's dynamic offset, so consecutive flushes append instead of all
+	* rewriting slot 0. Same identity-comparison rule as
+	* {@link ParticleModeResources.passRef}, one level up: the ring is shared by
+	* every mode this renderer draws.
+	*/
+	_uniformPassSlots = 0;
+	_ownDrawsPass = null;
+	_resources = /* @__PURE__ */ new Map();
+	/**
+	* Materials this renderer already registered a dispose listener on.
+	*
+	* `Material` has no unsubscribe, and a disconnect clears {@link _resources}
+	* without clearing the material's callback set - so registering on every
+	* resource creation would leave one dead closure per material behind on
+	* every device-loss/reconnect cycle. The listener stays valid across those
+	* cycles (it resolves the entry through the map when it fires), so it is
+	* registered once and this set remembers that. Weak, so a material dropped
+	* without `destroy()` stays collectable.
+	*/
+	_disposeListenerRegistered = /* @__PURE__ */ new WeakSet();
+	render(system) {
+		const backend = this._backend;
+		const texture = system.texture;
+		const awaitingImage = texture instanceof Texture && !(texture instanceof DataTexture) && texture.source === null;
+		if (backend === null || !(texture instanceof Texture) || awaitingImage || texture.width === 0 || texture.height === 0 || system.liveCount === 0) return;
+		backend.setBlendMode(system.blendMode);
+		const drawCallIndex = this._drawCallCount++;
+		const drawCall = this._drawCalls[drawCallIndex];
+		if (drawCall) {
+			drawCall.system = system;
+			drawCall.texture = texture;
+			drawCall.blendMode = system.blendMode;
+		} else this._drawCalls.push({
+			system,
+			texture,
+			blendMode: system.blendMode
+		});
+	}
+	flush() {
+		const backend = this._backend;
+		const device = this._device;
+		if (!backend || !device || this._uniformBuffer === null || this._uniformBindGroup === null) return;
+		if (this._drawCallCount === 0 && !backend.clearRequested) return;
+		const scissor = backend.getScissorRect();
+		const maskClipsAll = scissor !== null && (scissor.width <= 0 || scissor.height <= 0);
+		if (this._drawCallCount === 0 || maskClipsAll) {
+			if (backend.clearRequested) {
+				backend._passCoordinator.acquirePass();
+				backend._passCoordinator.endPass();
+			}
+			this._drawCallCount = 0;
+			return;
+		}
+		for (let drawCallIndex = 0; drawCallIndex < this._drawCallCount; drawCallIndex++) {
+			const drawCall = this._drawCalls[drawCallIndex];
+			if (drawCall.system.liveCount === 0) continue;
+			this._drawSystem(backend, device, drawCall);
+		}
+		this._drawCallCount = 0;
+	}
+	destroy() {
+		this.disconnect();
+	}
+	onConnect(backend) {
+		this._backend = backend;
+		this._device = this._backend.device;
+		this._uniformBindGroupLayout = this._device.createBindGroupLayout({ entries: [{
+			binding: 0,
+			visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+			buffer: {
+				type: "uniform",
+				hasDynamicOffset: true
+			}
+		}] });
+		this._textureBindGroupLayout = this._device.createBindGroupLayout({ entries: [{
+			binding: 0,
+			visibility: GPUShaderStage.FRAGMENT,
+			texture: { sampleType: "float" }
+		}, {
+			binding: 1,
+			visibility: GPUShaderStage.FRAGMENT,
+			sampler: { type: "filtering" }
+		}] });
+		this._pipelineLayout = this._device.createPipelineLayout({ bindGroupLayouts: [this._uniformBindGroupLayout, this._textureBindGroupLayout] });
+		this._createUniformResources(this._device, uniformSlotStride);
+	}
+	onDisconnect() {
+		this.flush();
+		for (const resources of this._resources.values()) this._destroyResources(resources);
+		this._resources.clear();
+		this._uniformBuffer?.destroy();
+		this._uniformBindGroup = null;
+		this._uniformBuffer = null;
+		this._uniformBufferCapacity = 0;
+		this._uniformPassSlots = 0;
+		this._ownDrawsPass = null;
+		this._pipelineLayout = null;
+		this._textureBindGroupLayout = null;
+		this._uniformBindGroupLayout = null;
+		this._device = null;
+		this._backend = null;
+		this._drawCallCount = 0;
+	}
+	/**
+	* Append one system's draw at the open pass's cursors and record it, leaving
+	* the pass open. Ends (submits) the pass first only where appending cannot
+	* cover the hazard - see {@link _appendWouldAlias}.
+	*/
+	_drawSystem(backend, device, drawCall) {
+		const system = drawCall.system;
+		const mode = system.renderMode;
+		const resources = this._getOrCreateResources(mode, device);
+		const coordinator = backend._passCoordinator;
+		const gpuState = system.gpuMode ? system.gpuState : null;
+		let drawCount = system.liveCount;
+		let appendBytes = 0;
+		if (gpuState === null) {
+			mode.build(system, system._storage);
+			drawCount = mode.count;
+			appendBytes = Math.max(drawCount, 1) * resources.stride;
+		}
+		const meshGeometry = mode.vertexGeometry;
+		const meshSyncRequired = resources.meshBuffer !== null && meshGeometry !== null && resources.meshVersion !== meshGeometry.version;
+		const targetVertexBytes = this._modePassBytes(coordinator.activePass, resources) + appendBytes;
+		const targetUniformSlots = this._uniformPassBase(coordinator.activePass) + 1;
+		if (this._appendWouldAlias(backend, drawCall, resources, meshSyncRequired, targetVertexBytes, targetUniformSlots)) coordinator.endPass();
+		const vertexByteOffset = this._modePassBytes(coordinator.activePass, resources);
+		const uniformSlot = this._uniformPassBase(coordinator.activePass);
+		this._ensureUniformCapacity(device, targetUniformSlots);
+		const pipeline = this._getPipeline(resources, drawCall.blendMode, backend.renderTargetFormat, coordinator.stencilActive);
+		const textureBinding = backend.getTextureBinding(drawCall.texture, mode.material.sampler);
+		const textureBindGroup = device.createBindGroup({
+			layout: this._textureBindGroupLayout,
+			entries: [{
+				binding: 0,
+				resource: textureBinding.view
+			}, {
+				binding: 1,
+				resource: textureBinding.sampler
+			}]
+		});
+		this._writeUniformData(backend, system, drawCall.texture);
+		const vertexBuffer = gpuState !== null ? gpuState.instanceBuffer : this._uploadModeData(device, resources, mode, targetVertexBytes, vertexByteOffset, drawCount);
+		device.queue.writeBuffer(this._uniformBuffer, uniformSlot * uniformSlotStride, this._uniformData.buffer, this._uniformData.byteOffset, this._uniformData.byteLength);
+		if (meshSyncRequired) this._syncMeshBuffer(device, resources, mode);
+		const active = coordinator.acquirePass();
+		const pass = active.pass;
+		pass.setBindGroup(0, this._uniformBindGroup, [uniformSlot * uniformSlotStride]);
+		pass.setPipeline(pipeline);
+		pass.setBindGroup(1, textureBindGroup);
+		pass.setVertexBuffer(0, vertexBuffer, gpuState !== null ? 0 : vertexByteOffset);
+		if (resources.meshBuffer !== null) pass.setVertexBuffer(1, resources.meshBuffer);
+		const instanceCount = resources.instanced ? drawCount : 1;
+		if (resources.indexBuffer !== null) {
+			pass.setIndexBuffer(resources.indexBuffer, resources.indexFormat);
+			pass.drawIndexed(resources.indexCount, instanceCount, 0, 0, 0);
+		} else pass.draw(resources.instanced ? resources.indexCount : drawCount, instanceCount, 0, 0);
+		coordinator.markPassDraws();
+		backend.stats.batches++;
+		backend.stats.drawCalls++;
+		this._ownDrawsPass = active;
+		this._uniformPassSlots = uniformSlot + 1;
+		resources.passRef = active;
+		resources.vertexPassBytes = vertexByteOffset + appendBytes;
+	}
+	/**
+	* Whether appending this draw would retroactively change what a draw already
+	* recorded into the open pass reads - in which case the caller ends (submits)
+	* that pass first, which restarts every cursor at 0.
+	*/
+	_appendWouldAlias(backend, drawCall, resources, meshSyncRequired, targetVertexBytes, targetUniformSlots) {
+		const coordinator = backend._passCoordinator;
+		const active = coordinator.activePass;
+		if (coordinator.passHasDraws && backend._textureUploadWouldMutate(drawCall.texture)) return true;
+		if (active === null) return false;
+		if (active.viewUpdateId !== backend.view.updateId) return true;
+		if (resources.passRef === active && (meshSyncRequired || targetVertexBytes > resources.vertexBufferByteLength)) return true;
+		return this._ownDrawsPass === active && targetUniformSlots * uniformSlotStride > this._uniformBufferCapacity;
+	}
+	/**
+	* Bytes of the mode's vertex buffer `active` has consumed, or 0 when it holds
+	* none of that mode's draws (a different pass, or none open).
+	*/
+	_modePassBytes(active, resources) {
+		return active !== null && resources.passRef === active ? resources.vertexPassBytes : 0;
+	}
+	/** Uniform ring slots `active` has consumed, or 0 when it holds no draws of ours. */
+	_uniformPassBase(active) {
+		return active !== null && this._ownDrawsPass === active ? this._uniformPassSlots : 0;
+	}
+	/**
+	* Upload what the mode just built into this draw's sub-range of the mode's
+	* vertex buffer, growing it to the pass total first. Returns the buffer to
+	* bind, since growth replaces it.
+	*/
+	_uploadModeData(device, resources, mode, targetByteLength, byteOffset, elementCount) {
+		const buffer = this._ensureCapacity(device, resources, targetByteLength);
+		device.queue.writeBuffer(buffer, byteOffset, mode.data, 0, elementCount * resources.stride);
+		return buffer;
+	}
+	_getOrCreateResources(mode, device) {
+		const material = mode.material;
+		const cached = this._resources.get(material);
+		if (cached !== void 0) return cached;
+		const created = this._createResources(mode, material, device);
+		this._resources.set(material, created);
+		if (!this._disposeListenerRegistered.has(material)) {
+			this._disposeListenerRegistered.add(material);
+			material._onDispose(() => {
+				this._disposeListenerRegistered.delete(material);
+				const stored = this._resources.get(material);
+				if (stored === void 0) return;
+				this._destroyResources(stored);
+				this._resources.delete(material);
+			});
+		}
+		return created;
+	}
+	_createResources(mode, material, device) {
+		const wgsl = material.shader.wgsl;
+		if (wgsl === null) throw new Error("Particle material shader has no `wgsl` source; cannot render through the WebGPU backend.");
+		const layout = mode.dataLayout;
+		const meshGeometry = mode.vertexGeometry;
+		assertVertexGeometryCompatible(layout, meshGeometry, mode.instanced, mode.constructor.name);
+		const indices = meshGeometry !== null ? meshGeometry.indices : layout.indices;
+		let indexBuffer = null;
+		if (indices !== null) {
+			const indexData = new Uint8Array(Math.ceil(indices.byteLength / 4) * 4);
+			indexData.set(new Uint8Array(indices.buffer, indices.byteOffset, indices.byteLength));
+			indexBuffer = device.createBuffer({
+				size: indexData.byteLength,
+				usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST
+			});
+			device.queue.writeBuffer(indexBuffer, 0, indexData.buffer, indexData.byteOffset, indexData.byteLength);
+		}
+		const topology = meshGeometry !== null ? meshGeometry.topology : layout.topology;
+		const indexFormat = indices instanceof Uint32Array ? "uint32" : "uint16";
+		const indexedStrip = topology === "triangle-strip" && indexBuffer !== null;
+		let meshBuffer = null;
+		let meshLayout = null;
+		if (meshGeometry !== null) {
+			const meshData = meshGeometry.vertexData;
+			meshLayout = {
+				arrayStride: meshGeometry.stride,
+				stepMode: "vertex",
+				attributes: meshGeometry.attributes.map((attribute, index) => ({
+					shaderLocation: layout.attributes.length + index,
+					offset: attribute.offset,
+					format: resolveVertexFormat(attribute)
+				}))
+			};
+			meshBuffer = device.createBuffer({
+				size: Math.ceil(meshData.byteLength / 4) * 4,
+				usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
+			});
+			device.queue.writeBuffer(meshBuffer, 0, meshData instanceof Float32Array ? meshData.buffer : meshData, 0, meshData.byteLength);
+		}
+		return {
+			shaderModule: device.createShaderModule({ code: wgsl }),
+			vertexLayout: {
+				arrayStride: layout.stride,
+				stepMode: mode.instanced ? "instance" : "vertex",
+				attributes: layout.attributes.map((attribute, location) => ({
+					shaderLocation: location,
+					offset: attribute.offset,
+					format: resolveVertexFormat(attribute)
+				}))
+			},
+			meshLayout,
+			meshBuffer,
+			meshVersion: meshGeometry?.version ?? -1,
+			stride: layout.stride,
+			topology,
+			stripIndexFormat: indexedStrip ? indexFormat : void 0,
+			indexBuffer,
+			indexFormat,
+			indexCount: meshGeometry !== null ? meshGeometry.indexCount : layout.indexCount,
+			instanced: mode.instanced,
+			pipelines: /* @__PURE__ */ new Map(),
+			vertexBuffer: null,
+			vertexBufferByteLength: 0,
+			passRef: null,
+			vertexPassBytes: 0
+		};
+	}
+	/**
+	* Re-write the mode's own geometry only when it was mutated since the last
+	* draw. One integer comparison keeps an unchanging mesh off the bus.
+	*/
+	_syncMeshBuffer(device, resources, mode) {
+		const meshGeometry = mode.vertexGeometry;
+		if (meshGeometry === null || resources.meshBuffer === null || resources.meshVersion === meshGeometry.version) return;
+		const meshData = meshGeometry.vertexData;
+		resources.meshVersion = meshGeometry.version;
+		device.queue.writeBuffer(resources.meshBuffer, 0, meshData instanceof Float32Array ? meshData.buffer : meshData, 0, meshData.byteLength);
+	}
+	_destroyResources(resources) {
+		resources.vertexBuffer?.destroy();
+		resources.meshBuffer?.destroy();
+		resources.indexBuffer?.destroy();
+		resources.pipelines.clear();
+		resources.vertexBuffer = null;
+		resources.meshBuffer = null;
+		resources.vertexBufferByteLength = 0;
+		resources.passRef = null;
+		resources.vertexPassBytes = 0;
+	}
+	/**
+	* Grow the mode's vertex buffer to `requiredByteLength`, which is the whole
+	* open pass's consumption of it (this draw's append plus everything already
+	* written for the draws it holds), not just this draw's own bytes. Grow-only
+	* and doubling, matching the mode's own scratch-buffer policy; the returned
+	* buffer is the one this draw must bind, since growth replaces it.
+	*/
+	_ensureCapacity(device, resources, requiredByteLength) {
+		const stride = resources.stride;
+		const required = Math.max(requiredByteLength, stride);
+		if (resources.vertexBuffer !== null && required <= resources.vertexBufferByteLength) return resources.vertexBuffer;
+		let byteLength = resources.vertexBufferByteLength || stride;
+		while (byteLength < required) byteLength *= 2;
+		resources.vertexBuffer?.destroy();
+		resources.vertexBuffer = device.createBuffer({
+			size: byteLength,
+			usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
+		});
+		resources.vertexBufferByteLength = byteLength;
+		return resources.vertexBuffer;
+	}
+	/**
+	* Grow the uniform ring to `slots` draw-call slots - again the open pass's
+	* total, not this draw's one slot. Doubling and grow-only; growth frees the
+	* current buffer, so the caller must have ended any pass holding draws of
+	* ours that read it.
+	*/
+	_ensureUniformCapacity(device, slots) {
+		const requiredBytes = slots * uniformSlotStride;
+		if (requiredBytes <= this._uniformBufferCapacity) return;
+		this._uniformBuffer?.destroy();
+		this._createUniformResources(device, Math.max(requiredBytes, this._uniformBufferCapacity * 2));
+	}
+	/** (Re-)create the uniform ring and its bind group at `capacityBytes`. */
+	_createUniformResources(device, capacityBytes) {
+		this._uniformBufferCapacity = capacityBytes;
+		this._uniformBuffer = device.createBuffer({
+			label: "particles:uniform-ring",
+			size: capacityBytes,
+			usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+		});
+		this._uniformBindGroup = device.createBindGroup({
+			label: "particles:uniform-bind-group",
+			layout: this._uniformBindGroupLayout,
+			entries: [{
+				binding: 0,
+				resource: {
+					buffer: this._uniformBuffer,
+					size: uniformByteLength
+				}
+			}]
+		});
+	}
+	_writeUniformData(backend, system, texture) {
+		const projection = backend.view.getTransform().toArray(false);
+		const transform = system.getGlobalTransform().toArray(false);
+		const shouldPremultiplySample = backend.shouldPremultiplyTextureSample(texture);
+		const vertices = system.vertices;
+		const texCoords = system.texCoords;
+		const quadMinX = vertices[0];
+		const quadMinY = vertices[1];
+		const quadSizeX = vertices[2] - vertices[0];
+		const quadSizeY = vertices[3] - vertices[1];
+		const uvMinX = (texCoords[0] & 65535) / 65535;
+		const uvMinY = (texCoords[0] >>> 16 & 65535) / 65535;
+		const uvMaxX = (texCoords[2] & 65535) / 65535;
+		const uvMaxY = (texCoords[2] >>> 16 & 65535) / 65535;
+		const u = this._uniformData;
+		u[0] = projection[0];
+		u[1] = projection[1];
+		u[2] = 0;
+		u[3] = 0;
+		u[4] = projection[3];
+		u[5] = projection[4];
+		u[6] = 0;
+		u[7] = 0;
+		u[8] = 0;
+		u[9] = 0;
+		u[10] = 1;
+		u[11] = 0;
+		u[12] = projection[6];
+		u[13] = projection[7];
+		u[14] = 0;
+		u[15] = projection[8];
+		u[16] = transform[0];
+		u[17] = transform[1];
+		u[18] = 0;
+		u[19] = 0;
+		u[20] = transform[3];
+		u[21] = transform[4];
+		u[22] = 0;
+		u[23] = 0;
+		u[24] = 0;
+		u[25] = 0;
+		u[26] = 1;
+		u[27] = 0;
+		u[28] = transform[6];
+		u[29] = transform[7];
+		u[30] = 0;
+		u[31] = transform[8];
+		u[32] = shouldPremultiplySample ? 1 : 0;
+		u[33] = 0;
+		u[34] = 0;
+		u[35] = 0;
+		u[36] = quadMinX;
+		u[37] = quadMinY;
+		u[38] = quadSizeX;
+		u[39] = quadSizeY;
+		u[40] = uvMinX;
+		u[41] = uvMinY;
+		u[42] = uvMaxX;
+		u[43] = uvMaxY;
+	}
+	_getPipeline(resources, blendMode, format, stencil) {
+		const pipelineKey = `${blendMode}:${format}:${stencil ? "s" : "n"}`;
+		const existingPipeline = resources.pipelines.get(pipelineKey);
+		if (existingPipeline) return existingPipeline;
+		const descriptor = {
+			layout: this._pipelineLayout,
+			vertex: {
+				module: resources.shaderModule,
+				entryPoint: "vertexMain",
+				buffers: resources.meshLayout !== null ? [resources.vertexLayout, resources.meshLayout] : [resources.vertexLayout]
+			},
+			fragment: {
+				module: resources.shaderModule,
+				entryPoint: "fragmentMain",
+				targets: [{
+					format,
+					blend: getWebGpuBlendState(blendMode),
+					writeMask: GPUColorWrite.ALL
+				}]
+			},
+			primitive: resources.stripIndexFormat === void 0 ? { topology: resources.topology } : {
+				topology: resources.topology,
+				stripIndexFormat: resources.stripIndexFormat
+			}
+		};
+		if (stencil) descriptor.depthStencil = stencilContentDepthStencilState();
+		const pipeline = this._device.createRenderPipeline(descriptor);
+		resources.pipelines.set(pipelineKey, pipeline);
+		return pipeline;
+	}
 };
 
-@vertex
-fn vertexMain(input: VertexInput) -> VertexOutput {
-    let quadMin = uniforms.localBounds.xy;
-    let quadSize = uniforms.localBounds.zw;
-
-    let localPosition = quadMin + (input.unitPosition * quadSize);
-    let radians = radians(input.rotation);
-    let sinValue = sin(radians);
-    let cosValue = cos(radians);
-    let rotated = vec2<f32>(
-        (localPosition.x * (input.scale.x * cosValue)) + (localPosition.y * (input.scale.y * sinValue)) + input.translation.x,
-        (localPosition.x * (input.scale.x * -sinValue)) + (localPosition.y * (input.scale.y * cosValue)) + input.translation.y
-    );
-
-    var output: VertexOutput;
-
-    output.position = uniforms.projection * uniforms.translation * vec4<f32>(rotated, 0.0, 1.0);
-    output.texcoord = input.uvMin + ((input.uvMax - input.uvMin) * input.unitPosition);
-    output.color = vec4(input.color.rgb * input.color.a, input.color.a);
-
-    return output;
-}
-
-@fragment
-fn fragmentMain(input: VertexOutput) -> @location(0) vec4<f32> {
-    let sample = textureSample(particleTexture, particleSampler, input.texcoord);
-    let premultipliedSample = select(sample, vec4(sample.rgb * sample.a, sample.a), uniforms.flags.x > 0.5);
-
-    return premultipliedSample * input.color;
-}
-`;
-const staticVertexStrideBytes = 8;
-const instanceWords = 10;
-const instanceStrideBytes = 40;
-const indicesPerParticle = 6;
-const uniformByteLength = 176;
-const initialParticleCapacity = 1;
-const staticVertexData = new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]);
-const staticIndexData = new Uint16Array([0, 1, 2, 0, 2, 3]);
-class WebGpuParticleRenderer extends AbstractWebGpuRenderer {
-    /**
-     * The particle system's transform is bound as a uniform and each particle is
-     * positioned system-locally, so this renderer never reads the shared transform
-     * storage; the plan player skips writing transform records for particle draws.
-     * @internal
-     */
-    _consumesSharedTransform = false;
-    _drawCalls = [];
-    _drawCallCount = 0;
-    _uniformData = new Float32Array(uniformByteLength / Float32Array.BYTES_PER_ELEMENT);
-    _device = null;
-    _shaderModule = null;
-    _uniformBindGroupLayout = null;
-    _textureBindGroupLayout = null;
-    _pipelineLayout = null;
-    _uniformBuffer = null;
-    _uniformBindGroup = null;
-    _staticVertexBuffer = null;
-    _instanceBuffer = null;
-    _indexBuffer = null;
-    _instanceBufferByteLength = 0;
-    _instanceData = new ArrayBuffer(instanceStrideBytes * initialParticleCapacity);
-    _float32View = new Float32Array(this._instanceData);
-    _uint32View = new Uint32Array(this._instanceData);
-    _pipelines = new Map();
-    render(system) {
-        const backend = this._backend;
-        const texture = system.texture;
-        if (backend === null || !(texture instanceof Texture) || texture.source === null || texture.width === 0 || texture.height === 0 || system.liveCount === 0) {
-            return;
-        }
-        backend.setBlendMode(system.blendMode);
-        const drawCallIndex = this._drawCallCount++;
-        const drawCall = this._drawCalls[drawCallIndex];
-        if (drawCall) {
-            drawCall.system = system;
-            drawCall.texture = texture;
-            drawCall.blendMode = system.blendMode;
-        }
-        else {
-            this._drawCalls.push({
-                system,
-                texture,
-                blendMode: system.blendMode,
-            });
-        }
-    }
-    flush() {
-        const backend = this._backend;
-        const device = this._device;
-        const uniformBuffer = this._uniformBuffer;
-        const uniformBindGroup = this._uniformBindGroup;
-        const staticVertexBuffer = this._staticVertexBuffer;
-        const indexBuffer = this._indexBuffer;
-        if (!backend || !device || !uniformBuffer || !uniformBindGroup || !staticVertexBuffer || !this._instanceBuffer || !indexBuffer) {
-            return;
-        }
-        if (this._drawCallCount === 0 && !backend.clearRequested) {
-            return;
-        }
-        const scissor = backend.getScissorRect();
-        const maskClipsAll = scissor !== null && (scissor.width <= 0 || scissor.height <= 0);
-        // If no drawcalls will actually render (none queued, or the scissor
-        // clips everything), but a clear is pending, open a single empty
-        // pass so createColorAttachment consumes the clear state.
-        if (this._drawCallCount === 0 || maskClipsAll) {
-            if (backend.clearRequested) {
-                backend._passCoordinator.acquirePass();
-                backend._passCoordinator.endPass();
-            }
-            this._drawCallCount = 0;
-            return;
-        }
-        // One command encoder / pass per drawcall. Each particle system's
-        // queue.writeBuffer calls target offset 0 of the instance and uniform
-        // buffers — a single pass with multiple systems would see all
-        // writeBuffers serialize before submit, leaving only the last
-        // system's data in those buffers and making every earlier draw read
-        // the wrong data. Also: _ensureCapacity may destroy and recreate the
-        // instance buffer on growth; keeping one drawcall per pass means
-        // that destroy happens strictly between submits, so no pass holds a
-        // reference to a buffer that has since been destroyed.
-        for (let drawCallIndex = 0; drawCallIndex < this._drawCallCount; drawCallIndex++) {
-            const drawCall = this._drawCalls[drawCallIndex];
-            const system = drawCall.system;
-            const particleCount = system.liveCount;
-            if (particleCount === 0) {
-                continue;
-            }
-            const pipeline = this._getPipeline(drawCall.blendMode, backend.renderTargetFormat, backend._passCoordinator.stencilActive);
-            const textureBinding = backend.getTextureBinding(drawCall.texture);
-            const textureBindGroup = device.createBindGroup({
-                layout: this._textureBindGroupLayout,
-                entries: [
-                    {
-                        binding: 0,
-                        resource: textureBinding.view,
-                    },
-                    {
-                        binding: 1,
-                        resource: textureBinding.sampler,
-                    },
-                ],
-            });
-            this._writeUniformData(backend, system, drawCall.texture);
-            // GPU mode: the system's compute pipeline already wrote the
-            // interleaved instance data into its own buffer. Bind it
-            // directly — no CPU pack, no writeBuffer for instance data.
-            // CPU mode: pack from CPU SoA into our owned instance buffer.
-            let drawInstanceCount = particleCount;
-            const instanceBuffer = (() => {
-                if (system.gpuMode && system.gpuState !== null) {
-                    return system.gpuState.instanceBuffer;
-                }
-                this._ensureCapacity(particleCount);
-                drawInstanceCount = this._writeInstanceData(system);
-                device.queue.writeBuffer(this._instanceBuffer, 0, this._instanceData, 0, drawInstanceCount * instanceStrideBytes);
-                return this._instanceBuffer;
-            })();
-            device.queue.writeBuffer(uniformBuffer, 0, this._uniformData.buffer, this._uniformData.byteOffset, this._uniformData.byteLength);
-            // One coordinator-owned pass per drawcall: each system's writeBuffers
-            // target offset 0, so the pass must be submitted before the next system
-            // overwrites those buffers. acquirePass/endPass preserve that 1:1 ratio.
-            const pass = backend._passCoordinator.acquirePass().pass;
-            pass.setBindGroup(0, uniformBindGroup);
-            pass.setPipeline(pipeline);
-            pass.setBindGroup(1, textureBindGroup);
-            pass.setVertexBuffer(0, staticVertexBuffer);
-            pass.setVertexBuffer(1, instanceBuffer);
-            pass.setIndexBuffer(indexBuffer, 'uint16');
-            pass.drawIndexed(indicesPerParticle, drawInstanceCount, 0, 0, 0);
-            backend.stats.batches++;
-            backend.stats.drawCalls++;
-            backend._passCoordinator.endPass();
-        }
-        this._drawCallCount = 0;
-    }
-    destroy() {
-        this.disconnect();
-    }
-    onConnect(backend) {
-        this._backend = backend;
-        this._device = this._backend.device;
-        this._shaderModule = this._device.createShaderModule({ code: particleShaderSource });
-        this._uniformBindGroupLayout = this._device.createBindGroupLayout({
-            entries: [
-                {
-                    binding: 0,
-                    visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-                    buffer: {
-                        type: 'uniform',
-                    },
-                },
-            ],
-        });
-        this._textureBindGroupLayout = this._device.createBindGroupLayout({
-            entries: [
-                {
-                    binding: 0,
-                    visibility: GPUShaderStage.FRAGMENT,
-                    texture: {
-                        sampleType: 'float',
-                    },
-                },
-                {
-                    binding: 1,
-                    visibility: GPUShaderStage.FRAGMENT,
-                    sampler: {
-                        type: 'filtering',
-                    },
-                },
-            ],
-        });
-        this._pipelineLayout = this._device.createPipelineLayout({
-            bindGroupLayouts: [this._uniformBindGroupLayout, this._textureBindGroupLayout],
-        });
-        this._uniformBuffer = this._device.createBuffer({
-            size: uniformByteLength,
-            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-        });
-        this._uniformBindGroup = this._device.createBindGroup({
-            layout: this._uniformBindGroupLayout,
-            entries: [
-                {
-                    binding: 0,
-                    resource: {
-                        buffer: this._uniformBuffer,
-                    },
-                },
-            ],
-        });
-        this._staticVertexBuffer = this._device.createBuffer({
-            size: staticVertexData.byteLength,
-            usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
-        });
-        this._device.queue.writeBuffer(this._staticVertexBuffer, 0, staticVertexData.buffer, staticVertexData.byteOffset, staticVertexData.byteLength);
-        this._indexBuffer = this._device.createBuffer({
-            size: staticIndexData.byteLength,
-            usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
-        });
-        this._device.queue.writeBuffer(this._indexBuffer, 0, staticIndexData.buffer, staticIndexData.byteOffset, staticIndexData.byteLength);
-        this._ensureCapacity(initialParticleCapacity);
-    }
-    onDisconnect() {
-        this.flush();
-        this._staticVertexBuffer?.destroy();
-        this._instanceBuffer?.destroy();
-        this._indexBuffer?.destroy();
-        this._uniformBuffer?.destroy();
-        this._pipelines.clear();
-        this._indexBuffer = null;
-        this._staticVertexBuffer = null;
-        this._instanceBuffer = null;
-        this._uniformBindGroup = null;
-        this._uniformBuffer = null;
-        this._pipelineLayout = null;
-        this._textureBindGroupLayout = null;
-        this._uniformBindGroupLayout = null;
-        this._shaderModule = null;
-        this._device = null;
-        this._backend = null;
-        this._instanceBufferByteLength = 0;
-        this._instanceData = new ArrayBuffer(instanceStrideBytes * initialParticleCapacity);
-        this._float32View = new Float32Array(this._instanceData);
-        this._uint32View = new Uint32Array(this._instanceData);
-        this._drawCallCount = 0;
-    }
-    _ensureCapacity(particleCount) {
-        const requiredInstanceBytes = particleCount * instanceStrideBytes;
-        if (requiredInstanceBytes > this._instanceData.byteLength) {
-            let byteLength = this._instanceData.byteLength;
-            while (byteLength < requiredInstanceBytes) {
-                byteLength *= 2;
-            }
-            this._instanceData = new ArrayBuffer(byteLength);
-            this._float32View = new Float32Array(this._instanceData);
-            this._uint32View = new Uint32Array(this._instanceData);
-        }
-        if (requiredInstanceBytes > this._instanceBufferByteLength) {
-            let byteLength = this._instanceBufferByteLength || instanceStrideBytes;
-            while (byteLength < requiredInstanceBytes) {
-                byteLength *= 2;
-            }
-            this._instanceBuffer?.destroy();
-            this._instanceBuffer = this._device.createBuffer({
-                size: byteLength,
-                usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
-            });
-            this._instanceBufferByteLength = byteLength;
-        }
-    }
-    _writeUniformData(backend, system, texture) {
-        const projection = backend.view.getTransform().toArray(false);
-        const transform = system.getGlobalTransform().toArray(false);
-        const shouldPremultiplySample = backend.shouldPremultiplyTextureSample(texture);
-        const vertices = system.vertices;
-        const texCoords = system.texCoords;
-        const quadMinX = vertices[0];
-        const quadMinY = vertices[1];
-        const quadSizeX = vertices[2] - vertices[0];
-        const quadSizeY = vertices[3] - vertices[1];
-        const uvMinX = (texCoords[0] & 0xffff) / 0xffff;
-        const uvMinY = ((texCoords[0] >>> 16) & 0xffff) / 0xffff;
-        const uvMaxX = (texCoords[2] & 0xffff) / 0xffff;
-        const uvMaxY = ((texCoords[2] >>> 16) & 0xffff) / 0xffff;
-        const u = this._uniformData;
-        // projection mat4 (col-major, padded to 4×4)
-        u[0] = projection[0];
-        u[1] = projection[1];
-        u[2] = 0;
-        u[3] = 0;
-        u[4] = projection[3];
-        u[5] = projection[4];
-        u[6] = 0;
-        u[7] = 0;
-        u[8] = 0;
-        u[9] = 0;
-        u[10] = 1;
-        u[11] = 0;
-        u[12] = projection[6];
-        u[13] = projection[7];
-        u[14] = 0;
-        u[15] = projection[8];
-        // transform mat4 (col-major, padded to 4×4)
-        u[16] = transform[0];
-        u[17] = transform[1];
-        u[18] = 0;
-        u[19] = 0;
-        u[20] = transform[3];
-        u[21] = transform[4];
-        u[22] = 0;
-        u[23] = 0;
-        u[24] = 0;
-        u[25] = 0;
-        u[26] = 1;
-        u[27] = 0;
-        u[28] = transform[6];
-        u[29] = transform[7];
-        u[30] = 0;
-        u[31] = transform[8];
-        // flags vec4
-        u[32] = shouldPremultiplySample ? 1 : 0;
-        u[33] = 0;
-        u[34] = 0;
-        u[35] = 0;
-        // localBounds vec4
-        u[36] = quadMinX;
-        u[37] = quadMinY;
-        u[38] = quadSizeX;
-        u[39] = quadSizeY;
-        // uvBounds vec4
-        u[40] = uvMinX;
-        u[41] = uvMinY;
-        u[42] = uvMaxX;
-        u[43] = uvMaxY;
-    }
-    _writeInstanceData(system) {
-        const { posX, posY, scaleX, scaleY, rotations, color, textureIndex, alive, liveCount } = system;
-        const f32 = this._float32View;
-        const u32 = this._uint32View;
-        const { uvMins, uvMaxs } = this._computeFrameUvs(system);
-        const frameCount = uvMins.length / 2;
-        let writeIndex = 0;
-        for (let particleIndex = 0; particleIndex < liveCount; particleIndex++) {
-            // Skip dead slots — present in GPU-mode systems where the live
-            // range can carry holes filled in on next spawn.
-            if (alive[particleIndex] === 0) {
-                continue;
-            }
-            const targetIndex = writeIndex * instanceWords;
-            const frame = textureIndex[particleIndex] < frameCount ? textureIndex[particleIndex] : 0;
-            const uvBase = frame * 2;
-            f32[targetIndex + 0] = posX[particleIndex];
-            f32[targetIndex + 1] = posY[particleIndex];
-            f32[targetIndex + 2] = scaleX[particleIndex];
-            f32[targetIndex + 3] = scaleY[particleIndex];
-            f32[targetIndex + 4] = rotations[particleIndex];
-            u32[targetIndex + 5] = color[particleIndex];
-            f32[targetIndex + 6] = uvMins[uvBase + 0];
-            f32[targetIndex + 7] = uvMins[uvBase + 1];
-            f32[targetIndex + 8] = uvMaxs[uvBase + 0];
-            f32[targetIndex + 9] = uvMaxs[uvBase + 1];
-            writeIndex++;
-        }
-        return writeIndex;
-    }
-    /**
-     * Same atlas/UV-resolution as the WebGL2 path. Returns the per-frame
-     * (uvMin, uvMax) pairs derived from `system.frames` (or fallback to
-     * `system.textureFrame` when no atlas is declared), already flipY-
-     * adjusted for the current texture.
-     */
-    _uvMinsScratch = new Float32Array(2);
-    _uvMaxsScratch = new Float32Array(2);
-    _computeFrameUvs(system) {
-        const frames = system.frames;
-        const tex = system.texture;
-        const texW = tex.width;
-        const texH = tex.height;
-        const flipY = tex.flipY;
-        const count = frames.length === 0 ? 1 : frames.length;
-        if (this._uvMinsScratch.length < count * 2) {
-            this._uvMinsScratch = new Float32Array(count * 2);
-            this._uvMaxsScratch = new Float32Array(count * 2);
-        }
-        const mins = this._uvMinsScratch;
-        const maxs = this._uvMaxsScratch;
-        if (frames.length === 0) {
-            const f = system.textureFrame;
-            const minU = f.left / texW;
-            const maxU = f.right / texW;
-            const topV = f.top / texH;
-            const bottomV = f.bottom / texH;
-            mins[0] = minU;
-            mins[1] = flipY ? bottomV : topV;
-            maxs[0] = maxU;
-            maxs[1] = flipY ? topV : bottomV;
-            return { uvMins: mins, uvMaxs: maxs };
-        }
-        for (let i = 0; i < frames.length; i++) {
-            const f = frames[i];
-            const o = i * 2;
-            const minU = f.left / texW;
-            const maxU = f.right / texW;
-            const topV = f.top / texH;
-            const bottomV = f.bottom / texH;
-            mins[o + 0] = minU;
-            mins[o + 1] = flipY ? bottomV : topV;
-            maxs[o + 0] = maxU;
-            maxs[o + 1] = flipY ? topV : bottomV;
-        }
-        return { uvMins: mins, uvMaxs: maxs };
-    }
-    _getPipeline(blendMode, format, stencil) {
-        const pipelineKey = `${blendMode}:${format}:${stencil ? 's' : 'n'}`;
-        const existingPipeline = this._pipelines.get(pipelineKey);
-        if (existingPipeline) {
-            return existingPipeline;
-        }
-        const descriptor = {
-            layout: this._pipelineLayout,
-            vertex: {
-                module: this._shaderModule,
-                entryPoint: 'vertexMain',
-                buffers: [
-                    {
-                        arrayStride: staticVertexStrideBytes,
-                        attributes: [
-                            {
-                                shaderLocation: 0,
-                                offset: 0,
-                                format: 'float32x2',
-                            },
-                        ],
-                    },
-                    {
-                        arrayStride: instanceStrideBytes,
-                        stepMode: 'instance',
-                        attributes: [
-                            {
-                                shaderLocation: 1,
-                                offset: 0,
-                                format: 'float32x2',
-                            },
-                            {
-                                shaderLocation: 2,
-                                offset: 8,
-                                format: 'float32x2',
-                            },
-                            {
-                                shaderLocation: 3,
-                                offset: 16,
-                                format: 'float32',
-                            },
-                            {
-                                shaderLocation: 4,
-                                offset: 20,
-                                format: 'unorm8x4',
-                            },
-                            {
-                                shaderLocation: 5,
-                                offset: 24,
-                                format: 'float32x2',
-                            },
-                            {
-                                shaderLocation: 6,
-                                offset: 32,
-                                format: 'float32x2',
-                            },
-                        ],
-                    },
-                ],
-            },
-            fragment: {
-                module: this._shaderModule,
-                entryPoint: 'fragmentMain',
-                targets: [
-                    {
-                        format,
-                        blend: getWebGpuBlendState(blendMode),
-                        writeMask: GPUColorWrite.ALL,
-                    },
-                ],
-            },
-            primitive: {
-                topology: 'triangle-list',
-            },
-        };
-        if (stencil) {
-            descriptor.depthStencil = stencilContentDepthStencilState();
-        }
-        const pipeline = this._device.createRenderPipeline(descriptor);
-        this._pipelines.set(pipelineKey, pipeline);
-        return pipeline;
-    }
-}
-
+//#endregion
 export { WebGpuParticleRenderer };
-//# sourceMappingURL=WebGpuParticleRenderer.js.map
+//# sourceMappingURL=WebGpuParticleRenderer.js.map