q5 2.13.1 → 2.13.2

package/src/q5-webgpu-canvas.js

@@ -18,7 +18,6 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 
 	let pass,
 		mainView,
-		colorsLayout,
 		colorIndex = 1,
 		colorStackIndex = 8;
 
@@ -30,7 +29,6 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 	let drawStack = ($.drawStack = []);
 
 	// colors used for each draw call
-
 	let colorStack = ($.colorStack = new Float32Array(1e6));
 
 	// prettier-ignore
@@ -39,43 +37,28 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		1, 1, 1, 1 // white
 	]);
 
-	$._transformLayout = Q5.device.createBindGroupLayout({
-		label: 'transformLayout',
+	let mainLayout = Q5.device.createBindGroupLayout({
+		label: 'mainLayout',
 		entries: [
 			{
 				binding: 0,
 				visibility: GPUShaderStage.VERTEX,
-				buffer: {
-					type: 'uniform',
-					hasDynamicOffset: false
-				}
+				buffer: { type: 'uniform' }
 			},
 			{
 				binding: 1,
 				visibility: GPUShaderStage.VERTEX,
-				buffer: {
-					type: 'read-only-storage',
-					hasDynamicOffset: false
-				}
-			}
-		]
-	});
-
-	colorsLayout = Q5.device.createBindGroupLayout({
-		label: 'colorsLayout',
-		entries: [
+				buffer: { type: 'read-only-storage' }
+			},
 			{
-				binding: 0,
+				binding: 2,
 				visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-				buffer: {
-					type: 'read-only-storage',
-					hasDynamicOffset: false
-				}
+				buffer: { type: 'read-only-storage' }
 			}
 		]
 	});
 
-	$.bindGroupLayouts = [$._transformLayout, colorsLayout];
+	$.bindGroupLayouts = [mainLayout];
 
 	let uniformBuffer = Q5.device.createBuffer({
 		size: 8, // Size of two floats
@@ -105,7 +88,6 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		Q5.device.queue.writeBuffer(uniformBuffer, 0, new Float32Array([$.canvas.hw, $.canvas.hh]));
 
 		createMainView();
-
 		return c;
 	};
 
@@ -149,7 +131,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 	};
 
 	$._stroke = 0;
-	$._fill = $._tint = 1;
+	$._fill = $._tint = $._globalAlpha = 1;
 	$._doFill = $._doStroke = true;
 
 	$.fill = (r, g, b, a) => {
@@ -166,6 +148,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		addColor(r, g, b, a);
 		$._tint = colorIndex;
 	};
+	$.opacity = (a) => ($._globalAlpha = a);
 
 	$.noFill = () => ($._doFill = false);
 	$.noStroke = () => ($._doStroke = false);
@@ -179,6 +162,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		transforms = new Float32Array(MAX_TRANSFORMS * MATRIX_SIZE),
 		matrices = [],
 		matricesIndexStack = [];
+
 	let matrix;
 
 	// tracks if the matrix has been modified
@@ -214,12 +198,10 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		if (!a) return;
 		if ($._angleMode) a *= $._DEGTORAD;
 
-		let cosR = Math.cos(a);
-		let sinR = Math.sin(a);
-
-		let m = matrix;
-
-		let m0 = m[0],
+		let cosR = Math.cos(a),
+			sinR = Math.sin(a),
+			m = matrix,
+			m0 = m[0],
 			m1 = m[1],
 			m4 = m[4],
 			m5 = m[5];
@@ -266,15 +248,15 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		if (!ang) return;
 		if ($._angleMode) ang *= $._DEGTORAD;
 
-		let tanAng = Math.tan(ang);
-
-		let m0 = matrix[0],
-			m1 = matrix[1],
-			m4 = matrix[4],
-			m5 = matrix[5];
+		let tanAng = Math.tan(ang),
+			m = matrix,
+			m0 = m[0],
+			m1 = m[1],
+			m4 = m[4],
+			m5 = m[5];
 
-		matrix[0] = m0 + m4 * tanAng;
-		matrix[1] = m1 + m5 * tanAng;
+		m[0] = m0 + m4 * tanAng;
+		m[1] = m1 + m5 * tanAng;
 
 		$._matrixDirty = true;
 	};
@@ -283,15 +265,15 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		if (!ang) return;
 		if ($._angleMode) ang *= $._DEGTORAD;
 
-		let tanAng = Math.tan(ang);
-
-		let m0 = matrix[0],
-			m1 = matrix[1],
-			m4 = matrix[4],
-			m5 = matrix[5];
+		let tanAng = Math.tan(ang),
+			m = matrix,
+			m0 = m[0],
+			m1 = m[1],
+			m4 = m[4],
+			m5 = m[5];
 
