q5 2.5.5 → 2.6.1

package/src/q5-webgpu-image.js

@@ -1,6 +1,6 @@
 Q5.renderers.webgpu.image = ($, q) => {
 	$._textureBindGroups = [];
-	let verticesStack = [];
+	let vertexStack = [];
 
 	let vertexShader = Q5.device.createShaderModule({
 		label: 'imageVertexShader',
@@ -8,15 +8,14 @@ Q5.renderers.webgpu.image = ($, q) => {
 struct VertexOutput {
 	@builtin(position) position: vec4f,
 	@location(0) texCoord: vec2f
-};
-
+}
 struct Uniforms {
 	halfWidth: f32,
 	halfHeight: f32
-};
+}
 
 @group(0) @binding(0) var<uniform> uniforms: Uniforms;
-@group(0) @binding(1) var<storage, read> transforms: array<mat4x4<f32>>;
+@group(0) @binding(1) var<storage> transforms: array<mat4x4<f32>>;
 
 @vertex
 fn vertexMain(@location(0) pos: vec2f, @location(1) texCoord: vec2f, @location(2) transformIndex: f32) -> VertexOutput {
@@ -77,7 +76,7 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f {
 		bindGroupLayouts: [...$.bindGroupLayouts, textureLayout]
 	});
 
-	$.pipelines[1] = Q5.device.createRenderPipeline({
+	$._pipelineConfigs[1] = {
 		label: 'imagePipeline',
 		layout: pipelineLayout,
 		vertex: {
@@ -88,28 +87,12 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f {
 		fragment: {
 			module: fragmentShader,
 			entryPoint: 'fragmentMain',
-			targets: [
-				{
-					format: 'bgra8unorm',
-					blend: $.blendConfigs?.normal || {
-						color: {
-							srcFactor: 'src-alpha',
-							dstFactor: 'one-minus-src-alpha',
-							operation: 'add'
-						},
-						alpha: {
-							srcFactor: 'src-alpha',
-							dstFactor: 'one-minus-src-alpha',
-							operation: 'add'
-						}
-					}
-				}
-			]
+			targets: [{ format: 'bgra8unorm', blend: $.blendConfigs.normal }]
 		},
-		primitive: {
-			topology: 'triangle-list'
-		}
-	});
+		primitive: { topology: 'triangle-list' }
+	};
+
+	$._pipelines[1] = Q5.device.createRenderPipeline($._pipelineConfigs[1]);
 
 	let sampler = Q5.device.createSampler({
 		magFilter: 'linear',
@@ -134,7 +117,11 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f {
 
 		Q5.device.queue.copyExternalImageToTexture(
 			{ source: img },
-			{ texture, colorSpace: $.canvas.colorSpace },
+			{
+				texture,
+				colorSpace: $.canvas.colorSpace
+				// premultipliedAlpha: true
+			},
 			textureSize
 		);
 
@@ -187,7 +174,7 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f {
 		let [l, r, t, b] = $._calcBox(x, y, w, h, $._imageMode);
 
 		// prettier-ignore
-		verticesStack.push(
+		vertexStack.push(
 			l, t, 0, 0, ti,
 			r, t, 1, 0, ti,
 			l, b, 0, 1, ti,
@@ -196,29 +183,29 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f {
 			r, b, 1, 1, ti
 		);
 
-		$.drawStack.push(1, img.textureIndex);
+		$.drawStack.push(1, img.textureIndex, 0);
 	};
 
 	$._hooks.preRender.push(() => {
 		if (!$._textureBindGroups.length) return;
 
 		// Switch to image pipeline
-		$.pass.setPipeline($.pipelines[1]);
-
-		// Create a vertex buffer for the image quads
-		const vertices = new Float32Array(verticesStack);
+		$.pass.setPipeline($._pipelines[1]);
 
 		const vertexBuffer = Q5.device.createBuffer({
-			size: vertices.byteLength,
-			usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
+			size: vertexStack.length * 4,
+			usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+			mappedAtCreation: true
 		});
 
-		Q5.device.queue.writeBuffer(vertexBuffer, 0, vertices);
+		new Float32Array(vertexBuffer.getMappedRange()).set(vertices);
+		vertexBuffer.unmap();
+
 		$.pass.setVertexBuffer(1, vertexBuffer);
 	});
 
 	$._hooks.postRender.push(() => {
-		verticesStack.length = 0;
+		vertexStack.length = 0;
 	});
 };
 

package/src/q5-webgpu-text.js

@@ -7,35 +7,35 @@ const pos = array(vec2f(0, -1), vec2f(1, -1), vec2f(0, 0), vec2f(1, 0));
 
 struct VertexInput {
 	@builtin(vertex_index) vertex : u32,
-	@builtin(instance_index) instance : u32,
-};
+	@builtin(instance_index) instance : u32
+}
 struct VertexOutput {
 	@builtin(position) position : vec4f,
-	@location(0) texcoord : vec2f,
-	@location(1) colorIndex : f32
-};
+	@location(0) texCoord : vec2f,
+	@location(1) fillColor : vec4f
+}
 struct Char {
 	texOffset: vec2f,
 	texExtent: vec2f,
 	size: vec2f,
 	offset: vec2f,
-};
+}
 struct Text {
 	pos: vec2f,
 	scale: f32,
 	transformIndex: f32,
 	fillIndex: f32,
 	strokeIndex: f32
-};
+}
 struct Uniforms {
 	halfWidth: f32,
 	halfHeight: f32
-};
+}
 
 @group(0) @binding(0) var<uniform> uniforms: Uniforms;
-@group(0) @binding(1) var<storage, read> transforms: array<mat4x4<f32>>;
+@group(0) @binding(1) var<storage> transforms: array<mat4x4<f32>>;
 
-@group(1) @binding(0) var<storage, read> colors : array<vec4f>;
+@group(1) @binding(0) var<storage> colors : array<vec4f>;
 
 @group(2) @binding(0) var fontTexture: texture_2d<f32>;
 @group(2) @binding(1) var fontSampler: sampler;
@@ -61,13 +61,13 @@ fn vertexMain(input : VertexInput) -> VertexOutput {
 
 	var output : VertexOutput;
 	output.position = vert;
-	output.texcoord = (pos[input.vertex] * vec2f(1, -1)) * fontChar.texExtent + fontChar.texOffset;
-	output.colorIndex = text.fillIndex;
+	output.texCoord = (pos[input.vertex] * vec2f(1, -1)) * fontChar.texExtent + fontChar.texOffset;
+	output.fillColor = colors[i32(text.fillIndex)];
 	return output;
 }
 
-fn sampleMsdf(texcoord: vec2f) -> f32 {
-	let c = textureSample(fontTexture, fontSampler, texcoord);
+fn sampleMsdf(texCoord: vec2f) -> f32 {
+	let c = textureSample(fontTexture, fontSampler, texCoord);
 	return max(min(c.r, c.g), min(max(c.r, c.g), c.b));
 }
 
@@ -77,25 +77,83 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 	// uses the default which is 4.
 	let pxRange = 4.0;
 	let sz = vec2f(textureDimensions(fontTexture, 0));
-	let dx = sz.x*length(vec2f(dpdxFine(input.texcoord.x), dpdyFine(input.texcoord.x)));
-	let dy = sz.y*length(vec2f(dpdxFine(input.texcoord.y), dpdyFine(input.texcoord.y)));
+	let dx = sz.x*length(vec2f(dpdxFine(input.texCoord.x), dpdyFine(input.texCoord.x)));
+	let dy = sz.y*length(vec2f(dpdxFine(input.texCoord.y), dpdyFine(input.texCoord.y)));
 	let toPixels = pxRange * inverseSqrt(dx * dx + dy * dy);
-	let sigDist = sampleMsdf(input.texcoord) - 0.5;
+	let sigDist = sampleMsdf(input.texCoord) - 0.5;
 	let pxDist = sigDist * toPixels;
 	let edgeWidth = 0.5;
 	let alpha = smoothstep(-edgeWidth, edgeWidth, pxDist);
 	if (alpha < 0.001) {
 		discard;
 	}
-	let fillColor = colors[i32(input.colorIndex)];
-	return vec4f(fillColor.rgb, fillColor.a * alpha);
+	return vec4f(input.fillColor.rgb, input.fillColor.a * alpha);
 }
 `
 	});
 
+	let textBindGroupLayout = Q5.device.createBindGroupLayout({
+		label: 'MSDF text group layout',
+		entries: [
+			{
+				binding: 0,
+				visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+				buffer: { type: 'read-only-storage' }
+			},
+			{
+				binding: 1,
+				visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+				buffer: { type: 'read-only-storage' }
+			}
+		]
+	});
+
+	let fontSampler = Q5.device.createSampler({
+		minFilter: 'linear',
+		magFilter: 'linear',
+		mipmapFilter: 'linear',
+		maxAnisotropy: 16
+	});
+	let fontBindGroupLayout = Q5.device.createBindGroupLayout({
+		label: 'MSDF font group layout',
+		entries: [
+			{
+				binding: 0,
+				visibility: GPUShaderStage.FRAGMENT,
+				texture: {}
+			},
+			{
+				binding: 1,
+				visibility: GPUShaderStage.FRAGMENT,
+				sampler: {}
+			},
+			{
+				binding: 2,
+				visibility: GPUShaderStage.VERTEX,
+				buffer: { type: 'read-only-storage' }
+			}
+		]
+	});
+
+	let fontPipelineLayout = Q5.device.createPipelineLayout({
+		bindGroupLayouts: [...$.bindGroupLayouts, fontBindGroupLayout, textBindGroupLayout]
+	});
+
+	$._pipelineConfigs[2] = {
+		label: 'msdf font pipeline',
+		layout: fontPipelineLayout,
+		vertex: { module: textShader, entryPoint: 'vertexMain' },
+		fragment: {
+			module: textShader,
+			entryPoint: 'fragmentMain',
+			targets: [{ format: 'bgra8unorm', blend: $.blendConfigs.normal }]
+		},
+		primitive: { topology: 'triangle-strip', stripIndexFormat: 'uint32' }
+	};
+	$._pipelines[2] = Q5.device.createRenderPipeline($._pipelineConfigs[2]);
+
 	class MsdfFont {
-		constructor(pipeline, bindGroup, lineHeight, chars, kernings) {
-			this.pipeline = pipeline;
+		constructor(bindGroup, lineHeight, chars, kernings) {
 			this.bindGroup = bindGroup;
 			this.lineHeight = lineHeight;
 			this.chars = chars;
@@ -121,22 +179,7 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 		}
 	}
 
-	let textBindGroupLayout = Q5.device.createBindGroupLayout({
-		label: 'MSDF text group layout',
-		entries: [
-			{
-				binding: 0,
-				visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-				buffer: { type: 'read-only-storage' }
-			},
-			{
-				binding: 1,
-				visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-				buffer: { type: 'read-only-storage' }
-			}
-		]
-	});
-
+	$._fonts = [];
 	let fonts = {};
 
 	let createFont = async (fontJsonUrl, fontName, cb) => {
@@ -199,74 +242,11 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 		}
 		charsBuffer.unmap();
 
-		let fontSampler = Q5.device.createSampler({
-			minFilter: 'linear',
-			magFilter: 'linear',
-			mipmapFilter: 'linear',
-			maxAnisotropy: 16
-		});
-		let fontBindGroupLayout = Q5.device.createBindGroupLayout({
-			label: 'MSDF font group layout',
-			entries: [
-				{
-					binding: 0,
-					visibility: GPUShaderStage.FRAGMENT,
-					texture: {}
-				},
-				{
-					binding: 1,
-					visibility: GPUShaderStage.FRAGMENT,
-					sampler: {}
-				},
-				{
-					binding: 2,
-					visibility: GPUShaderStage.VERTEX,
-					buffer: { type: 'read-only-storage' }
-				}
-			]
-		});
-		let fontPipeline = Q5.device.createRenderPipeline({
-			label: 'msdf font pipeline',
-			layout: Q5.device.createPipelineLayout({
-				bindGroupLayouts: [...$.bindGroupLayouts, fontBindGroupLayout, textBindGroupLayout]
-			}),
-			vertex: {
-				module: textShader,
-				entryPoint: 'vertexMain'
-			},
-			fragment: {
-				module: textShader,
-				entryPoint: 'fragmentMain',
-				targets: [
-					{
-						format: 'bgra8unorm',
-						blend: {
-							color: {
-								srcFactor: 'src-alpha',
-								dstFactor: 'one-minus-src-alpha'
-							},
-							alpha: {
-								srcFactor: 'one',
-								dstFactor: 'one'
-							}
-						}
-					}
-				]
-			},
-			primitive: {
-				topology: 'triangle-strip',
-				stripIndexFormat: 'uint32'
-			}
-		});
-
 		let fontBindGroup = Q5.device.createBindGroup({
 			label: 'msdf font bind group',
 			layout: fontBindGroupLayout,
 			entries: [
-				{
-					binding: 0,
-					resource: texture.createView()
-				},
+				{ binding: 0, resource: texture.createView() },
 				{ binding: 1, resource: fontSampler },
 				{ binding: 2, resource: { buffer: charsBuffer } }
 			]
@@ -284,10 +264,11 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 			}
 		}
 
-		$._font = new MsdfFont(fontPipeline, fontBindGroup, atlas.common.lineHeight, chars, kernings);
+		$._font = new MsdfFont(fontBindGroup, atlas.common.lineHeight, chars, kernings);
 
+		$._font.index = $._fonts.length;
+		$._fonts.push($._font);
 		fonts[fontName] = $._font;
-		$.pipelines[2] = $._font.pipeline;
 
 		q._preloadCount--;
 
@@ -316,12 +297,6 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 
 	$.textFont = (fontName) => {
 		$._font = fonts[fontName];
-
-		// replay the change of font in the draw stack
-		$.drawStack.push(-1, () => {
-			$._font = fonts[fontName];
-			$.pipelines[2] = $._font.pipeline;
-		});
 	};
 	$.textSize = (size) => {
 		$._textSize = size;
@@ -434,7 +409,7 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 			}
 		}
 
-		let charsData = new Float32Array((str.length - spaces) * 4);
+		let charsData = [];
 
 		let ta = $._textAlign,
 			tb = $._textBaseline,
@@ -480,7 +455,7 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 		}
 		$._charStack.push(charsData);
 
-		let text = new Float32Array(6);
+		let text = [];
 
 		if ($._matrixDirty) $._saveMatrix();
 
@@ -488,11 +463,11 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 		text[1] = -y;
 		text[2] = $._textSize / 44;
 		text[3] = $._transformIndex;
-		text[4] = $._fillIndex;
+		text[4] = $._fillSet ? $._fillIndex : 0;
 		text[5] = $._strokeIndex;
 
 		$._textStack.push(text);
-		$.drawStack.push(2, measurements.printedCharCount);
+		$.drawStack.push(2, measurements.printedCharCount, $._font.index);
 	};
 
 	$.textWidth = (str) => {
@@ -505,11 +480,11 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 
 		if ($._doFill) {
 			let fi = $._fillIndex * 4;
-			g.fill(colorsStack.slice(fi, fi + 4));
+			g.fill(colorStack.slice(fi, fi + 4));
 		}
 		if ($._doStroke) {
 			let si = $._strokeIndex * 4;
-			g.stroke(colorsStack.slice(si, si + 4));
+			g.stroke(colorStack.slice(si, si + 4));
 		}
 
 		let img = g.createTextImage(str, w, h);
@@ -560,21 +535,15 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 			totalTextSize += charsData.length * 4;
 		}
 
-		// Create a single buffer for all text data
+		// Create a single buffer for all char data
 		let charBuffer = Q5.device.createBuffer({
-			label: 'charBuffer',
 			size: totalTextSize,
 			usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
 			mappedAtCreation: true
 		});
 
 		// Copy all text data into the buffer
-		let textArray = new Float32Array(charBuffer.getMappedRange());
-		let o = 0;
-		for (let array of $._charStack) {
-			textArray.set(array, o);
-			o += array.length;
-		}
+		new Float32Array(charBuffer.getMappedRange()).set($._charStack.flat());
 		charBuffer.unmap();
 
 		// Calculate total buffer size for metadata
@@ -589,12 +558,7 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 		});
 
 		// Copy all metadata into the buffer
-		let metadataArray = new Float32Array(textBuffer.getMappedRange());
-		o = 0;
-		for (let array of $._textStack) {
-			metadataArray.set(array, o);
-			o += array.length;
-		}
+		new Float32Array(textBuffer.getMappedRange()).set($._textStack.flat());
 		textBuffer.unmap();
 
 		// Create a single bind group for the text buffer and metadata buffer
@@ -602,14 +566,8 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 			label: 'msdf text bind group',
 			layout: textBindGroupLayout,
 			entries: [
-				{
-					binding: 0,
-					resource: { buffer: charBuffer }
-				},
-				{
-					binding: 1,
-					resource: { buffer: textBuffer }
-				}
+				{ binding: 0, resource: { buffer: charBuffer } },
+				{ binding: 1, resource: { buffer: textBuffer } }
 			]
 		});
 	});

package/src/readme.md

@@ -62,7 +62,7 @@ WebGPU rendering modules are in development:
     - [Load a MSDF font](#load-a-msdf-font)
     - [Displaying Emojis](#displaying-emojis)
     - [Lightweight Use](#lightweight-use)
-    - [Implemented functions](#implemented-functions)
+    - [Limitations](#limitations)
   - [math](#math)
   - [noisier](#noisier)
 
@@ -114,7 +114,7 @@ Image based features in this module require the q5-2d-image module.
 
 > ⚠️ Experimental features! ⚠️
 
-To use q5's WebGPU renderer, run `Q5.webgpu()` at the bottom of your sketch. Explicit use of `createCanvas` is required.
+To use q5's WebGPU renderer, run `Q5.webgpu()` at the bottom of your sketch.
 
 ```js
 function setup() {
@@ -132,34 +132,24 @@ Q5.webgpu();
 
 WebGPU has different default settings compared to q5's q2d renderer and p5's P2D and WEBGL modes.
 
+- Explicit use of `createCanvas` is required before anything can be drawn.
 - The default color mode is RGB in 0-1 "float" format: `colorMode(RGB, 1)`.
 - The origin of the canvas (0, 0) is in the center, not the top left.
-- Mouse and touch coordinates correspond to canvas pixels.
-- For now, strokes are only implemented for the `point`, `line`, and `textImage` functions.
+- Mouse and touch coordinates correspond to canvas pixels (unlike in p5 WEBGL mode).
 
 The sketches you create with the q5-webgpu renderer will still display properly if WebGPU is not supported on a viewer's browser. q5 will put a warning in the console and apply a compatibility layer to display sketches with the fallback q2d renderer.
 
-Implemented functions:
-
-`createCanvas`, `resizeCanvas`, `fill`, `clear`, `push`, `pop`, `resetMatrix`, `translate`, `rotate`, `scale`
-
 ## webgpu-drawing
 
 > Uses `colorMode(RGB, 1)` by default. Changing it to 'oklch' is not supported yet for the webgpu renderer.
 
-All basic shapes are drawn from their center. Strokes are not implemented yet.
-
 q5's WebGPU renderer drawing functions like `rect` don't immediately draw on the canvas. Instead, they prepare vertex and color data to be sent to the GPU in bulk, which occurs after the user's `draw` function and any post-draw functions are run. This approach better utilizes the GPU, so it doesn't have to repeatedly wait for the CPU to send small chunks of data that describe each individual shape. It's the main reason why WebGPU is faster than Canvas2D.
 
-Implemented functions:
-
-`rect`, `circle`, `ellipse`, `triangle`, `beginShape`, `vertex`, `endShape`, `blendMode`
+Rounded rectangles, stroke modes, and functions for drawing curves like `bezier` and `curve` are not implemented yet.
 
 ## webgpu-image
 
-Implemented functions:
-
-`loadImage`, `loadTexture`, `image`, `imageMode`
+Using `image` to drawn a subsection of an image and most blending modes are not yet implemented.
 
 ## webgpu-text
 
@@ -238,9 +228,9 @@ For super lightweight use load <https://q5js.org/fonts/YaHei-256-msdf.json>, whi
 !@'",-.0123456789:ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
 ```
 
-### Implemented functions
+### Limitations
 
-`loadFont`, `text`, `textFont`, `textSize`, `textAlign`, `textWidth`, `createTextImage`, `textImage`
+Text strokes are not supported yet, except with `textImage`.
 
 ## math