Migrate to WebGPU

index.html

@@ -40,7 +40,8 @@
 			{
 				"imports": {
 					"three": "./build/Scripts/Libs/three.module.min.js",
-					"three/examples/jsm/loaders/GLTFLoader": "./build/Scripts/Libs/examples/jsm/loaders/GLTFLoader.js"
+					"three/webgpu": "./build/Scripts/Libs/three.webgpu.min.js",
+					"three/tsl": "./build/Scripts/Libs/three.tsl.min.js"
 				}
 			}
 		</script>

main.js

@@ -16,6 +16,7 @@ import { fileURLToPath } from 'url';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
+app.commandLine.appendSwitch('enable-unsafe-webgpu', 'true');
 app.commandLine.appendSwitch('high-dpi-support', 'true');
 app.commandLine.appendSwitch('force-device-scale-factor', '1');
 

src/Common/Interpreter.ts

@@ -9,7 +9,7 @@
         http://rpg-paper-maker.com/index.php/eula.
 */
 
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import { MapObject, Player } from '../Core';
 import { Common, Core, Data, EventCommand, Graphic, Main, Manager, Model, Scene } from '../index';
 

src/Common/Mathf.ts

@@ -9,7 +9,7 @@
         http://rpg-paper-maker.com/index.php/eula.
 */
 
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 
 /**
  * Static math utilities used across the engine.

src/Core/Autotiles.ts

@@ -9,7 +9,7 @@
         http://rpg-paper-maker.com/index.php/eula.
 */
 
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import { Manager } from '../index';
 import { Autotile } from './Autotile';
 import { CustomGeometry } from './CustomGeometry';

src/Core/Battler.ts

@@ -9,8 +9,8 @@
         http://rpg-paper-maker.com/index.php/eula.
 */
 
