q5 2.20.10 → 2.21.1

package/q5.js

@@ -1,6 +1,6 @@
 /**
  * q5.js
- * @version 2.20
+ * @version 2.21
  * @author quinton-ashley, Tezumie, and LingDong-
  * @license LGPL-3.0
  * @class Q5
@@ -314,7 +314,7 @@ function createCanvas(w, h, opt) {
 	}
 }
 
-Q5.version = Q5.VERSION = '2.20';
+Q5.version = Q5.VERSION = '2.21';
 
 if (typeof document == 'object') {
 	document.addEventListener('DOMContentLoaded', () => {
@@ -837,7 +837,7 @@ Q5.renderers.c2d.canvas = ($, q) => {
 		_popStyles();
 	};
 };
-Q5.renderers.c2d.drawing = ($) => {
+Q5.renderers.c2d.shapes = ($) => {
 	$._doStroke = true;
 	$._doFill = true;
 	$._strokeSet = false;
@@ -1580,7 +1580,7 @@ Q5.renderers.c2d.image = ($, q) => {
 
 	$._saveCanvas = async (data, ext) => {
 		data = data.canvas || data;
-		if (data instanceof HTMLCanvasElement || data instanceof OffscreenCanvas) {
+		if (data instanceof OffscreenCanvas) {
 			const blob = await data.convertToBlob({ type: 'image/' + ext });
 
 			return await new Promise((resolve) => {
@@ -1786,7 +1786,7 @@ Q5.renderers.c2d.text = ($, q) => {
 	};
 
 	$.textFont = (x) => {
-		if (typeof x != 'string') x = x.family;
+		if (x && typeof x != 'string') x = x.family;
 		if (!x || x == font) return font;
 		font = x;
 		fontMod = true;
@@ -4494,6 +4494,23 @@ for (let k of ['fromAngle', 'fromAngles', 'random2D', 'random3D']) {
 Q5.renderers.webgpu = {};
 
 Q5.renderers.webgpu.canvas = ($, q) => {
+	$._baseShaderCode = /* wgsl */ `
+struct Q5 {
+	width: f32,
+	height: f32,
+	halfWidth: f32,
+	halfHeight: f32,
+	pixelDensity: f32,
+	frameCount: f32,
+	time: f32,
+	deltaTime: f32,
+	mouseX: f32,
+	mouseY: f32,
+	mouseIsPressed: f32,
+	keyCode: f32,
+	keyIsPressed: f32
+}`;
+
 	let c = $.canvas;
 
 	c.width = $.width = 500;
