q5 2.4.4 → 2.4.10

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 HTML5 based text rasterization functionality like Canvas2D does.
+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.
 
-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. For typical use, 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.
-
-As long as text content doesn't change often, this method is 4x more efficient.
-
-As a best practice, separate static text from dynamic text rendering. For example render labels like "Score: " and corresponding values with separate calls to `text`.
-
-Complete implementation of text rendering in WebGPU.
+Implemented functions:
 
 `loadFont`,`textFont`, `textSize`, `textLeading`, `textStyle`, `textAlign`, `textWidth`, `textAscent`, `textDescent`, `textFill`, `textStroke`, `text`