-		matrix[4] = m4 + m0 * tanAng;
-		matrix[5] = m5 + m1 * tanAng;
+		m[4] = m4 + m0 * tanAng;
+		m[5] = m5 + m1 * tanAng;
 
 		$._matrixDirty = true;
 	};
@@ -459,26 +441,14 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 	};
 
 	$._render = () => {
-		if (matrices.length > 1 || !$._transformBindGroup) {
-			let transformBuffer = Q5.device.createBuffer({
-				size: matrices.length * MATRIX_SIZE * 4, // 4 bytes per float
-				usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
-				mappedAtCreation: true
-			});
-
-			new Float32Array(transformBuffer.getMappedRange()).set(transforms.slice(0, matrices.length * MATRIX_SIZE));
-			transformBuffer.unmap();
-
-			$._transformBindGroup = Q5.device.createBindGroup({
-				layout: $._transformLayout,
-				entries: [
-					{ binding: 0, resource: { buffer: uniformBuffer } },
-					{ binding: 1, resource: { buffer: transformBuffer } }
-				]
-			});
-		}
+		let transformBuffer = Q5.device.createBuffer({
+			size: matrices.length * MATRIX_SIZE * 4, // 4 bytes per float
+			usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+			mappedAtCreation: true
+		});
 
-		pass.setBindGroup(0, $._transformBindGroup);
+		new Float32Array(transformBuffer.getMappedRange()).set(transforms.slice(0, matrices.length * MATRIX_SIZE));
+		transformBuffer.unmap();
 
 		let colorsBuffer = Q5.device.createBuffer({
 			size: colorStackIndex * 4,
@@ -489,12 +459,16 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		new Float32Array(colorsBuffer.getMappedRange()).set(colorStack.slice(0, colorStackIndex));
 		colorsBuffer.unmap();
 
-		$._colorsBindGroup = Q5.device.createBindGroup({
-			layout: colorsLayout,
-			entries: [{ binding: 0, resource: { buffer: colorsBuffer } }]
+		mainBindGroup = Q5.device.createBindGroup({
+			layout: mainLayout,
+			entries: [
+				{ binding: 0, resource: { buffer: uniformBuffer } },
+				{ binding: 1, resource: { buffer: transformBuffer } },
+				{ binding: 2, resource: { buffer: colorsBuffer } }
+			]
 		});
 
-		pass.setBindGroup(1, $._colorsBindGroup);
+		pass.setBindGroup(0, mainBindGroup);
 
 		for (let m of $._hooks.preRender) m();
 
@@ -518,11 +492,11 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 				pass.draw(v, 1, drawVertOffset);
 				drawVertOffset += v;
 			} else if (curPipelineIndex == 1) {
-				// let vertCount = drawStack[i + 2];
+				// let instanceCount = drawStack[i + 2];
 				// draw images
 				if (curTextureIndex != v) {
 					// v is the texture index
-					pass.setBindGroup(2, $._textureBindGroups[v]);
+					pass.setBindGroup(1, $._textureBindGroups[v]);
 				}
 				pass.draw(4, 1, imageVertOffset);
 				imageVertOffset += 4;
@@ -530,8 +504,8 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 			} else if (curPipelineIndex == 2) {
 				// draw text
 				let o = drawStack[i + 2];
-				pass.setBindGroup(2, $._fonts[o].bindGroup);
-				pass.setBindGroup(3, $._textBindGroup);
+				pass.setBindGroup(1, $._fonts[o].bindGroup);
+				pass.setBindGroup(2, $._textBindGroup);
 
 				// v is the number of characters in the text
 				pass.draw(4, v, 0, textCharOffset);

package/src/q5-webgpu-drawing.js

@@ -4,46 +4,40 @@ Q5.renderers.webgpu.drawing = ($, q) => {
 		vertexStack = new Float32Array(1e7),
 		vertIndex = 0;
 
-	let vertexShader = Q5.device.createShaderModule({
-		label: 'drawingVertexShader',
+	let drawingShader = Q5.device.createShaderModule({
+		label: 'drawingShader',
 		code: `
-struct VertexInput {
+struct Uniforms {
+	halfWidth: f32,
+	halfHeight: f32
+}
+struct VertexParams {
 	@location(0) pos: vec2f,
 	@location(1) colorIndex: f32,
 	@location(2) matrixIndex: f32
 }
-struct VertexOutput {
+struct FragmentParams {
 	@builtin(position) position: vec4f,
 	@location(0) color: vec4f
 }
-struct Uniforms {
-	halfWidth: f32,
-	halfHeight: f32
-}
 
 @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(0) @binding(2) var<storage> colors : array<vec4f>;
 
 @vertex
-fn vertexMain(input: VertexInput) -> VertexOutput {
-	var vert = vec4f(input.pos, 0.0, 1.0);
-	vert = transforms[i32(input.matrixIndex)] * vert;
+fn vertexMain(v: VertexParams) -> FragmentParams {
+	var vert = vec4f(v.pos, 0.0, 1.0);
+	vert = transforms[i32(v.matrixIndex)] * vert;
 	vert.x /= uniforms.halfWidth;
 	vert.y /= uniforms.halfHeight;
 
-	var output: VertexOutput;
-	output.position = vert;
-	output.color = colors[i32(input.colorIndex)];
-	return output;
+	var f: FragmentParams;
+	f.position = vert;
+	f.color = colors[i32(v.colorIndex)];
+	return f;
 }
-`
-	});
 
-	let fragmentShader = Q5.device.createShaderModule({
-		label: 'drawingFragmentShader',
-		code: `
 @fragment
 fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 	return color;
@@ -69,19 +63,17 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 		label: 'drawingPipeline',
 		layout: pipelineLayout,
 		vertex: {
-			module: vertexShader,
+			module: drawingShader,
 			entryPoint: 'vertexMain',
 			buffers: [vertexBufferLayout]
 		},
 		fragment: {
-			module: fragmentShader,
+			module: drawingShader,
 			entryPoint: 'fragmentMain',
 			targets: [{ format: 'bgra8unorm', blend: $.blendConfigs.normal }]
 		},
 		primitive: { topology: 'triangle-strip', stripIndexFormat: 'uint32' },
-		multisample: {
-			count: 4
-		}
+		multisample: { count: 4 }
 	};
 
 	$._pipelines[0] = Q5.device.createRenderPipeline($._pipelineConfigs[0]);

package/src/q5-webgpu-image.js

@@ -1,61 +1,64 @@
 Q5.renderers.webgpu.image = ($, q) => {
-	$._textureBindGroups = [];
 	let vertexStack = new Float32Array(1e7),
 		vertIndex = 0;
 
 	let imageShader = Q5.device.createShaderModule({
 		label: 'imageShader',
 		code: `
-struct VertexInput {
+struct Uniforms {
+	halfWidth: f32,
+	halfHeight: f32
+}
+struct VertexParams {
 	@location(0) pos: vec2f,
 	@location(1) texCoord: vec2f,
 	@location(2) tintIndex: f32,
-	@location(3) matrixIndex: f32
+	@location(3) matrixIndex: f32,
+	@location(4) globalAlpha: f32
 }
-struct VertexOutput {
+struct FragmentParams {
 	@builtin(position) position: vec4f,
 	@location(0) texCoord: vec2f,
-	@location(1) tintIndex: f32
-}
-struct Uniforms {
-	halfWidth: f32,
-	halfHeight: f32
+	@location(1) tintIndex: f32,
+	@location(2) globalAlpha: f32
 }
 
 @group(0) @binding(0) var<uniform> uniforms: Uniforms;
 @group(0) @binding(1) var<storage> transforms: array<mat4x4<f32>>;
+@group(0) @binding(2) var<storage> colors : array<vec4f>;
 
-@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>;
+@group(1) @binding(0) var samp: sampler;
+@group(1) @binding(1) var texture: texture_2d<f32>;
 
 @vertex
-fn vertexMain(input: VertexInput) -> VertexOutput {
-	var vert = vec4f(input.pos, 0.0, 1.0);
-	vert = transforms[i32(input.matrixIndex)] * vert;
+fn vertexMain(v: VertexParams) -> FragmentParams {
+	var vert = vec4f(v.pos, 0.0, 1.0);
+	vert = transforms[i32(v.matrixIndex)] * vert;
 	vert.x /= uniforms.halfWidth;
 	vert.y /= uniforms.halfHeight;
 
-	var output: VertexOutput;
-	output.position = vert;
-	output.texCoord = input.texCoord;
-	output.tintIndex = input.tintIndex;
-	return output;
+	var f: FragmentParams;
+	f.position = vert;
+	f.texCoord = v.texCoord;
+	f.tintIndex = v.tintIndex;
+	f.globalAlpha = v.globalAlpha;
+	return f;
 }
 
 @fragment
-fn fragmentMain(@location(0) texCoord: vec2f, @location(1) tintIndex: f32) -> @location(0) vec4f {
-		let texColor = textureSample(texture, samp, texCoord);
-		let tintColor = colors[i32(tintIndex)];
+fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
+		let texColor = textureSample(texture, samp, f.texCoord);
+		let tintColor = colors[i32(f.tintIndex)];
 		
 		// Mix original and tinted colors using tint alpha as blend factor
-		let tinted = vec4f(texColor.rgb * tintColor.rgb, texColor.a);
+		let tinted = vec4f(texColor.rgb * tintColor.rgb, texColor.a * f.globalAlpha);
 		return mix(texColor, tinted, tintColor.a);
 }
 	`
 	});
 
+	$._textureBindGroups = [];
+
 	let textureLayout = Q5.device.createBindGroupLayout({
 		label: 'textureLayout',
 		entries: [
@@ -73,12 +76,13 @@ fn fragmentMain(@location(0) texCoord: vec2f, @location(1) tintIndex: f32) -> @l
 	});
 
 	const vertexBufferLayout = {
-		arrayStride: 24,
+		arrayStride: 28,
 		attributes: [
 			{ shaderLocation: 0, offset: 0, format: 'float32x2' },
 			{ shaderLocation: 1, offset: 8, format: 'float32x2' },
 			{ shaderLocation: 2, offset: 16, format: 'float32' }, // tintIndex
-			{ shaderLocation: 3, offset: 20, format: 'float32' } // matrixIndex
+			{ shaderLocation: 3, offset: 20, format: 'float32' }, // matrixIndex
+			{ shaderLocation: 4, offset: 24, format: 'float32' } // globalAlpha
 		]
 	};
 
@@ -184,7 +188,7 @@ fn fragmentMain(@location(0) texCoord: vec2f, @location(1) tintIndex: f32) -> @l
 
 	$.imageMode = (x) => ($._imageMode = x);
 
-	const addVert = (x, y, u, v, ci, ti) => {
+	const addVert = (x, y, u, v, ci, ti, ga) => {
 		let s = vertexStack,
 			i = vertIndex;
 		s[i++] = x;
@@ -193,6 +197,7 @@ fn fragmentMain(@location(0) texCoord: vec2f, @location(1) tintIndex: f32) -> @l
 		s[i++] = v;
 		s[i++] = ci;
 		s[i++] = ti;
+		s[i++] = ga;
 		vertIndex = i;
 	};
 
@@ -203,16 +208,15 @@ fn fragmentMain(@location(0) texCoord: vec2f, @location(1) tintIndex: f32) -> @l
 
 		if ($._matrixDirty) $._saveMatrix();
 
-		let ti = $._matrixIndex,
-			w = img.width,
-			h = img.height;
+		let w = img.width,
+			h = img.height,
+			pd = g._pixelDensity || 1;
 
 		dw ??= g.defaultWidth;
 		dh ??= g.defaultHeight;
 		sw ??= w;
 		sh ??= h;
 
-		let pd = g._pixelDensity || 1;
 		dw *= pd;
 		dh *= pd;
 
@@ -221,14 +225,15 @@ fn fragmentMain(@location(0) texCoord: vec2f, @location(1) tintIndex: f32) -> @l
 		let u0 = sx / w,
 			v0 = sy / h,
 			u1 = (sx + sw) / w,
-			v1 = (sy + sh) / h;
-
-		let ci = $._tint;
+			v1 = (sy + sh) / h,
+			ti = $._matrixIndex,
+			ci = $._tint,
+			ga = $._globalAlpha;
 
-		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);
+		addVert(l, t, u0, v0, ci, ti, ga);
+		addVert(r, t, u1, v0, ci, ti, ga);
+		addVert(l, b, u0, v1, ci, ti, ga);
+		addVert(r, b, u1, v1, ci, ti, ga);
 
 		$.drawStack.push(1, img.textureIndex);
 	};
@@ -240,7 +245,7 @@ fn fragmentMain(@location(0) texCoord: vec2f, @location(1) tintIndex: f32) -> @l
 		$.pass.setPipeline($._pipelines[1]);
 
 		let vertexBuffer = Q5.device.createBuffer({
-			size: vertIndex * 4,
+			size: vertIndex * 5,
 			usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
 			mappedAtCreation: true
 		});

package/src/q5-webgpu-text.js

@@ -2,14 +2,15 @@ Q5.renderers.webgpu.text = ($, q) => {
 	let textShader = Q5.device.createShaderModule({
 		label: 'MSDF text shader',
 		code: `
-// Positions for simple quad geometry
-const pos = array(vec2f(0, -1), vec2f(1, -1), vec2f(0, 0), vec2f(1, 0));
-
-struct VertexInput {
+struct Uniforms {
+	halfWidth: f32,
+	halfHeight: f32
+}
+struct VertexParams {
 	@builtin(vertex_index) vertex : u32,
 	@builtin(instance_index) instance : u32
 }
-struct VertexOutput {
+struct FragmentParams {
 	@builtin(position) position : vec4f,
 	@location(0) texCoord : vec2f,
 	@location(1) fillColor : vec4f
@@ -27,43 +28,40 @@ struct Text {
 	fillIndex: f32,
 	strokeIndex: f32
 }
-struct Uniforms {
-	halfWidth: f32,
-	halfHeight: f32
-}
 
 @group(0) @binding(0) var<uniform> uniforms: Uniforms;
 @group(0) @binding(1) var<storage> transforms: array<mat4x4<f32>>;
+@group(0) @binding(2) var<storage> colors : array<vec4f>;
 
-@group(1) @binding(0) var<storage> colors : array<vec4f>;
+@group(1) @binding(0) var fontTexture: texture_2d<f32>;
+@group(1) @binding(1) var fontSampler: sampler;
+@group(1) @binding(2) var<storage> fontChars: array<Char>;
 
-@group(2) @binding(0) var fontTexture: texture_2d<f32>;
-@group(2) @binding(1) var fontSampler: sampler;
-@group(2) @binding(2) var<storage> fontChars: array<Char>;
+@group(2) @binding(0) var<storage> textChars: array<vec4f>;
+@group(2) @binding(1) var<storage> textMetadata: array<Text>;
 
-@group(3) @binding(0) var<storage> textChars: array<vec4f>;
-@group(3) @binding(1) var<storage> textMetadata: array<Text>;
+const quad = array(vec2f(0, -1), vec2f(1, -1), vec2f(0, 0), vec2f(1, 0));
 
 @vertex
-fn vertexMain(input : VertexInput) -> VertexOutput {
-	let char = textChars[input.instance];
+fn vertexMain(v : VertexParams) -> FragmentParams {
+	let char = textChars[v.instance];
 
 	let text = textMetadata[i32(char.w)];
 
 	let fontChar = fontChars[i32(char.z)];
 
-	let charPos = ((pos[input.vertex] * fontChar.size + char.xy + fontChar.offset) * text.scale) + text.pos;
+	let charPos = ((quad[v.vertex] * fontChar.size + char.xy + fontChar.offset) * text.scale) + text.pos;
 
 	var vert = vec4f(charPos, 0.0, 1.0);
 	vert = transforms[i32(text.matrixIndex)] * vert;
 	vert.x /= uniforms.halfWidth;
 	vert.y /= uniforms.halfHeight;
 
-	var output : VertexOutput;
-	output.position = vert;
-	output.texCoord = (pos[input.vertex] * vec2f(1, -1)) * fontChar.texExtent + fontChar.texOffset;
-	output.fillColor = colors[i32(text.fillIndex)];
-	return output;
+	var f : FragmentParams;
+	f.position = vert;
+	f.texCoord = (quad[v.vertex] * vec2f(1, -1)) * fontChar.texExtent + fontChar.texOffset;
+	f.fillColor = colors[i32(text.fillIndex)];
+	return f;
 }
 
 fn sampleMsdf(texCoord: vec2f) -> f32 {
@@ -72,22 +70,22 @@ fn sampleMsdf(texCoord: vec2f) -> f32 {
 }
 
 @fragment
-fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
+fn fragmentMain(f : FragmentParams) -> @location(0) vec4f {
 	// pxRange (AKA distanceRange) comes from the msdfgen tool,
 	// 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(f.texCoord.x), dpdyFine(f.texCoord.x)));
+	let dy = sz.y*length(vec2f(dpdxFine(f.texCoord.y), dpdyFine(f.texCoord.y)));
 	let toPixels = pxRange * inverseSqrt(dx * dx + dy * dy);
-	let sigDist = sampleMsdf(input.texCoord) - 0.5;
+	let sigDist = sampleMsdf(f.texCoord) - 0.5;
 	let pxDist = sigDist * toPixels;
 	let edgeWidth = 0.5;
 	let alpha = smoothstep(-edgeWidth, edgeWidth, pxDist);
 	if (alpha < 0.001) {
 		discard;
 	}
-	return vec4f(input.fillColor.rgb, input.fillColor.a * alpha);
+	return vec4f(f.fillColor.rgb, f.fillColor.a * alpha);
 }
 `
 	});