q5 2.4.5 → 2.5.0

package/src/q5-webgpu-canvas.js

@@ -24,7 +24,8 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 	// colors used for each draw call
 	let colorsStack = ($.colorsStack = [1, 1, 1, 1]);
 
-	$._envLayout = Q5.device.createBindGroupLayout({
+	$._transformLayout = Q5.device.createBindGroupLayout({
+		label: 'transformLayout',
 		entries: [
 			{
 				binding: 0,
@@ -33,14 +34,9 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 					type: 'uniform',
 					hasDynamicOffset: false
 				}
-			}
-		]
-	});
-
-	$._transformLayout = Q5.device.createBindGroupLayout({
-		entries: [
+			},
 			{
-				binding: 0,
+				binding: 1,
 				visibility: GPUShaderStage.VERTEX,
 				buffer: {
 					type: 'read-only-storage',
@@ -50,9 +46,9 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		]
 	});
 
-	$.bindGroupLayouts = [$._envLayout, $._transformLayout];
+	$.bindGroupLayouts = [$._transformLayout];
 
-	const uniformBuffer = Q5.device.createBuffer({
+	let uniformBuffer = Q5.device.createBuffer({
 		size: 8, // Size of two floats
 		usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
 	});
@@ -60,25 +56,13 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 	$._createCanvas = (w, h, opt) => {
 		q.ctx = q.drawingContext = c.getContext('webgpu');
 
-		opt.format = navigator.gpu.getPreferredCanvasFormat();
-		opt.device = Q5.device;
+		opt.format ??= navigator.gpu.getPreferredCanvasFormat();
+		opt.device ??= Q5.device;
 
 		$.ctx.configure(opt);
 
 		Q5.device.queue.writeBuffer(uniformBuffer, 0, new Float32Array([$.canvas.hw, $.canvas.hh]));
 
-		$._envBindGroup = Q5.device.createBindGroup({
-			layout: $._envLayout,
-			entries: [
-				{
-					binding: 0,
-					resource: {
-						buffer: uniformBuffer
-					}
-				}
-			]
-		});
-
 		return c;
 	};
 
@@ -88,7 +72,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 
 	// current color index, used to associate a vertex with a color
 	let colorIndex = 0;
-	const addColor = (r, g, b, a = 1) => {
+	let addColor = (r, g, b, a = 1) => {
 		if (typeof r == 'string') r = $.color(r);
 		else if (b == undefined) {
 			// grayscale mode `fill(1, 0.5)`
@@ -100,6 +84,8 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		colorIndex++;
 	};
 
+	$._fillIndex = $._strokeIndex = -1;
+
 	$.fill = (r, g, b, a) => {
 		addColor(r, g, b, a);
 		$._doFill = true;
@@ -131,56 +117,70 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 	};
 	$.resetMatrix();
 
-	// Boolean to track if the matrix has been modified
+	// tracks if the matrix has been modified
 	$._matrixDirty = false;
 
-	// Array to store transformation matrices for the render pass
+	// array to store transformation matrices for the render pass
 	$.transformStates = [$._matrix.slice()];
 
-	// Stack to keep track of transformation matrix indexes
+	// stack to keep track of transformation matrix indexes
 	$._transformIndexStack = [];
 
 	$.translate = (x, y, z) => {
 		if (!x && !y && !z) return;
 		// Update the translation values
-		$._matrix[3] += x;
-		$._matrix[7] -= y;
-		$._matrix[11] += z || 0;
+		$._matrix[12] += x;
+		$._matrix[13] -= y;
+		$._matrix[14] += z || 0;
 		$._matrixDirty = true;
 	};
 
-	$.rotate = (r) => {
-		if (!r) return;
-		if ($._angleMode) r *= $._DEGTORAD;
+	$.rotate = (a) => {
+		if (!a) return;
+		if ($._angleMode) a *= $._DEGTORAD;
 
-		let cosR = Math.cos(r);
-		let sinR = Math.sin(r);
+		let cosR = Math.cos(a);
+		let sinR = Math.sin(a);
+
+		let m = $._matrix;
+
+		let m0 = m[0],
+			m1 = m[1],
+			m4 = m[4],
+			m5 = m[5];
 
-		let m0 = $._matrix[0],
-			m1 = $._matrix[1],
-			m4 = $._matrix[4],
-			m5 = $._matrix[5];
 		if (!m0 && !m1 && !m4 && !m5) {
-			$._matrix[0] = cosR;
-			$._matrix[1] = sinR;
-			$._matrix[4] = -sinR;
-			$._matrix[5] = cosR;
+			m[0] = cosR;
+			m[1] = sinR;
+			m[4] = -sinR;
+			m[5] = cosR;
 		} else {
-			$._matrix[0] = m0 * cosR + m4 * sinR;
-			$._matrix[1] = m1 * cosR + m5 * sinR;
-			$._matrix[4] = m0 * -sinR + m4 * cosR;
-			$._matrix[5] = m1 * -sinR + m5 * cosR;
+			m[0] = m0 * cosR + m4 * sinR;
+			m[1] = m1 * cosR + m5 * sinR;
+			m[4] = m4 * cosR - m0 * sinR;
+			m[5] = m5 * cosR - m1 * sinR;
 		}
 
 		$._matrixDirty = true;
 	};
 
-	$.scale = (sx = 1, sy, sz = 1) => {
-		sy ??= sx;
+	$.scale = (x = 1, y, z = 1) => {
+		y ??= x;
+
+		let m = $._matrix;
 
-		$._matrix[0] *= sx;
-		$._matrix[5] *= sy;
-		$._matrix[10] *= sz;
+		m[0] *= x;
+		m[1] *= x;
+		m[2] *= x;
+		m[3] *= x;
+		m[4] *= y;
+		m[5] *= y;
+		m[6] *= y;
+		m[7] *= y;
+		m[8] *= z;
+		m[9] *= z;
+		m[10] *= z;
+		m[11] *= z;
 
 		$._matrixDirty = true;
 	};
@@ -252,7 +252,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		if (!$._transformIndexStack.length) {
 			return console.warn('Matrix index stack is empty!');
 		}
-		// Pop the last matrix index from the stack and set it as the current matrix index
+		// Pop the last matrix index and set it as the current matrix index
 		let idx = $._transformIndexStack.pop();
 		$._matrix = $.transformStates[idx].slice();
 		$._transformIndex = idx;
@@ -275,7 +275,6 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		// left, right, top, bottom
 		let l, r, t, b;
 		if (!mode || mode == 'corner') {
-			// CORNER
 			l = x;
 			r = x + w;
 			t = -y;
@@ -315,7 +314,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 
 	$._render = () => {
 		if (transformStates.length > 1 || !$._transformBindGroup) {
-			const transformBuffer = Q5.device.createBuffer({
+			let transformBuffer = Q5.device.createBuffer({
 				size: transformStates.length * 64, // Size of 16 floats
 				usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
 			});
@@ -327,6 +326,12 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 				entries: [
 					{
 						binding: 0,
+						resource: {
+							buffer: uniformBuffer
+						}
+					},
+					{
+						binding: 1,
 						resource: {
 							buffer: transformBuffer
 						}
@@ -335,35 +340,47 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 			});
 		}
 
-		pass.setBindGroup(0, $._envBindGroup);
-		pass.setBindGroup(1, $._transformBindGroup);
+		pass.setBindGroup(0, $._transformBindGroup);
 
 		for (let m of $._hooks.preRender) m();
 
 		let drawVertOffset = 0;
 		let imageVertOffset = 0;
+		let textCharOffset = 0;
 		let curPipelineIndex = -1;
 		let curTextureIndex = -1;
 
-		pass.setPipeline($.pipelines[0]);
-
 		for (let i = 0; i < drawStack.length; i += 2) {
 			let v = drawStack[i + 1];
 
+			if (drawStack[i] == -1) {
+				v();
+				continue;
+			}
+
 			if (curPipelineIndex != drawStack[i]) {
 				curPipelineIndex = drawStack[i];
 				pass.setPipeline($.pipelines[curPipelineIndex]);
 			}
 
 			if (curPipelineIndex == 0) {
-				pass.draw(v, 1, drawVertOffset, 0);
+				// v is the number of vertices
+				pass.draw(v, 1, drawVertOffset);
 				drawVertOffset += v;
 			} else if (curPipelineIndex == 1) {
 				if (curTextureIndex != v) {
-					pass.setBindGroup(3, $._textureBindGroups[v]);
+					// v is the texture index
+					pass.setBindGroup(2, $._textureBindGroups[v]);
 				}
-				pass.draw(6, 1, imageVertOffset, 0);
+				pass.draw(6, 1, imageVertOffset);
 				imageVertOffset += 6;
+			} else if (curPipelineIndex == 2) {
+				pass.setBindGroup(2, $._font.bindGroup);
+				pass.setBindGroup(3, $._textBindGroup);
+
+				// v is the number of characters in the text
+				pass.draw(4, v, 0, textCharOffset);
+				textCharOffset += v;
 			}
 		}
 
@@ -372,7 +389,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 
 	$._finishRender = () => {
 		pass.end();
-		const commandBuffer = $.encoder.finish();
+		let commandBuffer = $.encoder.finish();
 		Q5.device.queue.submit([commandBuffer]);
 		q.pass = $.encoder = null;
 

package/src/q5-webgpu-drawing.js

@@ -12,8 +12,8 @@ Q5.renderers.webgpu.drawing = ($, q) => {
 		label: 'drawingVertexShader',
 		code: `
 struct VertexOutput {
-	@builtin(position) position: vec4<f32>,
-	@location(1) colorIndex: f32
+	@builtin(position) position: vec4f,
+	@location(0) colorIndex: f32
 };
 
 struct Uniforms {
@@ -22,12 +22,12 @@ struct Uniforms {
 };
 
 @group(0) @binding(0) var<uniform> uniforms: Uniforms;
-@group(1) @binding(0) var<storage, read> transforms: array<mat4x4<f32>>;
+@group(0) @binding(1) var<storage, read> transforms: array<mat4x4<f32>>;
 
 @vertex
-fn vertexMain(@location(0) pos: vec2<f32>, @location(1) colorIndex: f32, @location(2) transformIndex: f32) -> VertexOutput {
-	var vert = vec4<f32>(pos, 0.0, 1.0);
-	vert *= transforms[i32(transformIndex)];
+fn vertexMain(@location(0) pos: vec2f, @location(1) colorIndex: f32, @location(2) transformIndex: f32) -> VertexOutput {
+	var vert = vec4f(pos, 0.0, 1.0);
+	vert = transforms[i32(transformIndex)] * vert;
 	vert.x /= uniforms.halfWidth;
 	vert.y /= uniforms.halfHeight;
 
@@ -42,17 +42,18 @@ fn vertexMain(@location(0) pos: vec2<f32>, @location(1) colorIndex: f32, @locati
 	let fragmentShader = Q5.device.createShaderModule({
 		label: 'drawingFragmentShader',
 		code: `
-@group(2) @binding(0) var<storage, read> uColors : array<vec4<f32>>;
+@group(1) @binding(0) var<storage, read> colors : array<vec4f>;
 
 @fragment
-fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
-	let index = u32(colorIndex);
-	return mix(uColors[index], uColors[index + 1u], fract(colorIndex));
+fn fragmentMain(@location(0) colorIndex: f32) -> @location(0) vec4f {
+	let index = i32(colorIndex);
+	return mix(colors[index], colors[index + 1], fract(colorIndex));
 }
 `
 	});
 
 	colorsLayout = Q5.device.createBindGroupLayout({
+		label: 'colorsLayout',
 		entries: [
 			{
 				binding: 0,
@@ -283,10 +284,17 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 	$.background = (r, g, b, a) => {
 		$.push();
 		$.resetMatrix();
-		if (r.src) $.image(r, -c.hw, -c.hh, c.w, c.h);
-		else {
+		if (r.src) {
+			let og = $._imageMode;
+			$._imageMode = 'corner';
+			$.image(r, -c.hw, -c.hh, c.w, c.h);
+			$._imageMode = og;
+		} else {
+			let og = $._rectMode;
+			$._rectMode = 'corner';
 			$.fill(r, g, b, a);
 			$.rect(-c.hw, -c.hh, c.w, c.h);
+			$._rectMode = og;
 		}
 		$.pop();
 	};
@@ -394,7 +402,7 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 		});
 
 		// set the bind group once before rendering
-		$.pass.setBindGroup(2, $._colorsBindGroup);
+		$.pass.setBindGroup(1, $._colorsBindGroup);
 	});
 
 	$._hooks.postRender.push(() => {

package/src/q5-webgpu-image.js

@@ -6,8 +6,8 @@ Q5.renderers.webgpu.image = ($, q) => {
 		label: 'imageVertexShader',
 		code: `
 struct VertexOutput {
-	@builtin(position) position: vec4<f32>,
-	@location(0) texCoord: vec2<f32>
+	@builtin(position) position: vec4f,
+	@location(0) texCoord: vec2f
 };
 
 struct Uniforms {
@@ -16,12 +16,12 @@ struct Uniforms {
 };
 
 @group(0) @binding(0) var<uniform> uniforms: Uniforms;
-@group(1) @binding(0) var<storage, read> transforms: array<mat4x4<f32>>;
+@group(0) @binding(1) var<storage, read> transforms: array<mat4x4<f32>>;
 
 @vertex
-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)];
+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;
 	vert.x /= uniforms.halfWidth;
 	vert.y /= uniforms.halfHeight;
 
@@ -36,11 +36,11 @@ fn vertexMain(@location(0) pos: vec2<f32>, @location(1) texCoord: vec2<f32>, @lo
 	let fragmentShader = Q5.device.createShaderModule({
 		label: 'imageFragmentShader',
 		code: `
-@group(3) @binding(0) var samp: sampler;
-@group(3) @binding(1) var texture: texture_2d<f32>;
+@group(2) @binding(0) var samp: sampler;
+@group(2) @binding(1) var texture: texture_2d<f32>;
 
 @fragment
-fn fragmentMain(@location(0) texCoord: vec2<f32>) -> @location(0) vec4<f32> {
+fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f {
 	// Sample the texture using the interpolated texture coordinate
 	return textureSample(texture, samp, texCoord);
 }
@@ -72,11 +72,9 @@ fn fragmentMain(@location(0) texCoord: vec2<f32>) -> @location(0) vec4<f32> {
 		]
 	};
 
-	$.bindGroupLayouts.push(textureLayout);
-
 	const pipelineLayout = Q5.device.createPipelineLayout({
 		label: 'imagePipelineLayout',
-		bindGroupLayouts: $.bindGroupLayouts
+		bindGroupLayouts: [...$.bindGroupLayouts, textureLayout]
 	});
 
 	$.pipelines[1] = Q5.device.createRenderPipeline({
@@ -118,20 +116,30 @@ fn fragmentMain(@location(0) texCoord: vec2<f32>) -> @location(0) vec4<f32> {
 		minFilter: 'linear'
 	});
 
+	let MAX_TEXTURES = 12000;
+
+	$._textures = [];
+	let tIdx = 0;
+
 	$._createTexture = (img) => {
 		if (img.canvas) img = img.canvas;
 
 		let textureSize = [img.width, img.height, 1];
 
-		const texture = Q5.device.createTexture({
+		let texture = Q5.device.createTexture({
 			size: textureSize,
 			format: 'bgra8unorm',
 			usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
 		});
 
-		Q5.device.queue.copyExternalImageToTexture({ source: img }, { texture }, textureSize);
+		Q5.device.queue.copyExternalImageToTexture(
+			{ source: img },
+			{ texture, colorSpace: $.canvas.colorSpace },
+			textureSize
+		);
 
-		img.textureIndex = $._textureBindGroups.length;
+		$._textures[tIdx] = texture;
+		img.textureIndex = tIdx;
 
 		const textureBindGroup = Q5.device.createBindGroup({
 			layout: textureLayout,
@@ -140,7 +148,16 @@ fn fragmentMain(@location(0) texCoord: vec2<f32>) -> @location(0) vec4<f32> {
 				{ binding: 1, resource: texture.createView() }
 			]
 		});
-		$._textureBindGroups.push(textureBindGroup);
+		$._textureBindGroups[tIdx] = textureBindGroup;
+
+		tIdx = (tIdx + 1) % MAX_TEXTURES;
+
+		// If the texture array is full, destroy the oldest texture
+		if ($._textures[tIdx]) {
+			$._textures[tIdx].destroy();
+			delete $._textures[tIdx];
+			delete $._textureBindGroups[tIdx];
+		}
 	};
 
 	$.loadImage = $.loadTexture = (src) => {