Update deps and examples

Author: raub

.github/workflows/eslint.yml

@@ -26,7 +26,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 22.9.0
+          node-version: 22.14.0
           cache: 'npm'
 
       - name: Install Modules

.github/workflows/publish.yml

@@ -21,7 +21,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 22.9.0
+          node-version: 22.14.0
           cache: 'npm'
 
       - name: Get Package Version
@@ -37,7 +37,7 @@ jobs:
 
       - name: Create Release
         id: create_release
-        uses: softprops/action-gh-release@v1
+        uses: softprops/action-gh-release@v2
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:

.github/workflows/test.yml

@@ -12,7 +12,7 @@ jobs:
   Test:
     strategy:
         matrix:
-          os: [ubuntu-22.04]
+          os: [ubuntu-22.04, ubuntu-22.04-arm, windows-2022, macos-14]
 
     runs-on: ${{ matrix.os }}
 
@@ -26,12 +26,20 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 22.9.0
+          node-version: 22.14.0
           cache: 'npm'
 
       - name: Install Modules
         run: npm ci
 
-      - name: Run Unit Tests
-        if: matrix.os == 'ubuntu-22.04'
+      - name: Tests - Linux
+        if: matrix.os == 'ubuntu-22.04' || matrix.os == 'ubuntu-22.04'
         run: xvfb-run --auto-servernum npm run test-ci
+
+      # - name: Test - Windows
+      #   if: matrix.os == 'windows-2022'
+      #   run: npm run test-ci
+
+      - name: Test - MacOS
+        if: matrix.os == 'macos-14'
+        run: npm run test-ci

examples/palette/palette.mjs

@@ -14,6 +14,8 @@ import { createRenderTarget } from './utils/create-render-target.js';
 import { populateScene } from './utils/populate-scene.js';
 
 
+const IS_PERF_MODE = true;
+
 const hueModes = [
 	'monochromatic', 'analagous', 'complementary', 'triadic', 'tetradic',
 ];
@@ -27,7 +29,8 @@ const {
 	isWebGL2: true,
 	autoEsc: true,
 	autoFullscreen: true,
-	title: 'Palette Swap'
+	title: 'Palette Swap',
+	vsync: !IS_PERF_MODE,
 });
 addThreeHelpers(THREE, gl);
 
@@ -205,6 +208,9 @@ const render = () => {
 	screen.renderer.render(scenePost, cameraOrtho);
 };
 
+let prevTime = Date.now();
+let frames = 0;
+
 loop(() => {
 	controls.update();
 
@@ -213,4 +219,18 @@ loop(() => {
 	}
 
 	render();
+	
+	if (!IS_PERF_MODE) {
+		return;
+	}
+	
+	frames++;
+	const time = Date.now();
+	if (time >= prevTime + 2000) {
+		console.log(
+			'FPS:', Math.floor((frames * 1000) / (time - prevTime)),
+		);
+		prevTime = time;
+		frames = 0;
+	}
 });

examples/palette/profile.txt

@@ -23,6 +23,8 @@ import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { init, addThreeHelpers } from '../../index.js';
 
 
+const IS_PERF_MODE = true;
+
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
 
@@ -33,7 +35,7 @@ const {
 	// isWebGL2: true,
 	autoEsc: true,
 	autoFullscreen: true,
-	vsync: true,
+	vsync: !IS_PERF_MODE,
 	title: 'Postprocessing',
 });
 addThreeHelpers(THREE, gl);
@@ -311,10 +313,13 @@ function createMesh(geometry, scene, scale) {
 }
 
 
+let prevTime = Date.now();
+let frames = 0;
+
 loop(() => {
-	const time = Date.now() * 0.0004;
+	const timedRotation = Date.now() * 0.0004;
 
-	if (mesh) mesh.rotation.y = - time;
+	if (mesh) mesh.rotation.y = -timedRotation;
 
 	renderer.setViewport(0, 0, halfWidth, halfHeight);
 	composerScene.render(delta);
@@ -330,4 +335,18 @@ loop(() => {
 
 	renderer.setViewport(halfWidth, halfHeight, halfWidth, halfHeight);
 	composer4.render(delta);
+	
+	if (!IS_PERF_MODE) {
+		return;
+	}
+	
+	frames++;
+	const time = Date.now();
+	if (time >= prevTime + 1000) {
+		console.log(
+			'FPS:', Math.floor((frames * 1000) / (time - prevTime)),
+		);
+		prevTime = time;
+		frames = 0;
+	}
 });

examples/srgb/package-lock.json

@@ -106,17 +106,6 @@ const _init = (_opts = {}) => {
 	global.Image = Image;
 	global._gl = webgl;
 
-	const loop = (cb) => {
-		let i = 0;
-		
-		const animation = () => {
-			cb(i++);
-			doc.requestAnimationFrame(animation);
-		};
-		
-		doc.requestAnimationFrame(animation);
-	};
-	
 	webgl.canvas = doc;
 
 	const core3d = {
@@ -129,7 +118,7 @@ const _init = (_opts = {}) => {
 		canvas: doc,
 		document: doc,
 		window: doc,
-		loop,
+		loop: doc.loop,
 		requestAnimationFrame : doc.requestAnimationFrame,
 		addThreeHelpers,
 		...require('./math'),