q5 2.7.6 → 2.9.0

package/src/q5-webgpu-drawing.js

@@ -97,29 +97,6 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 		vertIndex = i;
 	};
 
-	const addTri = (x1, y1, x2, y2, x3, y3, ci, ti) => {
-		let v = vertexStack,
-			i = vertIndex;
-
-		v[i++] = x1;
-		v[i++] = y1;
-		v[i++] = ci;
-		v[i++] = ti;
-
-		v[i++] = x2;
-		v[i++] = y2;
-		v[i++] = ci;
-		v[i++] = ti;
-
-		v[i++] = x3;
-		v[i++] = y3;
-		v[i++] = ci;
-		v[i++] = ti;
-
-		vertIndex = i;
-		drawStack.push(0, 3);
-	};
-
 	const addRect = (x1, y1, x2, y2, x3, y3, x4, y4, ci, ti) => {
 		let v = vertexStack,
 			i = vertIndex;
@@ -203,21 +180,40 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 		if ($._doStroke) {
 			ci = $._strokeIndex;
 
-			// outer rectangle coordinates
+			// stroke weight adjustment
 			let sw = $._strokeWeight / 2;
-			let to = t + sw,
-				bo = b - sw,
-				lo = l - sw,
-				ro = r + sw;
-
-			// stroke is simply a bigger rectangle drawn first
-			addRect(lo, to, ro, to, ro, bo, lo, bo, ci, ti);
-
-			// inner rectangle coordinates
-			t -= sw;
-			b += sw;
-			l += sw;
-			r -= sw;
+
+			if ($._doFill) {
+				// existing behavior: draw stroke as one big rectangle
+				let to = t + sw,
+					bo = b - sw,
+					lo = l - sw,
+					ro = r + sw;
+
+				// draw stroke rectangle
+				addRect(lo, to, ro, to, ro, bo, lo, bo, ci, ti);
+
+				// adjust inner rectangle coordinates
+				t -= sw;
+				b += sw;
+				l += sw;
+				r -= sw;
+			} else {
+				// new behavior: draw stroke as four rectangles (sides)
+				let lsw = l - sw,
+					rsw = r + sw,
+					tsw = t + sw,
+					bsw = b - sw,
+					lpsw = l + sw,
+					rpsw = r - sw,
+					tpsw = t - sw,
+					bpsw = b + sw;
+
+				addRect(lsw, tpsw, rsw, tpsw, rsw, tsw, lsw, tsw, ci, ti); // top
+				addRect(lsw, bsw, rsw, bsw, rsw, bpsw, lsw, bpsw, ci, ti); // bottom
+				addRect(lsw, tsw, lpsw, tsw, lpsw, bsw, lsw, bsw, ci, ti); // left
+				addRect(rpsw, tsw, rsw, tsw, rsw, bsw, rpsw, bsw, ci, ti); // right
+			}
 		}
 
 		if ($._doFill) {
@@ -392,11 +388,16 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 		$.vertex(x1, y1);
 		$.vertex(x2, y2);
 		$.vertex(x3, y3);
-		$.endShape();
+		$.endShape(true);
 	};
 
 	$.quad = (x1, y1, x2, y2, x3, y3, x4, y4) => {
-		addRect(x1, y1, x2, y2, x3, y3, x4, y4, $._fillIndex, $._transformIndex);
+		$.beginShape();
+		$.vertex(x1, y1);
+		$.vertex(x2, y2);
+		$.vertex(x3, y3);
+		$.vertex(x4, y4);
+		$.endShape(true);
 	};
 
 	$.background = (r, g, b, a) => {

package/src/q5-webgpu-image.js

@@ -89,7 +89,7 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f {
 			entryPoint: 'fragmentMain',
 			targets: [{ format: 'bgra8unorm', blend: $.blendConfigs.normal }]
 		},
-		primitive: { topology: 'triangle-list' },
+		primitive: { topology: 'triangle-strip', stripIndexFormat: 'uint32' },
 		multisample: { count: 4 }
 	};
 
@@ -121,7 +121,6 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f {
 			{
 				texture,
 				colorSpace: $.canvas.colorSpace
-				// premultipliedAlpha: true
 			},
 			textureSize
 		);
@@ -153,6 +152,11 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f {
 		const img = new Image();
 		img.crossOrigin = 'Anonymous';
 		img.onload = () => {
+			// calculate the default width and height that the image
+			// should be drawn at if the user doesn't specify a display size
+			img.defaultWidth = img.width * $._defaultImageScale;
+			img.defaultHeight = img.height * $._defaultImageScale;
+
 			$._createTexture(img);
 			q._preloadCount--;
 		};
@@ -169,8 +173,8 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f {
 		if ($._matrixDirty) $._saveMatrix();
 		let ti = $._transformIndex;
 
-		w ??= img.width / $._pixelDensity;
-		h ??= img.height / $._pixelDensity;
+		w ??= img.defaultWidth;
+		h ??= img.defaultHeight;
 
 		let [l, r, t, b] = $._calcBox(x, y, w, h, $._imageMode);
 
@@ -179,8 +183,6 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f {
 			l, t, 0, 0, ti,
 			r, t, 1, 0, ti,
 			l, b, 0, 1, ti,
-			r, t, 1, 0, ti,
-			l, b, 0, 1, ti,
 			r, b, 1, 1, ti
 		);