q5 2.12.10 → 2.13.1

package/src/q5-webgpu-canvas.js

@@ -11,6 +11,9 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 	c.width = $.width = 500;
 	c.height = $.height = 500;
 
+	// q2d graphics context
+	$._g = $.createGraphics(1, 1);
+
 	if ($.colorMode) $.colorMode('rgb', 1);
 
 	let pass,
@@ -146,7 +149,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 	};
 
 	$._stroke = 0;
-	$._fill = 1;
+	$._fill = $._tint = 1;
 	$._doFill = $._doStroke = true;
 
 	$.fill = (r, g, b, a) => {
@@ -159,42 +162,51 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		$._doStroke = $._strokeSet = true;
 		$._stroke = colorIndex;
 	};
+	$.tint = (r, g, b, a) => {
+		addColor(r, g, b, a);
+		$._tint = colorIndex;
+	};
 
 	$.noFill = () => ($._doFill = false);
 	$.noStroke = () => ($._doStroke = false);
+	$.noTint = () => ($._tint = 1);
 
 	$._strokeWeight = 1;
 	$.strokeWeight = (v) => ($._strokeWeight = Math.abs(v));
 
-	$.resetMatrix = () => {
-		// initialize the transformation matrix as 4x4 identity matrix
-
-		// prettier-ignore
-		$._matrix = [
-			1, 0, 0, 0,
-			0, 1, 0, 0,
-			0, 0, 1, 0,
-			0, 0, 0, 1
-		];
-		$._transformIndex = 0;
-	};
-	$.resetMatrix();
+	const MAX_TRANSFORMS = 1e7, // or whatever maximum you need
+		MATRIX_SIZE = 16, // 4x4 matrix
+		transforms = new Float32Array(MAX_TRANSFORMS * MATRIX_SIZE),
+		matrices = [],
+		matricesIndexStack = [];
+	let matrix;
 
 	// tracks if the matrix has been modified
 	$._matrixDirty = false;
 
-	// array to store transformation matrices for the render pass
-	let transformStates = [$._matrix.slice()];
+	// initialize with a 4x4 identity matrix
+	// prettier-ignore
+	matrices.push([
+		1, 0, 0, 0,
+		0, 1, 0, 0,
+		0, 0, 1, 0,
+		0, 0, 0, 1
+	]);
+
+	transforms.set(matrices[0]);
 
-	// stack to keep track of transformation matrix indexes
-	$._transformIndexStack = [];
+	$.resetMatrix = () => {
+		matrix = matrices[0].slice();
+		$._matrixIndex = 0;
+	};
+	$.resetMatrix();
 
 	$.translate = (x, y, z) => {
 		if (!x && !y && !z) return;
 		// update the translation values
-		$._matrix[12] += x;
-		$._matrix[13] -= y;
-		$._matrix[14] += z || 0;
+		matrix[12] += x;
+		matrix[13] -= y;
+		matrix[14] += z || 0;
 		$._matrixDirty = true;
 	};
 
@@ -205,7 +217,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		let cosR = Math.cos(a);
 		let sinR = Math.sin(a);
 
-		let m = $._matrix;
+		let m = matrix;
 
 		let m0 = m[0],
 			m1 = m[1],
@@ -232,7 +244,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 	$.scale = (x = 1, y, z = 1) => {
 		y ??= x;
 
-		let m = $._matrix;
+		let m = matrix;
 
 		m[0] *= x;
 		m[1] *= x;
@@ -256,13 +268,13 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 
 		let tanAng = Math.tan(ang);
 
-		let m0 = $._matrix[0],
-			m1 = $._matrix[1],
-			m4 = $._matrix[4],
-			m5 = $._matrix[5];
+		let m0 = matrix[0],
+			m1 = matrix[1],
+			m4 = matrix[4],
+			m5 = matrix[5];
 
-		$._matrix[0] = m0 + m4 * tanAng;
-		$._matrix[1] = m1 + m5 * tanAng;
+		matrix[0] = m0 + m4 * tanAng;
+		matrix[1] = m1 + m5 * tanAng;
 
 		$._matrixDirty = true;
 	};
@@ -273,13 +285,13 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 
 		let tanAng = Math.tan(ang);
 
-		let m0 = $._matrix[0],
-			m1 = $._matrix[1],
-			m4 = $._matrix[4],
-			m5 = $._matrix[5];
+		let m0 = matrix[0],
+			m1 = matrix[1],
+			m4 = matrix[4],
+			m5 = matrix[5];
 
