q5 2.4.5 → 2.4.10

package/src/q5-2d-text.js

@@ -1,9 +1,21 @@
 Q5.renderers.q2d.text = ($, q) => {
-	$._textFont = 'sans-serif';
-	$._textSize = 12;
-	$._textLeading = 15;
-	$._textLeadDiff = 3;
-	$._textStyle = 'normal';
+	$._textAlign = 'left';
+	$._textBaseline = 'alphabetic';
+
+	let font = 'sans-serif',
+		tSize = 12,
+		leading = 15,
+		leadDiff = 3,
+		emphasis = 'normal',
+		fontMod = false,
+		styleHash = 0,
+		styleHashes = [],
+		useCache = false,
+		genTextImage = false,
+		cacheSize = 0,
+		cacheMax = 12000;
+
+	let cache = ($._textCache = {});
 
 	$.loadFont = (url, cb) => {
 		q._preloadCount++;
@@ -16,156 +28,162 @@ Q5.renderers.q2d.text = ($, q) => {
 		});
 		return name;
 	};
-	$.textFont = (x) => ($._textFont = x);
+
+	$.textFont = (x) => {
+		font = x;
+		fontMod = true;
+		styleHash = -1;
+	};
 	$.textSize = (x) => {
-		if (x === undefined) return $._textSize;
+		if (x === undefined) return tSize;
 		if ($._da) x *= $._da;
-		$._textSize = x;
+		tSize = x;
+		fontMod = true;
+		styleHash = -1;
 		if (!$._leadingSet) {
-			$._textLeading = x * 1.25;
-			$._textLeadDiff = $._textLeading - x;
+			leading = x * 1.25;
+			leadDiff = leading - x;
 		}
 	};
+	$.textStyle = (x) => {
+		emphasis = x;
+		fontMod = true;
+		styleHash = -1;
+	};
 	$.textLeading = (x) => {
-		if (x === undefined) return $._textLeading;
+		if (x === undefined) return leading;
 		if ($._da) x *= $._da;
-		$._textLeading = x;
-		$._textLeadDiff = x - $._textSize;
+		leading = x;
+		leadDiff = x - tSize;
 		$._leadingSet = true;
+		styleHash = -1;
 	};
-	$.textStyle = (x) => ($._textStyle = x);
 	$.textAlign = (horiz, vert) => {
-		$.ctx.textAlign = horiz;
+		$.ctx.textAlign = $._textAlign = horiz;
 		if (vert) {
-			$.ctx.textBaseline = vert == $.CENTER ? 'middle' : vert;
+			$.ctx.textBaseline = $._textBaseline = vert == $.CENTER ? 'middle' : vert;
 		}
+		styleHash = -1;
 	};
-	$.textWidth = (str) => {
-		$.ctx.font = `${$._textStyle} ${$._textSize}px ${$._textFont}`;
-		return $.ctx.measureText(str).width;
-	};
-	$.textAscent = (str) => {
-		$.ctx.font = `${$._textStyle} ${$._textSize}px ${$._textFont}`;
-		return $.ctx.measureText(str).actualBoundingBoxAscent;
-	};
-	$.textDescent = (str) => {
-		$.ctx.font = `${$._textStyle} ${$._textSize}px ${$._textFont}`;
-		return $.ctx.measureText(str).actualBoundingBoxDescent;
-	};
+
+	$.textWidth = (str) => $.ctx.measureText(str).width;
+	$.textAscent = (str) => $.ctx.measureText(str).actualBoundingBoxAscent;
+	$.textDescent = (str) => $.ctx.measureText(str).actualBoundingBoxDescent;
+
 	$.textFill = $.fill;
 	$.textStroke = $.stroke;
 
