q5 2.2.3 → 2.2.4

package/src/q5-vector.js

@@ -3,18 +3,19 @@ Q5.modules.vector = ($) => {
 };
 
 Q5.Vector = class {
-	constructor(_x, _y, _z, _$) {
-		this.x = _x || 0;
-		this.y = _y || 0;
-		this.z = _z || 0;
-		this._$ = _$ || window;
+	constructor(x, y, z, $) {
+		this.x = x || 0;
+		this.y = y || 0;
+		this.z = z || 0;
+		this._$ = $ || window;
 		this._cn = null;
 		this._cnsq = null;
 	}
-	set(_x, _y, _z) {
-		this.x = _x || 0;
-		this.y = _y || 0;
-		this.z = _z || 0;
+	set(x, y, z) {
+		this.x = x?.x || x || 0;
+		this.y = x?.y || y || 0;
+		this.z = x?.z || z || 0;
+		return this;
 	}
 	copy() {
 		return new Q5.Vector(this.x, this.y, this.z);
@@ -136,6 +137,12 @@ Q5.Vector = class {
 	heading() {
 		return this._$.atan2(this.y, this.x);
 	}
+	setHeading(ang) {
+		let mag = this.mag(); // Calculate the magnitude of the vector
+		this.x = mag * this._$.cos(ang); // Set the new x component
+		this.y = mag * this._$.sin(ang); // Set the new y component
+		return this;
+	}
 	rotate(ang) {
 		let costh = this._$.cos(ang);
 		let sinth = this._$.sin(ang);
@@ -153,13 +160,52 @@ Q5.Vector = class {
 	}
 	lerp() {
 		let args = [...arguments];
-		let u = this._arg2v(...args.slice(0, -1));
 		let amt = args.at(-1);
+		if (amt == 0) return this;
+		let u = this._arg2v(...args.slice(0, -1));
 		this.x += (u.x - this.x) * amt;
 		this.y += (u.y - this.y) * amt;
 		this.z += (u.z - this.z) * amt;
 		return this;
 	}
+	slerp() {
+		let args = [...arguments];
+		let amt = args.at(-1);
+		if (amt == 0) return this;
+		let u = this._arg2v(...args.slice(0, -1));
+		if (amt == 1) return this.set(u);
+
+		let v0Mag = this.mag();
+		let v1Mag = u.mag();
+
+		if (v0Mag == 0 || v1Mag == 0) {
+			return this.mult(1 - amt).add(u.mult(amt));
+		}
+
+		let axis = Q5.Vector.cross(this, u);
+		let axisMag = axis.mag();
+		let theta = Math.atan2(axisMag, this.dot(u));
+
+		if (axisMag > 0) {
+			axis.div(axisMag);
+		} else if (theta < this._$.HALF_PI) {
+			return this.mult(1 - amt).add(u.mult(amt));
+		} else {
+			if (this.z == 0 && u.z == 0) axis.set(0, 0, 1);
+			else if (this.x != 0) axis.set(this.y, -this.x, 0).normalize();
+			else axis.set(1, 0, 0);
+		}
+
+		let ey = axis.cross(this);
+		let lerpedMagFactor = 1 - amt + (amt * v1Mag) / v0Mag;
+		let cosMultiplier = lerpedMagFactor * Math.cos(amt * theta);
+		let sinMultiplier = lerpedMagFactor * Math.sin(amt * theta);
+
+		this.x = this.x * cosMultiplier + ey.x * sinMultiplier;
+		this.y = this.y * cosMultiplier + ey.y * sinMultiplier;
+		this.z = this.z * cosMultiplier + ey.z * sinMultiplier;
+		return this;
+	}
 	reflect(n) {
 		n.normalize();
 		return this.sub(n.mult(2 * this.dot(n)));
@@ -212,6 +258,7 @@ Q5.Vector.div = (v, u) => v.copy().div(u);
 Q5.Vector.dot = (v, u) => v.copy().dot(u);
 Q5.Vector.equals = (v, u, epsilon) => v.equals(u, epsilon);
 Q5.Vector.lerp = (v, u, amt) => v.copy().lerp(u, amt);
+Q5.Vector.slerp = (v, u, amt) => v.copy().slerp(u, amt);
 Q5.Vector.limit = (v, m) => v.copy().limit(m);
 Q5.Vector.heading = (v) => this._$.atan2(v.y, v.x);
 Q5.Vector.magSq = (v) => v.x * v.x + v.y * v.y + v.z * v.z;

package/src/q5-webgpu-drawing.js

@@ -33,6 +33,7 @@ Q5.renderers.webgpu.drawing = ($, q) => {
 		};
 
 		let vertexShader = Q5.device.createShaderModule({
+			label: 'drawingVertexShader',
 			code: `
 struct VertexOutput {
 	@builtin(position) position: vec4<f32>,
@@ -63,6 +64,7 @@ fn vertexMain(@location(0) pos: vec2<f32>, @location(1) colorIndex: f32, @locati
 		});
 
 		let fragmentShader = Q5.device.createShaderModule({
+			label: 'drawingFragmentShader',
 			code: `
 @group(2) @binding(0) var<storage, read> uColors : array<vec4<f32>>;
 
@@ -80,6 +82,7 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 
 		$._createPipeline = (blendConfig) => {
 			return Q5.device.createRenderPipeline({
+				label: 'drawingPipeline',
 				layout: pipelineLayout,
 				vertex: {
 					module: vertexShader,

package/src/q5-webgpu-image.js

@@ -2,8 +2,12 @@ Q5.renderers.webgpu.image = ($, q) => {
 	$.imageStack = [];
 	$.textures = [];
 
+	let verticesStack = [];
+	let previousTextureCount = 0;
+
 	$._hooks.postCanvas.push(() => {
-		let imageVertexShader = Q5.device.createShaderModule({
+		let vertexShader = Q5.device.createShaderModule({
+			label: 'imageVertexShader',
 			code: `
 struct VertexOutput {
     @builtin(position) position: vec4<f32>,
@@ -35,7 +39,8 @@ fn vertexMain(@location(0) pos: vec2<f32>, @location(1) texCoord: vec2<f32>, @lo
 `
 		});
 
-		let imageFragmentShader = Q5.device.createShaderModule({
+		let fragmentShader = Q5.device.createShaderModule({
+			label: 'imageFragmentShader',
 			code: `
 @group(0) @binding(0) var samp: sampler;
 @group(0) @binding(1) var textures: array<texture_2d<f32>>;
@@ -65,9 +70,10 @@ fn fragmentMain(@location(0) texCoord: vec2<f32>, @location(1) textureIndex: f32
 		});
 
 		$.pipelines[1] = Q5.device.createRenderPipeline({
+			label: 'imagePipeline',
 			layout: pipelineLayout,
 			vertex: {
-				module: imageVertexShader,
+				module: vertexShader,
 				entryPoint: 'vertexMain',
 				buffers: [
 					{
@@ -81,7 +87,7 @@ fn fragmentMain(@location(0) texCoord: vec2<f32>, @location(1) textureIndex: f32
 				]
 			},
 			fragment: {
-				module: imageFragmentShader,
+				module: fragmentShader,
 				entryPoint: 'fragmentMain',
 				targets: [{ format: 'bgra8unorm' }]
 			},
@@ -112,7 +118,6 @@ fn fragmentMain(@location(0) texCoord: vec2<f32>, @location(1) textureIndex: f32
 			img.index = $.textures.length;
 			$.textures.push(texture);
 		};
-		img.onerror = reject;
 		img.src = src;
 		return img;
 	};
@@ -173,7 +178,7 @@ fn fragmentMain(@location(0) texCoord: vec2<f32>, @location(1) textureIndex: f32
 		let ii = img.index;
 
 		// prettier-ignore
-		$.vertexStack.push(
+		verticesStack.push(
 			left, top, 0, 0, ti, ii,
 			right, top, 1, 0, ti, ii,
 			left, bottom, 0, 1, ti, ii,
@@ -182,6 +187,6 @@ fn fragmentMain(@location(0) texCoord: vec2<f32>, @location(1) textureIndex: f32
 			right, bottom, 1, 1, ti, ii
 		);
 
-		$.drawStack.push(6);
+		$.drawStack.push(1, 6);
 	};
 };