q5 2.5.4 → 2.6.1

package/src/q5-webgpu-canvas.js

@@ -11,18 +11,30 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 	c.width = $.width = 500;
 	c.height = $.height = 500;
 
-	if ($.colorMode) $.colorMode('rgb', 'float');
+	if ($.colorMode) $.colorMode('rgb', 1);
 
-	let pass;
+	let pass,
+		mainView,
+		colorsLayout,
+		colorIndex = 1,
+		colorStackIndex = 8;
 
-	$.pipelines = [];
+	$._pipelineConfigs = [];
+	$._pipelines = [];
 
 	// local variables used for slightly better performance
 	// stores pipeline shifts and vertex counts/image indices
 	let drawStack = ($.drawStack = []);
 
 	// colors used for each draw call
-	let colorsStack = ($.colorsStack = [1, 1, 1, 1]);
+
+	let colorStack = ($.colorStack = new Float32Array(1e6));
+
+	// prettier-ignore
+	colorStack.set([
+		0, 0, 0, 1, // black
+		1, 1, 1, 1 // white
+	]);
 
 	$._transformLayout = Q5.device.createBindGroupLayout({
 		label: 'transformLayout',
@@ -46,32 +58,70 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		]
 	});
 
-	$.bindGroupLayouts = [$._transformLayout];
+	colorsLayout = Q5.device.createBindGroupLayout({
+		label: 'colorsLayout',
+		entries: [
+			{
+				binding: 0,
+				visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+				buffer: {
+					type: 'read-only-storage',
+					hasDynamicOffset: false
+				}
+			}
+		]
+	});
+
+	$.bindGroupLayouts = [$._transformLayout, colorsLayout];
 
 	let uniformBuffer = Q5.device.createBuffer({
 		size: 8, // Size of two floats
 		usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
 	});
 
+	let createMainView = () => {
+		mainView = Q5.device
+			.createTexture({
+				size: [$.canvas.width, $.canvas.height],
+				sampleCount: 4,
+				format: 'bgra8unorm',
+				usage: GPUTextureUsage.RENDER_ATTACHMENT
+			})
+			.createView();
+	};
+
 	$._createCanvas = (w, h, opt) => {
 		q.ctx = q.drawingContext = c.getContext('webgpu');
 
 		opt.format ??= navigator.gpu.getPreferredCanvasFormat();
 		opt.device ??= Q5.device;
 
+		// needed for other blend modes but couldn't get it working
+		// opt.alphaMode = 'premultiplied';
+
 		$.ctx.configure(opt);
 
 		Q5.device.queue.writeBuffer(uniformBuffer, 0, new Float32Array([$.canvas.hw, $.canvas.hh]));
 
+		createMainView();
+
 		return c;
 	};
 
 	$._resizeCanvas = (w, h) => {
 		$._setCanvasSize(w, h);
+		createMainView();
+	};
+
+	$.pixelDensity = (v) => {
+		if (!v || v == $._pixelDensity) return $._pixelDensity;
+		$._pixelDensity = v;
+		$._setCanvasSize(c.w, c.h);
+		createMainView();
+		return v;
 	};
 
 	// current color index, used to associate a vertex with a color
-	let colorIndex = 0;
 	let addColor = (r, g, b, a = 1) => {
 		if (typeof r == 'string') r = $.color(r);
 		else if (b == undefined) {
@@ -79,21 +129,35 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 			a = g ?? 1;
 			g = b = r;
 		}
-		if (r._q5Color) colorsStack.push(r.r, r.g, r.b, r.a);
-		else colorsStack.push(r, g, b, a);
+		if (r._q5Color) {
+			a = r.a;
+			b = r.b;
+			g = r.g;
+			r = r.r;
+		}
+
+		let cs = colorStack,
+			i = colorStackIndex;
+		cs[i++] = r;
+		cs[i++] = g;
+		cs[i++] = b;
+		cs[i++] = a;
+		colorStackIndex = i;
+
 		colorIndex++;
 	};
 
-	$._fillIndex = $._strokeIndex = -1;
+	$._fillIndex = $._strokeIndex = 0;
+	$._doFill = $._doStroke = true;
 
 	$.fill = (r, g, b, a) => {
 		addColor(r, g, b, a);
-		$._doFill = true;
+		$._doFill = $._fillSet = true;
 		$._fillIndex = colorIndex;
 	};
 	$.stroke = (r, g, b, a) => {
 		addColor(r, g, b, a);
-		$._doStroke = true;
+		$._doStroke = $._strokeSet = true;
 		$._strokeIndex = colorIndex;
 	};
 