@@ -4535,7 +4552,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		entries: [
 			{
 				binding: 0,
-				visibility: GPUShaderStage.VERTEX,
+				visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
 				buffer: { type: 'uniform' }
 			},
 			{
@@ -4554,7 +4571,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 	$.bindGroupLayouts = [mainLayout];
 
 	let uniformBuffer = Q5.device.createBuffer({
-		size: 8, // Size of two floats
+		size: 64, // Size of four floats
 		usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
 	});
 
@@ -4624,8 +4641,6 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 
 		$.ctx.configure(opt);
 
-		Q5.device.queue.writeBuffer(uniformBuffer, 0, new Float32Array([$.canvas.hw, $.canvas.hh]));
-
 		createMainView();
 		return c;
 	};
@@ -4888,9 +4903,6 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 	};
 
 	$._calcBox = (x, y, w, h, mode) => {
-		let hw = w / 2;
-		let hh = h / 2;
-
 		// left, right, top, bottom
 		let l, r, t, b;
 		if (!mode || mode == 'corner') {
@@ -4899,6 +4911,8 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 			t = -y;
 			b = -(y + h);
 		} else if (mode == 'center') {
+			let hw = w / 2,
+				hh = h / 2;
 			l = x - hw;
 			r = x + hw;
 			t = -(y - hh);
@@ -5028,7 +5042,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 	$._render = () => {
 		let transformBuffer = Q5.device.createBuffer({
 			size: matrices.length * MATRIX_SIZE * 4, // 4 bytes per float
-			usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+			usage: GPUBufferUsage.STORAGE,
 			mappedAtCreation: true
 		});
 
@@ -5037,13 +5051,31 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 
 		let colorsBuffer = Q5.device.createBuffer({
 			size: colorStackIndex * 4,
-			usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+			usage: GPUBufferUsage.STORAGE,
 			mappedAtCreation: true
 		});
 
 		new Float32Array(colorsBuffer.getMappedRange()).set(colorStack.slice(0, colorStackIndex));
 		colorsBuffer.unmap();
 
+		$._uniforms = [
+			$.width,
+			$.height,
+			$.halfWidth,
+			$.halfHeight,
+			$._pixelDensity,
+			$.frameCount,
+			performance.now(),
+			$.deltaTime,
+			$.mouseX,
+			$.mouseY,
+			$.mouseIsPressed ? 1 : 0,
+			$.keyCode,
+			$.keyIsPressed ? 1 : 0
+		];
+
+		Q5.device.queue.writeBuffer(uniformBuffer, 0, new Float32Array($._uniforms));
+
 		let mainBindGroup = Q5.device.createBindGroup({
 			layout: mainLayout,
 			entries: [
@@ -5070,18 +5102,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 				pass.setPipeline($._pipelines[curPipelineIndex]);
 			}
 
-			if (curPipelineIndex == 0) {
-				// draw a shape
-				// v is the number of vertices
-				pass.draw(v, 1, drawVertOffset);
-				drawVertOffset += v;
-			} else if (curPipelineIndex <= 2) {
-				// draw an image or video frame
-				// v is the texture index
-				pass.setBindGroup(1, $._textureBindGroups[v]);
-				pass.draw(4, 1, imageVertOffset);
-				imageVertOffset += 4;
-			} else if (curPipelineIndex == 3) {
+			if (curPipelineIndex == 3 || curPipelineIndex >= 400) {
 				// draw text
 				let o = drawStack[i + 2];
 				pass.setBindGroup(1, $._fonts[o].bindGroup);
@@ -5091,6 +5112,17 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 				pass.draw(4, v, 0, textCharOffset);
 				textCharOffset += v;
 				i++;
+			} else if (curPipelineIndex == 1 || curPipelineIndex == 2 || curPipelineIndex >= 200) {
+				// draw an image or video frame
+				// v is the texture index
+				pass.setBindGroup(1, $._textureBindGroups[v]);
+				pass.draw(4, 1, imageVertOffset);
+				imageVertOffset += 4;
+			} else if (curPipelineIndex == 0 || curPipelineIndex >= 100) {
+				// draw a shape
+				// v is the number of vertices
+				pass.draw(v, 1, drawVertOffset);
+				drawVertOffset += v;
 			}
 		}
 	};
@@ -5134,7 +5166,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		q.pass = $.encoder = null;
 
 		// clear the stacks for the next frame
-		$.drawStack = drawStack = [];
+		drawStack.splice(0, drawStack.length);
 		colorIndex = 1;
 		colorStackIndex = 8;
 		matrices = [matrices[0]];
@@ -5149,7 +5181,7 @@ Q5.initWebGPU = async () => {
 		console.warn('q5 WebGPU not supported on this browser! Use Google Chrome or Edge.');
 		return false;
 	}
-	if (!Q5.device) {
+	if (!Q5.requestedGPU) {
 		let adapter = await navigator.gpu.requestAdapter();
 		if (!adapter) {
 			console.warn('q5 WebGPU could not start! No appropriate GPUAdapter found, vulkan may need to be enabled.');
@@ -5172,62 +5204,63 @@ Q5.webgpu = async function (scope, parent) {
 	}
 	return new Q5(scope, parent, 'webgpu');
 };
-Q5.renderers.webgpu.drawing = ($, q) => {
-	let c = $.canvas,
-		drawStack = $.drawStack,
-		vertexStack = new Float32Array($._graphics ? 1000 : 1e7),
-		vertIndex = 0;
-	const TAU = Math.PI * 2;
-	const HALF_PI = Math.PI / 2;
+Q5.renderers.webgpu.shapes = ($) => {
+	$._shapesPL = 0;
 
-	let drawingShaderCode = `
-struct Uniforms {
-	halfWidth: f32,
-	halfHeight: f32
-}
+	$._shapesShaderCode =
+		$._baseShaderCode +
+		/* wgsl */ `
 struct VertexParams {
+	@builtin(vertex_index) vertexIndex : u32,
 	@location(0) pos: vec2f,
 	@location(1) colorIndex: f32,
 	@location(2) matrixIndex: f32
 }
-struct FragmentParams {
+struct FragParams {
 	@builtin(position) position: vec4f,
 	@location(0) color: vec4f
 }
 
-@group(0) @binding(0) var<uniform> uniforms: Uniforms;
+@group(0) @binding(0) var<uniform> q: Q5;
 @group(0) @binding(1) var<storage> transforms: array<mat4x4<f32>>;
 @group(0) @binding(2) var<storage> colors : array<vec4f>;
 
 fn transformVertex(pos: vec2f, matrixIndex: f32) -> vec4f {
 	var vert = vec4f(pos, 0.0, 1.0);
 	vert = transforms[i32(matrixIndex)] * vert;
-	vert.x /= uniforms.halfWidth;
-	vert.y /= uniforms.halfHeight;
+	vert.x /= q.halfWidth;
+	vert.y /= q.halfHeight;
 	return vert;
 }
 
 @vertex
-fn vertexMain(v: VertexParams) -> FragmentParams {
+fn vertexMain(v: VertexParams) -> FragParams {
 	var vert = transformVertex(v.pos, v.matrixIndex);
 
-	var f: FragmentParams;
+	var f: FragParams;
 	f.position = vert;
 	f.color = colors[i32(v.colorIndex)];
 	return f;
 }
 
 @fragment
-fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
+fn fragMain(f: FragParams) -> @location(0) vec4f {
 	return f.color;
 }
 `;
 
-	let drawingShader = Q5.device.createShaderModule({
-		label: 'drawingShader',
-		code: drawingShaderCode
+	let shapesShader = Q5.device.createShaderModule({
+		label: 'shapesShader',
+		code: $._shapesShaderCode
 	});
 
+	let c = $.canvas,
+		drawStack = $.drawStack,
+		vertexStack = new Float32Array($._graphics ? 1000 : 1e7),
+		vertIndex = 0;
+	const TAU = Math.PI * 2;
+	const HALF_PI = Math.PI / 2;
+
 	let vertexBufferLayout = {
 		arrayStride: 16, // 4 floats * 4 bytes
 		attributes: [
@@ -5238,21 +5271,21 @@ fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
 	};
 
 	let pipelineLayout = Q5.device.createPipelineLayout({
-		label: 'drawingPipelineLayout',
+		label: 'shapesPipelineLayout',
 		bindGroupLayouts: $.bindGroupLayouts
 	});
 
 	$._pipelineConfigs[0] = {
-		label: 'drawingPipeline',
+		label: 'shapesPipeline',
 		layout: pipelineLayout,
 		vertex: {
-			module: drawingShader,
+			module: shapesShader,
 			entryPoint: 'vertexMain',
 			buffers: [vertexBufferLayout]
 		},
 		fragment: {
-			module: drawingShader,
-			entryPoint: 'fragmentMain',
+			module: shapesShader,
+			entryPoint: 'fragMain',
 			targets: [{ format: 'bgra8unorm', blend: $.blendConfigs.normal }]
 		},
 		primitive: { topology: 'triangle-strip', stripIndexFormat: 'uint32' },
@@ -5296,7 +5329,7 @@ fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
 		v[i++] = ti;
 
 		vertIndex = i;
-		drawStack.push(0, 4);
+		drawStack.push($._shapesPL, 4);
 	};
 
 	const addArc = (x, y, a, b, startAngle, endAngle, n, ci, ti) => {
@@ -5328,7 +5361,7 @@ fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
 		}
 
 		vertIndex = i;
-		drawStack.push(0, (n + 1) * 2);
+		drawStack.push($._shapesPL, (n + 1) * 2);
 	};
 
 	const addArcStroke = (x, y, outerA, outerB, innerA, innerB, startAngle, endAngle, n, ci, ti) => {
@@ -5363,7 +5396,7 @@ fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
 		}
 
 		vertIndex = i;
-		drawStack.push(0, (n + 1) * 2);
+		drawStack.push($._shapesPL, (n + 1) * 2);
 	};
 
 	$.rectMode = (x) => ($._rectMode = x);
@@ -5468,6 +5501,13 @@ fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
 
 	$.square = (x, y, s) => $.rect(x, y, s, s);
 
+	$.plane = (x, y, w, h) => {
+		h ??= w;
+		let [l, r, t, b] = $._calcBox(x, y, w, h, 'center');
+		if ($._matrixDirty) $._saveMatrix();
+		addRect(l, t, r, t, r, b, l, b, $._fill, $._matrixIndex);
+	};
+
 	// prettier-ignore
 	const getArcSegments = (d) =>
 		d < 4 ? 6 :
@@ -5713,7 +5753,7 @@ fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
 				addVert(sv[4], sv[5], sv[6], sv[7]); // v1
 				addVert(sv[12], sv[13], sv[14], sv[15]); // v3
 				addVert(sv[8], sv[9], sv[10], sv[11]); // v2
-				drawStack.push(0, 4);
+				drawStack.push($._shapesPL, 4);
 			} else {
 				// triangulate the shape
 				for (let i = 1; i < shapeVertCount - 1; i++) {
@@ -5725,7 +5765,7 @@ fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
 					addVert(sv[v1], sv[v1 + 1], sv[v1 + 2], sv[v1 + 3]);
 					addVert(sv[v2], sv[v2 + 1], sv[v2 + 2], sv[v2 + 3]);
 				}
-				drawStack.push(0, (shapeVertCount - 2) * 3);
+				drawStack.push($._shapesPL, (shapeVertCount - 2) * 3);
 			}
 		}
 
@@ -5795,7 +5835,7 @@ fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
 
 		let vertexBuffer = Q5.device.createBuffer({
 			size: vertIndex * 4,
-			usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+			usage: GPUBufferUsage.VERTEX,
 			mappedAtCreation: true
 		});
 
@@ -5808,53 +5848,58 @@ fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
 	});
 
 	$._hooks.postRender.push(() => {
-		drawStack = $.drawStack;
 		vertIndex = 0;
 	});
 };
 Q5.renderers.webgpu.image = ($, q) => {
-	let vertexStack = new Float32Array($._graphics ? 1000 : 1e7),
-		vertIndex = 0;
+	$._imagePL = 1;
+	$._videoPL = 2;
 
-	let imageShaderCode = `
-struct Uniforms {
-	halfWidth: f32,
-	halfHeight: f32
-}
+	$._imageShaderCode =
+		$._baseShaderCode +
+		/* wgsl */ `
 struct VertexParams {
+	@builtin(vertex_index) vertexIndex : u32,
 	@location(0) pos: vec2f,
 	@location(1) texCoord: vec2f,
 	@location(2) tintIndex: f32,
 	@location(3) matrixIndex: f32,
 	@location(4) imageAlpha: f32
 }
-struct FragmentParams {
+struct FragParams {
 	@builtin(position) position: vec4f,
 	@location(0) texCoord: vec2f,
 	@location(1) tintColor: vec4f,
 	@location(2) imageAlpha: f32
 }
 
-@group(0) @binding(0) var<uniform> uniforms: Uniforms;
+@group(0) @binding(0) var<uniform> q: Q5;
 @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>;
+@group(1) @binding(1) var tex: texture_2d<f32>;
 
 fn transformVertex(pos: vec2f, matrixIndex: f32) -> vec4f {
 	var vert = vec4f(pos, 0.0, 1.0);
 	vert = transforms[i32(matrixIndex)] * vert;
-	vert.x /= uniforms.halfWidth;
-	vert.y /= uniforms.halfHeight;
+	vert.x /= q.halfWidth;
+	vert.y /= q.halfHeight;
 	return vert;
 }
 
+fn applyTint(texColor: vec4f, tintColor: vec4f) -> vec4f {
+	// apply the tint color to the sampled texture color at full strength
+	let tinted = vec4f(texColor.rgb * tintColor.rgb, texColor.a);
+	// mix in the tint using the tint alpha as the blend strength
+	return mix(texColor, tinted, tintColor.a);
+}
+
 @vertex
-fn vertexMain(v: VertexParams) -> FragmentParams {
+fn vertexMain(v: VertexParams) -> FragParams {
 	var vert = transformVertex(v.pos, v.matrixIndex);
 
-	var f: FragmentParams;
+	var f: FragParams;
 	f.position = vert;
 	f.texCoord = v.texCoord;
 	f.tintColor = colors[i32(v.tintIndex)];
@@ -5863,29 +5908,30 @@ fn vertexMain(v: VertexParams) -> FragmentParams {
 }
 
 @fragment
-fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
-	let texColor = textureSample(texture, samp, f.texCoord);
-	
-	// Mix original and tinted colors using tint alpha as blend factor
-	let tinted = vec4f(texColor.rgb * f.tintColor.rgb, texColor.a * f.imageAlpha);
-	return mix(texColor, tinted, f.tintColor.a);
+fn fragMain(f: FragParams) -> @location(0) vec4f {
+	var texColor = textureSample(tex, samp, f.texCoord);
+	texColor.a *= f.imageAlpha;
+	return applyTint(texColor, f.tintColor);
 }
 `;
 
 	let imageShader = Q5.device.createShaderModule({
 		label: 'imageShader',
-		code: imageShaderCode
+		code: $._imageShaderCode
 	});
 
-	let videoShaderCode = imageShaderCode
+	$._videoShaderCode = $._imageShaderCode
 		.replace('texture_2d<f32>', 'texture_external')
 		.replace('textureSample', 'textureSampleBaseClampToEdge');
 
 	let videoShader = Q5.device.createShaderModule({
 		label: 'videoShader',
-		code: videoShaderCode
+		code: $._videoShaderCode
 	});
 
+	let vertexStack = new Float32Array($._graphics ? 1000 : 1e7),
+		vertIndex = 0;
+
 	let vertexBufferLayout = {
 		arrayStride: 28,
 		attributes: [
@@ -5949,7 +5995,7 @@ fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
 		},
 		fragment: {
 			module: imageShader,
-			entryPoint: 'fragmentMain',
+			entryPoint: 'fragMain',
 			targets: [{ format: 'bgra8unorm', blend: $.blendConfigs.normal }]
 		},
 		primitive: { topology: 'triangle-strip', stripIndexFormat: 'uint32' },
@@ -5968,7 +6014,7 @@ fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
 		},
 		fragment: {
 			module: videoShader,
-			entryPoint: 'fragmentMain',
+			entryPoint: 'fragMain',
 			targets: [{ format: 'bgra8unorm', blend: $.blendConfigs.normal }]
 		},
 		primitive: { topology: 'triangle-strip', stripIndexFormat: 'uint32' },
@@ -6081,7 +6127,7 @@ fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
 		let isVideo;
 		if (img.textureIndex == undefined) {
 			isVideo = img.tagName == 'VIDEO';
-			if (!isVideo || !img.width) return;
+			if (!isVideo || !img.width || !img.currentTime) return;
 			if (img.flipped) $.scale(-1, 1);
 		}
 
@@ -6129,7 +6175,7 @@ fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
 			v1 = (sy + sh) / h,
 			ti = $._matrixIndex,
 			ci = $._tint,
-			ia = $._imageAlpha;
+			ia = $._globalAlpha;
 
 		addVert(l, t, u0, v0, ci, ti, ia);
 		addVert(r, t, u1, v0, ci, ti, ia);
@@ -6137,7 +6183,7 @@ fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
 		addVert(r, b, u1, v1, ci, ti, ia);
 
 		if (!isVideo) {
-			$.drawStack.push(1, img.textureIndex);
+			$.drawStack.push($._imagePL, img.textureIndex);
 		} else {
 			// render video
 			let externalTexture = Q5.device.importExternalTexture({ source: img });
@@ -6154,7 +6200,7 @@ fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
 				})
 			);
 
-			$.drawStack.push(2, $._textureBindGroups.length - 1);
+			$.drawStack.push($._videoPL, $._textureBindGroups.length - 1);
 
 			if (img.flipped) $.scale(-1, 1);
 		}
@@ -6224,7 +6270,7 @@ fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
 
 		let vertexBuffer = Q5.device.createBuffer({
 			size: vertIndex * 5,
-			usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+			usage: GPUBufferUsage.VERTEX,
 			mappedAtCreation: true
 		});
 
@@ -6258,16 +6304,16 @@ Q5.DILATE = 6;
 Q5.ERODE = 7;
 Q5.BLUR = 8;
 Q5.renderers.webgpu.text = ($, q) => {
-	let textShaderCode = `
-struct Uniforms {
-	halfWidth: f32,
-	halfHeight: f32
-}
+	$._textPL = 3;
+
+	$._textShaderCode =
+		$._baseShaderCode +
+		/* wgsl */ `
 struct VertexParams {
-	@builtin(vertex_index) vertex : u32,
-	@builtin(instance_index) instance : u32
+	@builtin(vertex_index) vertexIndex : u32,
+	@builtin(instance_index) instanceIndex : u32
 }
-struct FragmentParams {
+struct FragParams {
 	@builtin(position) position : vec4f,
 	@location(0) texCoord : vec2f,
 	@location(1) fillColor : vec4f,
@@ -6289,7 +6335,7 @@ struct Text {
 	strokeWeight: f32
 }
 
-@group(0) @binding(0) var<uniform> uniforms: Uniforms;
+@group(0) @binding(0) var<uniform> q: Q5;
 @group(0) @binding(1) var<storage> transforms: array<mat4x4<f32>>;
 @group(0) @binding(2) var<storage> colors : array<vec4f>;
 
@@ -6302,32 +6348,48 @@ struct Text {
 
 const quad = array(vec2f(0, -1), vec2f(1, -1), vec2f(0, 0), vec2f(1, 0));
 
-fn sampleMsdf(texCoord: vec2f) -> f32 {
-	let c = textureSample(fontTexture, fontSampler, texCoord);
-	return max(min(c.r, c.g), min(max(c.r, c.g), c.b));
+fn calcPos(i: u32, char: vec4f, fontChar: Char, text: Text) -> vec2f {
+	return ((quad[i] * fontChar.size + char.xy + fontChar.offset) *
+		text.scale) + text.pos;
+}
+
+fn calcUV(i: u32, fontChar: Char) -> vec2f {
+	return (quad[i] * vec2f(1, -1)) *
+		fontChar.texExtent + fontChar.texOffset;
 }
 
 fn transformVertex(pos: vec2f, matrixIndex: f32) -> vec4f {
 	var vert = vec4f(pos, 0.0, 1.0);
 	vert = transforms[i32(matrixIndex)] * vert;
-	vert.x /= uniforms.halfWidth;
-	vert.y /= uniforms.halfHeight;
+	vert.x /= q.halfWidth;
+	vert.y /= q.halfHeight;
 	return vert;
 }
 
+fn calcDist(texCoord: vec2f, edgeWidth: f32) -> f32 {
+	let c = textureSample(fontTexture, fontSampler, texCoord);
+	let sigDist = max(min(c.r, c.g), min(max(c.r, c.g), c.b)) - edgeWidth;
+
+	let pxRange = 4.0;
+	let sz = vec2f(textureDimensions(fontTexture, 0));
+	let dx = sz.x * length(vec2f(dpdxFine(texCoord.x), dpdyFine(texCoord.x)));
+	let dy = sz.y * length(vec2f(dpdxFine(texCoord.y), dpdyFine(texCoord.y)));
+	let toPixels = pxRange * inverseSqrt(dx * dx + dy * dy);
+	return sigDist * toPixels;
+}
+
 @vertex
-fn vertexMain(v : VertexParams) -> FragmentParams {
-	let char = textChars[v.instance];
+fn vertexMain(v : VertexParams) -> FragParams {
+	let char = textChars[v.instanceIndex];
 	let text = textMetadata[i32(char.w)];
 	let fontChar = fontChars[i32(char.z)];
+	let pos = calcPos(v.vertexIndex, char, fontChar, text);
 
-	let charPos = ((quad[v.vertex] * fontChar.size + char.xy + fontChar.offset) * text.scale) + text.pos;
-
-	var vert = transformVertex(charPos, text.matrixIndex);
+	var vert = transformVertex(pos, text.matrixIndex);
 
-	var f : FragmentParams;
+	var f : FragParams;
 	f.position = vert;
-	f.texCoord = (quad[v.vertex] * vec2f(1, -1)) * fontChar.texExtent + fontChar.texOffset;
+	f.texCoord = calcUV(v.vertexIndex, fontChar);
 	f.fillColor = colors[i32(text.fillIndex)];
 	f.strokeColor = colors[i32(text.strokeIndex)];
 	f.strokeWeight = text.strokeWeight;
@@ -6335,19 +6397,13 @@ fn vertexMain(v : VertexParams) -> FragmentParams {
 }
 
 @fragment
-fn fragmentMain(f : FragmentParams) -> @location(0) vec4f {
-	let pxRange = 4.0;
-	let sz = vec2f(textureDimensions(fontTexture, 0));
-	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(f.texCoord) - 0.5;
-	let pxDist = sigDist * toPixels;
-	let edgeWidth = 0.5;
+fn fragMain(f : FragParams) -> @location(0) vec4f {
+	let edge = 0.5;
+	let dist = calcDist(f.texCoord, edge);
 
 	if (f.strokeWeight == 0.0) {
-		let fillAlpha = smoothstep(-edgeWidth, edgeWidth, pxDist);
-		var color = vec4f(f.fillColor.rgb, f.fillColor.a * fillAlpha);
+		let fillAlpha = smoothstep(-edge, edge, dist);
+		let color = vec4f(f.fillColor.rgb, f.fillColor.a * fillAlpha);
 		if (color.a < 0.01) {
 			discard;
 		}
@@ -6355,8 +6411,8 @@ fn fragmentMain(f : FragmentParams) -> @location(0) vec4f {
 	}
 
 	let halfStroke = f.strokeWeight / 2.0;
-	let fillAlpha = smoothstep(-edgeWidth, edgeWidth, pxDist - halfStroke);
-	let strokeAlpha = smoothstep(-edgeWidth, edgeWidth, pxDist + halfStroke);
+	let fillAlpha = smoothstep(-edge, edge, dist - halfStroke);
+	let strokeAlpha = smoothstep(-edge, edge, dist + halfStroke);
 	var color = mix(f.strokeColor, f.fillColor, fillAlpha);
 	color = vec4f(color.rgb, color.a * strokeAlpha);
 	if (color.a < 0.01) {
@@ -6368,11 +6424,11 @@ fn fragmentMain(f : FragmentParams) -> @location(0) vec4f {
 
 	let textShader = Q5.device.createShaderModule({
 		label: 'textShader',
-		code: textShaderCode
+		code: $._textShaderCode
 	});
 
 	let textBindGroupLayout = Q5.device.createBindGroupLayout({
-		label: 'MSDF text group layout',
+		label: 'textBindGroupLayout',
 		entries: [
 			{
 				binding: 0,
@@ -6395,7 +6451,7 @@ fn fragmentMain(f : FragmentParams) -> @location(0) vec4f {
 	});
 
 	let fontBindGroupLayout = Q5.device.createBindGroupLayout({
-		label: 'MSDF font group layout',
+		label: 'fontBindGroupLayout',
 		entries: [
 			{
 				binding: 0,
@@ -6420,12 +6476,12 @@ fn fragmentMain(f : FragmentParams) -> @location(0) vec4f {
 	});
 
 	$._pipelineConfigs[3] = {
-		label: 'msdf font pipeline',
+		label: 'textPipeline',
 		layout: fontPipelineLayout,
 		vertex: { module: textShader, entryPoint: 'vertexMain' },
 		fragment: {
 			module: textShader,
-			entryPoint: 'fragmentMain',
+			entryPoint: 'fragMain',
 			targets: [{ format: 'bgra8unorm', blend: $.blendConfigs.normal }]
 		},
 		primitive: { topology: 'triangle-strip', stripIndexFormat: 'uint32' },
@@ -6526,7 +6582,7 @@ fn fragmentMain(f : FragmentParams) -> @location(0) vec4f {
 		charsBuffer.unmap();
 
 		let fontBindGroup = Q5.device.createBindGroup({
-			label: 'msdf font bind group',
+			label: 'fontBindGroup',
 			layout: fontBindGroupLayout,
 			entries: [
 				{ binding: 0, resource: texture.createView() },
@@ -6771,7 +6827,7 @@ fn fragmentMain(f : FragmentParams) -> @location(0) vec4f {
 		txt[7] = 0; // padding
 
 		textStack.push(txt);
-		$.drawStack.push(3, measurements.printedCharCount, $._font.index);
+		$.drawStack.push($._textPL, measurements.printedCharCount, $._font.index);
 	};
 
 	$.textWidth = (str) => {
@@ -6836,7 +6892,7 @@ fn fragmentMain(f : FragmentParams) -> @location(0) vec4f {
 		// create a single buffer for all the char data
 		let charBuffer = Q5.device.createBuffer({
 			size: totalTextSize,
-			usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+			usage: GPUBufferUsage.STORAGE,
 			mappedAtCreation: true
 		});
 
@@ -6851,7 +6907,7 @@ fn fragmentMain(f : FragmentParams) -> @location(0) vec4f {
 		let textBuffer = Q5.device.createBuffer({
 			label: 'textBuffer',
 			size: totalMetadataSize,
-			usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+			usage: GPUBufferUsage.STORAGE,
 			mappedAtCreation: true
 		});
 
@@ -6863,7 +6919,7 @@ fn fragmentMain(f : FragmentParams) -> @location(0) vec4f {
 
 		// create a single bind group for the text buffer and metadata buffer
 		$._textBindGroup = Q5.device.createBindGroup({
-			label: 'msdf text bind group',
+			label: 'textBindGroup',
 			layout: textBindGroupLayout,
 			entries: [
 				{ binding: 0, resource: { buffer: charBuffer } },
@@ -6877,3 +6933,72 @@ fn fragmentMain(f : FragmentParams) -> @location(0) vec4f {
 		textStack = [];
 	});
 };
+Q5.renderers.webgpu.shaders = ($) => {
+	let pipelineTypes = ['shapes', 'image', 'video', 'text'];
+
+	let plCounters = {
+		shapes: 100,
+		image: 200,
+		video: 300,
+		text: 400
+	};
+
+	$._createShader = (code, type = 'shapes') => {
+		code = code.trim();
+
+		// default shader code
+		let def = $['_' + type + 'ShaderCode'];
+
+		let defVertIdx = def.indexOf('@vertex');
+		let defFragIdx = def.indexOf('@fragment');
+
+		if (!code.includes('@fragment')) {
+			// replace @vertex section
+			code = def.slice(0, defVertIdx) + code + '\n\n' + def.slice(defFragIdx);
+		} else if (!code.includes('@vertex')) {
+			// replace @fragment section
+			code = def.slice(0, defFragIdx) + code;
+		} else {
+			// replace @vertex and @fragment sections
+			code = def.slice(0, defVertIdx) + code;
+		}
+
+		let shader = Q5.device.createShaderModule({
+			label: type + 'Shader',
+			code: code
+		});
+		shader.type = type;
+
+		let pipelineIndex = pipelineTypes.indexOf(type);
+		let config = Object.assign({}, $._pipelineConfigs[pipelineIndex]);
+		config.vertex.module = config.fragment.module = shader;
+
+		let pl = plCounters[type];
+		$._pipelines[pl] = Q5.device.createRenderPipeline(config);
+		shader.pipelineIndex = pl;
+		plCounters[type]++;
+
+		return shader;
+	};
+
+	$.createShader = $.createShapesShader = $._createShader;
+	$.createImageShader = (code) => $._createShader(code, 'image');
+	$.createVideoShader = (code) => $._createShader(code, 'video');
+	$.createTextShader = (code) => $._createShader(code, 'text');
+
+	$.shader = (shader) => {
+		$['_' + shader.type + 'PL'] = shader.pipelineIndex;
+	};
+
+	$.resetShader = (type = 'shapes') => {
+		$['_' + type + 'PL'] = pipelineTypes.indexOf(type);
+	};
+
+	$.resetShaders = () => {
+		$._shapesPL = 0;
+		$._imagePL = 1;
+		$._videoPL = 2;
+		$._textPL = 3;
+		$._planePL = 4;
+	};
+};