fix: migrate deprecated PCFSoftShadowMap to PCFShadowMap

editor/js/Config.js

@@ -51,6 +51,16 @@ function Config() {
 
 	}
 
+	// PCFSoftShadowMap ( 2 ) was deprecated in favor of PCFShadowMap ( 1 ), which
+	// now performs the same soft shadow filtering. Migrate stale saved values so
+	// old configs stop triggering the deprecation warning.
+	if ( storage[ 'project/renderer/shadowType' ] === 2 ) {
+
+		storage[ 'project/renderer/shadowType' ] = 1;
+		window.localStorage[ name ] = JSON.stringify( storage );
+
+	}
+
 	return {
 
 		getKey: function ( key ) {

editor/js/Menubar.Render.js

@@ -3,7 +3,7 @@ import * as FOUR from '@tnb1j/4js';
 import { UIPanel, UIRow, UIButton, UIInteger, UISelect, UIText } from './libs/ui.js';
 
 import { ViewportPathtracer } from './Viewport.Pathtracer.js';
-import { APP } from './libs/app.js';
+import { APP, getShadowMapType } from './libs/app.js';
 
 function MenubarRender( editor ) {
 
@@ -228,7 +228,7 @@ class RenderImageDialog {
 			renderer.setClearColor( editor.viewportColor );
 
 			if ( project.shadows !== undefined ) renderer.shadowMap.enabled = project.shadows;
-			if ( project.shadowType !== undefined ) renderer.shadowMap.type = project.shadowType;
+			if ( project.shadowType !== undefined ) renderer.shadowMap.type = getShadowMapType( project.shadowType );
 			if ( project.toneMapping !== undefined ) renderer.toneMapping = project.toneMapping;
 			if ( project.toneMappingExposure !== undefined ) renderer.toneMappingExposure = project.toneMappingExposure;
 

editor/js/libs/app.js

@@ -1,5 +1,13 @@
 /* global FOUR */
 
+function getShadowMapType( shadowType ) {
+
+	// PCFSoftShadowMap ( 2 ) was deprecated; PCFShadowMap ( 1 ) now applies the
+	// same soft filtering, so migrate the old value before using it.
+	return shadowType === FOUR.PCFSoftShadowMap ? FOUR.PCFShadowMap : shadowType;
+
+}
+
 const APP = {
 
 	Player: function () {
@@ -48,7 +56,7 @@ const APP = {
 			renderer.setPixelRatio( window.devicePixelRatio );
 
 			if ( project.shadows !== undefined ) renderer.shadowMap.enabled = project.shadows;
-			if ( project.shadowType !== undefined ) renderer.shadowMap.type = project.shadowType;
+			if ( project.shadowType !== undefined ) renderer.shadowMap.type = getShadowMapType( project.shadowType );
 			if ( project.toneMapping !== undefined ) renderer.toneMapping = project.toneMapping;
 			if ( project.toneMappingExposure !== undefined ) renderer.toneMappingExposure = project.toneMappingExposure;
 
@@ -306,4 +314,4 @@ const APP = {
 
 };
 
-export { APP };
+export { APP, getShadowMapType };

examples/webgpu_custom_fog.html

@@ -67,7 +67,7 @@
 				renderer.toneMapping = FOUR.ACESFilmicToneMapping;
 				renderer.toneMappingExposure = 0.62;
 				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.type = FOUR.PCFSoftShadowMap;
+				renderer.shadowMap.type = FOUR.PCFShadowMap;
 				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
 

examples/webgpu_generator_building.html

@@ -78,7 +78,7 @@
 				renderer.toneMapping = FOUR.ACESFilmicToneMapping;
 				renderer.toneMappingExposure = 0.25;
 				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.type = FOUR.PCFSoftShadowMap;
+				renderer.shadowMap.type = FOUR.PCFShadowMap;
 				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
 

examples/webgpu_generator_city.html

@@ -64,7 +64,7 @@
 				renderer.toneMapping = FOUR.ACESFilmicToneMapping;
 				renderer.toneMappingExposure = 0.45;
 				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.type = FOUR.PCFSoftShadowMap;
+				renderer.shadowMap.type = FOUR.PCFShadowMap;
 				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
 

examples/webgpu_lights_projector.html

@@ -66,7 +66,7 @@
 				document.body.appendChild( renderer.domElement );
 
 				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.type = FOUR.PCFSoftShadowMap;
+				renderer.shadowMap.type = FOUR.PCFShadowMap;
 
 				renderer.toneMapping = FOUR.ACESFilmicToneMapping;
 				renderer.toneMappingExposure = 1;

examples/webgpu_lights_spotlight.html

@@ -62,7 +62,7 @@
 				renderer.toneMappingExposure = 1;
 
 				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.type = FOUR.PCFSoftShadowMap;
+				renderer.shadowMap.type = FOUR.PCFShadowMap;
 
 				scene = new FOUR.Scene();
 

examples/webgpu_postprocessing_sss.html

@@ -126,7 +126,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
 				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.type = FOUR.PCFSoftShadowMap;
+				renderer.shadowMap.type = FOUR.PCFShadowMap;
 				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
 

examples/webgpu_reflection.html

@@ -129,7 +129,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
 				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.type = FOUR.PCFSoftShadowMap;
+				renderer.shadowMap.type = FOUR.PCFShadowMap;
 				renderer.toneMapping = FOUR.ACESFilmicToneMapping;
 				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );

examples/webgpu_shadowmap_csm.html

@@ -98,7 +98,7 @@
 				renderer.setAnimationLoop( animate );
 
 				renderer.shadowMap.enabled = params.shadows;
-				renderer.shadowMap.type = FOUR.PCFSoftShadowMap;
+				renderer.shadowMap.type = FOUR.PCFShadowMap;
 
 				renderer.inspector = new Inspector();
 

examples/webgpu_skinning_instancing_individual.html

@@ -319,7 +319,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
 				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.type = FOUR.PCFSoftShadowMap;
+				renderer.shadowMap.type = FOUR.PCFShadowMap;
 				renderer.toneMapping = FOUR.NeutralToneMapping;
 				renderer.toneMappingExposure = 0.96;
 				renderer.inspector = new Inspector();

manual/examples/shadows-spot-light-with-shadow-radius.html

@@ -39,7 +39,7 @@
 	const canvas = document.querySelector( '#c' );
 	const renderer = new FOUR.WebGLRenderer( { antialias: true, canvas } );
 	renderer.shadowMap.enabled = true;
-	renderer.shadowMap.type = FOUR.PCFSoftShadowMap; // default FOUR.PCFShadowMap
+	renderer.shadowMap.type = FOUR.PCFShadowMap;
 
 	const fov = 45;
 	const aspect = 2; // the canvas default

package.json

@@ -91,6 +91,8 @@
     "test-unit-headful": "node test/unit/puppeteer.unit.js --testPage=UnitTests.html --mode=headful",
     "test-unit-addons": "node test/unit/puppeteer.unit.js --testPage=UnitTestsAddons.html --mode=headless",
     "test-unit-addons-headful": "node test/unit/puppeteer.unit.js --testPage=UnitTestsAddons.html --mode=headful",
+    "test-unit-editor": "node test/unit/puppeteer.unit.js --testPage=UnitTestsEditor.html --mode=headless",
+    "test-unit-editor-headful": "node test/unit/puppeteer.unit.js --testPage=UnitTestsEditor.html --mode=headful",
     "test-e2e": "node test/e2e/puppeteer.js",
     "test-e2e-cov": "node test/e2e/check-coverage.js",
     "test-e2e-webgpu": "node test/e2e/puppeteer.js --webgpu",

test/integration/manual-security.tests.js

@@ -331,24 +331,36 @@ async function testOffscreenExample( browser, baseURL, filename, interact = fals
 
 		}
 
-		await new Promise( resolve => setTimeout( resolve, 1000 ) );
-
-		const screenshot = Buffer.from( await page.screenshot( { encoding: 'binary' } ) );
-		const image = PNG.sync.read( screenshot );
-		const background = Array.from( image.data.subarray( 0, 4 ) );
+		// Software WebGL ( SwiftShader ) can be slow to draw the first frame,
+		// especially for an OffscreenCanvas rendered inside a worker. Poll the
+		// screenshot until the scene is visibly drawn instead of asserting after
+		// a single fixed delay.
 		let changedPixels = 0;
 
-		for ( let i = 0; i < image.data.length; i += 4 ) {
+		for ( let attempt = 0; attempt < 20; attempt ++ ) {
+
+			await new Promise( resolve => setTimeout( resolve, 500 ) );
+
+			const screenshot = Buffer.from( await page.screenshot( { encoding: 'binary' } ) );
+			const image = PNG.sync.read( screenshot );
+			const background = Array.from( image.data.subarray( 0, 4 ) );
+			changedPixels = 0;
+
+			for ( let i = 0; i < image.data.length; i += 4 ) {
+
+				let difference = 0;
+
+				for ( let channel = 0; channel < 4; channel ++ ) {
 
-			let difference = 0;
+					difference += Math.abs( image.data[ i + channel ] - background[ channel ] );
 
-			for ( let channel = 0; channel < 4; channel ++ ) {
+				}
 
-				difference += Math.abs( image.data[ i + channel ] - background[ channel ] );
+				if ( difference > 24 ) changedPixels ++;
 
 			}
 
-			if ( difference > 24 ) changedPixels ++;
+			if ( changedPixels > 500 ) break;
 
 		}
 

test/unit/UnitTestsEditor.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<title>4.js Unit Tests - Using Files in /editor</title>
+		<!-- if we don't set favicon here, we have to intercept the request for it in puppeteer page to prevent console error -->
+		<link rel="icon" type="image/x-icon" href="/files/favicon.ico"/>
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/qunit@2.25.0/qunit/qunit.css">
+	</head>
+	<body>
+
+		<div id="qunit"></div>
+		<div id="qunit-fixture"></div>
+
+		<script src="https://cdn.jsdelivr.net/npm/qunit@2.25.0/qunit/qunit.min.js"></script>
+
+		<script type="importmap">
+			{
+				"imports": {
+					"@tnb1j/4js": "../../build/4.module.js"
+				}
+			}
+		</script>
+		<script type="module">
+			window.QUnit.on( 'runEnd', ( runEnd ) => {
+
+				// using these later in puppeteer.unit.js
+				window._QUnitStats = runEnd.testCounts;
+
+			} );
+		</script>
+
+		<!-- add sources to test below -->
+		<script src="./four.editor.unit.js" type="module"></script>
+	</body>
+</html>

test/unit/editor/app.tests.js

@@ -0,0 +1,29 @@
+import * as FOUR from '@tnb1j/4js';
+import { getShadowMapType } from '../../../editor/js/libs/app.js';
+
+// app.js expects the FOUR namespace to be available on the global scope.
+window.FOUR = FOUR;
+
+export default QUnit.module( 'Editor', () => {
+
+	QUnit.module( 'APP.Player', () => {
+
+		QUnit.test( 'getShadowMapType migrates deprecated PCFSoftShadowMap', ( assert ) => {
+
+			const project = { shadowType: FOUR.PCFSoftShadowMap };
+
+			assert.equal( getShadowMapType( project.shadowType ), FOUR.PCFShadowMap, 'shadowType 2 is applied to the renderer as PCFShadowMap ( 1 )' );
+
+		} );
+
+		QUnit.test( 'getShadowMapType passes through supported types', ( assert ) => {
+
+			assert.equal( getShadowMapType( FOUR.BasicShadowMap ), FOUR.BasicShadowMap, 'BasicShadowMap is unchanged' );
+			assert.equal( getShadowMapType( FOUR.PCFShadowMap ), FOUR.PCFShadowMap, 'PCFShadowMap is unchanged' );
+			assert.equal( getShadowMapType( FOUR.VSMShadowMap ), FOUR.VSMShadowMap, 'VSMShadowMap is unchanged' );
+
+		} );
+
+	} );
+
+} );

test/unit/four.editor.unit.js

@@ -0,0 +1,2 @@
+//editor
+import './editor/app.tests.js';