q5 2.2.1 → 2.2.3

package/q5.js

@@ -239,7 +239,7 @@ function Q5(scope, parent, renderer) {
 		raf($._draw);
 	}
 
-	if ((arguments.length && scope != 'namespace') || preloadDefined) {
+	if ((arguments.length && scope != 'namespace' && renderer != 'webgpu') || preloadDefined) {
 		$.preload();
 		_start();
 	} else {
@@ -551,7 +551,12 @@ Q5.renderers.q2d.canvas = ($, q) => {
 		$.ctx.lineWidth = n || 0.0001;
 	};
 	$.noStroke = () => ($._doStroke = false);
-	$.clear = () => $.ctx.clearRect(0, 0, $.canvas.width, $.canvas.height);
+	$.clear = () => {
+		$.ctx.save();
+		$.ctx.resetTransform();
+		$.ctx.clearRect(0, 0, $.canvas.width, $.canvas.height);
+		$.ctx.restore();
+	};
 
 	// DRAWING MATRIX
 
@@ -717,15 +722,17 @@ Q5.renderers.q2d.drawing = ($) => {
 	// DRAWING
 
 	$.background = function (c) {
-		if (c.canvas) return $.image(c, 0, 0, $.width, $.height);
 		$.ctx.save();
 		$.ctx.resetTransform();
-		if (Q5.Color) {
-			if (!c._q5Color && typeof c != 'string') c = $.color(...arguments);
-			else if ($._namedColors[c]) c = $.color(...$._namedColors[c]);
+		if (c.canvas) $.image(c, 0, 0, $.width, $.height);
+		else {
+			if (Q5.Color) {
+				if (!c._q5Color && typeof c != 'string') c = $.color(...arguments);
+				else if ($._namedColors[c]) c = $.color(...$._namedColors[c]);
+			}
+			$.ctx.fillStyle = c.toString();
+			$.ctx.fillRect(0, 0, $.canvas.width, $.canvas.height);
 		}
-		$.ctx.fillStyle = c.toString();
-		$.ctx.fillRect(0, 0, $.canvas.width, $.canvas.height);
 		$.ctx.restore();
 	};
 
@@ -1728,13 +1735,20 @@ Q5.modules.color = ($, q) => {
 						c0 = parseInt(c0.slice(1, 3), 16);
 					}
 				} else if ($._namedColors[c0]) {
-					c0 = $._namedColors[c0];
+					[c0, c1, c2, c3] = $._namedColors[c0];
 				} else {
 					console.error(
 						"q5 can't parse color: " + c0 + '\nOnly numeric input, hex, and common named colors are supported.'
 					);
 					return new C(0, 0, 0);
 				}
+
+				if ($._colorFormat == 1) {
+					c0 /= 255;
+					if (c1) c1 /= 255;
+					if (c2) c2 /= 255;
+					if (c3) c3 /= 255;
+				}
 			}
 			if (Array.isArray(c0)) {
 				c1 = c0[1];
@@ -1744,13 +1758,6 @@ Q5.modules.color = ($, q) => {
 			}
 		}
 
-		if ($._colorFormat == 1) {
-			c0 /= 255;
-			if (c1) c1 /= 255;
-			if (c2) c2 /= 255;
-			if (c3) c3 /= 255;
-		}
-
 		if (c2 == undefined) return new C(c0, c0, c0, c1);
 		return new C(c0, c1, c2, c3);
 	};
@@ -1760,8 +1767,29 @@ Q5.modules.color = ($, q) => {
 	$.blue = (c) => c.b;
 	$.alpha = (c) => c.a;
 	$.lightness = (c) => {
+		if ($._colorMode == 'oklch') return c.l;
 		return ((0.2126 * c.r + 0.7152 * c.g + 0.0722 * c.b) * 100) / 255;
 	};
+	$.hue = (c) => {
+		if ($._colorMode == 'oklch') return c.h;
+		let r = c.r;
+		let g = c.g;
+		let b = c.b;
+		if ($._colorFormat == 255) {
+			r /= 255;
+			g /= 255;
+			b /= 255;
+		}
+		let max = Math.max(r, g, b);
+		let min = Math.min(r, g, b);
+		let h;
+		if (max == min) h = 0;
+		else if (max == r) h = (60 * (g - b)) / (max - min);
+		else if (max == g) h = (60 * (b - r)) / (max - min) + 120;
+		else h = (60 * (r - g)) / (max - min) + 240;
+		if (h < 0) h += 360;
+		return h;
+	};
 
 	$.lerpColor = (a, b, t) => {
 		if ($._colorMode == 'rgb') {
@@ -2216,33 +2244,21 @@ Q5.modules.math = ($, q) => {
 	$.norm = (value, start, stop) => $.map(value, start, stop, 0, 1);
 	$.sq = (x) => x * x;
 	$.fract = (x) => x - Math.floor(x);
-	$.sin = (a) => {
-		if ($._angleMode == 'degrees') a = $.radians(a);
-		return Math.sin(a);
-	};
-	$.cos = (a) => {
-		if ($._angleMode == 'degrees') a = $.radians(a);
-		return Math.cos(a);
-	};
-	$.tan = (a) => {
-		if ($._angleMode == 'degrees') a = $.radians(a);
-		return Math.tan(a);
-	};
-	$.asin = (x) => {
-		let a = Math.asin(x);
-		if ($._angleMode == 'degrees') a = $.degrees(a);
-		return a;
-	};
-	$.acos = (x) => {
-		let a = Math.acos(x);
-		if ($._angleMode == 'degrees') a = $.degrees(a);
-		return a;
-	};
-	$.atan = (x) => {
-		let a = Math.atan(x);
-		if ($._angleMode == 'degrees') a = $.degrees(a);
-		return a;
-	};
+
+	for (let fn of ['sin', 'cos', 'tan']) {
+		$[fn] = (a) => {
+			if ($._angleMode == 'degrees') a = $.radians(a);
+			return Math[fn](a);
+		};
+	}
+
+	for (let fn of ['asin', 'acos', 'atan']) {
+		$[fn] = (x) => {
+			let a = Math[fn](x);
+			if ($._angleMode == 'degrees') a = $.degrees(a);
+			return a;
+		};
+	}
 	$.atan2 = (y, x) => {
 		let a = Math.atan2(y, x);
 		if ($._angleMode == 'degrees') a = $.degrees(a);
@@ -2906,7 +2922,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 
 	if ($.colorMode) $.colorMode('rgb', 'float');
 
-	let colorsStack, envBindGroup, transformBindGroup;
+	let pass, colorsStack, envBindGroup, transformBindGroup;
 
 	$._createCanvas = (w, h, opt) => {
 		q.ctx = q.drawingContext = c.getContext('webgpu');
@@ -3079,7 +3095,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 	$._beginRender = () => {
 		$.encoder = Q5.device.createCommandEncoder();
 
-		q.pass = $.encoder.beginRenderPass({
+		pass = q.pass = $.encoder.beginRenderPass({
 			colorAttachments: [
 				{
 					view: ctx.getCurrentTexture().createView(),
@@ -3091,7 +3107,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 	};
 
 	$._render = () => {
-		$.pass.setBindGroup(0, envBindGroup);
+		pass.setBindGroup(0, envBindGroup);
 
 		if (transformStates.length > 1 || !transformBindGroup) {
 			const transformBuffer = Q5.device.createBuffer({
@@ -3114,24 +3130,31 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 			});
 		}
 
-		$.pass.setBindGroup(1, transformBindGroup);
+		pass.setBindGroup(1, transformBindGroup);
 
 		// run pre-render methods
 		for (let m of $._hooks.preRender) m();
 
-		$.pass.setPipeline($.pipelines[0]);
-
 		// local variables used for performance
 		let drawStack = $.drawStack;
-		let o = 0; // vertex offset
-		for (let i = 0; i < drawStack.length; i++) {
-			$.pass.draw(drawStack[i], 1, o, 0);
-			o += drawStack[i];
+
+		let drawVertOffset = 0;
+		let curPipelineIndex = -1;
+
+		for (let i = 0; i < drawStack.length; i += 2) {
+			if (curPipelineIndex != drawStack[i]) {
+				curPipelineIndex = drawStack[i];
+				pass.setPipeline($.pipelines[curPipelineIndex]);
+			}
+
+			let vertCount = drawStack[i + 1];
+			pass.draw(vertCount, 1, drawVertOffset, 0);
+			drawVertOffset += vertCount;
 		}
 	};
 
 	$._finishRender = () => {
-		$.pass.end();
+		pass.end();
 		const commandBuffer = $.encoder.finish();
 		Q5.device.queue.submit([commandBuffer]);
 		q.pass = $.encoder = null;
@@ -3149,7 +3172,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		$._transformIndexStack.length = 0;
 	};
 
-	$.fill = (r, g, b, a = 1) => {
+	function addColor(r, g, b, a = 1) {
 		if (typeof r == 'string') r = Q5.color(r);
 		// grayscale mode `fill(1, 0.5)`
 		if (b == undefined) {
@@ -3159,17 +3182,32 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		if (r._q5Color) colorsStack.push(...r.levels);
 		else colorsStack.push(r, g, b, a);
 		$._colorIndex++;
+	}
+
+	$.fill = function () {
+		addColor(...arguments);
+		$._doFill = true;
+		$._fillIndex = $._colorIndex;
+	};
+	$.stroke = function () {
+		addColor(...arguments);
+		$._doStroke = true;
+		$._fillIndex = $._colorIndex;
 	};
-	$.noFill = () => colorsStack.push(0, 0, 0, 0);
-	$.stroke = () => {};
-	$.noStroke = () => {};
+
+	$.noFill = () => ($._doFill = false);
+	$.noStroke = () => ($._doStroke = false);
+
+	$._strokeWeight = 1;
+	$.strokeWeight = (v) => ($._strokeWeight = v);
 
 	$.clear = () => {};
 };
 
 Q5.webgpu = async function (scope, parent) {
+	if (!scope || scope == 'global') Q5._hasGlobal = true;
 	if (!navigator.gpu) {
-		console.error('q5 WebGPU not supported on this browser!');
+		console.warn('q5 WebGPU not supported on this browser!');
 		let q = new Q5(scope, parent);
 		q.colorMode('rgb', 1);
 		q._beginRender = () => q.translate(q.canvas.hw, q.canvas.hh);
@@ -3272,16 +3310,9 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 				fragment: {
 					module: fragmentShader,
 					entryPoint: 'fragmentMain',
-					targets: [
-						{
-							format: 'bgra8unorm',
-							blend: blendConfig
-						}
-					]
+					targets: [{ format: 'bgra8unorm', blend: blendConfig }]
 				},
-				primitive: {
-					topology: 'triangle-list'
-				}
+				primitive: { topology: 'triangle-list' }
 			});
 		};
 
@@ -3395,7 +3426,7 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 		}
 
 		verticesStack.push(...triangles);
-		drawStack.push(triangles.length / 4);
+		drawStack.push(0, triangles.length / 4);
 		shapeVertices = [];
 	};
 
@@ -3420,33 +3451,22 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 		if ($._matrixDirty) $._saveMatrix();
 		let ti = $._transformIndex;
 		// two triangles make a rectangle
+		// prettier-ignore
 		verticesStack.push(
-			left,
-			top,
-			ci,
-			ti,
-			right,
-			top,
-			ci,
-			ti,
-			left,
-			bottom,
-			ci,
-			ti,
-			right,
-			top,
-			ci,
-			ti,
-			left,
-			bottom,
-			ci,
-			ti,
-			right,
-			bottom,
-			ci,
-			ti
+			left, top, ci, ti,
+			right, top, ci, ti,
+			left, bottom, ci, ti,
+			right, top, ci, ti,
+			left, bottom, ci, ti,
+			right, bottom, ci, ti
 		);
-		drawStack.push(6);
+		drawStack.push(0, 6);
+	};
+
+	$.point = (x, y) => {
+		let sw = $._strokeWeight;
+		if (sw == 1) $.rect(x, y, 1, 1);
+		else $.ellipse(x, y, sw, sw);
 	};
 
 	$.background = () => {};
@@ -3511,7 +3531,7 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 			verticesStack.push(x, y, ci, ti, vx1, vy1, ci, ti, vx2, vy2, ci, ti);
 		}
 
-		drawStack.push(n * 3);
+		drawStack.push(0, n * 3);
 	};
 
 	$.circle = (x, y, d) => $.ellipse(x, y, d, d);
@@ -3550,5 +3570,191 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 		$.pass.setBindGroup(2, colorsBindGroup);
 	});
 };
-Q5.renderers.webgpu.image = ($, q) => {};
+Q5.renderers.webgpu.image = ($, q) => {
+	$.imageStack = [];
+	$.textures = [];
+
+	$._hooks.postCanvas.push(() => {
+		let imageVertexShader = Q5.device.createShaderModule({
+			code: `
+struct VertexOutput {
+    @builtin(position) position: vec4<f32>,
+    @location(0) texCoord: vec2<f32>,
+    @location(1) textureIndex: f32
+};
+
+struct Uniforms {
+    halfWidth: f32,
+    halfHeight: f32
+};
+
+@group(0) @binding(0) var<uniform> uniforms: Uniforms;
+@group(1) @binding(0) var<storage, read> transforms: array<mat4x4<f32>>;
+
+@vertex
+fn vertexMain(@location(0) pos: vec2<f32>, @location(1) texCoord: vec2<f32>, @location(2) transformIndex: f32, @location(3) textureIndex: f32) -> VertexOutput {
+    var vert = vec4<f32>(pos, 0.0, 1.0);
+    vert *= transforms[i32(transformIndex)];
+    vert.x /= uniforms.halfWidth;
+    vert.y /= uniforms.halfHeight;
+
+    var output: VertexOutput;
+    output.position = vert;
+    output.texCoord = texCoord;
+    output.textureIndex = textureIndex;
+    return output;
+}
+`
+		});
+
+		let imageFragmentShader = Q5.device.createShaderModule({
+			code: `
+@group(0) @binding(0) var samp: sampler;
+@group(0) @binding(1) var textures: array<texture_2d<f32>>;
+
+@fragment
+fn fragmentMain(@location(0) texCoord: vec2<f32>, @location(1) textureIndex: f32) -> @location(0) vec4<f32> {
+    return textureSample(textures[i32(textureIndex)], samp, texCoord);
+}
+`
+		});
+
+		const bindGroupLayouts = [
+			Q5.device.createBindGroupLayout({
+				entries: [
+					{ binding: 0, visibility: GPUShaderStage.VERTEX, buffer: { type: 'uniform' } },
+					{ binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: {} },
+					{ binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { viewDimension: '2d', sampleType: 'float' } }
+				]
+			}),
+			Q5.device.createBindGroupLayout({
+				entries: [{ binding: 0, visibility: GPUShaderStage.VERTEX, buffer: { type: 'read-only-storage' } }]
+			})
+		];
+
+		const pipelineLayout = Q5.device.createPipelineLayout({
+			bindGroupLayouts: bindGroupLayouts
+		});
+
+		$.pipelines[1] = Q5.device.createRenderPipeline({
+			layout: pipelineLayout,
+			vertex: {
+				module: imageVertexShader,
+				entryPoint: 'vertexMain',
+				buffers: [
+					{
+						arrayStride: 5 * 4, // 4 floats for position and texCoord, 1 float for textureIndex
+						attributes: [
+							{ shaderLocation: 0, offset: 0, format: 'float32x2' },
+							{ shaderLocation: 1, offset: 2 * 4, format: 'float32x2' },
+							{ shaderLocation: 2, offset: 4 * 4, format: 'float32' } // textureIndex
+						]
+					}
+				]
+			},
+			fragment: {
+				module: imageFragmentShader,
+				entryPoint: 'fragmentMain',
+				targets: [{ format: 'bgra8unorm' }]
+			},
+			primitive: {
+				topology: 'triangle-list'
+			}
+		});
+
+		$.sampler = Q5.device.createSampler({
+			magFilter: 'linear',
+			minFilter: 'linear'
+		});
+	});
+
+	$.loadImage = async (src) => {
+		const img = new Image();
+		img.onload = async () => {
+			const imageBitmap = await createImageBitmap(img);
+			const texture = Q5.device.createTexture({
+				size: [img.width, img.height, 1],
+				format: 'bgra8unorm',
+				usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
+			});
+
+			Q5.device.queue.copyExternalImageToTexture({ source: imageBitmap }, { texture }, [img.width, img.height, 1]);
+
+			img.texture = texture;
+			img.index = $.textures.length;
+			$.textures.push(texture);
+		};
+		img.onerror = reject;
+		img.src = src;
+		return img;
+	};
+
+	$._hooks.preRender.push(() => {
+		if (!$.imageStack.length) return;
+
+		// Switch to image pipeline
+		$.pass.setPipeline($.pipelines[1]);
+
+		// Create a vertex buffer for the image quads
+		const vertices = new Float32Array($.vertexStack);
+
+		const vertexBuffer = Q5.device.createBuffer({
+			size: vertices.byteLength,
+			usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
+		});
+
+		Q5.device.queue.writeBuffer(vertexBuffer, 0, vertices);
+		$.pass.setVertexBuffer(0, vertexBuffer);
+
+		// Set the bind group for the sampler and textures
+		if ($.textures.length !== previousTextureCount) {
+			previousTextureCount = $.textures.length;
+
+			// Create the bind group for all textures
+			const textureViews = $.textures.map((tex) => tex.createView());
+
+			$.textureBindGroup = Q5.device.createBindGroup({
+				layout: $.pipelines[1].getBindGroupLayout(0),
+				entries: [
+					{ binding: 0, resource: $.sampler },
+					...textureViews.map((view, i) => ({ binding: i + 1, resource: view }))
+				]
+			});
+		}
+
+		// Set the bind group for the sampler and textures
+		$.pass.setBindGroup(0, $.textureBindGroup);
+	});
+
+	$.image = (img, x, y, w, h) => {
+		if ($._matrixDirty) $._saveMatrix();
+		let ti = $._transformIndex;
+
+		$.imageStack.push(img.index);
+
+		// Calculate half-width and half-height
+		let hw = w / 2;
+		let hh = h / 2;
+
+		// Calculate vertices positions
+		let left = x - hw;
+		let right = x + hw;
+		let top = -(y - hh); // y is inverted in WebGPU
+		let bottom = -(y + hh);
+
+		let ii = img.index;
+
+		// prettier-ignore
+		$.vertexStack.push(
+			left, top, 0, 0, ti, ii,
+			right, top, 1, 0, ti, ii,
+			left, bottom, 0, 1, ti, ii,
+			right, top, 1, 0, ti, ii,
+			left, bottom, 0, 1, ti, ii,
+			right, bottom, 1, 1, ti, ii
+		);
+
+		$.drawStack.push(6);
+	};
+};
 Q5.renderers.webgpu.text = ($, q) => {};