q5 2.13.2 → 2.13.9

package/src/q5-math.js

@@ -46,8 +46,9 @@ Q5.modules.math = ($, q) => {
 
 	$.dist = function () {
 		let a = arguments;
+		if (a.length == 2) return Math.hypot(a[0].x - a[1].x, a[0].y - a[1].y);
 		if (a.length == 4) return Math.hypot(a[0] - a[2], a[1] - a[3]);
-		else return Math.hypot(a[0] - a[3], a[1] - a[4], a[2] - a[5]);
+		return Math.hypot(a[0] - a[3], a[1] - a[4], a[2] - a[5]);
 	};
 
 	$.lerp = (a, b, t) => a * (1 - t) + b * t;

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;
 
@@ -459,7 +459,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 } },
@@ -475,8 +475,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		let drawVertOffset = 0,
 			imageVertOffset = 0,
 			textCharOffset = 0,
-			curPipelineIndex = -1,
-			curTextureIndex = -1;
+			curPipelineIndex = -1;
 
 		for (let i = 0; i < drawStack.length; i += 2) {
 			let v = drawStack[i + 1];
@@ -492,15 +491,11 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 				pass.draw(v, 1, drawVertOffset);
 				drawVertOffset += v;
 			} else if (curPipelineIndex == 1) {
-				// let instanceCount = drawStack[i + 2];
 				// draw images
-				if (curTextureIndex != v) {
-					// v is the texture index
-					pass.setBindGroup(1, $._textureBindGroups[v]);
-				}
+				// v is the texture index
+				pass.setBindGroup(1, $._textureBindGroups[v]);
 				pass.draw(4, 1, imageVertOffset);
 				imageVertOffset += 4;
-				// i++;
 			} else if (curPipelineIndex == 2) {
 				// draw text
 				let o = drawStack[i + 2];
@@ -513,8 +508,6 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 				i++;
 			}
 		}
-
-		for (let m of $._hooks.postRender) m();
 	};
 
 	$._finishRender = () => {
@@ -525,19 +518,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

@@ -46,7 +46,7 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 	});
 
 	let vertexBufferLayout = {
-		arrayStride: 16, // 2 coordinates + 1 color index + 1 transform index * 4 bytes each
+		arrayStride: 16, // 4 floats * 4 bytes
 		attributes: [
 			{ format: 'float32x2', offset: 0, shaderLocation: 0 }, // position
 			{ format: 'float32', offset: 8, shaderLocation: 1 }, // colorIndex
@@ -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);
@@ -470,7 +472,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 +487,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 +507,7 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 	});
 
 	$._hooks.postRender.push(() => {
+		drawStack = $.drawStack;
 		vertIndex = 0;
 	});
 };

package/src/q5-webgpu-image.js

@@ -118,14 +118,11 @@ fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
 			minFilter: filter
 		});
 	};
-	makeSampler('linear');
 
-	$.smooth = () => {
-		makeSampler('linear');
-	};
-	$.noSmooth = () => {
-		makeSampler('nearest');
-	};
+	$.smooth = () => makeSampler('linear');
+	$.noSmooth = () => makeSampler('nearest');
+
+	$.smooth();
 
 	let MAX_TEXTURES = 12000;
 

package/src/q5-webgpu-text.js

@@ -319,8 +319,8 @@ fn fragmentMain(f : FragmentParams) -> @location(0) vec4f {
 		if (vert) $._textBaseline = vert;
 	};
 
-	$._charStack = [];
-	$._textStack = [];
+	let charStack = [],
+		textStack = [];
 
 	let measureText = (font, text, charCallback) => {
 		let maxWidth = 0,
@@ -373,11 +373,16 @@ 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 if (Q5._esm && import.meta?.url) {
+					let path = new URL('defaultFont-msdf.json', import.meta.url);
+					$.loadFont(path.href);
+				}
 			}
 			return;
 		}
@@ -417,7 +422,7 @@ fn fragmentMain(f : FragmentParams) -> @location(0) vec4f {
 
 		let ta = $._textAlign,
 			tb = $._textBaseline,
-			textIndex = $._textStack.length,
+			textIndex = textStack.length,
 			o = 0, // offset
 			measurements;
 
@@ -457,20 +462,20 @@ fn fragmentMain(f : FragmentParams) -> @location(0) vec4f {
 				o += 4;
 			});
 		}
-		$._charStack.push(charsData);
+		charStack.push(charsData);
 
-		let text = [];
+		let txt = [];
 
 		if ($._matrixDirty) $._saveMatrix();
 
-		text[0] = x;
-		text[1] = -y;
-		text[2] = $._textSize / 44;
-		text[3] = $._matrixIndex;
-		text[4] = $._fillSet ? $._fill : 0;
-		text[5] = $._stroke;
+		txt[0] = x;
+		txt[1] = -y;
+		txt[2] = $._textSize / 44;
+		txt[3] = $._matrixIndex;
+		txt[4] = $._fillSet ? $._fill : 0;
+		txt[5] = $._stroke;
 
-		$._textStack.push(text);
+		textStack.push(txt);
 		$.drawStack.push(2, measurements.printedCharCount, $._font.index);
 	};
 
@@ -531,11 +536,11 @@ fn fragmentMain(f : FragmentParams) -> @location(0) vec4f {
 	};
 
 	$._hooks.preRender.push(() => {
-		if (!$._charStack.length) return;
+		if (!charStack.length) return;
 
 		// calculate total buffer size for text data
 		let totalTextSize = 0;
-		for (let charsData of $._charStack) {
+		for (let charsData of charStack) {
 			totalTextSize += charsData.length * 4;
 		}
 
@@ -547,11 +552,11 @@ fn fragmentMain(f : FragmentParams) -> @location(0) vec4f {
 		});
 
 		// copy all the text data into the buffer
-		new Float32Array(charBuffer.getMappedRange()).set($._charStack.flat());
+		new Float32Array(charBuffer.getMappedRange()).set(charStack.flat());
 		charBuffer.unmap();
 
 		// calculate total buffer size for metadata
-		let totalMetadataSize = $._textStack.length * 6 * 4;
+		let totalMetadataSize = textStack.length * 6 * 4;
 
 		// create a single buffer for all metadata
 		let textBuffer = Q5.device.createBuffer({
@@ -562,7 +567,7 @@ fn fragmentMain(f : FragmentParams) -> @location(0) vec4f {
 		});
 
 		// copy all metadata into the buffer
-		new Float32Array(textBuffer.getMappedRange()).set($._textStack.flat());
+		new Float32Array(textBuffer.getMappedRange()).set(textStack.flat());
 		textBuffer.unmap();
 
 		// create a single bind group for the text buffer and metadata buffer
@@ -577,7 +582,7 @@ fn fragmentMain(f : FragmentParams) -> @location(0) vec4f {
 	});
 
 	$._hooks.postRender.push(() => {
-		$._charStack.length = 0;
-		$._textStack.length = 0;
+		charStack = [];
+		textStack = [];
 	});
 };