q5 2.13.3 → 2.13.10

package/src/q5-webgpu-canvas.js

@@ -159,12 +159,12 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 
 	const MAX_TRANSFORMS = 1e7, // or whatever maximum you need
 		MATRIX_SIZE = 16, // 4x4 matrix
-		transforms = new Float32Array(MAX_TRANSFORMS * MATRIX_SIZE),
+		transforms = new Float32Array(MAX_TRANSFORMS * MATRIX_SIZE);
+
+	let matrix,
 		matrices = [],
 		matricesIndexStack = [];
 
-	let matrix;
-
 	// tracks if the matrix has been modified
 	$._matrixDirty = false;
 
@@ -226,6 +226,8 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 	$.scale = (x = 1, y, z = 1) => {
 		y ??= x;
 
+		$._scale = Math.max(Math.abs(x), Math.abs(y));
+
 		let m = matrix;
 
 		m[0] *= x;
@@ -459,7 +461,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		new Float32Array(colorsBuffer.getMappedRange()).set(colorStack.slice(0, colorStackIndex));
 		colorsBuffer.unmap();
 
-		mainBindGroup = Q5.device.createBindGroup({
+		let mainBindGroup = Q5.device.createBindGroup({
 			layout: mainLayout,
 			entries: [
 				{ binding: 0, resource: { buffer: uniformBuffer } },
@@ -508,8 +510,6 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 				i++;
 			}
 		}
-
-		for (let m of $._hooks.postRender) m();
 	};
 
 	$._finishRender = () => {
@@ -520,19 +520,19 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		q.pass = $.encoder = null;
 
 		// clear the stacks for the next frame
-		$.drawStack.length = 0;
+		$.drawStack = drawStack = [];
 		colorIndex = 1;
 		colorStackIndex = 8;
-		rotation = 0;
-		transforms.length = MATRIX_SIZE;
-		matrices.length = 1;
-		matricesIndexStack.length = 0;
+		matrices = [matrices[0]];
+		matricesIndexStack = [];
+
+		for (let m of $._hooks.postRender) m();
 	};
 };
 
 Q5.initWebGPU = async () => {
 	if (!navigator.gpu) {
-		console.warn('q5 WebGPU not supported on this browser!');
+		console.warn('q5 WebGPU not supported on this browser! Use Google Chrome or Edge.');
 		return false;
 	}
 	if (!Q5.device) {

package/src/q5-webgpu-drawing.js

@@ -271,9 +271,9 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 	$.ellipseMode = (x) => ($._ellipseMode = x);
 
 	$.ellipse = (x, y, w, h) => {
-		let n = getArcSegments(Math.max(w, h));
-		let a = Math.max(w, 1) / 2;
-		let b = w == h ? a : Math.max(h, 1) / 2;
+		let n = getArcSegments(Math.max(Math.abs(w), Math.abs(h)) * $._scale);
+		let a = w / 2;
+		let b = w == h ? a : h / 2;
 
 		if ($._matrixDirty) $._saveMatrix();
 		let ti = $._matrixIndex;
@@ -306,8 +306,10 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 		}
 	};
 
-	$.stokeJoin = (x) => {
-		$.log("q5 WebGPU doesn't support changing stroke join style.");
+	$._strokeJoin = 'round';
+
+	$.strokeJoin = (x) => {
+		$._strokeJoin = x;
 	};
 
 	$.line = (x1, y1, x2, y2) => {
@@ -328,7 +330,7 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 
 		addRect(x1 + px, -y1 - py, x1 - px, -y1 + py, x2 - px, -y2 + py, x2 + px, -y2 - py, ci, ti);
 
-		if (sw > 2) {
+		if (sw > 2 && $._strokeJoin != 'none') {
 			let n = getArcSegments(sw);
 			addEllipse(x1, y1, hsw, hsw, n, ci, ti);
 			addEllipse(x2, y2, hsw, hsw, n, ci, ti);
@@ -419,17 +421,26 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 		}
 
 		if ($._doFill) {
-			// triangulate the shape
-			for (let i = 1; i < shapeVertCount - 1; i++) {
-				let v0 = 0;
-				let v1 = i * 4;
-				let v2 = (i + 1) * 4;
-
-				addVert(sv[v0], sv[v0 + 1], sv[v0 + 2], sv[v0 + 3]);
-				addVert(sv[v1], sv[v1 + 1], sv[v1 + 2], sv[v1 + 3]);
-				addVert(sv[v2], sv[v2 + 1], sv[v2 + 2], sv[v2 + 3]);
+			if (shapeVertCount == 5) {
+				// for quads, draw two triangles
+				addVert(sv[0], sv[1], sv[2], sv[3]); // v0
+				addVert(sv[4], sv[5], sv[6], sv[7]); // v1
+				addVert(sv[12], sv[13], sv[14], sv[15]); // v3
+				addVert(sv[8], sv[9], sv[10], sv[11]); // v2
+				drawStack.push(0, 4);
+			} else {
+				// triangulate the shape
+				for (let i = 1; i < shapeVertCount - 1; i++) {
+					let v0 = 0;
+					let v1 = i * 4;
+					let v2 = (i + 1) * 4;
+
+					addVert(sv[v0], sv[v0 + 1], sv[v0 + 2], sv[v0 + 3]);
+					addVert(sv[v1], sv[v1 + 1], sv[v1 + 2], sv[v1 + 3]);
+					addVert(sv[v2], sv[v2 + 1], sv[v2 + 2], sv[v2 + 3]);
+				}
+				drawStack.push(0, (shapeVertCount - 2) * 3);
 			}
-			drawStack.push(0, (shapeVertCount - 2) * 3);
 		}
 
 		if ($._doStroke) {
@@ -470,7 +481,7 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 	};
 
 	$.background = (r, g, b, a) => {
-		$.push();
+		$.pushMatrix();
 		$.resetMatrix();
 		$._doStroke = false;
 		if (r.src) {
@@ -485,7 +496,7 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 			$.rect(-c.hw, -c.hh, c.w, c.h);
 			$._rectMode = og;
 		}
-		$.pop();
+		$.popMatrix();
 		if (!$._fillSet) $._fill = 1;
 	};
 
@@ -505,6 +516,7 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 	});
 
 	$._hooks.postRender.push(() => {
+		drawStack = $.drawStack;
 		vertIndex = 0;
 	});
 };

package/src/q5-webgpu-text.js

@@ -373,11 +373,19 @@ fn fragmentMain(f : FragmentParams) -> @location(0) vec4f {
 
 	$.text = (str, x, y, w, h) => {
 		if (!$._font) {
-			// check if online and loading the default font
-			// hasn't been attempted yet
-			if (navigator.onLine && !initLoadDefaultFont) {
+			// check if loading the default font hasn't been attempted
+			if (!initLoadDefaultFont) {
 				initLoadDefaultFont = true;
-				$.loadFont('https://q5js.org/fonts/YaHei-msdf.json');
+
+				if (navigator.onLine) {
+					$.loadFont('https://q5js.org/defaultFont-msdf.json');
+				} else {
+					$.loadFont('/node_modules/q5/defaultFont-msdf.json');
+				}
+				// else if (Q5._esm && import.meta.url) {
+				// 	let path = new URL('defaultFont-msdf.json', import.meta.url);
+				// 	$.loadFont(path.href);
+				// }
 			}
 			return;
 		}
@@ -577,7 +585,7 @@ fn fragmentMain(f : FragmentParams) -> @location(0) vec4f {
 	});
 
 	$._hooks.postRender.push(() => {
-		charStack.length = 0;
-		textStack.length = 0;
+		charStack = [];
+		textStack = [];
 	});
 };