slideshow: improve slideshow sharpness

browser/src/slideshow/LayerDrawing.ts

@@ -947,8 +947,12 @@ class LayerDrawing {
 	}
 
 	private computeInitialResolution() {
-		const viewWidth = window.screen.width;
-		const viewHeight = window.screen.height;
+		// window.screen dimensions are in CSS pixels; multiply by DPR so the
+		// tier selection matches the display's physical pixels and the canvas
+		// backing store isn't upscaled by CSS on HiDPI screens.
+		const dpr = window.devicePixelRatio || 1;
+		const viewWidth = window.screen.width * dpr;
+		const viewHeight = window.screen.height * dpr;
 		this.computeResolution(viewWidth, viewHeight);
 	}
 

browser/src/slideshow/LayerRenderer.ts

@@ -260,10 +260,12 @@ class LayerRendererGl implements LayerRenderer {
 			// app.console.debug(`LayerDrawing.drawBitmap: cache hit: key: ${textureKey}`);
 		} else {
 			if (imageInfo instanceof ImageBitmap) {
-				texture = this.glContext.loadTexture(imageInfo);
+				texture = this.glContext.loadTexture(imageInfo, false, true);
 			} else {
 				texture = this.glContext.loadTexture(
 					imageInfo.data as HTMLImageElement,
+					false,
+					true,
 				);
 			}
 			this.textureCache.set(textureKey, texture);

browser/src/slideshow/LayersCompositor.ts

@@ -133,7 +133,7 @@ class LayersCompositor extends SlideCompositor {
 		if (slideRatio > resolutionRatio) {
 			height = Math.trunc((width * slideHeight) / slideWidth);
 		} else if (slideRatio < resolutionRatio) {
-			width = Math.trunc((height * slideWidth) / slideHeight);
+			width = Math.ceil((height * slideWidth) / slideHeight);
 		}
 		return [width, height];
 	}

browser/src/slideshow/RenderContext.ts

@@ -67,6 +67,7 @@ abstract class RenderContext {
 	public abstract loadTexture(
 		image: HTMLImageElement,
 		isMipMapEnable?: boolean,
+		nearestFiltering?: boolean,
 	): WebGLTexture | ImageBitmap;
 
 	public abstract deleteTexture(texture: WebGLTexture | ImageBitmap): void;
@@ -109,6 +110,7 @@ class RenderContextGl extends RenderContext {
 	public loadTexture(
 		image: HTMLImageElement | ImageBitmap,
 		isMipMapEnable: boolean = false,
+		nearestFiltering: boolean = false,
 	): WebGLTexture | ImageBitmap {
 		if (this.isDisposed()) return null;
 
@@ -128,6 +130,7 @@ class RenderContextGl extends RenderContext {
 		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
 		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
 
+		const filter = nearestFiltering ? gl.NEAREST : gl.LINEAR;
 		if (isMipMapEnable) {
 			gl.generateMipmap(gl.TEXTURE_2D);
 			gl.texParameteri(
@@ -136,10 +139,10 @@ class RenderContextGl extends RenderContext {
 				gl.LINEAR_MIPMAP_LINEAR,
 			);
 		} else {
-			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter);
 		}
 
-		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
 
 		if (image instanceof HTMLImageElement)
 			app.console.debug(`Texture loaded successfully`);
@@ -277,6 +280,7 @@ class RenderContext2d extends RenderContext {
 	public loadTexture(
 		image: HTMLImageElement,
 		isMipMapEnable: boolean = false,
+		nearestFiltering: boolean = false,
 	): WebGLTexture | ImageBitmap {
 		return image;
 	}