-import * as THREE from 'three';
-import { MeshPhongMaterial } from 'three';
+import * as THREE from 'three/webgpu';
+import { uniform } from 'three/tsl';
 import {
 	ALIGN,
 	ALIGN_VERTICAL,
@@ -165,8 +165,8 @@ export class Battler {
 			const material = Manager.GL.createMaterial({
 				texture: copiedTexture,
 				uniforms: {
-					colorD: { type: 'v4', value: Manager.GL.screenTone.clone() },
-					offset: { type: 'v2', value: this.animationOffset },
+					colorD: uniform(Manager.GL.screenTone.clone()),
+					offset: uniform(this.animationOffset),
 				},
 			});
 			const { width, height } = Manager.GL.getMaterialTextureSize(material);
@@ -178,7 +178,6 @@ export class Battler {
 			this.mesh.position.set(this.position.x, this.position.y, this.position.z);
 			this.mesh.receiveShadow = true;
 			this.mesh.castShadow = true;
-			this.mesh.customDepthMaterial = material.userData.customDepthMaterial;
 			this.topLeftPosition = new THREE.Vector3(
 				this.position.x - (this.width / 2) * Data.Systems.SQUARE_SIZE,
 				this.position.y + this.height * Data.Systems.SQUARE_SIZE,
@@ -211,7 +210,7 @@ export class Battler {
 	 * Initialize UV mapping for the battler mesh.
 	 * */
 	initializeTexture(): void {
-		const { width, height } = Manager.GL.getMaterialTextureSize(this.mesh.material as MeshPhongMaterial);
+		const { width, height } = Manager.GL.getMaterialTextureSize(this.mesh.material as THREE.MeshPhongNodeMaterial);
 		const w = (this.width * Data.Systems.SQUARE_SIZE) / width;
 		const h = (this.height * Data.Systems.SQUARE_SIZE) / height;
 		const texA = new THREE.Vector2();
@@ -239,7 +238,7 @@ export class Battler {
 					frame = this.frame.value;
 					break;
 			}
-			const { width, height } = Manager.GL.getMaterialTextureSize(this.mesh.material as MeshPhongMaterial);
+			const { width, height } = Manager.GL.getMaterialTextureSize(this.mesh.material as THREE.MeshPhongNodeMaterial);
 			const w = (this.width * Data.Systems.SQUARE_SIZE) / width;
 			const h = (this.height * Data.Systems.SQUARE_SIZE) / height;
 			const x = frame * w;
@@ -277,11 +276,11 @@ export class Battler {
 	 */
 	setActive(active: boolean) {
 		this.active = active;
-		const material = this.mesh.material as THREE.MeshPhongMaterial;
+		const material = this.mesh.material as THREE.MeshPhongNodeMaterial;
 		if (active) {
-			material.userData.uniforms.colorD.value.copy(Manager.GL.screenTone);
+			material.userData.uniforms.colorD = uniform(Manager.GL.screenTone);
 		} else {
-			material.userData.uniforms.colorD.value.copy(Manager.GL.screenTone.clone().subScalar(0.3));
+			material.userData.uniforms.colorD = uniform(Manager.GL.screenTone.clone().subScalar(0.3));
 		}
 	}
 

src/Core/Camera.ts

@@ -9,7 +9,7 @@
         http://rpg-paper-maker.com/index.php/eula.
 */
 
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import { Mathf, ORIENTATION, ScreenResolution } from '../Common';
 import { Data, Manager, Model, Scene } from '../index';
 import { MapObject } from './MapObject';

src/Core/CustomGeometry.ts

@@ -9,7 +9,7 @@
         http://rpg-paper-maker.com/index.php/eula.
 */
 
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import { Mathf } from '../Common';
 
 /**

src/Core/CustomGeometryFace.ts

@@ -9,7 +9,7 @@
         http://rpg-paper-maker.com/index.php/eula.
 */
 
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import { Mathf } from '../Common';
 import { CustomGeometry } from './CustomGeometry';
 

src/Core/Game.ts

@@ -9,7 +9,7 @@
         http://rpg-paper-maker.com/index.php/eula.
 */
 
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import { CHARACTER_KIND, GROUP_KIND, ITEM_KIND, Paths, Platform, Utils } from '../Common';
 import { Data, Manager, Model, Scene } from '../index';
 import { Chrono } from './Chrono';

src/Core/Land.ts

@@ -9,7 +9,7 @@
         http://rpg-paper-maker.com/index.php/eula.
 */
 
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import { Mathf, Utils } from '../Common';
 import { Data } from '../index';
 import { CollisionSquare } from './CollisionSquare';

src/Core/MapElement.ts

@@ -9,7 +9,7 @@
         http://rpg-paper-maker.com/index.php/eula.
 */
 
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import { Utils } from '../Common';
 import { CollisionSquare } from './CollisionSquare';
 import { Position } from './Position';

src/Core/MapObject.ts

@@ -9,7 +9,7 @@
         http://rpg-paper-maker.com/index.php/eula.
 */
 
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import {
 	ELEMENT_MAP_KIND,
 	Mathf,
@@ -59,7 +59,7 @@ class MapObject {
 	public isHero: boolean;
 	public movingState: Record<string, any>;
 	public previousPosition: THREE.Vector3;
-	public mesh: THREE.Mesh<CustomGeometry, THREE.MeshPhongMaterial>;
+	public mesh: THREE.Mesh<CustomGeometry, THREE.MeshPhongNodeMaterial>;
 	public meshBoundingBox: THREE.Mesh<CustomGeometry, THREE.Material | THREE.Material[]>[];
 	public currentBoundingBox: THREE.Mesh<CustomGeometry, THREE.Material | THREE.Material[]>;
 	public boundingBoxSettings: Record<string, any>;
@@ -658,7 +658,6 @@ class MapObject {
 			if (Scene.Map.current.mapProperties.isSunLight) {
 				this.mesh.receiveShadow = true;
 				this.mesh.castShadow = true;
-				this.mesh.customDepthMaterial = material.userData.customDepthMaterial;
 			}
 			this.mesh.position.set(this.position.x, this.position.y, this.position.z);
 			this.mesh.renderOrder = 1;
@@ -1519,7 +1518,7 @@ class MapObject {
 			!this.isNone() &&
 			this.currentStateInstance.graphicKind !== ELEMENT_MAP_KIND.OBJECT_3D
 		) {
-			const { width, height } = Manager.GL.getMaterialTextureSize(this.mesh.material as THREE.MeshPhongMaterial);
+			const { width, height } = Manager.GL.getMaterialTextureSize(this.mesh.material as THREE.MeshPhongNodeMaterial);
 			let w: number, h: number, x: number, y: number;
 			if (this.currentStateInstance.graphicID === 0) {
 				w = (this.width * Data.Systems.SQUARE_SIZE) / width;

src/Core/MapPortion.ts

@@ -9,7 +9,7 @@
         http://rpg-paper-maker.com/index.php/eula.
 */
 
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import { Constants, CUSTOM_SHAPE_KIND, ELEMENT_MAP_KIND, SHAPE_KIND } from '../Common';
 import { Data, Manager, Model, Scene } from '../index';
 import { Autotile } from './Autotile';
@@ -204,7 +204,6 @@ class MapPortion {
 			if (Scene.Map.current.mapProperties.isSunLight) {
 				this.staticFloorsMesh.receiveShadow = true;
 				this.staticFloorsMesh.castShadow = true;
-				this.staticFloorsMesh.customDepthMaterial = material.userData.customDepthMaterial;
 			}
 			Scene.Map.current.scene.add(this.staticFloorsMesh);
 		}
@@ -216,7 +215,6 @@ class MapPortion {
 						if (Scene.Map.current.mapProperties.isSunLight) {
 							autotiles.mesh.receiveShadow = true;
 							autotiles.mesh.castShadow = true;
-							autotiles.mesh.customDepthMaterial = autotiles.bundle.material.userData.customDepthMaterial;
 						}
 						Scene.Map.current.scene.add(autotiles.mesh);
 					}
@@ -294,7 +292,6 @@ class MapPortion {
 			if (Scene.Map.current.mapProperties.isSunLight) {
 				this.staticSpritesMesh.receiveShadow = true;
 				this.staticSpritesMesh.castShadow = true;
-				this.staticSpritesMesh.customDepthMaterial = material.userData.customDepthMaterial;
 			}
 			Scene.Map.current.scene.add(this.staticSpritesMesh);
 		}
@@ -305,7 +302,6 @@ class MapPortion {
 			if (Scene.Map.current.mapProperties.isSunLight) {
 				this.faceSpritesMesh.castShadow = true;
 				this.faceSpritesMesh.receiveShadow = true;
-				this.faceSpritesMesh.customDepthMaterial = material.userData.customDepthMaterial;
 			}
 			Scene.Map.current.scene.add(this.faceSpritesMesh);
 		}
@@ -327,7 +323,7 @@ class MapPortion {
 			}
 			// Constructing the geometry
 			let obj = hash.get(sprite.id);
-			let material: THREE.MeshPhongMaterial;
+			let material: THREE.MeshPhongNodeMaterial;
 			let geometry: CustomGeometry;
 			let count: number;
 			if (obj) {
@@ -363,7 +359,6 @@ class MapPortion {
 				if (Scene.Map.current.mapProperties.isSunLight) {
 					mesh.receiveShadow = true;
 					mesh.castShadow = true;
-					mesh.customDepthMaterial = obj.material.userData.customDepthMaterial;
 				}
 				mesh.layers.enable(1);
 				this.staticWallsList.push(mesh);
@@ -418,7 +413,6 @@ class MapPortion {
 				if (Scene.Map.current.mapProperties.isSunLight) {
 					mountains.mesh.receiveShadow = true;
 					mountains.mesh.castShadow = true;
-					mountains.mesh.customDepthMaterial = mountains.bundle.material.userData.customDepthMaterial;
 				}
 				mountains.mesh.layers.enable(1);
 				Scene.Map.current.scene.add(mountains.mesh);
@@ -491,7 +485,7 @@ class MapPortion {
 
 				// Constructing the geometry
 				let obj = hash.get(pictureID);
-				let material: THREE.MeshPhongMaterial;
+				let material: THREE.MeshPhongNodeMaterial;
 				let geometry: CustomGeometry;
 				let count: number;
 				if (obj) {
@@ -536,7 +530,6 @@ class MapPortion {
 				if (Scene.Map.current.mapProperties.isSunLight) {
 					mesh.receiveShadow = true;
 					mesh.castShadow = true;
-					mesh.customDepthMaterial = obj.material.userData.customDepthMaterial;
 				}
 				mesh.layers.enable(1);
 				Scene.Map.current.scene.add(mesh);

src/Core/Mountain.ts

@@ -9,7 +9,7 @@
         http://rpg-paper-maker.com/index.php/eula.
 */
 
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import { Utils } from '../Common';
 import { Data, Model } from '../index';
 import { CustomGeometry } from './CustomGeometry';

src/Core/Mountains.ts

@@ -9,7 +9,7 @@
         http://rpg-paper-maker.com/index.php/eula.
 */
 
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import { Manager } from '../index';
 import { CustomGeometry } from './CustomGeometry';
 import { StructMapElementCollision } from './MapElement';

src/Core/Object3D.ts

@@ -9,7 +9,7 @@
         http://rpg-paper-maker.com/index.php/eula.
 */
 
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import { Model } from '..';
 import { CustomGeometry } from './CustomGeometry';
 import { MapElement, StructMapElementCollision } from './MapElement';

src/Core/Object3DBox.ts

@@ -9,7 +9,7 @@
         http://rpg-paper-maker.com/index.php/eula.
 */
 
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import { Mathf, OBJECT_COLLISION_KIND } from '../Common';
 import { Data, Model } from '../index';
 import { CustomGeometry } from './CustomGeometry';

src/Core/Object3DCustom.ts

@@ -9,7 +9,7 @@
         http://rpg-paper-maker.com/index.php/eula.
 */
 
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import { CUSTOM_SHAPE_KIND, Mathf, OBJECT_COLLISION_KIND } from '../Common';
 import { Data, Model } from '../index';
 import { CustomGeometry } from './CustomGeometry';

src/Core/Portion.ts

@@ -9,7 +9,7 @@
         http://rpg-paper-maker.com/index.php/eula.
 */
 
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import { Constants } from '../Common';
 import { Data } from '../index';
 

src/Core/Position.ts

@@ -9,7 +9,7 @@
         http://rpg-paper-maker.com/index.php/eula.
 */
 
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import { Constants, Mathf } from '../Common';
 import { Data } from '../index';
 import { Portion } from './Portion';

src/Core/Sprite.ts

@@ -9,7 +9,7 @@
         http://rpg-paper-maker.com/index.php/eula.
 */
 
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import { ELEMENT_MAP_KIND, Mathf, Utils } from '../Common';
 import { Core, Data, Scene } from '../index';
 import { CustomGeometry } from './CustomGeometry';

src/Core/SpriteWall.ts

@@ -9,7 +9,7 @@
         http://rpg-paper-maker.com/index.php/eula.
 */
 
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import { PICTURE_KIND } from '../Common';
 import { Data } from '../index';
 import { CustomGeometry } from './CustomGeometry';

src/Core/TextureBundle.ts

@@ -9,15 +9,15 @@
         http://rpg-paper-maker.com/index.php/eula.
 */
 
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import { Rectangle } from './Rectangle';
 
 /** @class
  *  Several textures in a single file.
  */
 class TextureBundle {
 	public list: any[][];
-	public material: THREE.MeshPhongMaterial;
+	public material: THREE.MeshPhongNodeMaterial;
 	public beginID: number;
 	public beginPoint: number[];
 	public endID: number;