-		$._matrix[4] = m4 + m0 * tanAng;
-		$._matrix[5] = m5 + m1 * tanAng;
+		matrix[4] = m4 + m0 * tanAng;
+		matrix[5] = m5 + m1 * tanAng;
 
 		$._matrixDirty = true;
 	};
@@ -297,31 +309,32 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		}
 
 		// overwrite the current transformation matrix
-		$._matrix = m.slice();
+		matrix = m.slice();
 		$._matrixDirty = true;
 	};
 
 	// function to save the current matrix state if dirty
 	$._saveMatrix = () => {
-		transformStates.push($._matrix.slice());
-		$._transformIndex = transformStates.length - 1;
+		transforms.set(matrix, matrices.length * MATRIX_SIZE);
+		$._matrixIndex = matrices.length;
+		matrices.push(matrix.slice());
 		$._matrixDirty = false;
 	};
 
 	// push the current matrix index onto the stack
 	$.pushMatrix = () => {
 		if ($._matrixDirty) $._saveMatrix();
-		$._transformIndexStack.push($._transformIndex);
+		matricesIndexStack.push($._matrixIndex);
 	};
 
 	$.popMatrix = () => {
-		if (!$._transformIndexStack.length) {
+		if (!matricesIndexStack.length) {
 			return console.warn('Matrix index stack is empty!');
 		}
 		// pop the last matrix index and set it as the current matrix index
-		let idx = $._transformIndexStack.pop();
-		$._matrix = transformStates[idx].slice();
-		$._transformIndex = idx;
+		let idx = matricesIndexStack.pop();
+		matrix = matrices[idx].slice();
+		$._matrixIndex = idx;
 		$._matrixDirty = false;
 	};
 
@@ -446,14 +459,14 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 	};
 
 	$._render = () => {
-		if (transformStates.length > 1 || !$._transformBindGroup) {
+		if (matrices.length > 1 || !$._transformBindGroup) {
 			let transformBuffer = Q5.device.createBuffer({
-				size: transformStates.length * 64, // 64 is the size of 16 floats
+				size: matrices.length * MATRIX_SIZE * 4, // 4 bytes per float
 				usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
 				mappedAtCreation: true
 			});
 
-			new Float32Array(transformBuffer.getMappedRange()).set(transformStates.flat());
+			new Float32Array(transformBuffer.getMappedRange()).set(transforms.slice(0, matrices.length * MATRIX_SIZE));
 			transformBuffer.unmap();
 
 			$._transformBindGroup = Q5.device.createBindGroup({
@@ -481,7 +494,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 			entries: [{ binding: 0, resource: { buffer: colorsBuffer } }]
 		});
 
-		$.pass.setBindGroup(1, $._colorsBindGroup);
+		pass.setBindGroup(1, $._colorsBindGroup);
 
 		for (let m of $._hooks.preRender) m();
 
@@ -505,6 +518,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 				pass.draw(v, 1, drawVertOffset);
 				drawVertOffset += v;
 			} else if (curPipelineIndex == 1) {
+				// let vertCount = drawStack[i + 2];
 				// draw images
 				if (curTextureIndex != v) {
 					// v is the texture index
@@ -512,6 +526,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 				}
 				pass.draw(4, 1, imageVertOffset);
 				imageVertOffset += 4;
+				// i++;
 			} else if (curPipelineIndex == 2) {
 				// draw text
 				let o = drawStack[i + 2];
@@ -540,8 +555,9 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		colorIndex = 1;
 		colorStackIndex = 8;
 		rotation = 0;
-		transformStates.length = 1;
-		$._transformIndexStack.length = 0;
+		transforms.length = MATRIX_SIZE;
+		matrices.length = 1;
+		matricesIndexStack.length = 0;
 	};
 };
 
@@ -552,7 +568,10 @@ Q5.initWebGPU = async () => {
 	}
 	if (!Q5.device) {
 		let adapter = await navigator.gpu.requestAdapter();
-		if (!adapter) throw new Error('No appropriate GPUAdapter found.');
+		if (!adapter) {
+			console.warn('q5 WebGPU could not start! No appropriate GPUAdapter found, vulkan may need to be enabled.');
+			return false;
+		}
 		Q5.device = await adapter.requestDevice();
 	}
 	return true;

package/src/q5-webgpu-drawing.js

@@ -10,7 +10,7 @@ Q5.renderers.webgpu.drawing = ($, q) => {
 struct VertexInput {
 	@location(0) pos: vec2f,
 	@location(1) colorIndex: f32,
-	@location(2) transformIndex: f32
+	@location(2) matrixIndex: f32
 }
 struct VertexOutput {
 	@builtin(position) position: vec4f,
@@ -29,7 +29,7 @@ struct Uniforms {
 @vertex
 fn vertexMain(input: VertexInput) -> VertexOutput {
 	var vert = vec4f(input.pos, 0.0, 1.0);
-	vert = transforms[i32(input.transformIndex)] * vert;
+	vert = transforms[i32(input.matrixIndex)] * vert;
 	vert.x /= uniforms.halfWidth;
 	vert.y /= uniforms.halfHeight;
 
@@ -56,7 +56,7 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 		attributes: [
 			{ format: 'float32x2', offset: 0, shaderLocation: 0 }, // position
 			{ format: 'float32', offset: 8, shaderLocation: 1 }, // colorIndex
-			{ format: 'float32', offset: 12, shaderLocation: 2 } // transformIndex
+			{ format: 'float32', offset: 12, shaderLocation: 2 } // matrixIndex
 		]
 	};
 
@@ -210,7 +210,7 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 		let [l, r, t, b] = $._calcBox(x, y, w, h, $._rectMode);
 		let ci, ti;
 		if ($._matrixDirty) $._saveMatrix();
-		ti = $._transformIndex;
+		ti = $._matrixIndex;
 
 		if ($._doFill) {
 			ci = $._fill;
@@ -284,7 +284,7 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 		let b = w == h ? a : Math.max(h, 1) / 2;
 
 		if ($._matrixDirty) $._saveMatrix();
-		let ti = $._transformIndex;
+		let ti = $._matrixIndex;
 
 		if ($._doFill) {
 			addEllipse(x, y, a, b, n, $._fill, ti);
@@ -300,7 +300,7 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 
 	$.point = (x, y) => {
 		if ($._matrixDirty) $._saveMatrix();
-		let ti = $._transformIndex,
+		let ti = $._matrixIndex,
 			ci = $._stroke,
 			sw = $._strokeWeight;
 
@@ -320,7 +320,7 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 
 	$.line = (x1, y1, x2, y2) => {
 		if ($._matrixDirty) $._saveMatrix();
-		let ti = $._transformIndex,
+		let ti = $._matrixIndex,
 			ci = $._stroke,
 			sw = $._strokeWeight,
 			hsw = sw / 2;
@@ -355,7 +355,7 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 
 	$.vertex = (x, y) => {
 		if ($._matrixDirty) $._saveMatrix();
-		sv.push(x, -y, $._fill, $._transformIndex);
+		sv.push(x, -y, $._fill, $._matrixIndex);
 		shapeVertCount++;
 	};
 
@@ -400,7 +400,7 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 							(2 * p0.y - 5 * p1.y + 4 * p2.y - p3.y) * t2 +
 							(-p0.y + 3 * p1.y - 3 * p2.y + p3.y) * t3);
 
-					sv.push(x, y, $._fill, $._transformIndex);
+					sv.push(x, y, $._fill, $._matrixIndex);
 					shapeVertCount++;
 				}
 			}

package/src/q5-webgpu-image.js

@@ -1,13 +1,21 @@
 Q5.renderers.webgpu.image = ($, q) => {
 	$._textureBindGroups = [];
-	let vertexStack = [];
+	let vertexStack = new Float32Array(1e7),
+		vertIndex = 0;
 
-	let vertexShader = Q5.device.createShaderModule({
-		label: 'imageVertexShader',
+	let imageShader = Q5.device.createShaderModule({
+		label: 'imageShader',
 		code: `
+struct VertexInput {
+	@location(0) pos: vec2f,
+	@location(1) texCoord: vec2f,
+	@location(2) tintIndex: f32,
+	@location(3) matrixIndex: f32
+}
 struct VertexOutput {
 	@builtin(position) position: vec4f,
-	@location(0) texCoord: vec2f
+	@location(0) texCoord: vec2f,
+	@location(1) tintIndex: f32
 }
 struct Uniforms {
 	halfWidth: f32,
@@ -17,31 +25,33 @@ struct Uniforms {
 @group(0) @binding(0) var<uniform> uniforms: Uniforms;
 @group(0) @binding(1) var<storage> transforms: array<mat4x4<f32>>;
 
+@group(1) @binding(0) var<storage> colors : array<vec4f>;
+
+@group(2) @binding(0) var samp: sampler;
+@group(2) @binding(1) var texture: texture_2d<f32>;
+
 @vertex
-fn vertexMain(@location(0) pos: vec2f, @location(1) texCoord: vec2f, @location(2) transformIndex: f32) -> VertexOutput {
-	var vert = vec4f(pos, 0.0, 1.0);
-	vert = transforms[i32(transformIndex)] * vert;
+fn vertexMain(input: VertexInput) -> VertexOutput {
+	var vert = vec4f(input.pos, 0.0, 1.0);
+	vert = transforms[i32(input.matrixIndex)] * vert;
 	vert.x /= uniforms.halfWidth;
 	vert.y /= uniforms.halfHeight;
 
 	var output: VertexOutput;
 	output.position = vert;
-	output.texCoord = texCoord;
+	output.texCoord = input.texCoord;
+	output.tintIndex = input.tintIndex;
 	return output;
 }
-	`
-	});
-
-	let fragmentShader = Q5.device.createShaderModule({
-		label: 'imageFragmentShader',
-		code: `
-@group(2) @binding(0) var samp: sampler;
-@group(2) @binding(1) var texture: texture_2d<f32>;
 
 @fragment
-fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f {
-	// Sample the texture using the interpolated texture coordinate
-	return textureSample(texture, samp, texCoord);
+fn fragmentMain(@location(0) texCoord: vec2f, @location(1) tintIndex: f32) -> @location(0) vec4f {
+		let texColor = textureSample(texture, samp, texCoord);
+		let tintColor = colors[i32(tintIndex)];
+		
+		// Mix original and tinted colors using tint alpha as blend factor
+		let tinted = vec4f(texColor.rgb * tintColor.rgb, texColor.a);
+		return mix(texColor, tinted, tintColor.a);
 }
 	`
 	});
@@ -63,11 +73,12 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f {
 	});
 
 	const vertexBufferLayout = {
-		arrayStride: 20,
+		arrayStride: 24,
 		attributes: [
 			{ shaderLocation: 0, offset: 0, format: 'float32x2' },
 			{ shaderLocation: 1, offset: 8, format: 'float32x2' },
-			{ shaderLocation: 2, offset: 16, format: 'float32' } // transformIndex
+			{ shaderLocation: 2, offset: 16, format: 'float32' }, // tintIndex
+			{ shaderLocation: 3, offset: 20, format: 'float32' } // matrixIndex
 		]
 	};
 
@@ -80,12 +91,12 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f {
 		label: 'imagePipeline',
 		layout: pipelineLayout,
 		vertex: {
-			module: vertexShader,
+			module: imageShader,
 			entryPoint: 'vertexMain',
 			buffers: [{ arrayStride: 0, attributes: [] }, vertexBufferLayout]
 		},
 		fragment: {
-			module: fragmentShader,
+			module: imageShader,
 			entryPoint: 'fragmentMain',
 			targets: [{ format: 'bgra8unorm', blend: $.blendConfigs.normal }]
 		},
@@ -161,58 +172,63 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f {
 
 	$.loadImage = (src, cb) => {
 		q._preloadCount++;
-		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;
-			img.pixelDensity = 1;
-
+		let g = $._g.loadImage(src, (img) => {
+			g.defaultWidth = img.width * $._defaultImageScale;
+			g.defaultHeight = img.height * $._defaultImageScale;
 			$._createTexture(img);
 			q._preloadCount--;
 			if (cb) cb(img);
-		};
-		img.src = src;
-		return img;
+		});
+		return g;
 	};
 
 	$.imageMode = (x) => ($._imageMode = x);
 
-	$.image = (img, dx, dy, dw, dh, sx = 0, sy = 0, sw, sh) => {
+	const addVert = (x, y, u, v, ci, ti) => {
+		let s = vertexStack,
+			i = vertIndex;
+		s[i++] = x;
+		s[i++] = y;
+		s[i++] = u;
+		s[i++] = v;
+		s[i++] = ci;
+		s[i++] = ti;
+		vertIndex = i;
+	};
+
+	$.image = (img, dx = 0, dy = 0, dw, dh, sx = 0, sy = 0, sw, sh) => {
+		let g = img;
 		if (img.canvas) img = img.canvas;
 		if (img.textureIndex == undefined) return;
 
 		if ($._matrixDirty) $._saveMatrix();
-		let ti = $._transformIndex;
 
-		let w = img.width;
-		let h = img.height;
+		let ti = $._matrixIndex,
+			w = img.width,
+			h = img.height;
 
-		dw ??= img.defaultWidth;
-		dh ??= img.defaultHeight;
+		dw ??= g.defaultWidth;
+		dh ??= g.defaultHeight;
 		sw ??= w;
 		sh ??= h;
 
-		let pd = img.pixelDensity || 1;
+		let pd = g._pixelDensity || 1;
 		dw *= pd;
 		dh *= pd;
 
 		let [l, r, t, b] = $._calcBox(dx, dy, dw, dh, $._imageMode);
 
-		let u0 = sx / w;
-		let v0 = sy / h;
-		let u1 = (sx + sw) / w;
-		let v1 = (sy + sh) / h;
-
-		// prettier-ignore
-		vertexStack.push(
-			l, t, u0, v0, ti,
-			r, t, u1, v0, ti,
-			l, b, u0, v1, ti,
-			r, b, u1, v1, ti
-		);
+		let u0 = sx / w,
+			v0 = sy / h,
+			u1 = (sx + sw) / w,
+			v1 = (sy + sh) / h;
+
+		let ci = $._tint;
+
+		addVert(l, t, u0, v0, ci, ti);
+		addVert(r, t, u1, v0, ci, ti);
+		addVert(l, b, u0, v1, ci, ti);
+		addVert(r, b, u1, v1, ci, ti);
 
 		$.drawStack.push(1, img.textureIndex);
 	};
@@ -223,20 +239,20 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f {
 		// Switch to image pipeline
 		$.pass.setPipeline($._pipelines[1]);
 
-		const vertexBuffer = Q5.device.createBuffer({
-			size: vertexStack.length * 4,
+		let vertexBuffer = Q5.device.createBuffer({
+			size: vertIndex * 4,
 			usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
 			mappedAtCreation: true
 		});
 
-		new Float32Array(vertexBuffer.getMappedRange()).set(vertexStack);
+		new Float32Array(vertexBuffer.getMappedRange()).set(vertexStack.slice(0, vertIndex));
 		vertexBuffer.unmap();
 
 		$.pass.setVertexBuffer(1, vertexBuffer);
 	});
 
 	$._hooks.postRender.push(() => {
-		vertexStack.length = 0;
+		vertIndex = 0;
 	});
 };
 

package/src/q5-webgpu-text.js

@@ -23,7 +23,7 @@ struct Char {
 struct Text {
 	pos: vec2f,
 	scale: f32,
-	transformIndex: f32,
+	matrixIndex: f32,
 	fillIndex: f32,
 	strokeIndex: f32
 }
@@ -55,7 +55,7 @@ fn vertexMain(input : VertexInput) -> VertexOutput {
 	let charPos = ((pos[input.vertex] * fontChar.size + char.xy + fontChar.offset) * text.scale) + text.pos;
 
 	var vert = vec4f(charPos, 0.0, 1.0);
-	vert = transforms[i32(text.transformIndex)] * vert;
+	vert = transforms[i32(text.matrixIndex)] * vert;
 	vert.x /= uniforms.halfWidth;
 	vert.y /= uniforms.halfHeight;
 
@@ -279,13 +279,11 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 		if (cb) cb(fontName);
 	};
 
-	// q2d graphics context to use for text image creation
-	let g = $.createGraphics(1, 1);
-	g.colorMode($.RGB, 1);
+	$._g.colorMode($.RGB, 1);
 
 	$.loadFont = (url, cb) => {
 		let ext = url.slice(url.lastIndexOf('.') + 1);
-		if (ext != 'json') return g.loadFont(url, cb);
+		if (ext != 'json') return $._g.loadFont(url, cb);
 		let fontName = url.slice(url.lastIndexOf('/') + 1, url.lastIndexOf('-'));
 		createFont(url, fontName, cb);
 		return fontName;
@@ -470,7 +468,7 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 		text[0] = x;
 		text[1] = -y;
 		text[2] = $._textSize / 44;
-		text[3] = $._transformIndex;
+		text[3] = $._matrixIndex;
 		text[4] = $._fillSet ? $._fill : 0;
 		text[5] = $._stroke;
 
@@ -484,18 +482,18 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 	};
 
 	$.createTextImage = (str, w, h) => {
-		g.textSize($._textSize);
+		$._g.textSize($._textSize);
 
 		if ($._doFill) {
 			let fi = $._fill * 4;
-			g.fill(colorStack.slice(fi, fi + 4));
+			$._g.fill(colorStack.slice(fi, fi + 4));
 		}
 		if ($._doStroke) {
 			let si = $._stroke * 4;
-			g.stroke(colorStack.slice(si, si + 4));
+			$._g.stroke(colorStack.slice(si, si + 4));
 		}
 
-		let img = g.createTextImage(str, w, h);
+		let img = $._g.createTextImage(str, w, h);
 
 		if (img.canvas.textureIndex == undefined) {
 			$._createTexture(img);