Puppeteer E2E test: many changes

.github/CONTRIBUTING.md

@@ -28,15 +28,10 @@ As per the npm standard, ‘start’ is the place to begin the package.
 
 This script will start a local server similar to [threejs.org](https://threejs.org/), but instead will be hosted on your local machine. Browse to http://localhost:8080/ to check it out. It also automatically creates the ‘build/three.js’ and ‘build/three.module.js’ scripts anytime there is a change within your three.js directory.
 
-The next most important script runs all the appropriate testing. The E-2-E testing is intended to be run by github actions.
-
-Run this command from the root folder to install test dependencies.
-
-    npm install --prefix test
-
-And run tests.
+Next two important scripts run all the appropriate testing. The second one can take quite a long time and installs ~200 MB Chromium browser, so it is not included in the first one, is not compulsory to be run, and is primarily intended to be run only by GitHub Actions.
 
     npm test
+    npm test-e2e
 
 The linting is there to keep a consistent code style across all of the code and the testing is there to help catch bugs and check that the code behaves as expected. It is important that neither of these steps comes up with any errors due to your changes.
 
@@ -72,16 +67,13 @@ When you’ve decided to make changes, start with the following:
 * Don't include any build files in your commit.
 * Not all new features will need a new example. Simpler features could be incorporated into an existing example. Bigger features may be asked to add an example demonstrating the feature.
 * Making changes may require changes to the documentation. To update the docs in other languages, simply copy the English to begin with.
-* it's good to also add an example and screenshot for it, for showing how it's used and for end-to-end testing.
+* It's good to also add an example and screenshot for it, for showing how it's used and for end-to-end testing.
 * If you modify existing code, run relevant examples to check they didn't break and there wasn't performance regress.
 * If you add some assets for the examples (models, textures, sounds, etc), make sure they have a proper license allowing for their use here, less restrictive the better. It is unlikely for large assets to be accepted.
 * If some issue is relevant to the patch/feature, please mention it with a hash (e.g. #2774) in a commit message to get cross-reference in GitHub.
-* If you modify files in `examples/jsm` directory, then don't perform any changes in the `examples/js`, non-module files are auto-generated by running `npm run build-examples`.
-* If the end-to-end test failed in Travis and you are sure that all is correct, make a new screenshot with
-
-      npm run make-screenshot <example_1_name> ...<example_N_name>
-
-* Once done with a patch/feature do not add more commits to a feature branch
+* If you modify files in `examples/jsm` directory, then don't perform any changes in the `examples/js`, non-module files are auto-generated.
+* If the end-to-end test failed and you are sure that all is correct, follow the instructions it outputs.
+* Once done with a patch/feature do not add more commits to a feature branch.
 * Create separate branches per patch or feature.
 * If you make a PR but it is not actually ready to be pulled into the dev branch then please [convert it to a draft PR](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/changing-the-stage-of-a-pull-request#converting-a-pull-request-to-a-draft).
 

.github/workflows/ci.yml

@@ -13,22 +13,21 @@ on:
       - 'files/**'
 
 jobs:
-
   lint:
-    name: "Linting"
+    name: "Lint testing"
     runs-on: ubuntu-latest
     steps:
       - name: Git checkout
         uses: actions/checkout@v2
-      - name: Install node
+      - name: Install Node
         uses: actions/setup-node@v2
         with:
           node-version: 16
           cache: 'npm'
       - name: Install packages
         run: npm ci
 
-      - name: === Linting ===
+      - name: === Lint testing ===
         run: npm run lint
 
   unit:
@@ -37,15 +36,13 @@ jobs:
     steps:
       - name: Git checkout
         uses: actions/checkout@v2
-      - name: Install node
+      - name: Install Node
         uses: actions/setup-node@v2
         with:
           node-version: 16
           cache: 'npm'
       - name: Install packages
-        run: |
-          npm ci
-          npm ci --prefix test
+        run: npm ci
       - name: Build
         run: npm run build
 
@@ -54,39 +51,37 @@ jobs:
 
   e2e:
     name: "E2E testing"
-    runs-on: ubuntu-latest
+    runs-on: ${{ matrix.os }}
     strategy:
+      fail-fast: false
       matrix:
-        CI: [ 0, 1, 2, 3, 4, 5, 6, 7 ]
+        os: [windows-latest, ubuntu-latest, macos-latest]
     env:
-      CI: ${{ matrix.CI }}
       FORCE_COLOR: 1
+      CI: true
     steps:
       - name: Git checkout
         uses: actions/checkout@v2
-      - name: Install node
+      - name: Install Node
         uses: actions/setup-node@v2
         with:
           node-version: 16
           cache: 'npm'
       - name: Install packages
-        run: |
-          npm ci
-          npm ci --prefix test
-          sudo apt-get install xvfb
+        run: npm ci
       - name: Build
         run: npm run build
 
       - name: === E2E testing ===
-        run: xvfb-run --auto-servernum npm run test-e2e
+        run: npm run test-e2e
 
   e2e-cov:
-    name: "Ready for release"
+    name: "Examples ready for release"
     runs-on: ubuntu-latest
     steps:
       - name: Git checkout
         uses: actions/checkout@v2
-      - name: Install node
+      - name: Install Node
         uses: actions/setup-node@v2
         with:
           node-version: 16

.gitignore

@@ -24,4 +24,6 @@ test/treeshake/index-src.bundle.min.js
 test/treeshake/stats.html
 
 
-**/node_modules
+**/node_modules
+
+examples/output-screenshots/

examples/css2d_label.html

@@ -66,7 +66,7 @@
 
 				}
 
-			}
+			};
 
 			const clock = new THREE.Clock();
 			const textureLoader = new THREE.TextureLoader();

