q5 2.1.0 → 2.2.1

package/src/q5-webgpu-canvas.js

@@ -13,13 +13,12 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 
 	if ($.colorMode) $.colorMode('rgb', 'float');
 
-	let colorsStack;
+	let colorsStack, envBindGroup, transformBindGroup;
 
 	$._createCanvas = (w, h, opt) => {
 		q.ctx = q.drawingContext = c.getContext('webgpu');
 
-		$._canvasFormat = navigator.gpu.getPreferredCanvasFormat();
-		opt.format = $._canvasFormat;
+		opt.format = navigator.gpu.getPreferredCanvasFormat();
 		opt.device = Q5.device;
 
 		$.ctx.configure(opt);
@@ -36,18 +35,153 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		$.drawStack = [];
 
 		// colors used for each draw call
-		colorsStack = $.colorsStack = [];
+		colorsStack = $.colorsStack = [1, 1, 1, 1];
 
 		// current color index, used to associate a vertex with a color
-		$._colorIndex = -1;
+		$._colorIndex = 0;
+
+		let envLayout = Q5.device.createBindGroupLayout({
+			entries: [
+				{
+					binding: 0,
+					visibility: GPUShaderStage.VERTEX,
+					buffer: {
+						type: 'uniform',
+						hasDynamicOffset: false
+					}
+				}
+			]
+		});
+
+		let transformLayout = Q5.device.createBindGroupLayout({
+			entries: [
+				{
+					binding: 0,
+					visibility: GPUShaderStage.VERTEX,
+					buffer: {
+						type: 'read-only-storage',
+						hasDynamicOffset: false
+					}
+				}
+			]
+		});
+
+		$.bindGroupLayouts = [envLayout, transformLayout];
+
+		const uniformBuffer = Q5.device.createBuffer({
+			size: 8, // Size of two floats
+			usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+		});
+
+		Q5.device.queue.writeBuffer(uniformBuffer, 0, new Float32Array([$.canvas.hw, $.canvas.hh]));
+
+		envBindGroup = Q5.device.createBindGroup({
+			layout: envLayout,
+			entries: [
+				{
+					binding: 0,
+					resource: {
+						buffer: uniformBuffer
+					}
+				}
+			]
+		});
 	};
 
 	$._resizeCanvas = (w, h) => {
 		$._setCanvasSize(w, h);
 	};
 
