q5 4.0.1 → 4.2.0

package/q5.js

@@ -1,6 +1,6 @@
 /**
  * q5.js
- * @version 4.0
+ * @version 4.2
  * @author quinton-ashley
  * @contributors evanalulu, Tezumie, ormaq, Dukemz, LingDong-
  * @license LGPL-3.0
@@ -47,6 +47,7 @@ function Q5(scope, parent, renderer) {
 	});
 
 	$.canvas = $.ctx = $.drawingContext = null;
+	$._flippedY = true;
 	$.pixels = [];
 	let looper = null,
 		useRAF = true;
@@ -148,7 +149,12 @@ function Q5(scope, parent, renderer) {
 
 		q.pmouseX = $.mouseX;
 		q.pmouseY = $.mouseY;
-		q.moveX = q.moveY = 0;
+		q.movedX = q.movedY = 0;
+		if ($.pointers) {
+			for (let i = $.pointers.length - 1; i >= 0; i--) {
+				if ($.pointers[i]._ended) $.pointers.splice(i, 1);
+			}
+		}
 		$._lastFrameTime = ts;
 		let post = performance.now();
 		$._fps = Math.round(1000 / (post - pre));
@@ -469,7 +475,7 @@ if (typeof window == 'object') {
 	window.WEBGPU = 'webgpu';
 } else global.window = 0;
 
-Q5.version = Q5.VERSION = '4.0';
+Q5.version = Q5.VERSION = '4.2';
 
 if (typeof document == 'object') {
 	document.addEventListener('DOMContentLoaded', () => {
@@ -598,6 +604,7 @@ Q5.modules.canvas = ($, q) => {
 
 		if ($._addEventMethods) $._addEventMethods(c);
 
+		if (!$._isImage) $.resetMatrix();
 		$.canvas.ready = true;
 
 		return rend;
@@ -3500,12 +3507,9 @@ Q5.modules.fes = ($) => {
 Q5.modules.input = ($, q) => {
 	if ($._isGraphics) return;
 
-	$.mouseX = 0;
-	$.mouseY = 0;
-	$.pmouseX = 0;
-	$.pmouseY = 0;
+	$.mouseX = $.mouseY = $.pmouseX = $.pmouseY = $.movedX = $.movedY = 0;
 	$.touches = [];
-	$.pointers = {};
+	$.pointers = [];
 	$.mouseButton = '';
 	$.keyIsPressed = false;
 	$.mouseIsPressed = false;
@@ -3541,10 +3545,18 @@ Q5.modules.input = ($, q) => {
 	};
 
 	$._updatePointer = (e) => {
-		let pid = e.pointerId;
-		$.pointers[pid] ??= { event: e };
-		let pointer = $.pointers[pid];
-		pointer.event = e;
+		let id = e.pointerId || $.pointers[0]?.id;
+		if (id == undefined) {
+			if (e instanceof MouseEvent) id = 0;
+			else return;
+		}
+
+		let p = $.pointers.find((p) => p.id === id);
+		if (!p) {
+			p = { id };
+			$.pointers.push(p);
+		}
+		p.event = e;
 
 		let x, y;
 		if (c) {
@@ -3564,20 +3576,29 @@ Q5.modules.input = ($, q) => {
 			y = e.clientY;
 		}
 
-		pointer.x = x;
-		pointer.y = y;
+		p.x = x;
+		p.y = y;
+
+		return p;
+	};
+
+	$._updateMouse = (e) => {
+		let p = $.pointers[0];
+		if (e.pointerId != undefined && e.pointerId != p.id) return;
 
-		if (e.isPrimary || !e.pointerId) {
-			if (document.pointerLockElement) {
+		if (document.pointerLockElement) {
+			if (e.movementX != undefined) {
 				q.mouseX += e.movementX;
 				q.mouseY += e.movementY;
-			} else {
-				q.mouseX = x;
-				q.mouseY = y;
 			}
+		} else {
+			q.mouseX = p.x;
+			q.mouseY = p.y;
+		}
 
-			q.moveX = e.movementX;
-			q.moveY = e.movementY;
+		if (e.movementX != undefined) {
+			q.movedX = e.movementX;
+			q.movedY = e.movementY;
 		}
 	};
 
@@ -3587,6 +3608,7 @@ Q5.modules.input = ($, q) => {
 		pressAmt++;
 		$._startAudio();
 		$._updatePointer(e);
+		$._updateMouse(e);
 		q.mouseIsPressed = true;
 		q.mouseButton = mouseBtns[e.button];
 		$.mousePressed(e);
@@ -3595,6 +3617,7 @@ Q5.modules.input = ($, q) => {
 	$._onpointermove = (e) => {
 		if (c && !c.visible) return;
 		$._updatePointer(e);
+		$._updateMouse(e);
 		if ($.mouseIsPressed) $.mouseDragged(e);
 		else $.mouseMoved(e);
 	};
@@ -3604,19 +3627,21 @@ Q5.modules.input = ($, q) => {
 		if (pressAmt > 0) pressAmt--;
 		else return;
 		$._updatePointer(e);
-		delete $.pointers[e.pointerId];
+		$._updateMouse(e);
+		if (e.pointerType === 'touch' || e.pointerType === 'pen') {
+			let p = $.pointers.find((p) => p.id === e.pointerId);
+			if (p) p._ended = true;
+		}
 		$.mouseReleased(e);
 	};
 
 	$._onclick = (e) => {
-		$._updatePointer(e);
 		q.mouseIsPressed = true;
 		$.mouseClicked(e);
 		q.mouseIsPressed = false;
 	};
 
 	$._ondblclick = (e) => {
-		$._updatePointer(e);
 		q.mouseIsPressed = true;
 		$.doubleClicked(e);
 		q.mouseIsPressed = false;
@@ -3624,6 +3649,7 @@ Q5.modules.input = ($, q) => {
 
 	$._onwheel = (e) => {
 		$._updatePointer(e);
+		$._updateMouse(e);
 		e.delta = e.deltaY;
 		let ret = $.mouseWheel(e);
 		if (($._isGlobal && !ret) || ret == false) {
@@ -3684,7 +3710,7 @@ Q5.modules.input = ($, q) => {
 		let x = (touch.clientX - rect.left) / sx - modX,
 			y = (touch.clientY - rect.top) / sy - modY;
 
-		if ($._webgpu && !$._flippedY) y *= -1;
+		if (!$._flippedY) y *= -1;
 
 		return {
 			x,
@@ -3752,7 +3778,14 @@ Q5.modules.input = ($, q) => {
 
 		if (c) c.addEventListener('wheel', (e) => $._onwheel(e));
 
-		if (!$._isGlobal && c) l = c.addEventListener.bind(c);
+		if (!$._isGlobal && c) {
+			// If not global, only trigger pointer events when pointer is locked or over canvas
+			l(pointer + 'down', (e) => !document.pointerLockElement || $._onpointerdown(e));
+			l('click', (e) => !document.pointerLockElement || $._onclick(e));
+			l('dblclick', (e) => !document.pointerLockElement || $._ondblclick(e));
+
+			l = c.addEventListener.bind(c);
+		}
 
 		l(pointer + 'down', (e) => $._onpointerdown(e));
 		l('click', (e) => $._onclick(e));
@@ -5399,10 +5432,12 @@ struct Q5 {
 	$._buffers = [];
 	$._texturesToDestroy = [];
 
-	// local variables used for slightly better performance
+	// local variables used for better performance
 
 	// stores pipeline shifts and vertex counts/image indices
-	let drawStack = [];
+	let drawStack = ($._drawStack = []);
+	$._customDrawHandlers = {};
+	$._customBindHandlers = {};
 
 	// colors used for each draw call
 	let colorStack = new Float32Array(1e6);
@@ -5435,7 +5470,7 @@ struct Q5 {
 		]
 	});
 
-	$._bindGroupLayouts = [mainLayout];
+	$._mainLayout = mainLayout;
 
 	let uniformBuffer = Q5.device.createBuffer({
 		size: 64,
@@ -5718,19 +5753,22 @@ fn fragMain(f: FragParams ) -> @location(0) vec4f {
 		matrixIdx = 0,
 		matrixDirty = false; // tracks if the matrix has been modified
 
+	$._getMatrixIdx = () => matrixIdx;
+
 	// 4x4 identity matrix
 	// prettier-ignore
 	matrices.push([
 		1, 0, 0, 0,
-		0, 1, 0, 0,
+		0, -1, 0, 0,
 		0, 0, 1, 0,
 		0, 0, 0, 1
 	]);
 
 	transforms.set(matrices[0]);
 
-	let flippedY = false,
-		yDir = 1;
+	// default is y-down for q5 WebGPU
+	let flippedY = true,
+		yDir = -1;
 
 	$.flipY = () => {
 		$._flippedY = flippedY = !flippedY;
@@ -5741,9 +5779,6 @@ fn fragMain(f: FragParams ) -> @location(0) vec4f {
 		transforms.set(matrices[0], 0);
 	};
 
-	// current default is y-down for q5 WebGPU
-	$.flipY();
-
 	$.translate = (x, y) => {
 		if (!x && !y) return;
 		let m = matrix;
@@ -6354,6 +6389,8 @@ fn fragMain(f: FragParams ) -> @location(0) vec4f {
 				} else if (curPipelineIndex == 6) {
 					pass.setIndexBuffer(ellipseIndexBuffer, 'uint16');
 					pass.setBindGroup(1, ellipseBindGroup);
+				} else if ($._customBindHandlers[curPipelineIndex]) {
+					$._customBindHandlers[curPipelineIndex](pass);
 				}
 			}
 
@@ -6381,11 +6418,14 @@ fn fragMain(f: FragParams ) -> @location(0) vec4f {
 				pass.setBindGroup(1, $._textureBindGroups[v]);
 				pass.draw(4, 1, imageVertOffset);
 				imageVertOffset += 4;
-			} else {
+			} else if (curPipelineIndex == 1 || curPipelineIndex >= 1000) {
 				// draw a shape
 				// v is the number of vertices
 				pass.draw(v, 1, drawVertOffset);
 				drawVertOffset += v;
+			} else {
+				let used = $._customDrawHandlers[curPipelineIndex](pass, v, drawStack, i);
+				if (used) i += used;
 			}
 		}
 	};
@@ -6522,7 +6562,7 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
 
 	let shapesPipelineLayout = Q5.device.createPipelineLayout({
 		label: 'shapesPipelineLayout',
-		bindGroupLayouts: $._bindGroupLayouts
+		bindGroupLayouts: [mainLayout]
 	});
 
 	$._pipelineConfigs[1] = {
@@ -6951,7 +6991,7 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
 
 	let rectPipelineLayout = Q5.device.createPipelineLayout({
 		label: 'rectPipelineLayout',
-		bindGroupLayouts: [...$._bindGroupLayouts, rectBindGroupLayout]
+		bindGroupLayouts: [mainLayout, rectBindGroupLayout]
 	});
 
 	$._pipelineConfigs[5] = {
@@ -7259,7 +7299,7 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
 
 	let ellipsePipelineLayout = Q5.device.createPipelineLayout({
 		label: 'ellipsePipelineLayout',
-		bindGroupLayouts: [...$._bindGroupLayouts, ellipseBindGroupLayout]
+		bindGroupLayouts: [mainLayout, ellipseBindGroupLayout]
 	});
 
 	$._pipelineConfigs[6] = {
@@ -7529,12 +7569,12 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
 
 	let imagePipelineLayout = Q5.device.createPipelineLayout({
 		label: 'imagePipelineLayout',
-		bindGroupLayouts: [...$._bindGroupLayouts, textureLayout]
+		bindGroupLayouts: [mainLayout, textureLayout]
 	});
 
 	let videoPipelineLayout = Q5.device.createPipelineLayout({
 		label: 'videoPipelineLayout',
-		bindGroupLayouts: [...$._bindGroupLayouts, videoTextureLayout]
+		bindGroupLayouts: [mainLayout, videoTextureLayout]
 	});
 
 	$._pipelineConfigs[2] = {
@@ -8027,7 +8067,7 @@ fn fragMain(f : FragParams) -> @location(0) vec4f {
 	});
 
 	let fontPipelineLayout = Q5.device.createPipelineLayout({
-		bindGroupLayouts: [...$._bindGroupLayouts, fontBindGroupLayout, textBindGroupLayout]
+		bindGroupLayouts: [mainLayout, fontBindGroupLayout, textBindGroupLayout]
 	});
 
 	$._pipelineConfigs[4] = {
@@ -8536,9 +8576,117 @@ fn fragMain(f : FragParams) -> @location(0) vec4f {
 		text: 4000
 	};
 
-	$._createShader = (code, type = 'shapes') => {
+	$._createPipeline = (opt) => {
+		if (typeof opt == 'string') opt = { shader: opt };
+
+		let { label, shader = '', topology = 'triangle-list', cullMode = 'none', blend = 'source-over' } = opt;
+
+		let module;
+		if (opt.module) module = opt.module;
+		else {
+			module = Q5.device.createShaderModule({
+				label: label + 'Shader',
+				code: $._baseShaderCode + shader
+			});
+		}
+
+		// Handle optional custom data buffer and its bind group layout
+		let layout = opt.layout;
+		let _dataBuffer = null;
+		let _dataBindLayout = null;
+		let _dataBindGroup = null;
+		if (opt.data) {
+			_dataBuffer = Q5.device.createBuffer({
+				size: opt.data.byteLength,
+				usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+			});
+			_dataBindLayout = Q5.device.createBindGroupLayout({
+				entries: [
+					{
+						binding: 0,
+						visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+						buffer: { type: 'read-only-storage' }
+					}
+				]
+			});
+			_dataBindGroup = Q5.device.createBindGroup({
+				layout: _dataBindLayout,
+				entries: [{ binding: 0, resource: { buffer: _dataBuffer } }]
+			});
+			$._buffers.push(_dataBuffer);
+		}
+
+		if (!layout) {
+			if (_dataBindLayout) {
+				layout = Q5.device.createPipelineLayout({
+					bindGroupLayouts: [mainLayout, _dataBindLayout]
+				});
+			} else {
+				layout = Q5.device.createPipelineLayout({
+					bindGroupLayouts: [mainLayout]
+				});
+			}
+		}
+
+		let pipelineConfig = {
+			label: label + 'Pipeline',
+			layout,
+			vertex: {
+				module,
+				entryPoint: 'vertexMain'
+			},
+			fragment: {
+				module,
+				entryPoint: 'fragMain',
+				targets: [
+					{
+						format: 'bgra8unorm',
+						blend: $.blendConfigs[blend]
+					}
+				]
+			},
+			primitive: {
+				topology,
+				cullMode
+			},
+			multisample: { count: 4 }
+		};
+
+		let id = $._pipelines.length;
+		$._pipelineConfigs[id] = pipelineConfig;
+		$._pipelines[id] = Q5.device.createRenderPipeline(pipelineConfig);
+
+		// If we created a data buffer/bind group, register a bind handler
+		if (_dataBindGroup) {
+			$._customBindHandlers[id] = (pass) => {
+				Q5.device.queue.writeBuffer(_dataBuffer, 0, opt.data);
+				pass.setBindGroup(1, _dataBindGroup);
+			};
+		}
+
+		return id;
+	};
+
+	$.createShader = (code, type = 'shapes', options = {}) => {
 		code = code.trim();
 
+		// create custom shader
+		if (!pipelineTypes.includes(type)) {
+			if (options instanceof Float32Array) options = { data: options };
+			options.shader = code;
+			options.label = type;
+
+			let id = $._createPipeline(options);
+
+			let shader = $._pipelineConfigs[id].vertex.module;
+			shader.type = type;
+			shader.pipelineIndex = id;
+			$._customDrawHandlers[id] ??= (pass, count) => {
+				pass.draw(count, 1, 0, 0);
+			};
+			return shader;
+		}
+
 		// default shader code
 		let def = $['_' + type + 'ShaderCode'];
 
@@ -8576,11 +8724,11 @@ fn fragMain(f : FragParams) -> @location(0) vec4f {
 		return shader;
 	};
 
-	$.createShader = $.createShapesShader = $._createShader;
-	$.createFrameShader = (code) => $._createShader(code, 'frame');
-	$.createImageShader = (code) => $._createShader(code, 'image');
-	$.createVideoShader = (code) => $._createShader(code, 'video');
-	$.createTextShader = (code) => $._createShader(code, 'text');
+	$.createShapesShader = $.createShader;
+	$.createFrameShader = (code) => $.createShader(code, 'frame');
+	$.createImageShader = (code) => $.createShader(code, 'image');
+	$.createVideoShader = (code) => $.createShader(code, 'video');
+	$.createTextShader = (code) => $.createShader(code, 'text');
 
 	$.shader = (shader) => {
 		let type = shader.type;
@@ -8650,7 +8798,7 @@ Q5.MAX_TEXTS = 10000;
 Q5.initWebGPU = async () => {
 	if (!navigator.gpu) {
 		console.warn('q5 WebGPU not supported on this browser! Use Google Chrome or Edge.');
-		return false;
+		return;
 	}
 
 	// fn can only be called once
@@ -8665,7 +8813,7 @@ Q5.initWebGPU = async () => {
 
 	if (!adapter) {
 		console.warn('q5 WebGPU could not start! No appropriate GPUAdapter found, Vulkan may need to be enabled.');
-		return false;
+		return;
 	}
 
 	let device = await adapter.requestDevice();
@@ -8674,7 +8822,7 @@ Q5.initWebGPU = async () => {
 		device.limits.maxStorageBuffersInVertexStage ?? device.limits.maxStorageBuffersPerShaderStage;
 	if (vertexStorageLimit < 3) {
 		console.warn('q5 WebGPU requires vertex storage buffers, which are not supported by this device.');
-		return false;
+		return;
 	}
 
 	// Update to fit device limits