q5 2.5.5 → 2.6.1

package/src/q5-webgpu-drawing.js

@@ -1,39 +1,45 @@
 Q5.renderers.webgpu.drawing = ($, q) => {
-	let c = $.canvas;
-
-	let drawStack = $.drawStack;
-	let colorsStack = $.colorsStack;
-
-	let verticesStack = [];
-
-	let colorIndex, colorsLayout;
+	let c = $.canvas,
+		drawStack = $.drawStack,
+		vertexStack = new Float32Array(1e7),
+		indexStack = new Uint32Array(1e6),
+		vertIndex = 0,
+		vertCount = 0,
+		idxBufferIndex = 0,
+		colorIndex;
 
 	let vertexShader = Q5.device.createShaderModule({
 		label: 'drawingVertexShader',
 		code: `
+struct VertexInput {
+	@location(0) pos: vec2f,
+	@location(1) colorIndex: f32,
+	@location(2) transformIndex: f32
+}
 struct VertexOutput {
 	@builtin(position) position: vec4f,
-	@location(0) colorIndex: f32
-};
-
+	@location(0) color: vec4f
+}
 struct Uniforms {
 	halfWidth: f32,
 	halfHeight: f32
-};
+}
 
 @group(0) @binding(0) var<uniform> uniforms: Uniforms;
-@group(0) @binding(1) var<storage, read> transforms: array<mat4x4<f32>>;
+@group(0) @binding(1) var<storage> transforms: array<mat4x4<f32>>;
+
+@group(1) @binding(0) var<storage> colors : array<vec4f>;
 
 @vertex
-fn vertexMain(@location(0) pos: vec2f, @location(1) colorIndex: f32, @location(2) transformIndex: f32) -> VertexOutput {
-	var vert = vec4f(pos, 0.0, 1.0);
-	vert = transforms[i32(transformIndex)] * vert;
+fn vertexMain(input: VertexInput) -> VertexOutput {
+	var vert = vec4f(input.pos, 0.0, 1.0);
+	vert = transforms[i32(input.transformIndex)] * vert;
 	vert.x /= uniforms.halfWidth;
 	vert.y /= uniforms.halfHeight;
 
 	var output: VertexOutput;
 	output.position = vert;
-	output.colorIndex = colorIndex;
+	output.color = colors[i32(input.colorIndex)];
 	return output;
 }
 `
@@ -42,32 +48,13 @@ fn vertexMain(@location(0) pos: vec2f, @location(1) colorIndex: f32, @location(2
 	let fragmentShader = Q5.device.createShaderModule({
 		label: 'drawingFragmentShader',
 		code: `
-@group(1) @binding(0) var<storage, read> colors : array<vec4f>;
-
 @fragment
-fn fragmentMain(@location(0) colorIndex: f32) -> @location(0) vec4f {
-	let index = i32(colorIndex);
-	return mix(colors[index], colors[index + 1], fract(colorIndex));
+fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
+	return color;
 }
 `
 	});
 
-	colorsLayout = Q5.device.createBindGroupLayout({
-		label: 'colorsLayout',
-		entries: [
-			{
-				binding: 0,
-				visibility: GPUShaderStage.FRAGMENT,
-				buffer: {
-					type: 'read-only-storage',
-					hasDynamicOffset: false
-				}
-			}
-		]
-	});
-
-	$.bindGroupLayouts.push(colorsLayout);
-
 	let vertexBufferLayout = {
 		arrayStride: 16, // 2 coordinates + 1 color index + 1 transform index * 4 bytes each
 		attributes: [
@@ -77,193 +64,212 @@ fn fragmentMain(@location(0) colorIndex: f32) -> @location(0) vec4f {
 		]
 	};
 
-	// prettier-ignore
-	let blendFactors = [
-			'zero',                // 0
-			'one',                 // 1
-			'src-alpha',           // 2
-			'one-minus-src-alpha', // 3
-			'dst',                 // 4
-			'dst-alpha',           // 5
-			'one-minus-dst-alpha', // 6
-			'one-minus-src'        // 7
-	];
-	let blendOps = [
-		'add', // 0
-		'subtract', // 1
-		'reverse-subtract', // 2
-		'min', // 3
-		'max' // 4
-	];
-
-	const blendModes = {
-		normal: [2, 3, 0, 2, 3, 0],
-		lighter: [2, 1, 0, 2, 1, 0],
-		subtract: [2, 1, 2, 2, 1, 2],
-		multiply: [4, 0, 0, 5, 0, 0],
-		screen: [1, 3, 0, 1, 3, 0],
-		darken: [1, 3, 3, 1, 3, 3],
-		lighten: [1, 3, 4, 1, 3, 4],
-		overlay: [2, 3, 0, 2, 3, 0],
-		hard_light: [2, 3, 0, 2, 3, 0],
-		soft_light: [2, 3, 0, 2, 3, 0],
-		difference: [2, 3, 2, 2, 3, 2],
-		exclusion: [2, 3, 0, 2, 3, 0],
-		color_dodge: [1, 7, 0, 1, 7, 0],
-		color_burn: [6, 1, 0, 6, 1, 0],
-		linear_dodge: [2, 1, 0, 2, 1, 0],
-		linear_burn: [2, 7, 1, 2, 7, 1],
-		vivid_light: [2, 7, 0, 2, 7, 0],
-		pin_light: [2, 7, 0, 2, 7, 0],
-		hard_mix: [2, 7, 0, 2, 7, 0]
-	};
-
-	$.blendConfigs = {};
-
-	for (const [name, mode] of Object.entries(blendModes)) {
-		$.blendConfigs[name] = {
-			color: {
-				srcFactor: blendFactors[mode[0]],
-				dstFactor: blendFactors[mode[1]],
-				operation: blendOps[mode[2]]
-			},
-			alpha: {
-				srcFactor: blendFactors[mode[3]],
-				dstFactor: blendFactors[mode[4]],
-				operation: blendOps[mode[5]]
-			}
-		};
-	}
-
-	$._blendMode = 'normal';
-	$.blendMode = (mode) => {
-		if (mode == $._blendMode) return;
-		if (mode == 'source-over') mode = 'normal';
-		mode = mode.toLowerCase().replace(/[ -]/g, '_');
-		$._blendMode = mode;
-		$.pipelines[0] = $._createPipeline($.blendConfigs[mode]);
-	};
-
 	let pipelineLayout = Q5.device.createPipelineLayout({
 		label: 'drawingPipelineLayout',
 		bindGroupLayouts: $.bindGroupLayouts
 	});
 
-	$._createPipeline = (blendConfig) => {
-		return Q5.device.createRenderPipeline({
-			label: 'drawingPipeline',
-			layout: pipelineLayout,
-			vertex: {
-				module: vertexShader,
-				entryPoint: 'vertexMain',
-				buffers: [vertexBufferLayout]
-			},
-			fragment: {
-				module: fragmentShader,
-				entryPoint: 'fragmentMain',
-				targets: [{ format: 'bgra8unorm', blend: blendConfig }]
-			},
-			primitive: { topology: 'triangle-list' }
-		});
+	$._pipelineConfigs[0] = {
+		label: 'drawingPipeline',
+		layout: pipelineLayout,
+		vertex: {
+			module: vertexShader,
+			entryPoint: 'vertexMain',
+			buffers: [vertexBufferLayout]
+		},
+		fragment: {
+			module: fragmentShader,
+			entryPoint: 'fragmentMain',
+			targets: [{ format: 'bgra8unorm', blend: $.blendConfigs.normal }]
+		},
+		primitive: { topology: 'triangle-list' },
+		multisample: {
+			count: 4
+		}
 	};
 
-	$.pipelines[0] = $._createPipeline($.blendConfigs.normal);
-
-	let shapeVertices;
+	$._pipelines[0] = Q5.device.createRenderPipeline($._pipelineConfigs[0]);
+
+	const addVert = (x, y, ci, ti) => {
+		let v = vertexStack,
+			i = vertIndex;
+		v[i++] = x;
+		v[i++] = y;
+		v[i++] = ci;
+		v[i++] = ti;
+		vertIndex = i;
+		vertCount++;
+	};
 
-	$.beginShape = () => {
-		shapeVertices = [];
+	const addIndex = (i1, i2, i3) => {
+		let is = indexStack,
+			ii = idxBufferIndex;
+		is[ii++] = i1;
+		is[ii++] = i2;
+		is[ii++] = i3;
+		idxBufferIndex = ii;
 	};
 
-	$.vertex = (x, y) => {
-		if ($._matrixDirty) $._saveMatrix();
-		shapeVertices.push(x, -y, $._fillIndex, $._transformIndex);
+	const addQuad = (x1, y1, x2, y2, x3, y3, x4, y4, ci, ti) => {
+		let v = vertexStack,
+			i = vertIndex;
+
+		let i1 = vertCount++;
+		v[i++] = x1;
+		v[i++] = y1;
+		v[i++] = ci;
+		v[i++] = ti;
+
+		let i2 = vertCount++;
+		v[i++] = x2;
+		v[i++] = y2;
+		v[i++] = ci;
+		v[i++] = ti;
+
+		let i3 = vertCount++;
+		v[i++] = x3;
+		v[i++] = y3;
+		v[i++] = ci;
+		v[i++] = ti;
+
+		let i4 = vertCount++;
+		v[i++] = x4;
+		v[i++] = y4;
+		v[i++] = ci;
+		v[i++] = ti;
+
+		vertIndex = i;
+
+		let is = indexStack,
+			ii = idxBufferIndex;
+		is[ii++] = i1;
+		is[ii++] = i2;
+		is[ii++] = i3;
+		is[ii++] = i1;
+		is[ii++] = i3;
+		is[ii++] = i4;
+		idxBufferIndex = ii;
+
+		drawStack.push(0, 6, 4);
 	};
 
-	$.endShape = (close) => {
-		if (!$._doFill) {
-			shapeVertices = [];
-			return;
-		}
-		let v = shapeVertices;
-		if (v.length < 12) {
-			throw new Error('A shape must have at least 3 vertices.');
-		}
-		if (close) {
-			// Close the shape by adding the first vertex at the end
-			v.push(v[0], v[1], v[2], v[3]);
+	const addEllipse = (x, y, a, b, n, ci, ti) => {
+		let t = 0,
+			angleIncrement = $.TAU / n,
+			indicesStart = vertIndex / 4;
+		addVert(x, y, ci, ti); // Center vertex
+		for (let i = 0; i <= n; i++) {
+			let vx = x + a * Math.cos(t),
+				vy = y + b * Math.sin(t);
+			addVert(vx, vy, ci, ti);
+			if (i > 0) {
+				addIndex(indicesStart, indicesStart + i, indicesStart + i + 1);
+			}
+			t += angleIncrement;
 		}
-		// Convert the shape to triangles
-		let triangles = [];
-		for (let i = 4; i < v.length; i += 4) {
-			triangles.push(
-				v[0], // First vertex
-				v[1],
-				v[2],
-				v[3],
-				v[i - 4], // Previous vertex
-				v[i - 3],
-				v[i - 2],
-				v[i - 1],
-				v[i], // Current vertex
-				v[i + 1],
-				v[i + 2],
-				v[i + 3]
-			);
+		drawStack.push(0, n * 3, n + 2);
+	};
+
+	$.rectMode = (x) => ($._rectMode = x);
+
+	$.rect = (x, y, w, h) => {
+		let [l, r, t, b] = $._calcBox(x, y, w, h, $._rectMode);
+		let ci, ti;
+		if ($._matrixDirty) $._saveMatrix();
+		ti = $._transformIndex;
+
+		if ($._doStroke) {
+			ci = $._strokeIndex;
+
+			// outer rectangle coordinates
+			let sw = $._strokeWeight / 2;
+			let to = t + sw,
+				bo = b - sw,
+				lo = l - sw,
+				ro = r + sw;
+
+			// stroke is simply a bigger rectangle drawn first
+			addQuad(lo, to, ro, to, ro, bo, lo, bo, ci, ti);
+
+			// inner rectangle coordinates
+			t -= sw;
+			b += sw;
+			l += sw;
+			r -= sw;
 		}
-		shapeVertices = [];
 
-		verticesStack.push(...triangles);
-		drawStack.push(0, triangles.length / 4);
-	};
+		if ($._doFill) {
+			ci = colorIndex ?? $._fillIndex;
 
-	$.triangle = (x1, y1, x2, y2, x3, y3) => {
-		$.beginShape();
-		$.vertex(x1, y1);
-		$.vertex(x2, y2);
-		$.vertex(x3, y3);
-		$.endShape(1);
+			// two triangles make a rectangle
+			addQuad(l, t, r, t, r, b, l, b, ci, ti);
+		}
 	};
 
-	$.quad = (x1, y1, x2, y2, x3, y3, x4, y4) => {
-		$.beginShape();
-		$.vertex(x1, y1);
-		$.vertex(x2, y2);
-		$.vertex(x3, y3);
-		$.vertex(x4, y4);
-		$.endShape(1);
-	};
+	$.square = (x, y, s) => $.rect(x, y, s, s);
 
-	$.rectMode = (x) => ($._rectMode = x);
+	// prettier-ignore
+	const getArcSegments = (d) =>
+		d < 4 ? 6 :
+		d < 6 ? 8 :
+		d < 10 ? 10 :
+		d < 16 ? 12 :
+		d < 20 ? 14 :
+		d < 22 ? 16 :
+		d < 24 ? 18 :
+		d < 28 ? 20 :
+		d < 34 ? 22 :
+		d < 42 ? 24 :
+		d < 48 ? 26 :
+		d < 56 ? 28 :
+		d < 64 ? 30 :
+		d < 72 ? 32 :
+		d < 84 ? 34 :
+		d < 96 ? 36 :
+		d < 98 ? 38 :
+		d < 113 ? 40 :
+		d < 149 ? 44 :
+		d < 199 ? 48 :
+		d < 261 ? 52 :
+		d < 353 ? 56 :
+		d < 461 ? 60 :
+		d < 585 ? 64 :
+		d < 1200 ? 70 :
+		d < 1800 ? 80 :
+		d < 2400 ? 90 :
+		100;
 
-	$.rect = (x, y, w, h) => {
-		let [l, r, t, b] = $._calcBox(x, y, w, h, $._rectMode);
+	$.ellipseMode = (x) => ($._ellipseMode = x);
 
-		let ci = colorIndex ?? $._fillIndex;
+	$.ellipse = (x, y, w, h) => {
+		let n = getArcSegments(w == h ? w : Math.max(w, h));
+		let a = Math.max(w, 1) / 2;
+		let b = w == h ? a : Math.max(h, 1) / 2;
+		let ci;
 		if ($._matrixDirty) $._saveMatrix();
 		let ti = $._transformIndex;
-		// two triangles make a rectangle
-		// prettier-ignore
-		verticesStack.push(
-			l, t, ci, ti,
-			r, t, ci, ti,
-			l, b, ci, ti,
-			r, t, ci, ti,
-			l, b, ci, ti,
-			r, b, ci, ti
-		);
-		drawStack.push(0, 6);
+		if ($._doStroke) {
+			let sw = $._strokeWeight / 2;
+			addEllipse(x, y, a + sw, b + sw, n, $._strokeIndex, ti);
+			a -= sw;
+			b -= sw;
+		}
+		if ($._doFill) {
+			addEllipse(x, y, a, b, n, colorIndex ?? $._fillIndex, ti);
+		}
 	};
 
-	$.square = (x, y, s) => $.rect(x, y, s, s);
+	$.circle = (x, y, d) => $.ellipse(x, y, d, d);
 
 	$.point = (x, y) => {
 		colorIndex = $._strokeIndex;
+		$._doStroke = false;
 		let sw = $._strokeWeight;
 		if (sw < 2) {
 			sw = Math.round(sw);
 			$.rect(x, y, sw, sw);
 		} else $.ellipse(x, y, sw, sw);
+		$._doStroke = true;
 		colorIndex = null;
 	};
 
@@ -271,19 +277,97 @@ fn fragmentMain(@location(0) colorIndex: f32) -> @location(0) vec4f {
 		colorIndex = $._strokeIndex;
 
 		$.push();
-		$.translate(x1, y1);
+		$._doStroke = false;
+		$.translate(x1, -y1);
 		$.rotate($.atan2(y2 - y1, x2 - x1));
 		let length = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
-		let sw = $._strokeWeight;
-		$.rect(0, -sw / 2, length, sw);
+		let sw = $._strokeWeight,
+			hsw = sw / 2;
+		$._rectMode = 'corner';
+		if (sw < 4) {
+			$.rect(-hsw, -hsw, length + hsw, sw);
+		} else {
+			$._ellipseMode = 'center';
+			$.ellipse(0, 0, sw, sw);
+			$.ellipse(length, 0, sw, sw);
+			$.rect(0, -hsw, length, sw);
+		}
+
 		$.pop();
 
 		colorIndex = null;
 	};
 
+	let shapeVertCount;
+
+	$.beginShape = () => {
+		shapeVertCount = 0;
+	};
+
+	$.vertex = (x, y) => {
+		if ($._matrixDirty) $._saveMatrix();
+		addVert(x, -y, $._fillIndex, $._transformIndex);
+		shapeVertCount++;
+	};
+
+	$.endShape = (close) => {
+		if (shapeVertCount < 3) {
+			throw new Error('A shape must have at least 3 vertices.');
+		}
+
+		let firstVert = vertCount - shapeVertCount;
+
+		if ($._doFill) {
+			// make a simple triangle fan, starting from the first vertex
+			for (let i = firstVert + 1; i < vertCount - 1; i++) {
+				addIndex(firstVert, i, i + 1);
+			}
+			drawStack.push(0, (shapeVertCount - 2) * 3, shapeVertCount);
+		}
+
+		if ($._doStroke) {
+			let first = firstVert * 4,
+				last = vertIndex - 4;
+			for (let i = first; i < last; i += 4) {
+				let x1 = vertexStack[i],
+					y1 = vertexStack[i + 1],
+					x2 = vertexStack[i + 4],
+					y2 = vertexStack[i + 5];
+				$.line(x1, y1, x2, y2);
+			}
+			if (close) {
+				let x1 = vertexStack[last],
+					y1 = vertexStack[last + 1],
+					x2 = vertexStack[first],
+					y2 = vertexStack[first + 1];
+				$.line(x1, y1, x2, y2);
+			}
+		}
+
+		shapeVertCount = 0;
+	};
+
+	$.triangle = (x1, y1, x2, y2, x3, y3) => {
+		$.beginShape();
+		$.vertex(x1, y1);
+		$.vertex(x2, y2);
+		$.vertex(x3, y3);
+		$.endShape();
+	};
+
+	$.quad = (x1, y1, x2, y2, x3, y3, x4, y4) => {
+		$.beginShape();
+		$.vertex(x1, y1);
+		$.vertex(x2, y2);
+		$.vertex(x3, y3);
+		$.vertex(x4, y4);
+		$.endShape();
+	};
+
 	$.background = (r, g, b, a) => {
 		$.push();
 		$.resetMatrix();
+		$._doStroke = false;
 		if (r.src) {
 			let og = $._imageMode;
 			$._imageMode = 'corner';
@@ -297,115 +381,38 @@ fn fragmentMain(@location(0) colorIndex: f32) -> @location(0) vec4f {
 			$._rectMode = og;
 		}
 		$.pop();
+		if (!$._fillSet) $._fillIndex = 1;
 	};
 
-	/**
-	 * Derived from: ceil(Math.log(d) * 7) * 2 - ceil(28)
-	 * This lookup table is used for better performance.
-	 * @param {Number} d diameter of the circle
-	 * @returns n number of segments
-	 */
-	// prettier-ignore
-	const getArcSegments = (d) => 
-		d < 4 ? 6 :
-    d < 6 ? 8 :
-    d < 10 ? 10 :
-    d < 16 ? 12 :
-    d < 20 ? 14 :
-    d < 22 ? 16 :
-    d < 24 ? 18 :
-    d < 28 ? 20 :
-    d < 34 ? 22 :
-    d < 42 ? 24 :
-    d < 48 ? 26 :
-    d < 56 ? 28 :
-    d < 64 ? 30 :
-    d < 72 ? 32 :
-    d < 84 ? 34 :
-    d < 96 ? 36 :
-    d < 98 ? 38 :
-    d < 113 ? 40 :
-    d < 149 ? 44 :
-    d < 199 ? 48 :
-    d < 261 ? 52 :
-    d < 353 ? 56 :
-    d < 461 ? 60 :
-    d < 585 ? 64 :
-    d < 1200 ? 70 :
-		d < 1800 ? 80 :
-		d < 2400 ? 90 :
-		100;
-
-	$.ellipseMode = (x) => ($._ellipseMode = x);
-
-	$.ellipse = (x, y, w, h) => {
-		const n = getArcSegments(w == h ? w : Math.max(w, h));
-
-		let a = Math.max(w, 1) / 2;
-		let b = w == h ? a : Math.max(h, 1) / 2;
-
-		let t = 0; // theta
-		const angleIncrement = $.TAU / n;
-		const ci = colorIndex ?? $._fillIndex;
-		if ($._matrixDirty) $._saveMatrix();
-		const ti = $._transformIndex;
-		let vx1, vy1, vx2, vy2;
-		for (let i = 0; i <= n; i++) {
-			vx1 = vx2;
-			vy1 = vy2;
-			vx2 = x + a * Math.cos(t);
-			vy2 = y + b * Math.sin(t);
-			t += angleIncrement;
-
-			if (i == 0) continue;
-
-			verticesStack.push(x, y, ci, ti, vx1, vy1, ci, ti, vx2, vy2, ci, ti);
-		}
-
-		drawStack.push(0, n * 3);
-	};
-
-	$.circle = (x, y, d) => $.ellipse(x, y, d, d);
-
 	$._hooks.preRender.push(() => {
-		$.pass.setPipeline($.pipelines[0]);
-
-		const vertices = new Float32Array(verticesStack);
+		$.pass.setPipeline($._pipelines[0]);
 
-		const vertexBuffer = Q5.device.createBuffer({
-			size: vertices.byteLength,
-			usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
+		let vertexBuffer = Q5.device.createBuffer({
+			size: vertIndex * 4,
+			usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+			mappedAtCreation: true
 		});
 
-		Q5.device.queue.writeBuffer(vertexBuffer, 0, vertices);
+		new Float32Array(vertexBuffer.getMappedRange()).set(vertexStack.slice(0, vertIndex));
+		vertexBuffer.unmap();
+
 		$.pass.setVertexBuffer(0, vertexBuffer);
 
-		const colorsBuffer = Q5.device.createBuffer({
-			size: colorsStack.length * 4,
-			usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+		let indexBuffer = Q5.device.createBuffer({
+			size: idxBufferIndex * 4,
+			usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
+			mappedAtCreation: true
 		});
 
-		Q5.device.queue.writeBuffer(colorsBuffer, 0, new Float32Array(colorsStack));
-
-		$._colorsBindGroup = Q5.device.createBindGroup({
-			layout: colorsLayout,
-			entries: [
-				{
-					binding: 0,
-					resource: {
-						buffer: colorsBuffer,
-						offset: 0,
-						size: colorsStack.length * 4
-					}
-				}
-			]
-		});
+		new Uint32Array(indexBuffer.getMappedRange()).set(indexStack.slice(0, idxBufferIndex));
+		indexBuffer.unmap();
 
-		// set the bind group once before rendering
-		$.pass.setBindGroup(1, $._colorsBindGroup);
+		$.pass.setIndexBuffer(indexBuffer, 'uint32');
 	});
 
 	$._hooks.postRender.push(() => {
-		verticesStack.length = 0;
+		vertIndex = 0;
+		vertCount = 0;
+		idxBufferIndex = 0;
 	});
 };