examples/index.html

@@ -209,7 +209,7 @@ <h1><a href="https://threejs.org">three.js</a></h1>
 				<div class="card">
 					<a href="${ file }.html" target="viewer">
 						<div class="cover">
-							<img src="screenshots/${ file }.jpg" loading="lazy" width="400" />
+							<img src="screenshots/${ file }.png" loading="lazy" width="400" />
 						</div>
 						<div class="title">${ getName( file ) }${ external }</div>
 					</a>
@@ -312,10 +312,8 @@ <h1><a href="https://threejs.org">three.js</a></h1>
 		function filterExample( file, exp, tags ) {
 
 			const link = links[ file ];
-			const name = getName( file );
 			if ( file in tags ) file += ' ' + tags[ file ].join( ' ' );
 			const res = file.match( exp );
-			let text;
 
 			if ( res && res.length > 0 ) {
 

examples/jsm/controls/ArcballControls.js

@@ -2296,15 +2296,15 @@ class ArcballControls extends EventDispatcher {
 
 		//
 
-		this._gizmos.traverse( function( object ) {
+		this._gizmos.traverse( function ( object ) {
 
 			if ( object.isLine ) {
-		
+
 				object.geometry.dispose();
 				object.material.dispose();
-		
+
 			}
-		
+
 		} );
 
 		this._gizmos.clear();

examples/jsm/exporters/GLTFExporter.js

@@ -742,15 +742,15 @@ class GLTFWriter {
 
 					return ( c < 0.04045 ) ? c * 0.0773993808 : Math.pow( c * 0.9478672986 + 0.0521327014, 2.4 );
 
-				}
+				};
 
 			}
 
 			return function LinearToLinear( c ) {
 
 				return c;
 
-			}
+			};
 
 		}
 

examples/jsm/loaders/LDrawLoader.js

@@ -2413,8 +2413,7 @@ class LDrawLoader extends Loader {
 
 				lum = parseInt( token.substring( 9 ) );
 
-			}
-			else {
+			} else {
 
 				lum = parseInt( token );
 

examples/jsm/nodes/Nodes.js

@@ -80,7 +80,7 @@ import JoinNode from './utils/JoinNode.js';
 import MatcapUVNode from './utils/MatcapUVNode.js';
 import MaxMipLevelNode from './utils/MaxMipLevelNode.js';
 import OscNode from './utils/OscNode.js';
-import RotateUVNode from './utils/RotateUVNode.js'
+import RotateUVNode from './utils/RotateUVNode.js';
 import SplitNode from './utils/SplitNode.js';
 import SpriteSheetUVNode from './utils/SpriteSheetUVNode.js';
 import TimerNode from './utils/TimerNode.js';

examples/jsm/nodes/accessors/ReflectVectorNode.js

@@ -14,7 +14,7 @@ class ReflectVectorNode extends Node {
 
 	getHash( /*builder*/ ) {
 
-		return `reflectVector`;
+		return 'reflectVector';
 
 	}
 

examples/jsm/nodes/display/ColorAdjustmentNode.js

@@ -22,16 +22,16 @@ const vibranceNode = new ShaderNode( ( { color, adjustment } ) => {
 	const average = div( add( color.r, color.g, color.b ), 3.0 );
 
 	const mx = max( color.r, max( color.g, color.b ) );
-	const amt = mul( sub( mx, average ), mul( -3.0, adjustment ) );
+	const amt = mul( sub( mx, average ), mul( - 3.0, adjustment ) );
 
 	return mix( color.rgb, vec3( mx ), amt );
 
 } );
 
 const hueNode = new ShaderNode( ( { color, adjustment } ) => {
 
-	const RGBtoYIQ = mat3( 0.299, 0.587, 0.114, 0.595716, -0.274453, -0.321263, 0.211456, -0.522591, 0.311135 );
-	const YIQtoRGB = mat3( 1.0, 0.9563, 0.6210, 1.0, -0.2721, -0.6474, 1.0, -1.107, 1.7046 );
+	const RGBtoYIQ = mat3( 0.299, 0.587, 0.114, 0.595716, - 0.274453, - 0.321263, 0.211456, - 0.522591, 0.311135 );
+	const YIQtoRGB = mat3( 1.0, 0.9563, 0.6210, 1.0, - 0.2721, - 0.6474, 1.0, - 1.107, 1.7046 );
 
 	const yiq = mul( RGBtoYIQ, color );
 

examples/misc_controls_fly.html

@@ -93,9 +93,9 @@
 
 					specular: 0x333333,
 					shininess: 15,
-					map: textureLoader.load( "textures/planets/earth_atmos_2048.jpg" ),
-					specularMap: textureLoader.load( "textures/planets/earth_specular_2048.jpg" ),
-					normalMap: textureLoader.load( "textures/planets/earth_normal_2048.jpg" ),
+					map: textureLoader.load( 'textures/planets/earth_atmos_2048.jpg' ),
+					specularMap: textureLoader.load( 'textures/planets/earth_specular_2048.jpg' ),
+					normalMap: textureLoader.load( 'textures/planets/earth_normal_2048.jpg' ),
 
 					// y scale is negated to compensate for normal map handedness.
 					normalScale: new THREE.Vector2( 0.85, - 0.85 )
@@ -115,7 +115,7 @@
 
 				const materialClouds = new THREE.MeshLambertMaterial( {
 
-					map: textureLoader.load( "textures/planets/earth_clouds_1024.png" ),
+					map: textureLoader.load( 'textures/planets/earth_clouds_1024.png' ),
 					transparent: true
 
 				} );
@@ -129,7 +129,7 @@
 
 				const materialMoon = new THREE.MeshPhongMaterial( {
 
-					map: textureLoader.load( "textures/planets/moon_1024.jpg" )
+					map: textureLoader.load( 'textures/planets/moon_1024.jpg' )
 
 				} );
 

examples/misc_exporter_collada.html

@@ -381,6 +381,7 @@
 						colors.push( r * 128, 0, b * 128 );
 
 					}
+
 					teapot.geometry.setAttribute( 'color', new THREE.Uint8BufferAttribute( colors, 3, true ) );
 					teapot.material.vertexColors = true;
 					teapot.material.needsUpdate = true;