q5 2.12.12 → 2.13.2

package/src/q5-webgpu-image.js

@@ -1,51 +1,64 @@
 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 VertexOutput {
-	@builtin(position) position: vec4f,
-	@location(0) texCoord: vec2f
-}
 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(4) globalAlpha: f32
+}
+struct FragmentParams {
+	@builtin(position) position: vec4f,
+	@location(0) texCoord: vec2f,
+	@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 samp: sampler;
+@group(1) @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(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 = texCoord;
-	return output;
+	var f: FragmentParams;
+	f.position = vert;
+	f.texCoord = v.texCoord;
+	f.tintIndex = v.tintIndex;
+	f.globalAlpha = v.globalAlpha;
+	return f;
 }
-	`
-	});
-
-	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(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 * f.globalAlpha);
+		return mix(texColor, tinted, tintColor.a);
 }
 	`
 	});
 
+	$._textureBindGroups = [];
+
 	let textureLayout = Q5.device.createBindGroupLayout({
 		label: 'textureLayout',
 		entries: [
@@ -63,11 +76,13 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f {
 	});
 
 	const vertexBufferLayout = {
-		arrayStride: 20,
+		arrayStride: 28,
 		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
+			{ shaderLocation: 4, offset: 24, format: 'float32' } // globalAlpha
 		]
 	};
 
@@ -80,12 +95,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 +176,64 @@ 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, ga) => {
+		let s = vertexStack,
+			i = vertIndex;
+		s[i++] = x;
+		s[i++] = y;
+		s[i++] = u;
+		s[i++] = v;
+		s[i++] = ci;
+		s[i++] = ti;
+		s[i++] = ga;
+		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 w = img.width,
+			h = img.height,
+			pd = g._pixelDensity || 1;
 
-		dw ??= img.defaultWidth;
-		dh ??= img.defaultHeight;
+		dw ??= g.defaultWidth;
+		dh ??= g.defaultHeight;
 		sw ??= w;
 		sh ??= h;
 
-		let pd = img.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,
+			ti = $._matrixIndex,
+			ci = $._tint,
+			ga = $._globalAlpha;
+
+		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);
 	};
@@ -223,20 +244,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 * 5,
 			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

@@ -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
@@ -23,47 +24,44 @@ struct Char {
 struct Text {
 	pos: vec2f,
 	scale: f32,
-	transformIndex: f32,
+	matrixIndex: 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> 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.transformIndex)] * vert;
+	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);
 }
 `
 	});
@@ -279,13 +277,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 +466,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 +480,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);