Puppeteer: Removed pixelmatch dependency. (#32656)

Author: mrdoob

examples/screenshots/svg_sandbox.jpg

@@ -106,7 +106,6 @@
     "jsdoc": "^4.0.5",
     "pngjs": "^7.0.0",
     "magic-string": "^0.30.0",
-    "pixelmatch": "^7.0.0",
     "puppeteer": "^24.25.0",
     "qunit": "^2.19.4",
     "rollup": "^4.6.0",

examples/screenshots/webaudio_visualizer.jpg

@@ -102,6 +102,52 @@ class Image {
 
 	}
 
+	compare( other, diff, threshold = 0.1 ) {
+
+		if ( this.width !== other.width || this.height !== other.height ) {
+
+			throw new Error( 'Image sizes do not match' );
+
+		}
+
+		const maxDelta = 255 * 255 * 3; // Max squared distance in RGB space
+		let numDiffPixels = 0;
+
+		for ( let i = 0; i < this.data.length; i += 4 ) {
+
+			const dr = this.data[ i ] - other.data[ i ];
+			const dg = this.data[ i + 1 ] - other.data[ i + 1 ];
+			const db = this.data[ i + 2 ] - other.data[ i + 2 ];
+
+			// Squared Euclidean distance normalized to 0-1
+			const delta = ( dr * dr + dg * dg + db * db ) / maxDelta;
+
+			if ( delta > threshold * threshold ) {
+
+				numDiffPixels ++;
+
+				// Mark difference in red
+				diff.data[ i ] = 255;
+				diff.data[ i + 1 ] = 0;
+				diff.data[ i + 2 ] = 0;
+				diff.data[ i + 3 ] = 255;
+
+			} else {
+
+				// Dim matching pixels
+				diff.data[ i ] = this.data[ i ] * 0.2;
+				diff.data[ i + 1 ] = this.data[ i + 1 ] * 0.2;
+				diff.data[ i + 2 ] = this.data[ i + 2 ] * 0.2;
+				diff.data[ i + 3 ] = 255;
+
+			}
+
+		}
+
+		return numDiffPixels;
+
+	}
+
 	async write( filepath, quality = 95 ) {
 
 		const rawImageData = {

examples/screenshots/webgpu_shadow_contact.jpg

@@ -1,5 +1,4 @@
 import puppeteer from 'puppeteer';
-import pixelmatch from 'pixelmatch';
 import { Image } from './image.js';
 import * as fs from 'fs/promises';
 import { createServer } from '../../utils/server.js';
@@ -524,16 +523,13 @@ async function makeAttempt( page, failedScreenshots, cleanPage, isMakeScreenshot
 
 			try {
 
-				numDifferentPixels = pixelmatch( expected.bitmap.data, actual.data, diff.bitmap.data, actual.width, actual.height, {
-					threshold: pixelThreshold,
-					alpha: 0.2
-				} );
+				numDifferentPixels = expected.compare( screenshot, diff, pixelThreshold );
 
 			} catch ( e ) {
 
 				await screenshot.write( `test/e2e/output-screenshots/${ file }-actual.jpg`, jpgQuality );
 				await expected.write( `test/e2e/output-screenshots/${ file }-expected.jpg`, jpgQuality );
-				throw new Error( `Image sizes does not match in file: ${ file }` );
+				throw new Error( `Image sizes do not match in file: ${ file }` );
 
 			}