q5 2.2.3 → 2.4.1

package/src/q5-webgpu-drawing.js

@@ -1,39 +1,16 @@
 Q5.renderers.webgpu.drawing = ($, q) => {
-	$.CLOSE = 1;
+	let c = $.canvas;
 
-	let verticesStack, drawStack, colorsStack;
+	let drawStack = $.drawStack;
+	let colorsStack = $.colorsStack;
 
-	$._hooks.postCanvas.push(() => {
-		let colorsLayout = Q5.device.createBindGroupLayout({
-			entries: [
-				{
-					binding: 0,
-					visibility: GPUShaderStage.FRAGMENT,
-					buffer: {
-						type: 'read-only-storage',
-						hasDynamicOffset: false
-					}
-				}
-			]
-		});
-
-		$.bindGroupLayouts.push(colorsLayout);
-
-		verticesStack = $.verticesStack;
-		drawStack = $.drawStack;
-		colorsStack = $.colorsStack;
+	let verticesStack = [];
 
-		let vertexBufferLayout = {
-			arrayStride: 16, // 2 coordinates + 1 color index + 1 transform index * 4 bytes each
-			attributes: [
-				{ format: 'float32x2', offset: 0, shaderLocation: 0 }, // position
-				{ format: 'float32', offset: 8, shaderLocation: 1 }, // colorIndex
-				{ format: 'float32', offset: 12, shaderLocation: 2 } // transformIndex
-			]
-		};
+	let colorIndex, colorsLayout;
 
-		let vertexShader = Q5.device.createShaderModule({
-			code: `
+	let vertexShader = Q5.device.createShaderModule({
+		label: 'drawingVertexShader',
+		code: `
 struct VertexOutput {
 	@builtin(position) position: vec4<f32>,
 	@location(1) colorIndex: f32
@@ -60,10 +37,11 @@ fn vertexMain(@location(0) pos: vec2<f32>, @location(1) colorIndex: f32, @locati
 	return output;
 }
 `
-		});
+	});
 
-		let fragmentShader = Q5.device.createShaderModule({
-			code: `
+	let fragmentShader = Q5.device.createShaderModule({
+		label: 'drawingFragmentShader',
+		code: `
 @group(2) @binding(0) var<storage, read> uColors : array<vec4<f32>>;
 
 @fragment
@@ -72,31 +50,31 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 	return mix(uColors[index], uColors[index + 1u], fract(colorIndex));
 }
 `
-		});
+	});
 
-		let pipelineLayout = Q5.device.createPipelineLayout({
-			bindGroupLayouts: $.bindGroupLayouts
-		});
+	colorsLayout = Q5.device.createBindGroupLayout({
+		entries: [
+			{
+				binding: 0,
+				visibility: GPUShaderStage.FRAGMENT,
+				buffer: {
+					type: 'read-only-storage',
+					hasDynamicOffset: false
+				}
+			}
+		]
+	});
 
-		$._createPipeline = (blendConfig) => {
-			return Q5.device.createRenderPipeline({
-				layout: pipelineLayout,
-				vertex: {
-					module: vertexShader,
-					entryPoint: 'vertexMain',
-					buffers: [vertexBufferLayout]
-				},
-				fragment: {
-					module: fragmentShader,
-					entryPoint: 'fragmentMain',
-					targets: [{ format: 'bgra8unorm', blend: blendConfig }]
-				},
-				primitive: { topology: 'triangle-list' }
-			});
-		};
+	$.bindGroupLayouts.push(colorsLayout);
 
-		$.pipelines[0] = $._createPipeline(blendConfigs.normal);
-	});
+	let vertexBufferLayout = {
+		arrayStride: 16, // 2 coordinates + 1 color index + 1 transform index * 4 bytes each
+		attributes: [
+			{ format: 'float32x2', offset: 0, shaderLocation: 0 }, // position
+			{ format: 'float32', offset: 8, shaderLocation: 1 }, // colorIndex
+			{ format: 'float32', offset: 12, shaderLocation: 2 } // transformIndex
+		]
+	};
 
 	// prettier-ignore
 	let blendFactors = [
@@ -141,7 +119,7 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 
 	$.blendConfigs = {};
 
-	Object.entries(blendModes).forEach(([name, mode]) => {
+	for (const [name, mode] of Object.entries(blendModes)) {
 		$.blendConfigs[name] = {
 			color: {
 				srcFactor: blendFactors[mode[0]],
@@ -154,7 +132,7 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 				operation: blendOps[mode[5]]
 			}
 		};
-	});
+	}
 
 	$._blendMode = 'normal';
 	$.blendMode = (mode) => {
@@ -165,6 +143,31 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 		$.pipelines[0] = $._createPipeline($.blendConfigs[mode]);
 	};
 
+	let pipelineLayout = Q5.device.createPipelineLayout({
+		label: 'drawingPipelineLayout',
+		bindGroupLayouts: $.bindGroupLayouts
+	});
+
+	$._createPipeline = (blendConfig) => {
+		return Q5.device.createRenderPipeline({
+			label: 'drawingPipeline',
+			layout: pipelineLayout,
+			vertex: {
+				module: vertexShader,
+				entryPoint: 'vertexMain',
+				buffers: [vertexBufferLayout]
+			},
+			fragment: {
+				module: fragmentShader,
+				entryPoint: 'fragmentMain',
+				targets: [{ format: 'bgra8unorm', blend: blendConfig }]
+			},
+			primitive: { topology: 'triangle-list' }
+		});
+	};
+
+	$.pipelines[0] = $._createPipeline($.blendConfigs.normal);
+
 	let shapeVertices;
 
 	$.beginShape = () => {
@@ -173,7 +176,7 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 
 	$.vertex = (x, y) => {
 		if ($._matrixDirty) $._saveMatrix();
-		shapeVertices.push(x, -y, $._colorIndex, $._transformIndex);
+		shapeVertices.push(x, -y, $._fillIndex, $._transformIndex);
 	};
 
 	$.endShape = (close) => {
@@ -217,38 +220,61 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 		$.endShape(1);
 	};
 
-	$.rect = (x, y, w, h) => {
-		let hw = w / 2;
-		let hh = h / 2;
+	$.rectMode = (x) => ($._rectMode = x);
 
-		let left = x - hw;
-		let right = x + hw;
-		let top = -(y - hh); // y is inverted in WebGPU
-		let bottom = -(y + hh);
+	$.rect = (x, y, w, h) => {
+		let [l, r, t, b] = $._calcBox(x, y, w, h, $._rectMode);
 
-		let ci = $._colorIndex;
+		let ci = colorIndex ?? $._fillIndex;
 		if ($._matrixDirty) $._saveMatrix();
 		let ti = $._transformIndex;
 		// two triangles make a rectangle
 		// prettier-ignore
 		verticesStack.push(
-			left, top, ci, ti,
-			right, top, ci, ti,
-			left, bottom, ci, ti,
-			right, top, ci, ti,
-			left, bottom, ci, ti,
-			right, bottom, ci, ti
+			l, t, ci, ti,
+			r, t, ci, ti,
+			l, b, ci, ti,
+			r, t, ci, ti,
+			l, b, ci, ti,
+			r, b, ci, ti
 		);
 		drawStack.push(0, 6);
 	};
 
 	$.point = (x, y) => {
+		colorIndex = $._strokeIndex;
 		let sw = $._strokeWeight;
-		if (sw == 1) $.rect(x, y, 1, 1);
-		else $.ellipse(x, y, sw, sw);
+		if (sw < 2) {
+			sw = Math.round(sw);
+			$.rect(x, y, sw, sw);
+		} else $.ellipse(x, y, sw, sw);
+		colorIndex = null;
 	};
 
-	$.background = () => {};
+	$.line = (x1, y1, x2, y2) => {
+		colorIndex = $._strokeIndex;
+
+		$.push();
+		$.translate(x1, y1);
+		$.rotate($.atan2(y2 - y1, x2 - x1));
+		let length = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
+		let sw = $._strokeWeight;
+		$.rect(0, -sw / 2, length, sw);
+		$.pop();
+
+		colorIndex = null;
+	};
+
+	$.background = (r, g, b, a) => {
+		$.push();
+		$.resetMatrix();
+		if (r.src) $.image(r, -c.hw, -c.hh, c.w, c.h);
+		else {
+			$.fill(r, g, b, a);
+			$.rect(-c.hw, -c.hh, c.w, c.h);
+		}
+		$.pop();
+	};
 
 	/**
 	 * Derived from: ceil(Math.log(d) * 7) * 2 - ceil(28)
@@ -258,9 +284,10 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 	 */
 	// prettier-ignore
 	const getArcSegments = (d) => 
-    d < 14 ? 8 :
-    d < 16 ? 10 :
-    d < 18 ? 12 :
+		d < 4 ? 6 :
+    d < 6 ? 8 :
+    d < 10 ? 10 :
+    d < 16 ? 12 :
     d < 20 ? 14 :
     d < 22 ? 16 :
     d < 24 ? 18 :
@@ -294,7 +321,7 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 
 		let t = 0; // theta
 		const angleIncrement = $.TAU / n;
-		const ci = $._colorIndex;
+		const ci = colorIndex ?? $._fillIndex;
 		if ($._matrixDirty) $._saveMatrix();
 		const ti = $._transformIndex;
 		let vx1, vy1, vx2, vy2;
@@ -316,12 +343,16 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 	$.circle = (x, y, d) => $.ellipse(x, y, d, d);
 
 	$._hooks.preRender.push(() => {
+		$.pass.setPipeline($.pipelines[0]);
+
+		const vertices = new Float32Array(verticesStack);
+
 		const vertexBuffer = Q5.device.createBuffer({
-			size: verticesStack.length * 6,
+			size: vertices.byteLength,
 			usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
 		});
 
-		Q5.device.queue.writeBuffer(vertexBuffer, 0, new Float32Array(verticesStack));
+		Q5.device.queue.writeBuffer(vertexBuffer, 0, vertices);
 		$.pass.setVertexBuffer(0, vertexBuffer);
 
 		const colorsBuffer = Q5.device.createBuffer({
@@ -331,8 +362,8 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 
 		Q5.device.queue.writeBuffer(colorsBuffer, 0, new Float32Array(colorsStack));
 
-		const colorsBindGroup = Q5.device.createBindGroup({
-			layout: $.bindGroupLayouts[2],
+		$._colorsBindGroup = Q5.device.createBindGroup({
+			layout: colorsLayout,
 			entries: [
 				{
 					binding: 0,
@@ -346,6 +377,10 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 		});
 
 		// set the bind group once before rendering
-		$.pass.setBindGroup(2, colorsBindGroup);
+		$.pass.setBindGroup(2, $._colorsBindGroup);
+	});
+
+	$._hooks.postRender.push(() => {
+		verticesStack.length = 0;
 	});
 };

package/src/q5-webgpu-image.js

@@ -1,130 +1,196 @@
 Q5.renderers.webgpu.image = ($, q) => {
-	$.imageStack = [];
-	$.textures = [];
+	$._textureBindGroups = [];
+	let verticesStack = [];
 
-	$._hooks.postCanvas.push(() => {
-		let imageVertexShader = Q5.device.createShaderModule({
-			code: `
+	let vertexShader = Q5.device.createShaderModule({
+		label: 'imageVertexShader',
+		code: `
 struct VertexOutput {
-    @builtin(position) position: vec4<f32>,
-    @location(0) texCoord: vec2<f32>,
-    @location(1) textureIndex: f32
+	@builtin(position) position: vec4<f32>,
+	@location(0) texCoord: vec2<f32>
 };
 
 struct Uniforms {
-    halfWidth: f32,
-    halfHeight: f32
+	halfWidth: f32,
+	halfHeight: f32
 };
 
 @group(0) @binding(0) var<uniform> uniforms: Uniforms;
 @group(1) @binding(0) var<storage, read> transforms: array<mat4x4<f32>>;
 
 @vertex
-fn vertexMain(@location(0) pos: vec2<f32>, @location(1) texCoord: vec2<f32>, @location(2) transformIndex: f32, @location(3) textureIndex: f32) -> VertexOutput {
-    var vert = vec4<f32>(pos, 0.0, 1.0);
-    vert *= transforms[i32(transformIndex)];
-    vert.x /= uniforms.halfWidth;
-    vert.y /= uniforms.halfHeight;
-
-    var output: VertexOutput;
-    output.position = vert;
-    output.texCoord = texCoord;
-    output.textureIndex = textureIndex;
-    return output;
+fn vertexMain(@location(0) pos: vec2<f32>, @location(1) texCoord: vec2<f32>, @location(2) transformIndex: f32) -> VertexOutput {
+	var vert = vec4<f32>(pos, 0.0, 1.0);
+	vert *= transforms[i32(transformIndex)];
+	vert.x /= uniforms.halfWidth;
+	vert.y /= uniforms.halfHeight;
+
+	var output: VertexOutput;
+	output.position = vert;
+	output.texCoord = texCoord;
+	return output;
 }
-`
-		});
+	`
+	});
 
-		let imageFragmentShader = Q5.device.createShaderModule({
-			code: `
-@group(0) @binding(0) var samp: sampler;
-@group(0) @binding(1) var textures: array<texture_2d<f32>>;
+	let fragmentShader = Q5.device.createShaderModule({
+		label: 'imageFragmentShader',
+		code: `
+@group(3) @binding(0) var samp: sampler;
+@group(3) @binding(1) var texture: texture_2d<f32>;
 
 @fragment
-fn fragmentMain(@location(0) texCoord: vec2<f32>, @location(1) textureIndex: f32) -> @location(0) vec4<f32> {
-    return textureSample(textures[i32(textureIndex)], samp, texCoord);
+fn fragmentMain(@location(0) texCoord: vec2<f32>) -> @location(0) vec4<f32> {
+	// Sample the texture using the interpolated texture coordinate
+	return textureSample(texture, samp, texCoord);
 }
-`
-		});
-
-		const bindGroupLayouts = [
-			Q5.device.createBindGroupLayout({
-				entries: [
-					{ binding: 0, visibility: GPUShaderStage.VERTEX, buffer: { type: 'uniform' } },
-					{ binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: {} },
-					{ binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { viewDimension: '2d', sampleType: 'float' } }
-				]
-			}),
-			Q5.device.createBindGroupLayout({
-				entries: [{ binding: 0, visibility: GPUShaderStage.VERTEX, buffer: { type: 'read-only-storage' } }]
-			})
-		];
-
-		const pipelineLayout = Q5.device.createPipelineLayout({
-			bindGroupLayouts: bindGroupLayouts
-		});
+	`
+	});
 
-		$.pipelines[1] = Q5.device.createRenderPipeline({
-			layout: pipelineLayout,
-			vertex: {
-				module: imageVertexShader,
-				entryPoint: 'vertexMain',
-				buffers: [
-					{
-						arrayStride: 5 * 4, // 4 floats for position and texCoord, 1 float for textureIndex
-						attributes: [
-							{ shaderLocation: 0, offset: 0, format: 'float32x2' },
-							{ shaderLocation: 1, offset: 2 * 4, format: 'float32x2' },
-							{ shaderLocation: 2, offset: 4 * 4, format: 'float32' } // textureIndex
-						]
-					}
-				]
+	let textureLayout = Q5.device.createBindGroupLayout({
+		label: 'textureLayout',
+		entries: [
+			{
+				binding: 0,
+				visibility: GPUShaderStage.FRAGMENT,
+				sampler: { type: 'filtering' }
 			},
-			fragment: {
-				module: imageFragmentShader,
-				entryPoint: 'fragmentMain',
-				targets: [{ format: 'bgra8unorm' }]
-			},
-			primitive: {
-				topology: 'triangle-list'
+			{
+				binding: 1,
+				visibility: GPUShaderStage.FRAGMENT,
+				texture: { viewDimension: '2d', sampleType: 'float' }
 			}
+		]
+	});
+
+	const vertexBufferLayout = {
+		arrayStride: 20,
+		attributes: [
+			{ shaderLocation: 0, offset: 0, format: 'float32x2' },
+			{ shaderLocation: 1, offset: 8, format: 'float32x2' },
+			{ shaderLocation: 2, offset: 16, format: 'float32' } // transformIndex
+		]
+	};
+
+	$.bindGroupLayouts.push(textureLayout);
+
+	const pipelineLayout = Q5.device.createPipelineLayout({
+		label: 'imagePipelineLayout',
+		bindGroupLayouts: $.bindGroupLayouts
+	});
+
+	$.pipelines[1] = Q5.device.createRenderPipeline({
+		label: 'imagePipeline',
+		layout: pipelineLayout,
+		vertex: {
+			module: vertexShader,
+			entryPoint: 'vertexMain',
+			buffers: [{ arrayStride: 0, attributes: [] }, vertexBufferLayout]
+		},
+		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'
+						}
+					}
+				}
+			]
+		},
+		primitive: {
+			topology: 'triangle-list'
+		}
+	});
+
+	let sampler = Q5.device.createSampler({
+		magFilter: 'linear',
+		minFilter: 'linear'
+	});
+
+	$._createTexture = (img) => {
+		let textureSize = [img.width, img.height, 1];
+
+		const texture = Q5.device.createTexture({
+			size: textureSize,
+			format: 'bgra8unorm',
+			usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
 		});
 
-		$.sampler = Q5.device.createSampler({
-			magFilter: 'linear',
-			minFilter: 'linear'
+		Q5.device.queue.copyExternalImageToTexture({ source: img }, { texture }, textureSize);
+
+		img.textureIndex = $._textureBindGroups.length;
+
+		const textureBindGroup = Q5.device.createBindGroup({
+			layout: textureLayout,
+			entries: [
+				{ binding: 0, resource: sampler },
+				{ binding: 1, resource: texture.createView() }
+			]
 		});
-	});
+		$._textureBindGroups.push(textureBindGroup);
+	};
 
-	$.loadImage = async (src) => {
+	$.loadImage = $.loadTexture = (src) => {
+		q._preloadCount++;
 		const img = new Image();
-		img.onload = async () => {
-			const imageBitmap = await createImageBitmap(img);
-			const texture = Q5.device.createTexture({
-				size: [img.width, img.height, 1],
-				format: 'bgra8unorm',
-				usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
-			});
-
-			Q5.device.queue.copyExternalImageToTexture({ source: imageBitmap }, { texture }, [img.width, img.height, 1]);
-
-			img.texture = texture;
-			img.index = $.textures.length;
-			$.textures.push(texture);
+		img.crossOrigin = 'Anonymous';
+		img.onload = () => {
+			$._createTexture(img);
+			q._preloadCount--;
 		};
-		img.onerror = reject;
 		img.src = src;
 		return img;
 	};
 
+	$.imageMode = (x) => ($._imageMode = x);
+
+	$.image = (img, x, y, w, h) => {
+		if (img.canvas) img = img.canvas;
+		if (img.textureIndex == undefined) return;
+
+		if ($._matrixDirty) $._saveMatrix();
+		let ti = $._transformIndex;
+
+		w ??= img.width;
+		h ??= img.height;
+
+		w /= $._pixelDensity;
+		h /= $._pixelDensity;
+
+		let [l, r, t, b] = $._calcBox(x, y, w, h, $._imageMode);
+
+		// prettier-ignore
+		verticesStack.push(
+			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
+		);
+
+		$.drawStack.push(1, img.textureIndex);
+	};
+
 	$._hooks.preRender.push(() => {
-		if (!$.imageStack.length) return;
+		if (!$._textureBindGroups.length) return;
 
 		// Switch to image pipeline
 		$.pass.setPipeline($.pipelines[1]);
 
 		// Create a vertex buffer for the image quads
-		const vertices = new Float32Array($.vertexStack);
+		const vertices = new Float32Array(verticesStack);
 
 		const vertexBuffer = Q5.device.createBuffer({
 			size: vertices.byteLength,
@@ -132,56 +198,10 @@ fn fragmentMain(@location(0) texCoord: vec2<f32>, @location(1) textureIndex: f32
 		});
 
 		Q5.device.queue.writeBuffer(vertexBuffer, 0, vertices);
-		$.pass.setVertexBuffer(0, vertexBuffer);
-
-		// Set the bind group for the sampler and textures
-		if ($.textures.length !== previousTextureCount) {
-			previousTextureCount = $.textures.length;
-
-			// Create the bind group for all textures
-			const textureViews = $.textures.map((tex) => tex.createView());
-
-			$.textureBindGroup = Q5.device.createBindGroup({
-				layout: $.pipelines[1].getBindGroupLayout(0),
-				entries: [
-					{ binding: 0, resource: $.sampler },
-					...textureViews.map((view, i) => ({ binding: i + 1, resource: view }))
-				]
-			});
-		}
-
-		// Set the bind group for the sampler and textures
-		$.pass.setBindGroup(0, $.textureBindGroup);
+		$.pass.setVertexBuffer(1, vertexBuffer);
 	});
 
-	$.image = (img, x, y, w, h) => {
-		if ($._matrixDirty) $._saveMatrix();
-		let ti = $._transformIndex;
-
-		$.imageStack.push(img.index);
-
-		// Calculate half-width and half-height
-		let hw = w / 2;
-		let hh = h / 2;
-
-		// Calculate vertices positions
-		let left = x - hw;
-		let right = x + hw;
-		let top = -(y - hh); // y is inverted in WebGPU
-		let bottom = -(y + hh);
-
-		let ii = img.index;
-
-		// prettier-ignore
-		$.vertexStack.push(
-			left, top, 0, 0, ti, ii,
-			right, top, 1, 0, ti, ii,
-			left, bottom, 0, 1, ti, ii,
-			right, top, 1, 0, ti, ii,
-			left, bottom, 0, 1, ti, ii,
-			right, bottom, 1, 1, ti, ii
-		);
-
-		$.drawStack.push(6);
-	};
+	$._hooks.postRender.push(() => {
+		verticesStack.length = 0;
+	});
 };