-	$.resetMatrix = () => {};
-	$.translate = () => {};
+	$.resetMatrix = () => {
+		// Initialize the transformation matrix as 4x4 identity matrix
+
+		// prettier-ignore
+		$._matrix = [
+			1, 0, 0, 0,
+			0, 1, 0, 0,
+			0, 0, 1, 0,
+			0, 0, 0, 1
+		];
+		$._transformIndex = 0;
+	};
+	$.resetMatrix();
+
+	// Boolean to track if the matrix has been modified
+	$._matrixDirty = false;
+
+	// Array to store transformation matrices for the render pass
+	$.transformStates = [$._matrix.slice()];
+
+	// Stack to keep track of transformation matrix indexes
+	$._transformIndexStack = [];
+
+	$.push = () => {
+		// Push the current matrix index onto the stack
+		$._transformIndexStack.push($._transformIndex);
+	};
+
+	$.pop = () => {
+		if ($._transformIndexStack.length > 0) {
+			// Pop the last matrix index from the stack and set it as the current matrix index
+			let idx = $._transformIndexStack.pop();
+			$._matrix = $.transformStates[idx].slice();
+			$._transformIndex = idx;
+		} else {
+			console.warn('Matrix index stack is empty!');
+		}
+	};
+
+	$.translate = (x, y, z) => {
+		if (!x && !y && !z) return;
+		// Update the translation values
+		$._matrix[3] += x;
+		$._matrix[7] += y;
+		$._matrix[11] += z || 0;
+		$._matrixDirty = true;
+	};
+
+	$.rotate = (r) => {
+		if (!r) return;
+		if ($._angleMode == 'degrees') r = $.radians(r);
+
+		let cosR = Math.cos(r);
+		let sinR = Math.sin(r);
+
+		let m0 = $._matrix[0],
+			m1 = $._matrix[1],
+			m4 = $._matrix[4],
+			m5 = $._matrix[5];
+		if (!m0 && !m1 && !m4 && !m5) {
+			$._matrix[0] = cosR;
+			$._matrix[1] = sinR;
+			$._matrix[4] = -sinR;
+			$._matrix[5] = cosR;
+		} else {
+			$._matrix[0] = m0 * cosR + m4 * sinR;
+			$._matrix[1] = m1 * cosR + m5 * sinR;
+			$._matrix[4] = m0 * -sinR + m4 * cosR;
+			$._matrix[5] = m1 * -sinR + m5 * cosR;
+		}
+
+		$._matrixDirty = true;
+	};
+
+	$.scale = (sx = 1, sy, sz = 1) => {
+		sy ??= sx;
+
+		$._matrix[0] *= sx;
+		$._matrix[5] *= sy;
+		$._matrix[10] *= sz;
+
+		$._matrixDirty = true;
+	};
+
+	// Function to save the current matrix state if dirty
+	$._saveMatrix = () => {
+		$.transformStates.push($._matrix.slice());
+		$._transformIndex = $.transformStates.length - 1;
+		$._matrixDirty = false;
+	};
 
 	$._beginRender = () => {
 		$.encoder = Q5.device.createCommandEncoder();
@@ -64,12 +198,38 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 	};
 
 	$._render = () => {
+		$.pass.setBindGroup(0, envBindGroup);
+
+		if (transformStates.length > 1 || !transformBindGroup) {
+			const transformBuffer = Q5.device.createBuffer({
+				size: transformStates.length * 64, // Size of 16 floats
+				usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+			});
+
+			Q5.device.queue.writeBuffer(transformBuffer, 0, new Float32Array(transformStates.flat()));
+
+			transformBindGroup = Q5.device.createBindGroup({
+				layout: $.bindGroupLayouts[1],
+				entries: [
+					{
+						binding: 0,
+						resource: {
+							buffer: transformBuffer
+						}
+					}
+				]
+			});
+		}
+
+		$.pass.setBindGroup(1, transformBindGroup);
+
 		// run pre-render methods
 		for (let m of $._hooks.preRender) m();
 
 		$.pass.setPipeline($.pipelines[0]);
 
-		let drawStack = $.drawStack; // local variables used for performance
+		// local variables used for performance
+		let drawStack = $.drawStack;
 		let o = 0; // vertex offset
 		for (let i = 0; i < drawStack.length; i++) {
 			$.pass.draw(drawStack[i], 1, o, 0);
@@ -86,30 +246,41 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		// clear the stacks for the next frame
 		$.verticesStack.length = 0;
 		$.drawStack.length = 0;
-		$.colorsStack.length = 0;
+		$.colorsStack.length = 4;
 		$.pipelinesStack.length = 0;
-		$._colorIndex = -1;
+		$._colorIndex = 0;
+		rotation = 0;
+		$.resetMatrix();
+		$._matrixDirty = false;
+		$.transformStates.length = 1;
+		$._transformIndexStack.length = 0;
 	};
 
 	$.fill = (r, g, b, a = 1) => {
+		if (typeof r == 'string') r = Q5.color(r);
 		// grayscale mode `fill(1, 0.5)`
 		if (b == undefined) {
 			a = g;
 			g = b = r;
 		}
-		let levels;
-		if (r._q5Color) levels = r.levels;
-		else levels = [r, g, b, a];
-
-		colorsStack.push(...levels);
+		if (r._q5Color) colorsStack.push(...r.levels);
+		else colorsStack.push(r, g, b, a);
 		$._colorIndex++;
 	};
+	$.noFill = () => colorsStack.push(0, 0, 0, 0);
+	$.stroke = () => {};
+	$.noStroke = () => {};
+
+	$.clear = () => {};
 };
 
 Q5.webgpu = async function (scope, parent) {
 	if (!navigator.gpu) {
 		console.error('q5 WebGPU not supported on this browser!');
-		return new Q5(scope, parent);
+		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.');

package/src/q5-webgpu-drawing.js

@@ -4,23 +4,31 @@ Q5.renderers.webgpu.drawing = ($, q) => {
 	let verticesStack, drawStack, colorsStack;
 
 	$._hooks.postCanvas.push(() => {
+		let colorsLayout = Q5.device.createBindGroupLayout({
+			entries: [
+				{
+					binding: 0,
+					visibility: GPUShaderStage.FRAGMENT,
+					buffer: {
+						type: 'read-only-storage',
+						hasDynamicOffset: false
+					}
+				}
+			]
+		});
+
+		$.bindGroupLayouts.push(colorsLayout);
+
 		verticesStack = $.verticesStack;
 		drawStack = $.drawStack;
 		colorsStack = $.colorsStack;
 
 		let vertexBufferLayout = {
-			arrayStride: 12, // 2 coordinates + 1 color index * 4 bytes each
+			arrayStride: 16, // 2 coordinates + 1 color index + 1 transform index * 4 bytes each
 			attributes: [
-				{
-					format: 'float32x2',
-					offset: 0,
-					shaderLocation: 0 // position
-				},
-				{
-					format: 'float32',
-					offset: 8,
-					shaderLocation: 1 // colorIndex
-				}
+				{ format: 'float32x2', offset: 0, shaderLocation: 0 }, // position
+				{ format: 'float32', offset: 8, shaderLocation: 1 }, // colorIndex
+				{ format: 'float32', offset: 12, shaderLocation: 2 } // transformIndex
 			]
 		};
 
@@ -31,10 +39,23 @@ struct VertexOutput {
 	@location(1) colorIndex: f32
 };
 
+struct Uniforms {
+	halfWidth: f32,
+	halfHeight: f32
+};
+
+@group(0) @binding(0) var<uniform> uniforms: Uniforms;
+@group(1) @binding(0) var<storage, read> transforms: array<mat4x4<f32>>;
+
 @vertex
-fn vertexMain(@location(0) pos: vec2<f32>, @location(1) colorIndex: f32) -> VertexOutput {
+fn vertexMain(@location(0) pos: vec2<f32>, @location(1) colorIndex: f32, @location(2) transformIndex: f32) -> VertexOutput {
+	var vert = vec4<f32>(pos, 0.0, 1.0);
+	vert *= transforms[i32(transformIndex)];
+	vert.x /= uniforms.halfWidth;
+	vert.y /= uniforms.halfHeight;
+
 	var output: VertexOutput;
-	output.position = vec4<f32>(pos, 0.0, 1.0);
+	output.position = vert;
 	output.colorIndex = colorIndex;
 	return output;
 }
@@ -43,7 +64,7 @@ fn vertexMain(@location(0) pos: vec2<f32>, @location(1) colorIndex: f32) -> Vert
 
 		let fragmentShader = Q5.device.createShaderModule({
 			code: `
-@group(0) @binding(0) var<storage, read> uColors : array<vec4<f32>>;
+@group(2) @binding(0) var<storage, read> uColors : array<vec4<f32>>;
 
 @fragment
 fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
@@ -53,45 +74,104 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 `
 		});
 
-		let bindGroupLayout = Q5.device.createBindGroupLayout({
-			entries: [
-				{
-					binding: 0,
-					visibility: GPUShaderStage.FRAGMENT,
-					buffer: {
-						type: 'read-only-storage',
-						hasDynamicOffset: false
-					}
-				}
-			]
-		});
-
 		let pipelineLayout = Q5.device.createPipelineLayout({
-			bindGroupLayouts: [bindGroupLayout]
+			bindGroupLayouts: $.bindGroupLayouts
 		});
 
-		$.pipelines[0] = Q5.device.createRenderPipeline({
-			layout: pipelineLayout,
-			vertex: {
-				module: vertexShader,
-				entryPoint: 'vertexMain',
-				buffers: [vertexBufferLayout]
-			},
-			fragment: {
-				module: fragmentShader,
-				entryPoint: 'fragmentMain',
-				targets: [
-					{
-						format: $._canvasFormat
-					}
-				]
+		$._createPipeline = (blendConfig) => {
+			return Q5.device.createRenderPipeline({
+				layout: pipelineLayout,
+				vertex: {
+					module: vertexShader,
+					entryPoint: 'vertexMain',
+					buffers: [vertexBufferLayout]
+				},
+				fragment: {
+					module: fragmentShader,
+					entryPoint: 'fragmentMain',
+					targets: [
+						{
+							format: 'bgra8unorm',
+							blend: blendConfig
+						}
+					]
+				},
+				primitive: {
+					topology: 'triangle-list'
+				}
+			});
+		};
+
+		$.pipelines[0] = $._createPipeline(blendConfigs.normal);
+	});
+
+	// 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],
+		lighter: [2, 1, 0, 2, 1, 0],
+		subtract: [2, 1, 2, 2, 1, 2],
+		multiply: [4, 0, 0, 5, 0, 0],
+		screen: [1, 3, 0, 1, 3, 0],
+		darken: [1, 3, 3, 1, 3, 3],
+		lighten: [1, 3, 4, 1, 3, 4],
+		overlay: [2, 3, 0, 2, 3, 0],
+		hard_light: [2, 3, 0, 2, 3, 0],
+		soft_light: [2, 3, 0, 2, 3, 0],
+		difference: [2, 3, 2, 2, 3, 2],
+		exclusion: [2, 3, 0, 2, 3, 0],
+		color_dodge: [1, 7, 0, 1, 7, 0],
+		color_burn: [6, 1, 0, 6, 1, 0],
+		linear_dodge: [2, 1, 0, 2, 1, 0],
+		linear_burn: [2, 7, 1, 2, 7, 1],
+		vivid_light: [2, 7, 0, 2, 7, 0],
+		pin_light: [2, 7, 0, 2, 7, 0],
+		hard_mix: [2, 7, 0, 2, 7, 0]
+	};
+
+	$.blendConfigs = {};
+
+	Object.entries(blendModes).forEach(([name, mode]) => {
+		$.blendConfigs[name] = {
+			color: {
+				srcFactor: blendFactors[mode[0]],
+				dstFactor: blendFactors[mode[1]],
+				operation: blendOps[mode[2]]
 			},
-			primitive: {
-				topology: 'triangle-list'
+			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';
+		mode = mode.toLowerCase().replace(/[ -]/g, '_');
+		$._blendMode = mode;
+		$.pipelines[0] = $._createPipeline($.blendConfigs[mode]);
+	};
+
 	let shapeVertices;
 
 	$.beginShape = () => {
@@ -99,35 +179,40 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 	};
 
 	$.vertex = (x, y) => {
-		shapeVertices.push(x / $.canvas.hw, -y / $.canvas.hh, $._colorIndex);
+		if ($._matrixDirty) $._saveMatrix();
+		shapeVertices.push(x, -y, $._colorIndex, $._transformIndex);
 	};
 
 	$.endShape = (close) => {
-		if (shapeVertices.length < 6) {
+		let v = shapeVertices;
+		if (v.length < 12) {
 			throw new Error('A shape must have at least 3 vertices.');
 		}
 		if (close) {
 			// Close the shape by adding the first vertex at the end
-			shapeVertices.push(shapeVertices[0], shapeVertices[1], shapeVertices[2]);
+			v.push(v[0], v[1], v[2], v[3]);
 		}
 		// Convert the shape to triangles
 		let triangles = [];
-		for (let i = 3; i < shapeVertices.length; i += 3) {
+		for (let i = 4; i < v.length; i += 4) {
 			triangles.push(
-				shapeVertices[0],
-				shapeVertices[1],
-				shapeVertices[2], // First vertex
-				shapeVertices[i - 3],
-				shapeVertices[i - 2],
-				shapeVertices[i - 1], // Previous vertex
-				shapeVertices[i],
-				shapeVertices[i + 1],
-				shapeVertices[i + 2] // Current vertex
+				v[0], // First vertex
+				v[1],
+				v[2],
+				v[3],
+				v[i - 4], // Previous vertex
+				v[i - 3],
+				v[i - 2],
+				v[i - 1],
+				v[i], // Current vertex
+				v[i + 1],
+				v[i + 2],
+				v[i + 3]
 			);
 		}
 
 		verticesStack.push(...triangles);
-		drawStack.push(triangles.length / 3);
+		drawStack.push(triangles.length / 4);
 		shapeVertices = [];
 	};
 
@@ -142,37 +227,47 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 	$.rect = (x, y, w, h) => {
 		let hw = w / 2;
 		let hh = h / 2;
-		// convert the coordinates from pixel space to NDC space
-		let left = (x - hw) / $.canvas.hw;
-		let right = (x + hw) / $.canvas.hw;
-		let top = -(y - hh) / $.canvas.hh; // y is inverted in WebGPU
-		let bottom = -(y + hh) / $.canvas.hh; // y is inverted in WebGPU
+
+		let left = x - hw;
+		let right = x + hw;
+		let top = -(y - hh); // y is inverted in WebGPU
+		let bottom = -(y + hh);
 
 		let ci = $._colorIndex;
+		if ($._matrixDirty) $._saveMatrix();
+		let ti = $._transformIndex;
 		// two triangles make a rectangle
 		verticesStack.push(
 			left,
 			top,
 			ci,
+			ti,
 			right,
 			top,
 			ci,
+			ti,
 			left,
 			bottom,
 			ci,
+			ti,
 			right,
 			top,
 			ci,
+			ti,
 			left,
 			bottom,
 			ci,
+			ti,
 			right,
 			bottom,
-			ci
+			ci,
+			ti
 		);
 		drawStack.push(6);
 	};
 
+	$.background = () => {};
+
 	/**
 	 * Derived from: ceil(Math.log(d) * 7) * 2 - ceil(28)
 	 * This lookup table is used for better performance.
@@ -215,14 +310,11 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 		let a = Math.max(w, 1) / 2;
 		let b = w == h ? a : Math.max(h, 1) / 2;
 
-		x /= $.canvas.hw;
-		y /= -$.canvas.hh;
-		a /= $.canvas.hw;
-		b /= -$.canvas.hh;
-
 		let t = 0; // theta
 		const angleIncrement = $.TAU / n;
 		const ci = $._colorIndex;
+		if ($._matrixDirty) $._saveMatrix();
+		const ti = $._transformIndex;
 		let vx1, vy1, vx2, vy2;
 		for (let i = 0; i <= n; i++) {
 			vx1 = vx2;
@@ -233,7 +325,7 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 
 			if (i == 0) continue;
 
-			verticesStack.push(x, y, ci, vx1, vy1, ci, vx2, vy2, ci);
+			verticesStack.push(x, y, ci, ti, vx1, vy1, ci, ti, vx2, vy2, ci, ti);
 		}
 
 		drawStack.push(n * 3);
@@ -241,10 +333,6 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 
 	$.circle = (x, y, d) => $.ellipse(x, y, d, d);
 
-	$.noStroke = () => {};
-
-	$.background = () => {};
-
 	$._hooks.preRender.push(() => {
 		const vertexBuffer = Q5.device.createBuffer({
 			size: verticesStack.length * 6,
@@ -254,20 +342,20 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 		Q5.device.queue.writeBuffer(vertexBuffer, 0, new Float32Array(verticesStack));
 		$.pass.setVertexBuffer(0, vertexBuffer);
 
-		const colorBuffer = Q5.device.createBuffer({
+		const colorsBuffer = Q5.device.createBuffer({
 			size: colorsStack.length * 4,
 			usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
 		});
 
-		Q5.device.queue.writeBuffer(colorBuffer, 0, new Float32Array(colorsStack));
+		Q5.device.queue.writeBuffer(colorsBuffer, 0, new Float32Array(colorsStack));
 
-		const bindGroup = Q5.device.createBindGroup({
-			layout: $.pipelines[0].getBindGroupLayout(0),
+		const colorsBindGroup = Q5.device.createBindGroup({
+			layout: $.bindGroupLayouts[2],
 			entries: [
 				{
 					binding: 0,
 					resource: {
-						buffer: colorBuffer,
+						buffer: colorsBuffer,
 						offset: 0,
 						size: colorsStack.length * 4
 					}
@@ -276,6 +364,6 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 		});
 
 		// set the bind group once before rendering
-		$.pass.setBindGroup(0, bindGroup);
+		$.pass.setBindGroup(2, colorsBindGroup);
 	});
 };