q5 2.2.0 → 2.2.2

package/q5.js

@@ -239,7 +239,7 @@ function Q5(scope, parent, renderer) {
 		raf($._draw);
 	}
 
-	if ((arguments.length && scope != 'namespace') || preloadDefined) {
+	if ((arguments.length && scope != 'namespace' && renderer != 'webgpu') || preloadDefined) {
 		$.preload();
 		_start();
 	} else {
@@ -1376,182 +1376,6 @@ Q5.POSTERIZE = 5;
 Q5.DILATE = 6;
 Q5.ERODE = 7;
 Q5.BLUR = 8;
-/* software implementation of image filters */
-Q5.renderers.q2d.soft_filters = ($) => {
-	let tmpBuf = null;
-
-	function ensureTmpBuf() {
-		let l = $.canvas.width * $.canvas.height * 4;
-		if (!tmpBuf || tmpBuf.length != l) {
-			tmpBuf = new Uint8ClampedArray(l);
-		}
-	}
-
-	function initSoftFilters() {
-		$._filters = [];
-		$._filters[Q5.THRESHOLD] = (data, thresh) => {
-			if (thresh === undefined) thresh = 127.5;
-			else thresh *= 255;
-			for (let i = 0; i < data.length; i += 4) {
-				const gray = 0.2126 * data[i] + 0.7152 * data[i + 1] + 0.0722 * data[i + 2];
-				data[i] = data[i + 1] = data[i + 2] = gray >= thresh ? 255 : 0;
-			}
-		};
-		$._filters[Q5.GRAY] = (data) => {
-			for (let i = 0; i < data.length; i += 4) {
-				const gray = 0.2126 * data[i] + 0.7152 * data[i + 1] + 0.0722 * data[i + 2];
-				data[i] = data[i + 1] = data[i + 2] = gray;
-			}
-		};
-		$._filters[Q5.OPAQUE] = (data) => {
-			for (let i = 0; i < data.length; i += 4) {
-				data[i + 3] = 255;
-			}
-		};
-		$._filters[Q5.INVERT] = (data) => {
-			for (let i = 0; i < data.length; i += 4) {
-				data[i] = 255 - data[i];
-				data[i + 1] = 255 - data[i + 1];
-				data[i + 2] = 255 - data[i + 2];
-			}
-		};
-		$._filters[Q5.POSTERIZE] = (data, lvl = 4) => {
-			let lvl1 = lvl - 1;
-			for (let i = 0; i < data.length; i += 4) {
-				data[i] = (((data[i] * lvl) >> 8) * 255) / lvl1;
-				data[i + 1] = (((data[i + 1] * lvl) >> 8) * 255) / lvl1;
-				data[i + 2] = (((data[i + 2] * lvl) >> 8) * 255) / lvl1;
-			}
-		};
-		$._filters[Q5.DILATE] = (data) => {
-			ensureTmpBuf();
-			tmpBuf.set(data);
-			let [w, h] = [$.canvas.width, $.canvas.height];
-			for (let i = 0; i < h; i++) {
-				for (let j = 0; j < w; j++) {
-					let l = 4 * Math.max(j - 1, 0);
-					let r = 4 * Math.min(j + 1, w - 1);
-					let t = 4 * Math.max(i - 1, 0) * w;
-					let b = 4 * Math.min(i + 1, h - 1) * w;
-					let oi = 4 * i * w;
-					let oj = 4 * j;
-					for (let k = 0; k < 4; k++) {
-						let kt = k + t;
-						let kb = k + b;
-						let ko = k + oi;
-						data[oi + oj + k] = Math.max(
-							/*tmpBuf[kt+l],*/ tmpBuf[kt + oj] /*tmpBuf[kt+r],*/,
-							tmpBuf[ko + l],
-							tmpBuf[ko + oj],
-							tmpBuf[ko + r],
-							/*tmpBuf[kb+l],*/ tmpBuf[kb + oj] /*tmpBuf[kb+r],*/
-						);
-					}
-				}
-			}
-		};
-		$._filters[Q5.ERODE] = (data) => {
-			ensureTmpBuf();
-			tmpBuf.set(data);
-			let [w, h] = [$.canvas.width, $.canvas.height];
-			for (let i = 0; i < h; i++) {
-				for (let j = 0; j < w; j++) {
-					let l = 4 * Math.max(j - 1, 0);
-					let r = 4 * Math.min(j + 1, w - 1);
-					let t = 4 * Math.max(i - 1, 0) * w;
-					let b = 4 * Math.min(i + 1, h - 1) * w;
-					let oi = 4 * i * w;
-					let oj = 4 * j;
-					for (let k = 0; k < 4; k++) {
-						let kt = k + t;
-						let kb = k + b;
-						let ko = k + oi;
-						data[oi + oj + k] = Math.min(
-							/*tmpBuf[kt+l],*/ tmpBuf[kt + oj] /*tmpBuf[kt+r],*/,
-							tmpBuf[ko + l],
-							tmpBuf[ko + oj],
-							tmpBuf[ko + r],
-							/*tmpBuf[kb+l],*/ tmpBuf[kb + oj] /*tmpBuf[kb+r],*/
-						);
-					}
-				}
-			}
-		};
-		$._filters[Q5.BLUR] = (data, rad) => {
-			rad = rad || 1;
-			rad = Math.floor(rad * $._pixelDensity);
-			ensureTmpBuf();
-			tmpBuf.set(data);
-
-			let ksize = rad * 2 + 1;
-
-			function gauss1d(ksize) {
-				let im = new Float32Array(ksize);
-				let sigma = 0.3 * rad + 0.8;
-				let ss2 = sigma * sigma * 2;
-				for (let i = 0; i < ksize; i++) {
-					let x = i - ksize / 2;
-					let z = Math.exp(-(x * x) / ss2) / (2.5066282746 * sigma);
-					im[i] = z;
-				}
-				return im;
-			}
-
-			let kern = gauss1d(ksize);
-			let [w, h] = [$.canvas.width, $.canvas.height];
-			for (let i = 0; i < h; i++) {
-				for (let j = 0; j < w; j++) {
-					let s0 = 0,
-						s1 = 0,
-						s2 = 0,
-						s3 = 0;
-					for (let k = 0; k < ksize; k++) {
-						let jk = Math.min(Math.max(j - rad + k, 0), w - 1);
-						let idx = 4 * (i * w + jk);
-						s0 += tmpBuf[idx] * kern[k];
-						s1 += tmpBuf[idx + 1] * kern[k];
-						s2 += tmpBuf[idx + 2] * kern[k];
-						s3 += tmpBuf[idx + 3] * kern[k];
-					}
-					let idx = 4 * (i * w + j);
-					data[idx] = s0;
-					data[idx + 1] = s1;
-					data[idx + 2] = s2;
-					data[idx + 3] = s3;
-				}
-			}
-			tmpBuf.set(data);
-			for (let i = 0; i < h; i++) {
-				for (let j = 0; j < w; j++) {
-					let s0 = 0,
-						s1 = 0,
-						s2 = 0,
-						s3 = 0;
-					for (let k = 0; k < ksize; k++) {
-						let ik = Math.min(Math.max(i - rad + k, 0), h - 1);
-						let idx = 4 * (ik * w + j);
-						s0 += tmpBuf[idx] * kern[k];
-						s1 += tmpBuf[idx + 1] * kern[k];
-						s2 += tmpBuf[idx + 2] * kern[k];
-						s3 += tmpBuf[idx + 3] * kern[k];
-					}
-					let idx = 4 * (i * w + j);
-					data[idx] = s0;
-					data[idx + 1] = s1;
-					data[idx + 2] = s2;
-					data[idx + 3] = s3;
-				}
-			}
-		};
-	}
-
-	$._softFilter = (typ, x) => {
-		if (!$._filters) initSoftFilters();
-		let imgData = $.ctx.getImageData(0, 0, $.canvas.width, $.canvas.height);
-		$._filters[typ](imgData.data, x);
-		$.ctx.putImageData(imgData, 0, 0);
-	};
-};
 Q5.renderers.q2d.text = ($, q) => {
 	$.NORMAL = 'normal';
 	$.ITALIC = 'italic';
@@ -1936,8 +1760,29 @@ Q5.modules.color = ($, q) => {
 	$.blue = (c) => c.b;
 	$.alpha = (c) => c.a;
 	$.lightness = (c) => {
+		if ($._colorMode == 'oklch') return c.l;
 		return ((0.2126 * c.r + 0.7152 * c.g + 0.0722 * c.b) * 100) / 255;
 	};
+	$.hue = (c) => {
+		if ($._colorMode == 'oklch') return c.h;
+		let r = c.r;
+		let g = c.g;
+		let b = c.b;
+		if ($._colorFormat == 255) {
+			r /= 255;
+			g /= 255;
+			b /= 255;
+		}
+		let max = Math.max(r, g, b);
+		let min = Math.min(r, g, b);
+		let h;
+		if (max == min) h = 0;
+		else if (max == r) h = (60 * (g - b)) / (max - min);
+		else if (max == g) h = (60 * (b - r)) / (max - min) + 120;
+		else h = (60 * (r - g)) / (max - min) + 240;
+		if (h < 0) h += 360;
+		return h;
+	};
 
 	$.lerpColor = (a, b, t) => {
 		if ($._colorMode == 'rgb') {
@@ -2392,33 +2237,21 @@ Q5.modules.math = ($, q) => {
 	$.norm = (value, start, stop) => $.map(value, start, stop, 0, 1);
 	$.sq = (x) => x * x;
 	$.fract = (x) => x - Math.floor(x);
-	$.sin = (a) => {
-		if ($._angleMode == 'degrees') a = $.radians(a);
-		return Math.sin(a);
-	};
-	$.cos = (a) => {
-		if ($._angleMode == 'degrees') a = $.radians(a);
-		return Math.cos(a);
-	};
-	$.tan = (a) => {
-		if ($._angleMode == 'degrees') a = $.radians(a);
-		return Math.tan(a);
-	};
-	$.asin = (x) => {
-		let a = Math.asin(x);
-		if ($._angleMode == 'degrees') a = $.degrees(a);
-		return a;
-	};
-	$.acos = (x) => {
-		let a = Math.acos(x);
-		if ($._angleMode == 'degrees') a = $.degrees(a);
-		return a;
-	};
-	$.atan = (x) => {
-		let a = Math.atan(x);
-		if ($._angleMode == 'degrees') a = $.degrees(a);
-		return a;
-	};
+
+	for (let fn of ['sin', 'cos', 'tan']) {
+		$[fn] = (a) => {
+			if ($._angleMode == 'degrees') a = $.radians(a);
+			return Math[fn](a);
+		};
+	}
+
+	for (let fn of ['asin', 'acos', 'atan']) {
+		$[fn] = (x) => {
+			let a = Math[fn](x);
+			if ($._angleMode == 'degrees') a = $.degrees(a);
+			return a;
+		};
+	}
 	$.atan2 = (y, x) => {
 		let a = Math.atan2(y, x);
 		if ($._angleMode == 'degrees') a = $.degrees(a);
@@ -3067,3 +2900,668 @@ Q5.Vector.sub = (v, u) => v.copy().sub(u);
 for (let k of ['fromAngle', 'fromAngles', 'random2D', 'random3D']) {
 	Q5.Vector[k] = (u, v, t) => new Q5.Vector()[k](u, v, t);
 }
+/**
+ * q5-webgpu
+ *
+ * EXPERIMENTAL, for developer testing only!
+ */
+Q5.renderers.webgpu = {};
+
+Q5.renderers.webgpu.canvas = ($, q) => {
+	let c = $.canvas;
+
+	c.width = $.width = 500;
+	c.height = $.height = 500;
+
+	if ($.colorMode) $.colorMode('rgb', 'float');
+
+	let pass, colorsStack, envBindGroup, transformBindGroup;
+
+	$._createCanvas = (w, h, opt) => {
+		q.ctx = q.drawingContext = c.getContext('webgpu');
+
+		opt.format = navigator.gpu.getPreferredCanvasFormat();
+		opt.device = Q5.device;
+
+		$.ctx.configure(opt);
+
+		$.pipelines = [];
+
+		// pipeline changes for each draw call
+		$.pipelinesStack = [];
+
+		// vertices for each draw call
+		$.verticesStack = [];
+
+		// number of vertices for each draw call
+		$.drawStack = [];
+
+		// colors used for each draw call
+		colorsStack = $.colorsStack = [1, 1, 1, 1];
+
+		// current color index, used to associate a vertex with a color
+		$._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 = () => {
+		// 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();
+
+		pass = q.pass = $.encoder.beginRenderPass({
+			colorAttachments: [
+				{
+					view: ctx.getCurrentTexture().createView(),
+					loadOp: 'clear',
+					storeOp: 'store'
+				}
+			]
+		});
+	};
+
+	$._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();
+
+		// local variables used for performance
+		let drawStack = $.drawStack;
+
+		let drawVertOffset = 0;
+		let curPipelineIndex = -1;
+
+		for (let i = 0; i < drawStack.length; i += 2) {
+			if (curPipelineIndex != drawStack[i]) {
+				curPipelineIndex = drawStack[i];
+				pass.setPipeline($.pipelines[curPipelineIndex]);
+			}
+
+			let vertCount = drawStack[i + 1];
+			pass.draw(vertCount, 1, drawVertOffset, 0);
+			drawVertOffset += vertCount;
+		}
+	};
+
+	$._finishRender = () => {
+		pass.end();
+		const commandBuffer = $.encoder.finish();
+		Q5.device.queue.submit([commandBuffer]);
+		q.pass = $.encoder = null;
+
+		// clear the stacks for the next frame
+		$.verticesStack.length = 0;
+		$.drawStack.length = 0;
+		$.colorsStack.length = 4;
+		$.pipelinesStack.length = 0;
+		$._colorIndex = 0;
+		rotation = 0;
+		$.resetMatrix();
+		$._matrixDirty = false;
+		$.transformStates.length = 1;
+		$._transformIndexStack.length = 0;
+	};
+
+	function addColor(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;
+		}
+		if (r._q5Color) colorsStack.push(...r.levels);
+		else colorsStack.push(r, g, b, a);
+		$._colorIndex++;
+	}
+
+	$.fill = function () {
+		addColor(...arguments);
+		$._doFill = true;
+		$._fillIndex = $._colorIndex;
+	};
+	$.stroke = function () {
+		addColor(...arguments);
+		$._doStroke = true;
+		$._fillIndex = $._colorIndex;
+	};
+
+	$.noFill = () => ($._doFill = false);
+	$.noStroke = () => ($._doStroke = false);
+
+	$._strokeWeight = 1;
+	$.strokeWeight = (v) => ($._strokeWeight = v);
+
+	$.clear = () => {};
+};
+
+Q5.webgpu = async function (scope, parent) {
+	if (!scope || scope == 'global') Q5._hasGlobal = true;
+	if (!navigator.gpu) {
+		console.error('q5 WebGPU not supported on this browser!');
+		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');
+};
+Q5.renderers.webgpu.drawing = ($, q) => {
+	$.CLOSE = 1;
+
+	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: 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: 'float32', offset: 12, shaderLocation: 2 } // transformIndex
+			]
+		};
+
+		let vertexShader = Q5.device.createShaderModule({
+			code: `
+struct VertexOutput {
+	@builtin(position) position: vec4<f32>,
+	@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, @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 = vert;
+	output.colorIndex = colorIndex;
+	return output;
+}
+`
+		});
+
+		let fragmentShader = Q5.device.createShaderModule({
+			code: `
+@group(2) @binding(0) var<storage, read> uColors : array<vec4<f32>>;
+
+@fragment
+fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
+	let index = u32(colorIndex);
+	return mix(uColors[index], uColors[index + 1u], fract(colorIndex));
+}
+`
+		});
+
+		let pipelineLayout = Q5.device.createPipelineLayout({
+			bindGroupLayouts: $.bindGroupLayouts
+		});
+
+		$._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]]
+			},
+			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 = () => {
+		shapeVertices = [];
+	};
+
+	$.vertex = (x, y) => {
+		if ($._matrixDirty) $._saveMatrix();
+		shapeVertices.push(x, -y, $._colorIndex, $._transformIndex);
+	};
+
+	$.endShape = (close) => {
+		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
+			v.push(v[0], v[1], v[2], v[3]);
+		}
+		// Convert the shape to triangles
+		let triangles = [];
+		for (let i = 4; i < v.length; i += 4) {
+			triangles.push(
+				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(0, triangles.length / 4);
+		shapeVertices = [];
+	};
+
+	$.triangle = (x1, y1, x2, y2, x3, y3) => {
+		$.beginShape();
+		$.vertex(x1, y1);
+		$.vertex(x2, y2);
+		$.vertex(x3, y3);
+		$.endShape(1);
+	};
+
+	$.rect = (x, y, w, h) => {
+		let hw = w / 2;
+		let hh = h / 2;
+
+		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
+		// prettier-ignore
+		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, ti
+		);
+		drawStack.push(0, 6);
+	};
+
+	$.point = (x, y) => {
+		let sw = $._strokeWeight;
+		if (sw == 1) $.rect(x, y, 1, 1);
+		else $.ellipse(x, y, sw, sw);
+	};
+
+	$.background = () => {};
+
+	/**
+	 * Derived from: ceil(Math.log(d) * 7) * 2 - ceil(28)
+	 * This lookup table is used for better performance.
+	 * @param {Number} d diameter of the circle
+	 * @returns n number of segments
+	 */
+	// prettier-ignore
+	const getArcSegments = (d) => 
+    d < 14 ? 8 :
+    d < 16 ? 10 :
+    d < 18 ? 12 :
+    d < 20 ? 14 :
+    d < 22 ? 16 :
+    d < 24 ? 18 :
+    d < 28 ? 20 :
+    d < 34 ? 22 :
+    d < 42 ? 24 :
+    d < 48 ? 26 :
+    d < 56 ? 28 :
+    d < 64 ? 30 :
+    d < 72 ? 32 :
+    d < 84 ? 34 :
+    d < 96 ? 36 :
+    d < 98 ? 38 :
+    d < 113 ? 40 :
+    d < 149 ? 44 :
+    d < 199 ? 48 :
+    d < 261 ? 52 :
+    d < 353 ? 56 :
+    d < 461 ? 60 :
+    d < 585 ? 64 :
+    d < 1200 ? 70 :
+		d < 1800 ? 80 :
+		d < 2400 ? 90 :
+		100;
+
+	$.ellipse = (x, y, w, h) => {
+		const n = getArcSegments(w == h ? w : Math.max(w, h));
+
+		let a = Math.max(w, 1) / 2;
+		let b = w == h ? a : Math.max(h, 1) / 2;
+
+		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;
+			vy1 = vy2;
+			vx2 = x + a * Math.cos(t);
+			vy2 = y + b * Math.sin(t);
+			t += angleIncrement;
+
+			if (i == 0) continue;
+
+			verticesStack.push(x, y, ci, ti, vx1, vy1, ci, ti, vx2, vy2, ci, ti);
+		}
+
+		drawStack.push(0, n * 3);
+	};
+
+	$.circle = (x, y, d) => $.ellipse(x, y, d, d);
+
+	$._hooks.preRender.push(() => {
+		const vertexBuffer = Q5.device.createBuffer({
+			size: verticesStack.length * 6,
+			usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
+		});
+
+		Q5.device.queue.writeBuffer(vertexBuffer, 0, new Float32Array(verticesStack));
+		$.pass.setVertexBuffer(0, vertexBuffer);
+
+		const colorsBuffer = Q5.device.createBuffer({
+			size: colorsStack.length * 4,
+			usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+		});
+
+		Q5.device.queue.writeBuffer(colorsBuffer, 0, new Float32Array(colorsStack));
+
+		const colorsBindGroup = Q5.device.createBindGroup({
+			layout: $.bindGroupLayouts[2],
+			entries: [
+				{
+					binding: 0,
+					resource: {
+						buffer: colorsBuffer,
+						offset: 0,
+						size: colorsStack.length * 4
+					}
+				}
+			]
+		});
+
+		// set the bind group once before rendering
+		$.pass.setBindGroup(2, colorsBindGroup);
+	});
+};
+Q5.renderers.webgpu.image = ($, q) => {};
+Q5.renderers.webgpu.text = ($, q) => {};