@adobe/ecs-gpu 0.0.0-stage → 0.0.2

package/dist/index.js

@@ -0,0 +1,688 @@
+import { Finalizer, Index, System, gpuDevice } from "@adobe/ecs";
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+//#region src/cache/cache.ts
+/**
+* A cache of what `create` makes for each device and key: a pipeline, a layout, a sampler. Its values for a device go
+* with the device, so a device a world replaced, or one that was lost, holds nothing here. Keys are compared by
+* `keyOf`, by default their JSON.
+*/
+const perDevice = (create, keyOf = (key) => JSON.stringify(key)) => {
+	const devices = /* @__PURE__ */ new WeakMap();
+	return (device, key) => {
+		let made = devices.get(device);
+		if (made === void 0) {
+			made = /* @__PURE__ */ new Map();
+			devices.set(device, made);
+		}
+		const name = keyOf(key);
+		const found = made.get(name);
+		if (found !== void 0) return found.value;
+		const value = create(device, key);
+		made.set(name, { value });
+		return value;
+	};
+};
+//#endregion
+//#region src/cache/public.ts
+var public_exports = /* @__PURE__ */ __exportAll({ perDevice: () => perDevice });
+//#endregion
+//#region src/device/device.ts
+/**
+* A device on this thread, or null where there's no WebGPU, no adapter for `options`, or the adapter refused the
+* device. Call it on the thread the world runs on: a device can't move between threads.
+*/
+const request = async (options = {}) => {
+	const { requiredFeatures, requiredLimits, ...adapterOptions } = options;
+	const adapter = await globalThis.navigator?.gpu?.requestAdapter(adapterOptions);
+	if (adapter === null || adapter === void 0) return null;
+	try {
+		return await adapter.requestDevice({
+			requiredFeatures,
+			requiredLimits
+		});
+	} catch {
+		return null;
+	}
+};
+/** Sets the world's `gpuDevice`. */
+const set = System.create({}, ({ resources }, input) => {
+	resources[gpuDevice] = input.device;
+}, {
+	"type": "object",
+	"properties": { "device": { "anyOf": [{ "allOf": [] }, { "type": "null" }] } }
+});
+/**
+* Keeps the world supplied with a device: requests one now, and another each time the one it gave is lost. Resolves
+* once the first request settled, to whether it gave the world a device, and a function that stops keeping it. Call it
+* on the world's thread.
+*/
+const keep = async (world, options = {}) => {
+	let stopped = false;
+	const supply = async () => {
+		const device = await request(options);
+		if (device === null || stopped) return false;
+		await world.run(set, { device });
+		device.lost.then(() => {
+			if (!stopped) supply();
+		});
+		return true;
+	};
+	return {
+		supplied: await supply(),
+		stop: () => {
+			stopped = true;
+		}
+	};
+};
+//#endregion
+//#region src/device/public.ts
+var public_exports$1 = /* @__PURE__ */ __exportAll({
+	keep: () => keep,
+	request: () => request,
+	set: () => set
+});
+//#endregion
+//#region src/target/target.ts
+const Options$1 = { default: {
+	format: null,
+	sampleCount: 1,
+	depthFormat: "depth24plus",
+	clear: [
+		0,
+		0,
+		0,
+		1
+	]
+} };
+/** An entity with these is a render target: what its textures are, and their size in pixels. */
+const options$1 = Symbol("Target.options");
+declare$$2(options$1, "component", { default: Options$1.default });
+const size = Symbol("Target.size");
+declare$$2(size, "component", { type: {
+	"type": "array",
+	"items": {
+		"type": "integer",
+		"minimum": 0,
+		"maximum": 4294967295
+	},
+	"minItems": 2,
+	"maxItems": 2
+} });
+/** Each render target's textures on the world's device, by its entity: null until targets are first updated. */
+const states$2 = Symbol("Target.states");
+declare$$2(states$2, "resource", {});
+const sameOptions$1 = (a, b) => a.format === b.format && a.sampleCount === b.sampleCount && a.depthFormat === b.depthFormat && (a.clear === b.clear || a.clear !== null && b.clear !== null && a.clear.every((value, index) => value === b.clear?.[index]));
+const destroyTextures = (state) => {
+	state.color.destroy();
+	state.multisampled?.destroy();
+	state.depth?.destroy();
+};
+const created = (device, entity, declared, [width, height]) => {
+	const format = declared.format ?? navigator.gpu.getPreferredCanvasFormat();
+	const extent = [width, height];
+	const color = device.createTexture({
+		label: `target ${entity} color`,
+		size: extent,
+		format,
+		usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_SRC | GPUTextureUsage.COPY_DST
+	});
+	const multisampled = declared.sampleCount === 1 ? null : device.createTexture({
+		label: `target ${entity} multisampled`,
+		size: extent,
+		format,
+		sampleCount: declared.sampleCount,
+		usage: GPUTextureUsage.RENDER_ATTACHMENT
+	});
+	const depth = declared.depthFormat === null ? null : device.createTexture({
+		label: `target ${entity} depth`,
+		size: extent,
+		format: declared.depthFormat,
+		sampleCount: declared.sampleCount,
+		usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
+	});
+	return {
+		entity,
+		device,
+		options: declared,
+		format,
+		size: [width, height],
+		color,
+		multisampled,
+		depth
+	};
+};
+/**
+* Each render target's textures on `device`, made again where its options, its size or the device changed, destroying
+* those they replace; with no device, none. Gives `previous` itself when nothing changed.
+*/
+const updated$2 = (device, previous, targets) => {
+	const held = previous ?? /* @__PURE__ */ new Map();
+	let next = null;
+	for (let i = 0; i < targets.length; i++) {
+		const target = targets.at(i);
+		const old = held.get(target.entity);
+		const [width, height] = target[size];
+		if (device !== null && old !== void 0 && old.device === device && old.size[0] === width && old.size[1] === height && sameOptions$1(old.options, target[options$1])) continue;
+		if (device === null && old === void 0) continue;
+		next ??= new Map(held);
+		if (old !== void 0) destroyTextures(old);
+		if (device === null) next.delete(target.entity);
+		else next.set(target.entity, created(device, target.entity, target[options$1], target[size]));
+	}
+	return next ?? held;
+};
+/** Records clearing each target that declares a clear color: its color to that color, and its depth to 1. */
+const recordClears = (encoder, targets) => {
+	for (const target of targets.values()) {
+		const color = target.options.clear;
+		if (color === null) continue;
+		const [r, g, b, a] = color;
+		encoder.beginRenderPass({
+			label: `clear target ${target.entity}`,
+			colorAttachments: [{
+				view: (target.multisampled ?? target.color).createView(),
+				resolveTarget: target.multisampled === null ? void 0 : target.color.createView(),
+				clearValue: {
+					r,
+					g,
+					b,
+					a
+				},
+				loadOp: "clear",
+				storeOp: "store"
+			}],
+			depthStencilAttachment: target.depth === null ? void 0 : {
+				view: target.depth.createView(),
+				depthClearValue: 1,
+				depthLoadOp: "clear",
+				depthStoreOp: "store"
+			}
+		}).end();
+	}
+};
+/** Destroys a render target's textures when it stops being one. */
+const release$2 = Finalizer.create({ components: { with: [options$1, size] } }, (target, { resources }) => {
+	const current = resources[states$2];
+	const state = current?.get(target.entity);
+	if (current === null || state === void 0) return;
+	destroyTextures(state);
+	const next = new Map(current);
+	next.delete(target.entity);
+	resources[states$2] = next;
+});
+/** Sets a render target's size in pixels, at least one by one. */
+const resize = System.create({
+	components: { with: [size] },
+	target: "target"
+}, (row, _context, input) => {
+	row[size] = [Math.max(1, Math.floor(input.width)), Math.max(1, Math.floor(input.height))];
+}, {
+	"type": "object",
+	"properties": {
+		"target": {
+			"type": "integer",
+			"format": "entity"
+		},
+		"width": { "type": "number" },
+		"height": { "type": "number" }
+	}
+});
+function declare$$2(key, kind, declaration) {
+	(globalThis[Symbol.for("@adobe/ecs/declarations@1")] ??= /* @__PURE__ */ new Map()).set(key, {
+		kind,
+		declaration
+	});
+}
+//#endregion
+//#region src/target/public.ts
+var public_exports$4 = /* @__PURE__ */ __exportAll({
+	Options: () => Options$1,
+	options: () => options$1,
+	release: () => release$2,
+	resize: () => resize,
+	size: () => size,
+	states: () => states$2
+});
+//#endregion
+//#region src/surface/surface.ts
+const Options = { default: {
+	alphaMode: "opaque",
+	colorSpace: "srgb",
+	toneMapping: "standard"
+} };
+/**
+* A render target with these presents to a canvas: the canvas, on the world's thread, and how it presents. The
+* canvas's size follows the target's.
+*/
+const canvas = Symbol("Surface.canvas");
+declare$$1(canvas, "component", { transfer: true });
+const options = Symbol("Surface.options");
+declare$$1(options, "component", { default: Options.default });
+/** Each surface's configured canvas, by its entity: null until surfaces are first updated. */
+const states$1 = Symbol("Surface.states");
+declare$$1(states$1, "resource", {});
+/**
+* A surface presenting to `canvas`, moved to the world's thread, of `width` by `height` pixels: a canvas's
+* `transferControlToOffscreen()`, or an `OffscreenCanvas` of its own. Resolves to its entity.
+*/
+const attach = System.create({}, ({ commands }, input) => commands.spawn([
+	options$1,
+	size,
+	canvas,
+	options
+])({
+	[options$1]: input.target ?? Options$1.default,
+	[size]: [Math.max(1, Math.floor(input.width)), Math.max(1, Math.floor(input.height))],
+	[canvas]: input.canvas,
+	[options]: input.surface ?? Options.default
+}), {
+	"type": "object",
+	"properties": {
+		"canvas": { "allOf": [] },
+		"width": { "type": "number" },
+		"height": { "type": "number" },
+		"target": {
+			"type": "object",
+			"properties": {
+				"format": { "anyOf": [{ "allOf": [] }, { "type": "null" }] },
+				"sampleCount": { "anyOf": [{ "const": 1 }, { "const": 4 }] },
+				"depthFormat": { "anyOf": [{ "allOf": [] }, { "type": "null" }] },
+				"clear": { "anyOf": [{
+					"type": "array",
+					"items": {
+						"type": "number",
+						"precision": 1
+					},
+					"minItems": 4,
+					"maxItems": 4
+				}, { "type": "null" }] }
+			}
+		},
+		"surface": {
+			"type": "object",
+			"properties": {
+				"alphaMode": { "allOf": [] },
+				"colorSpace": { "allOf": [] },
+				"toneMapping": { "allOf": [] }
+			}
+		}
+	},
+	"required": [
+		"canvas",
+		"width",
+		"height"
+	]
+});
+const sameOptions = (a, b) => a.alphaMode === b.alphaMode && a.colorSpace === b.colorSpace && a.toneMapping === b.toneMapping;
+/**
+* Each surface's canvas sized to its target and configured for `device` in its target's format, again where either
+* changed; with no device, or no target state, unconfigured. Gives `previous` itself when nothing changed.
+*/
+const updated$1 = (device, targets, previous, surfaces) => {
+	const held = previous ?? /* @__PURE__ */ new Map();
+	let next = null;
+	for (let i = 0; i < surfaces.length; i++) {
+		const surface = surfaces.at(i);
+		const presented = surface[canvas];
+		const [width, height] = surface[size];
+		if (presented.width !== width) presented.width = width;
+		if (presented.height !== height) presented.height = height;
+		const target = targets.get(surface.entity);
+		const old = held.get(surface.entity);
+		if (device === null || target === void 0) {
+			if (old === void 0) continue;
+			old.context.unconfigure();
+			next ??= new Map(held);
+			next.delete(surface.entity);
+			continue;
+		}
+		const declared = surface[options];
+		if (old !== void 0 && old.device === device && old.format === target.format && old.canvas === presented && sameOptions(old.options, declared)) continue;
+		const context = presented.getContext("webgpu");
+		if (context === null) continue;
+		context.configure({
+			device,
+			format: target.format,
+			usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_DST,
+			alphaMode: declared.alphaMode,
+			colorSpace: declared.colorSpace,
+			toneMapping: { mode: declared.toneMapping }
+		});
+		next ??= new Map(held);
+		next.set(surface.entity, {
+			entity: surface.entity,
+			canvas: presented,
+			context,
+			device,
+			format: target.format,
+			options: declared
+		});
+	}
+	return next ?? held;
+};
+/** Unconfigures a surface's canvas when it stops being one. */
+const release$1 = Finalizer.create({ components: { with: [canvas] } }, (surface, { resources }) => {
+	const current = resources[states$1];
+	const state = current?.get(surface.entity);
+	if (current === null || state === void 0) return;
+	state.context.unconfigure();
+	const next = new Map(current);
+	next.delete(surface.entity);
+	resources[states$1] = next;
+});
+/** A canvas's size in device pixels, from what a `ResizeObserver` saw of it. */
+const pixelsOf = (entry) => {
+	const [device] = entry.devicePixelContentBoxSize ?? [];
+	if (device !== void 0) return [device.inlineSize, device.blockSize];
+	const [box] = entry.contentBoxSize;
+	const scale = globalThis.devicePixelRatio ?? 1;
+	return box === void 0 ? [entry.contentRect.width * scale, entry.contentRect.height * scale] : [box.inlineSize * scale, box.blockSize * scale];
+};
+/**
+* Keeps a surface's size the size of `element` on the page, in device pixels, on the thread the page is on: the world
+* may be here or on a worker that joined it. Returns a function that stops.
+*/
+const observe = (element, world, surface) => {
+	const observer = new ResizeObserver((entries) => {
+		const entry = entries.at(-1);
+		if (entry === void 0) return;
+		const [width, height] = pixelsOf(entry);
+		world.run(resize, {
+			target: surface,
+			width,
+			height
+		}).catch(reportError);
+	});
+	try {
+		observer.observe(element, { box: "device-pixel-content-box" });
+	} catch {
+		observer.observe(element);
+	}
+	return () => observer.disconnect();
+};
+function declare$$1(key, kind, declaration) {
+	(globalThis[Symbol.for("@adobe/ecs/declarations@1")] ??= /* @__PURE__ */ new Map()).set(key, {
+		kind,
+		declaration
+	});
+}
+//#endregion
+//#region src/view/view.ts
+/**
+* An entity with these is a view: the render target it draws into, which owns it; its rectangle in that target as
+* fractions of its size (`x`, `y`, `width`, `height`); and the matrix taking its scene to clip space.
+*/
+const target = Symbol("View.target");
+declare$(target, "component", {
+	type: {
+		"type": "integer",
+		"format": "entity"
+	},
+	reference: "owner"
+});
+const viewport = Symbol("View.viewport");
+declare$(viewport, "component", {
+	type: {
+		"type": "array",
+		"items": {
+			"type": "number",
+			"precision": 1
+		},
+		"minItems": 4,
+		"maxItems": 4
+	},
+	default: [
+		0,
+		0,
+		1,
+		1
+	]
+});
+const projection = Symbol("View.projection");
+declare$(projection, "component", { type: {
+	"type": "array",
+	"items": {
+		"type": "number",
+		"precision": 1
+	},
+	"minItems": 16,
+	"maxItems": 16
+} });
+/** Each view's state on the world's device, by its entity: null until views are first updated. */
+const states = Symbol("View.states");
+declare$(states, "resource", {});
+/** The uniform each view binds: its projection, then its size in pixels. */
+const uniformBytes = 80;
+const layouts = perDevice((device, _key) => device.createBindGroupLayout({
+	label: "view",
+	entries: [{
+		binding: 0,
+		visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT | GPUShaderStage.COMPUTE,
+		buffer: { type: "uniform" }
+	}]
+}), () => "");
+/** The bind group layout of a view's uniform, one per device: a pipeline's layout takes it at the group `wgsl` names. */
+const layout = (device) => layouts(device, null);
+/** The WGSL declarations of a view's uniform at bind group `group`: `view.projection` and `view.size`, in pixels. */
+const wgsl = (group) => `struct View { projection: mat4x4f, size: vec2f }\n@group(${group}) @binding(0) var<uniform> view: View;\n`;
+const rectangleOf = ([x, y, width, height], [targetWidth, targetHeight]) => {
+	const left = Math.min(targetWidth - 1, Math.max(0, Math.round(x * targetWidth)));
+	const top = Math.min(targetHeight - 1, Math.max(0, Math.round(y * targetHeight)));
+	return [
+		left,
+		top,
+		Math.max(1, Math.min(targetWidth - left, Math.round(width * targetWidth))),
+		Math.max(1, Math.min(targetHeight - top, Math.round(height * targetHeight)))
+	];
+};
+const sameRectangle = (a, b) => a.every((value, index) => value === b[index]);
+const sameMatrix = (a, b) => a.every((value, index) => value === b[index]);
+/**
+* Each view placed in its target, its uniform written where its projection or rectangle changed; a view whose target
+* has no textures, as without a device, has no state. Gives `previous` itself when nothing changed.
+*/
+const updated = (device, targets, previous, views) => {
+	const held = previous ?? /* @__PURE__ */ new Map();
+	let next = null;
+	for (let i = 0; i < views.length; i++) {
+		const view = views.at(i);
+		const old = held.get(view.entity);
+		const drawn = device === null ? void 0 : targets.get(view[target]);
+		if (device === null || drawn === void 0) {
+			if (old === void 0) continue;
+			old.buffer.destroy();
+			next ??= new Map(held);
+			next.delete(view.entity);
+			continue;
+		}
+		const rectangle = rectangleOf(view[viewport], drawn.size);
+		const matrix = view[projection];
+		if (old !== void 0 && old.target === drawn && sameRectangle(old.rectangle, rectangle) && sameMatrix(old.projection, matrix)) continue;
+		const kept = old !== void 0 && old.target.device === device;
+		if (old !== void 0 && !kept) old.buffer.destroy();
+		const buffer = kept ? old.buffer : device.createBuffer({
+			label: `view ${view.entity}`,
+			size: uniformBytes,
+			usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+		});
+		const bindGroup = kept ? old.bindGroup : device.createBindGroup({
+			layout: layout(device),
+			entries: [{
+				binding: 0,
+				resource: { buffer }
+			}]
+		});
+		device.queue.writeBuffer(buffer, 0, new Float32Array([
+			...matrix,
+			rectangle[2],
+			rectangle[3],
+			0,
+			0
+		]));
+		next ??= new Map(held);
+		next.set(view.entity, {
+			entity: view.entity,
+			target: drawn,
+			rectangle,
+			projection: matrix,
+			buffer,
+			bindGroup
+		});
+	}
+	return next ?? held;
+};
+/** Destroys a view's uniform buffer when it stops being one. */
+const release = Finalizer.create({ components: { with: [
+	target,
+	viewport,
+	projection
+] } }, (view, { resources }) => {
+	const current = resources[states];
+	const state = current?.get(view.entity);
+	if (current === null || state === void 0) return;
+	state.buffer.destroy();
+	const next = new Map(current);
+	next.delete(view.entity);
+	resources[states] = next;
+});
+/**
+* Begins a render pass drawing into a view: its target's textures, loading what they hold, limited to its rectangle,
+* multisampled passes resolving into the target's color.
+*/
+const begin = (encoder, view, label) => {
+	const { color, multisampled, depth } = view.target;
+	const pass = encoder.beginRenderPass({
+		label,
+		colorAttachments: [{
+			view: (multisampled ?? color).createView(),
+			resolveTarget: multisampled === null ? void 0 : color.createView(),
+			loadOp: "load",
+			storeOp: "store"
+		}],
+		depthStencilAttachment: depth === null ? void 0 : {
+			view: depth.createView(),
+			depthLoadOp: "load",
+			depthStoreOp: "store"
+		}
+	});
+	const [x, y, width, height] = view.rectangle;
+	pass.setViewport(x, y, width, height, 0, 1);
+	pass.setScissorRect(x, y, width, height);
+	return pass;
+};
+function declare$(key, kind, declaration) {
+	(globalThis[Symbol.for("@adobe/ecs/declarations@1")] ??= /* @__PURE__ */ new Map()).set(key, {
+		kind,
+		declaration
+	});
+}
+//#endregion
+//#region src/frame/frame.ts
+const everyTarget = Index.create({
+	key: [],
+	components: { with: [options$1, size] }
+});
+const everySurface = Index.create({
+	key: [],
+	components: { with: [
+		canvas,
+		options,
+		size
+	] }
+});
+const everyView = Index.create({
+	key: [],
+	components: { with: [
+		target,
+		viewport,
+		projection
+	] }
+});
+/**
+* Brings render targets, surfaces and views up to date with their entities and the world's device, then clears each
+* target that declares a clear color: its color to that color and its depth to 1. Draws go after it and before
+* `present`.
+*/
+const update = System.create({ lookup: {
+	targets: { index: everyTarget },
+	surfaces: { index: everySurface },
+	views: { index: everyView }
+} }, ({ resources, lookup }) => {
+	const device = resources[gpuDevice];
+	const targets = updated$2(device, resources[states$2], lookup.targets());
+	const surfaces = updated$1(device, targets, resources[states$1], lookup.surfaces());
+	const views = updated(device, targets, resources[states], lookup.views());
+	if (targets !== resources[states$2]) resources[states$2] = targets;
+	if (surfaces !== resources[states$1]) resources[states$1] = surfaces;
+	if (views !== resources[states]) resources[states] = views;
+	if (device === null || targets.size === 0) return;
+	const encoder = device.createCommandEncoder({ label: "clear targets" });
+	recordClears(encoder, targets);
+	device.queue.submit([encoder.finish()]);
+});
+/**
+* Copies each surface's target into its canvas, in one body, so every draw of the run is in the frame the browser
+* presents, even where the run waited between them.
+*/
+const present = System.render({
+	components: { with: [canvas] },
+	shader: { accessors: {} },
+	after: [update]
+}, ({ encoder }, { resources }) => {
+	const targets = resources[states$2];
+	for (const surface of resources[states$1]?.values() ?? []) {
+		const target = targets?.get(surface.entity);
+		if (target === void 0 || target.device !== surface.device) continue;
+		const current = surface.context.getCurrentTexture();
+		const [width, height] = target.size;
+		if (current.width !== width || current.height !== height) continue;
+		encoder.copyTextureToTexture({ texture: target.color }, { texture: current }, [width, height]);
+	}
+});
+/** Every system of a frame, in order: targets, surfaces and views updated and targets cleared, then surfaces presented. */
+const systems = System.create({ systems: [update, present] });
+//#endregion
+//#region src/frame/public.ts
+var public_exports$2 = /* @__PURE__ */ __exportAll({
+	present: () => present,
+	systems: () => systems,
+	update: () => update
+});
+//#endregion
+//#region src/surface/public.ts
+var public_exports$3 = /* @__PURE__ */ __exportAll({
+	Options: () => Options,
+	attach: () => attach,
+	canvas: () => canvas,
+	observe: () => observe,
+	options: () => options,
+	release: () => release$1,
+	states: () => states$1
+});
+//#endregion
+//#region src/view/public.ts
+var public_exports$5 = /* @__PURE__ */ __exportAll({
+	begin: () => begin,
+	layout: () => layout,
+	projection: () => projection,
+	release: () => release,
+	states: () => states,
+	target: () => target,
+	viewport: () => viewport,
+	wgsl: () => wgsl
+});
+//#endregion
+export { public_exports as Cache, public_exports$1 as Device, public_exports$2 as Frame, public_exports$3 as Surface, public_exports$4 as Target, public_exports$5 as View };
+
+//# sourceMappingURL=index.js.map