-	$._textCache = !!Q5.Image;
-	$._TimedCache = class extends Map {
-		constructor() {
-			super();
-			this.maxSize = 50000;
-		}
-		set(k, v) {
-			v.lastAccessed = Date.now();
-			super.set(k, v);
-			if (this.size > this.maxSize) this.gc();
-		}
-		get(k) {
-			const v = super.get(k);
-			if (v) v.lastAccessed = Date.now();
-			return v;
-		}
-		gc() {
-			let t = Infinity;
-			let oldest;
-			let i = 0;
-			for (const [k, v] of this.entries()) {
-				if (v.lastAccessed < t) {
-					t = v.lastAccessed;
-					oldest = i;
-				}
-				i++;
-			}
-			i = oldest;
-			for (const k of this.keys()) {
-				if (i == 0) {
-					oldest = k;
-					break;
-				}
-				i--;
-			}
-			this.delete(oldest);
+	let updateStyleHash = () => {
+		let styleString = font + tSize + emphasis + leading;
+
+		let hash = 5381;
+		for (let i = 0; i < styleString.length; i++) {
+			hash = (hash * 33) ^ styleString.charCodeAt(i);
 		}
+		styleHash = hash >>> 0;
 	};
-	$._tic = new $._TimedCache();
-	$.textCache = (b, maxSize) => {
-		if (maxSize) $._tic.maxSize = maxSize;
-		if (b !== undefined) $._textCache = b;
-		return $._textCache;
-	};
-	$._genTextImageKey = (str, w, h) => {
-		return (
-			str.slice(0, 200) +
-			$._textStyle +
-			$._textSize +
-			$._textFont +
-			($._doFill ? $.ctx.fillStyle : '') +
-			'_' +
-			($._doStroke && $._strokeSet ? $.ctx.lineWidth + $.ctx.strokeStyle + '_' : '') +
-			(w || '') +
-			(h ? 'x' + h : '')
-		);
+
+	$.textCache = (enable, maxSize) => {
+		if (maxSize) cacheMax = maxSize;
+		if (enable !== undefined) useCache = enable;
+		return useCache;
 	};
 	$.createTextImage = (str, w, h) => {
-		let k = $._genTextImageKey(str, w, h);
-		if ($._tic.get(k)) return $._tic.get(k);
-
-		let og = $._textCache;
-		$._textCache = true;
-		$._genTextImage = true;
-		$.text(str, 0, 0, w, h);
-		$._genTextImage = false;
-		$._textCache = og;
-		return $._tic.get(k);
+		genTextImage = true;
+		img = $.text(str, 0, 0, w, h);
+		genTextImage = false;
+		return img;
 	};
+
+	let lines = [];
 	$.text = (str, x, y, w, h) => {
 		if (str === undefined || (!$._doFill && !$._doStroke)) return;
 		str = str.toString();
-		let lines = str.split('\n');
 		if ($._da) {
 			x *= $._da;
 			y *= $._da;
 		}
 		let ctx = $.ctx;
-		ctx.font = `${$._textStyle} ${$._textSize}px ${$._textFont}`;
+		let img, tX, tY;
 
-		let useCache, img, cacheKey, tX, tY, ascent, descent;
+		if (fontMod) {
+			ctx.font = `${emphasis} ${tSize}px ${font}`;
+			fontMod = false;
+		}
 
-		if (!(useCache = $._genTextImage) && $._textCache) {
-			let transform = $.ctx.getTransform();
-			useCache = transform.b != 0 || transform.c != 0;
+		if (useCache || genTextImage) {
+			if (styleHash == -1) updateStyleHash();
+
+			img = cache[str];
+			if (img) img = img[styleHash];
+
+			if (img) {
+				if (img._fill == $._fill && img._stroke == $._stroke && img._strokeWeight == $._strokeWeight) {
+					if (genTextImage) return img;
+					return $.textImage(img, x, y);
+				} else img.clear();
+			}
 		}
 
-		if (!useCache) {
+		if (str.indexOf('\n') == -1) lines[0] = str;
+		else lines = str.split('\n');
+
+		if (w) {
+			let wrapped = [];
+			for (let line of lines) {
+				let i = 0;
+
+				while (i < line.length) {
+					let max = i + w;
+					if (max >= line.length) {
+						wrapped.push(line.slice(i));
+						break;
+					}
+					let end = line.lastIndexOf(' ', max);
+					if (end === -1 || end < i) {
+						end = max;
+					}
+					wrapped.push(line.slice(i, end));
+					i = end;
+				}
+			}
+			lines = wrapped;
+		}
+
+		if (!useCache && !genTextImage) {
 			tX = x;
 			tY = y;
 		} else {
-			cacheKey = $._genTextImageKey(str, w, h);
-			img = $._tic.get(cacheKey);
-			if (img && !$._genTextImage) return $.textImage(img, x, y);
-
 			tX = 0;
-			tY = $._textLeading * lines.length;
-			let measure = ctx.measureText(' ');
-			ascent = measure.fontBoundingBoxAscent;
-			descent = measure.fontBoundingBoxDescent;
-			h ??= tY + descent;
+			tY = leading * lines.length;
+
+			if (!img) {
+				let measure = ctx.measureText(' ');
+				let ascent = measure.fontBoundingBoxAscent;
+				let descent = measure.fontBoundingBoxDescent;
+				h ??= tY + descent;
 
-			img = $.createImage.call($, Math.ceil(ctx.measureText(str).width), Math.ceil(h), {
-				pixelDensity: $._pixelDensity
-			});
+				img = $.createImage.call($, Math.ceil(ctx.measureText(str).width), Math.ceil(h), {
+					pixelDensity: $._pixelDensity
+				});
+
+				img._ascent = ascent;
+				img._descent = descent;
+				img._top = descent + leadDiff;
+				img._middle = img._top + ascent * 0.5;
+				img._bottom = img._top + ascent;
+			}
+
+			img._fill = $._fill;
+			img._stroke = $._stroke;
+			img._strokeWeight = $._strokeWeight;
+			img.modified = true;
 
 			ctx = img.ctx;
 
 			ctx.font = $.ctx.font;
-			ctx.fillStyle = $.ctx.fillStyle;
-			ctx.strokeStyle = $.ctx.strokeStyle;
+			ctx.fillStyle = $._fill;
+			ctx.strokeStyle = $._stroke;
 			ctx.lineWidth = $.ctx.lineWidth;
 		}
 
@@ -175,31 +193,49 @@ Q5.renderers.q2d.text = ($, q) => {
 			ctx.fillStyle = 'black';
 		}
 
-		for (let i = 0; i < lines.length; i++) {
-			if ($._doStroke && $._strokeSet) ctx.strokeText(lines[i], tX, tY);
-			if ($._doFill) ctx.fillText(lines[i], tX, tY);
-			tY += $._textLeading;
+		for (let line of lines) {
+			if ($._doStroke && $._strokeSet) ctx.strokeText(line, tX, tY);
+			if ($._doFill) ctx.fillText(line, tX, tY);
+			tY += leading;
 			if (tY > h) break;
 		}
+		lines.length = 0;
 
 		if (!$._fillSet) ctx.fillStyle = ogFill;
 
-		if (useCache) {
-			img._ascent = ascent;
-			img._descent = descent;
-			$._tic.set(cacheKey, img);
-			if (!$._genTextImage) $.textImage(img, x, y);
+		if (useCache || genTextImage) {
+			styleHashes.push(styleHash);
+			(cache[str] ??= {})[styleHash] = img;
+
+			cacheSize++;
+			if (cacheSize > cacheMax) {
+				let half = Math.ceil(cacheSize / 2);
+				let hashes = styleHashes.splice(0, half);
+				for (let s in cache) {
+					s = cache[s];
+					for (let h of hashes) delete s[h];
+				}
+				cacheSize -= half;
+			}
+
+			if (genTextImage) return img;
+			$.textImage(img, x, y);
 		}
 	};
 	$.textImage = (img, x, y) => {
 		let og = $._imageMode;
 		$._imageMode = 'corner';
-		if ($.ctx.textAlign == 'center') x -= img.width * 0.5;
-		else if ($.ctx.textAlign == 'right') x -= img.width;
-		if ($.ctx.textBaseline == 'alphabetic') y -= $._textLeading;
-		if ($.ctx.textBaseline == 'middle') y -= img._descent + img._ascent * 0.5 + $._textLeadDiff;
-		else if ($.ctx.textBaseline == 'bottom') y -= img._ascent + img._descent + $._textLeadDiff;
-		else if ($.ctx.textBaseline == 'top') y -= img._descent + $._textLeadDiff;
+
+		let ta = $._textAlign;
+		if (ta == 'center') x -= img.canvas.hw;
+		else if (ta == 'right') x -= img.width;
+
+		let bl = $._textBaseline;
+		if (bl == 'alphabetic') y -= leading;
+		else if (bl == 'middle') y -= img._middle;
+		else if (bl == 'bottom') y -= img._bottom;
+		else if (bl == 'top') y -= img._top;
+
 		$.image(img, x, y);
 		$._imageMode = og;
 	};

package/src/q5-webgpu-canvas.js

@@ -60,8 +60,8 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 	$._createCanvas = (w, h, opt) => {
 		q.ctx = q.drawingContext = c.getContext('webgpu');
 
-		opt.format = navigator.gpu.getPreferredCanvasFormat();
-		opt.device = Q5.device;
+		opt.format ??= navigator.gpu.getPreferredCanvasFormat();
+		opt.device ??= Q5.device;
 
 		$.ctx.configure(opt);
 

package/src/q5-webgpu-image.js

@@ -118,20 +118,30 @@ fn fragmentMain(@location(0) texCoord: vec2<f32>) -> @location(0) vec4<f32> {
 		minFilter: 'linear'
 	});
 
+	let MAX_TEXTURES = 12000;
+
+	$._textures = [];
+	let tIdx = 0;
+
 	$._createTexture = (img) => {
 		if (img.canvas) img = img.canvas;
 
 		let textureSize = [img.width, img.height, 1];
 
-		const texture = Q5.device.createTexture({
+		let texture = Q5.device.createTexture({
 			size: textureSize,
 			format: 'bgra8unorm',
 			usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
 		});
 
-		Q5.device.queue.copyExternalImageToTexture({ source: img }, { texture }, textureSize);
+		Q5.device.queue.copyExternalImageToTexture(
+			{ source: img },
+			{ texture, colorSpace: $.canvas.colorSpace },
+			textureSize
+		);
 
-		img.textureIndex = $._textureBindGroups.length;
+		$._textures[tIdx] = texture;
+		img.textureIndex = tIdx;
 
 		const textureBindGroup = Q5.device.createBindGroup({
 			layout: textureLayout,
@@ -140,7 +150,16 @@ fn fragmentMain(@location(0) texCoord: vec2<f32>) -> @location(0) vec4<f32> {
 				{ binding: 1, resource: texture.createView() }
 			]
 		});
-		$._textureBindGroups.push(textureBindGroup);
+		$._textureBindGroups[tIdx] = textureBindGroup;
+
+		tIdx = (tIdx + 1) % MAX_TEXTURES;
+
+		// If the texture array is full, destroy the oldest texture
+		if ($._textures[tIdx]) {
+			$._textures[tIdx].destroy();
+			delete $._textures[tIdx];
+			delete $._textureBindGroups[tIdx];
+		}
 	};
 
 	$.loadImage = $.loadTexture = (src) => {

package/src/q5-webgpu-text.js

@@ -9,6 +9,8 @@ Q5.renderers.webgpu.text = ($, q) => {
 			q._preloadCount--;
 		});
 	};
+
+	// directly add these text setting functions to the webgpu renderer
 	$.textFont = t.textFont;
 	$.textSize = t.textSize;
 	$.textLeading = t.textLeading;
@@ -24,7 +26,20 @@ Q5.renderers.webgpu.text = ($, q) => {
 	$.text = (str, x, y, w, h) => {
 		let img = t.createTextImage(str, w, h);
 
-		if (img.canvas.textureIndex == undefined) $._createTexture(img);
+		if (img.canvas.textureIndex === undefined) {
+			$._createTexture(img);
+		} else if (img.modified) {
+			let cnv = img.canvas;
+			let textureSize = [cnv.width, cnv.height, 1];
+			let texture = $._textures[cnv.textureIndex];
+
+			Q5.device.queue.copyExternalImageToTexture(
+				{ source: cnv },
+				{ texture, colorSpace: $.canvas.colorSpace },
+				textureSize
+			);
+			img.modified = false;
+		}
 
 		$.textImage(img, x, y);
 	};
@@ -32,12 +47,20 @@ Q5.renderers.webgpu.text = ($, q) => {
 	$.createTextImage = t.createTextImage;
 
 	$.textImage = (img, x, y) => {
-		if (t.ctx.textAlign == 'center') x -= img.width * 0.5;
-		else if (t.ctx.textAlign == 'right') x -= img.width;
-		if (t.ctx.textBaseline == 'alphabetic') y -= t._textLeading;
-		if (t.ctx.textBaseline == 'middle') y -= img._descent + img._ascent * 0.5 + t._textLeadDiff;
-		else if (t.ctx.textBaseline == 'bottom') y -= img._ascent + img._descent + t._textLeadDiff;
-		else if (t.ctx.textBaseline == 'top') y -= img._descent + t._textLeadDiff;
+		let og = $._imageMode;
+		$._imageMode = 'corner';
+
+		let ta = t._textAlign;
+		if (ta == 'center') x -= img.canvas.hw;
+		else if (ta == 'right') x -= img.width;
+
+		let bl = t._textBaseline;
+		if (bl == 'alphabetic') y -= t._textLeading;
+		else if (bl == 'middle') y -= img._middle;
+		else if (bl == 'bottom') y -= img._bottom;
+		else if (bl == 'top') y -= img._top;
+
 		$.image(img, x, y);
+		$._imageMode = og;
 	};
 };

package/src/readme.md

@@ -105,7 +105,7 @@ Image based features in this module require the q5-2d-image module.
 
 `textImage(img, x, y)` displays text images, complying with the user's text position settings instead of their image position settings. The idea is that text will appear in the same place as it would if it were drawn with the `text` function.
 
-`textCache(bool, maxSize)` enables or disables text caching. As of June 2024, drawing rotated text is super slow in all browsers, so q5 creates and stores images of text and rotates that instead. Can improve rendering performance 90x but uses more memory. `maxSize` param determines the maximum number of text images to cache, default is 500 since these images will typically be quite small. The text image cache (tic) is a timed cache, so the oldest images are removed first.
+`textCache(bool, maxSize)` enables or disables text caching.
 
 ## webgpu-canvas
 
@@ -181,17 +181,9 @@ Implemented functions:
 
 > Use `textFill` and `textStroke` to set text colors.
 
-WebGPU (and WebGL) don't have fast HTML5 based text rasterization functionality, like Canvas2D does.
-
-In p5.js WebGL mode, text is drawn directly to the canvas. This is a complex task, since letters have intricate geometry: thus many triangles must be used to render text at high resolution. Unless a user wants to render a lot of text, the performance cost is actually negligible. Yet since p5.js depends on opentype.js for this, which is 528kb (171kb minified), a different approach was needed to keep q5 lightweight.
-
 Internally, q5's WebGPU renderer uses a q5 graphics object to draw text to a Canvas2D canvas via `createTextImage`, then converts that canvas to a WebGPU texture. Each texture is cached, so it doesn't have to be recreated every frame that users want to display the same text.
 
-Creating a text image is slower than rendering text if it's only displayed for one frame, but displaying static text multiple frames from a cached image is way faster than re-rendering the text. So just try not to have long strings of text that change every frame.
-
-For typical use cases, this is a great trade-off!
-
-Complete implementation of text rendering in WebGPU.
+Implemented functions:
 
 `loadFont`,`textFont`, `textSize`, `textLeading`, `textStyle`, `textAlign`, `textWidth`, `textAscent`, `textDescent`, `textFill`, `textStroke`, `text`