@@ -121,7 +185,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 	$._matrixDirty = false;
 
 	// array to store transformation matrices for the render pass
-	$.transformStates = [$._matrix.slice()];
+	let transformStates = [$._matrix.slice()];
 
 	// stack to keep track of transformation matrix indexes
 	$._transformIndexStack = [];
@@ -238,8 +302,8 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 
 	// Function to save the current matrix state if dirty
 	$._saveMatrix = () => {
-		$.transformStates.push($._matrix.slice());
-		$._transformIndex = $.transformStates.length - 1;
+		transformStates.push($._matrix.slice());
+		$._transformIndex = transformStates.length - 1;
 		$._matrixDirty = false;
 	};
 
@@ -254,7 +318,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		}
 		// Pop the last matrix index and set it as the current matrix index
 		let idx = $._transformIndexStack.pop();
-		$._matrix = $.transformStates[idx].slice();
+		$._matrix = transformStates[idx].slice();
 		$._transformIndex = idx;
 		$._matrixDirty = false;
 	};
@@ -295,6 +359,68 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		return [l, r, t, b];
 	};
 
+	// prettier-ignore
+	let blendFactors = [
+			'zero',                // 0
+			'one',                 // 1
+			'src-alpha',           // 2
+			'one-minus-src-alpha', // 3
+			'dst',                 // 4
+			'dst-alpha',           // 5
+			'one-minus-dst-alpha', // 6
+			'one-minus-src'        // 7
+	];
+	let blendOps = [
+		'add', // 0
+		'subtract', // 1
+		'reverse-subtract', // 2
+		'min', // 3
+		'max' // 4
+	];
+
+	const blendModes = {
+		normal: [2, 3, 0, 2, 3, 0],
+		// destination_over: [6, 1, 0, 6, 1, 0],
+		additive: [1, 1, 0, 1, 1, 0]
+		// source_in: [5, 0, 0, 5, 0, 0],
+		// destination_in: [0, 2, 0, 0, 2, 0],
+		// source_out: [6, 0, 0, 6, 0, 0],
+		// destination_out: [0, 3, 0, 0, 3, 0],
+		// source_atop: [5, 3, 0, 5, 3, 0],
+		// destination_atop: [6, 2, 0, 6, 2, 0]
+	};
+
+	$.blendConfigs = {};
+
+	for (const [name, mode] of Object.entries(blendModes)) {
+		$.blendConfigs[name] = {
+			color: {
+				srcFactor: blendFactors[mode[0]],
+				dstFactor: blendFactors[mode[1]],
+				operation: blendOps[mode[2]]
+			},
+			alpha: {
+				srcFactor: blendFactors[mode[3]],
+				dstFactor: blendFactors[mode[4]],
+				operation: blendOps[mode[5]]
+			}
+		};
+	}
+
+	$._blendMode = 'normal';
+	$.blendMode = (mode) => {
+		if (mode == $._blendMode) return;
+		if (mode == 'source-over') mode = 'normal';
+		if (mode == 'lighter') mode = 'additive';
+		mode = mode.toLowerCase().replace(/[ -]/g, '_');
+		$._blendMode = mode;
+
+		for (let i = 0; i < $._pipelines.length; i++) {
+			$._pipelineConfigs[i].fragment.targets[0].blend = $.blendConfigs[mode];
+			$._pipelines[i] = Q5.device.createRenderPipeline($._pipelineConfigs[i]);
+		}
+	};
+
 	$.clear = () => {};
 
 	$._beginRender = () => {
@@ -304,7 +430,8 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 			label: 'q5-webgpu',
 			colorAttachments: [
 				{
-					view: ctx.getCurrentTexture().createView(),
+					view: mainView,
+					resolveTarget: $.ctx.getCurrentTexture().createView(),
 					loadOp: 'clear',
 					storeOp: 'store'
 				}
@@ -315,58 +442,62 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 	$._render = () => {
 		if (transformStates.length > 1 || !$._transformBindGroup) {
 			let transformBuffer = Q5.device.createBuffer({
-				size: transformStates.length * 64, // Size of 16 floats
-				usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+				size: transformStates.length * 64, // 64 is the size of 16 floats
+				usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+				mappedAtCreation: true
 			});
 
-			Q5.device.queue.writeBuffer(transformBuffer, 0, new Float32Array(transformStates.flat()));
+			new Float32Array(transformBuffer.getMappedRange()).set(transformStates.flat());
+			transformBuffer.unmap();
 
 			$._transformBindGroup = Q5.device.createBindGroup({
 				layout: $._transformLayout,
 				entries: [
-					{
-						binding: 0,
-						resource: {
-							buffer: uniformBuffer
-						}
-					},
-					{
-						binding: 1,
-						resource: {
-							buffer: transformBuffer
-						}
-					}
+					{ binding: 0, resource: { buffer: uniformBuffer } },
+					{ binding: 1, resource: { buffer: transformBuffer } }
 				]
 			});
 		}
 
 		pass.setBindGroup(0, $._transformBindGroup);
 
+		let colorsBuffer = Q5.device.createBuffer({
+			size: colorStackIndex * 4,
+			usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+			mappedAtCreation: true
+		});
+
+		new Float32Array(colorsBuffer.getMappedRange()).set(colorStack.slice(0, colorStackIndex));
+		colorsBuffer.unmap();
+
+		$._colorsBindGroup = Q5.device.createBindGroup({
+			layout: colorsLayout,
+			entries: [{ binding: 0, resource: { buffer: colorsBuffer } }]
+		});
+
+		$.pass.setBindGroup(1, $._colorsBindGroup);
+
 		for (let m of $._hooks.preRender) m();
 
-		let drawVertOffset = 0;
-		let imageVertOffset = 0;
-		let textCharOffset = 0;
-		let curPipelineIndex = -1;
-		let curTextureIndex = -1;
+		let drawVertOffset = 0,
+			imageVertOffset = 0,
+			textCharOffset = 0,
+			curPipelineIndex = -1,
+			curTextureIndex = -1;
 
-		for (let i = 0; i < drawStack.length; i += 2) {
+		for (let i = 0; i < drawStack.length; i += 3) {
 			let v = drawStack[i + 1];
-
-			if (drawStack[i] == -1) {
-				v();
-				continue;
-			}
+			let o = drawStack[i + 2];
 
 			if (curPipelineIndex != drawStack[i]) {
 				curPipelineIndex = drawStack[i];
-				pass.setPipeline($.pipelines[curPipelineIndex]);
+				pass.setPipeline($._pipelines[curPipelineIndex]);
 			}
 
 			if (curPipelineIndex == 0) {
 				// v is the number of vertices
-				pass.draw(v, 1, drawVertOffset);
-				drawVertOffset += v;
+				pass.drawIndexed(v, 1, 0, drawVertOffset);
+				drawVertOffset += o;
 			} else if (curPipelineIndex == 1) {
 				if (curTextureIndex != v) {
 					// v is the texture index
@@ -375,7 +506,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 				pass.draw(6, 1, imageVertOffset);
 				imageVertOffset += 6;
 			} else if (curPipelineIndex == 2) {
-				pass.setBindGroup(2, $._font.bindGroup);
+				pass.setBindGroup(2, $._fonts[o].bindGroup);
 				pass.setBindGroup(3, $._textBindGroup);
 
 				// v is the number of characters in the text
@@ -391,30 +522,39 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		pass.end();
 		let commandBuffer = $.encoder.finish();
 		Q5.device.queue.submit([commandBuffer]);
+
 		q.pass = $.encoder = null;
 
 		// clear the stacks for the next frame
 		$.drawStack.length = 0;
-		$.colorsStack.length = 4;
-		colorIndex = 0;
+		colorIndex = 1;
+		colorStackIndex = 8;
 		rotation = 0;
-		$.transformStates.length = 1;
+		transformStates.length = 1;
 		$._transformIndexStack.length = 0;
 	};
 };
 
-Q5.webgpu = async function (scope, parent) {
-	if (!scope || scope == 'global') Q5._hasGlobal = true;
+Q5.initWebGPU = async () => {
 	if (!navigator.gpu) {
 		console.warn('q5 WebGPU not supported on this browser!');
+		return false;
+	}
+	if (!Q5.device) {
+		let adapter = await navigator.gpu.requestAdapter();
+		if (!adapter) throw new Error('No appropriate GPUAdapter found.');
+		Q5.device = await adapter.requestDevice();
+	}
+	return true;
+};
+
+Q5.webgpu = async function (scope, parent) {
+	if (!scope || scope == 'global') Q5._hasGlobal = true;
+	if (!(await Q5.initWebGPU())) {
 		let q = new Q5(scope, parent);
 		q.colorMode('rgb', 1);
 		q._beginRender = () => q.translate(q.canvas.hw, q.canvas.hh);
 		return q;
 	}
-	let adapter = await navigator.gpu.requestAdapter();
-	if (!adapter) throw new Error('No appropriate GPUAdapter found.');
-	Q5.device = await adapter.requestDevice();
-
 	return new Q5(scope, parent, 'webgpu');
 };