diff --git a/index.html b/index.html index dde227d5..86114336 100644 --- a/index.html +++ b/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" } } diff --git a/main.js b/main.js index 84002978..85940bd7 100644 --- a/main.js +++ b/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'); diff --git a/src/Common/Interpreter.ts b/src/Common/Interpreter.ts index ffcb8ac7..dadb8fff 100644 --- a/src/Common/Interpreter.ts +++ b/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'; diff --git a/src/Common/Mathf.ts b/src/Common/Mathf.ts index ce696e11..9b2ec0c2 100644 --- a/src/Common/Mathf.ts +++ b/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. diff --git a/src/Core/Autotiles.ts b/src/Core/Autotiles.ts index 5a067c58..04cd4757 100644 --- a/src/Core/Autotiles.ts +++ b/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'; diff --git a/src/Core/Battler.ts b/src/Core/Battler.ts index 41aab692..b80d3d73 100644 --- a/src/Core/Battler.ts +++ b/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)); } } diff --git a/src/Core/Camera.ts b/src/Core/Camera.ts index b80b4519..e0ebdf16 100644 --- a/src/Core/Camera.ts +++ b/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'; diff --git a/src/Core/CustomGeometry.ts b/src/Core/CustomGeometry.ts index 4de98877..08256376 100644 --- a/src/Core/CustomGeometry.ts +++ b/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'; /** diff --git a/src/Core/CustomGeometryFace.ts b/src/Core/CustomGeometryFace.ts index ded71308..5784a896 100644 --- a/src/Core/CustomGeometryFace.ts +++ b/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'; diff --git a/src/Core/Game.ts b/src/Core/Game.ts index e44f34e6..37a6b835 100644 --- a/src/Core/Game.ts +++ b/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'; diff --git a/src/Core/Land.ts b/src/Core/Land.ts index 013fe462..de46f29b 100644 --- a/src/Core/Land.ts +++ b/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'; diff --git a/src/Core/MapElement.ts b/src/Core/MapElement.ts index 692a459a..5e0f63c4 100644 --- a/src/Core/MapElement.ts +++ b/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'; diff --git a/src/Core/MapObject.ts b/src/Core/MapObject.ts index 330e9f21..474ccb38 100644 --- a/src/Core/MapObject.ts +++ b/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; public previousPosition: THREE.Vector3; - public mesh: THREE.Mesh; + public mesh: THREE.Mesh; public meshBoundingBox: THREE.Mesh[]; public currentBoundingBox: THREE.Mesh; public boundingBoxSettings: Record; @@ -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; diff --git a/src/Core/MapPortion.ts b/src/Core/MapPortion.ts index c5488940..f723a354 100644 --- a/src/Core/MapPortion.ts +++ b/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); diff --git a/src/Core/Mountain.ts b/src/Core/Mountain.ts index 5651a6a6..c2be91ca 100644 --- a/src/Core/Mountain.ts +++ b/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'; diff --git a/src/Core/Mountains.ts b/src/Core/Mountains.ts index 246e771c..63f5ab78 100644 --- a/src/Core/Mountains.ts +++ b/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'; diff --git a/src/Core/Object3D.ts b/src/Core/Object3D.ts index 07e6d021..ac3d9bf5 100644 --- a/src/Core/Object3D.ts +++ b/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'; diff --git a/src/Core/Object3DBox.ts b/src/Core/Object3DBox.ts index 52d70f50..3e9c9cb8 100644 --- a/src/Core/Object3DBox.ts +++ b/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'; diff --git a/src/Core/Object3DCustom.ts b/src/Core/Object3DCustom.ts index 0dfa54fe..29e45993 100644 --- a/src/Core/Object3DCustom.ts +++ b/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'; diff --git a/src/Core/Portion.ts b/src/Core/Portion.ts index bb351da6..158979a5 100644 --- a/src/Core/Portion.ts +++ b/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'; diff --git a/src/Core/Position.ts b/src/Core/Position.ts index 35426a7f..a32166ec 100644 --- a/src/Core/Position.ts +++ b/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'; diff --git a/src/Core/Sprite.ts b/src/Core/Sprite.ts index f9d4aa82..90b3898c 100644 --- a/src/Core/Sprite.ts +++ b/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'; diff --git a/src/Core/SpriteWall.ts b/src/Core/SpriteWall.ts index 74692e81..ace9b999 100644 --- a/src/Core/SpriteWall.ts +++ b/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'; diff --git a/src/Core/TextureBundle.ts b/src/Core/TextureBundle.ts index 12c0f5e2..ac81a5ec 100644 --- a/src/Core/TextureBundle.ts +++ b/src/Core/TextureBundle.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 { Rectangle } from './Rectangle'; /** @class @@ -17,7 +17,7 @@ import { Rectangle } from './Rectangle'; */ class TextureBundle { public list: any[][]; - public material: THREE.MeshPhongMaterial; + public material: THREE.MeshPhongNodeMaterial; public beginID: number; public beginPoint: number[]; public endID: number; diff --git a/src/Data/Pictures.ts b/src/Data/Pictures.ts index 088ea16a..6164cbd5 100644 --- a/src/Data/Pictures.ts +++ b/src/Data/Pictures.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 '..'; import { Paths, PICTURE_KIND, Platform } from '../Common'; import { Picture2D } from '../Core'; @@ -33,8 +33,8 @@ export class Pictures { private static PROPERTY_TEXTURES_CHARACTERS = 'texturesCharacters'; private static PROPERTY_TEXTURES_BATTLERS = 'texturesBattlers'; private static list: Map>; - public static texturesCharacters: Map; - public static texturesBattlers: Map; + public static texturesCharacters: Map; + public static texturesBattlers: Map; /** * Get a picture by kind and ID. @@ -66,7 +66,7 @@ export class Pictures { */ static async loadTextures(pictureKind: PICTURE_KIND, texturesName: string) { const pictures = this.getListByKind(pictureKind); - const textures = new Map(); + const textures = new Map(); textures.set(0, Manager.GL.loadTextureEmpty()); for (const [id, picture] of pictures.entries()) { if (picture) { diff --git a/src/Data/SpecialElements.ts b/src/Data/SpecialElements.ts index b18fda54..f6deb545 100644 --- a/src/Data/SpecialElements.ts +++ b/src/Data/SpecialElements.ts @@ -9,7 +9,8 @@ http://rpg-paper-maker.com/index.php/eula. */ -import * as THREE from 'three'; +import * as THREE from 'three/webgpu'; +import { uniform } from 'three/tsl'; import { Constants, Paths, PICTURE_KIND, Platform, Utils } from '../Common'; import { Autotiles, Game, Picture2D, TextureBundle } from '../Core'; import { Data, Manager, Scene } from '../index'; @@ -45,8 +46,8 @@ export class SpecialElements { private static mountains: Map; private static objects: Map; private static texturesAutotiles: Map = new Map(); - private static texturesWalls: Map = new Map(); - private static texturesObjects3D: Map = new Map(); + private static texturesWalls: Map = new Map(); + private static texturesObjects3D: Map = new Map(); private static texturesMountains: Map = new Map(); /** @@ -283,16 +284,14 @@ export class SpecialElements { texture.image = await Picture2D.loadImage(Platform.canvasRendering.toDataURL()); texture.needsUpdate = true; textureAutotile.material = Manager.GL.createMaterial({ texture }); - textureAutotile.material.userData.uniforms.offset.value = textureAutotile.isAnimated - ? Scene.Map.autotilesOffset - : new THREE.Vector2(); + textureAutotile.material.userData.uniforms.offset = uniform(textureAutotile.isAnimated ? Scene.Map.autotilesOffset : new THREE.Vector2()); this.texturesAutotiles.get(id).push(textureAutotile); } /** * Load the wall texture. */ - static async loadWallTexture(id: number): Promise { + static async loadWallTexture(id: number): Promise { const wall = this.getWall(id); let pictureID = Game.current.textures.walls[id]; if (pictureID === undefined) { @@ -319,7 +318,7 @@ export class SpecialElements { /** * Load a wall texture. */ - static async loadTextureWall(picture: Picture, id: number): Promise { + static async loadTextureWall(picture: Picture, id: number): Promise { const picture2D = await Picture2D.create(picture); const texture = new THREE.Texture(); const w = picture2D.image.width; @@ -598,7 +597,7 @@ export class SpecialElements { /** * Load the 3D object texture. * */ - static async loadObject3DTexture(id: number): Promise { + static async loadObject3DTexture(id: number): Promise { const object3D = this.getObject3D(id); let pictureID = Game.current.textures.objects3D[id]; if (pictureID === undefined) { diff --git a/src/EventCommand/MoveCamera.ts b/src/EventCommand/MoveCamera.ts index 2258cce9..9703cadf 100644 --- a/src/EventCommand/MoveCamera.ts +++ b/src/EventCommand/MoveCamera.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 { Inputs, Mathf, Utils } from '../Common'; import { MapObject, StructSearchResult } from '../Core'; import { Data, Manager, Model, Scene } from '../index'; diff --git a/src/EventCommand/MoveObject.ts b/src/EventCommand/MoveObject.ts index 4365c61b..33db0b23 100644 --- a/src/EventCommand/MoveObject.ts +++ b/src/EventCommand/MoveObject.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 { COMMAND_MOVE_KIND, ELEMENT_MAP_KIND, diff --git a/src/Manager/Collisions.ts b/src/Manager/Collisions.ts index aefd6bf0..d4205de9 100644 --- a/src/Manager/Collisions.ts +++ b/src/Manager/Collisions.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, Mathf, ORIENTATION } from '../Common'; import { CollisionSquare, @@ -29,9 +29,9 @@ import { Data, Manager, Model, Scene } from '../index'; * @static */ class Collisions { - public static BB_MATERIAL = new THREE.MeshBasicMaterial(); - public static BB_MATERIAL_DETECTION = new THREE.MeshBasicMaterial(); - public static BB_EMPTY_MATERIAL = new THREE.MeshBasicMaterial({ visible: false }); + public static BB_MATERIAL = new THREE.MeshBasicNodeMaterial(); + public static BB_MATERIAL_DETECTION = new THREE.MeshBasicNodeMaterial(); + public static BB_EMPTY_MATERIAL = new THREE.MeshBasicNodeMaterial({ visible: false }); public static BB_BOX = Collisions.createBox(); public static BB_ORIENTED_BOX = Collisions.createOrientedBox(); private static BB_BOX_DETECTION = Collisions.createBox(true); diff --git a/src/Manager/GL.ts b/src/Manager/GL.ts index 7088a5e4..c99a0d27 100644 --- a/src/Manager/GL.ts +++ b/src/Manager/GL.ts @@ -9,8 +9,10 @@ http://rpg-paper-maker.com/index.php/eula. */ -import * as THREE from 'three'; -import { Paths, Platform, ScreenResolution, Utils } from '../Common'; +import * as THREE from 'three/webgpu'; +import { uniform, uv, mix, Fn, vec2, vec3, vec4, texture, If, dot, lights, normalView, BRDF_Lambert, diffuseColor } from 'three/tsl'; +import { FnNode } from 'three/src/nodes/TSL.js'; +import { Platform, ScreenResolution, Utils } from '../Common'; import { Camera } from '../Core'; import { Data, Model } from '../index'; import { Stack } from './Stack'; @@ -22,10 +24,14 @@ import { Stack } from './Stack'; class GL { public static SHADER_FIX_VERTEX: string; public static SHADER_FIX_FRAGMENT: string; - public static renderer: THREE.WebGLRenderer; + public static renderer: THREE.WebGPURenderer; public static textureLoader = new THREE.TextureLoader(); public static raycaster = new THREE.Raycaster(); public static screenTone = new THREE.Vector4(0, 0, 0, 1); + public static allLights = []; + public static colorShader: FnNode>; + public static lightingModel: THREE.LightingModel; + public static lightingModelContext: THREE.LightsNode; constructor() { throw new Error('This is a static class'); @@ -35,8 +41,8 @@ class GL { * Initialize the openGL stuff. * @static */ - static initialize() { - this.renderer = new THREE.WebGLRenderer({ antialias: Data.Systems.antialias, alpha: true }); + static async initialize() { + this.renderer = new THREE.WebGPURenderer({ antialias: Data.Systems.antialias, alpha: true }); this.renderer.autoClear = false; this.renderer.setSize(ScreenResolution.CANVAS_WIDTH, ScreenResolution.CANVAS_HEIGHT, true); this.renderer.shadowMap.enabled = true; @@ -44,6 +50,7 @@ class GL { if (Data.Systems.antialias) { this.renderer.setPixelRatio(2); } + await this.renderer.init(); document.body.appendChild(this.renderer.domElement); } @@ -53,10 +60,28 @@ class GL { */ static async load() { // Shaders - let json = await Platform.loadFile(Paths.SHADERS + 'default.vert', true); - this.SHADER_FIX_VERTEX = json; - json = await Platform.loadFile(Paths.SHADERS + 'default.frag', true); - this.SHADER_FIX_FRAGMENT = json; + this.colorShader = Fn(({ m, u }: any) => + { + const coords = vec2(uv().add(u.offset)).mul(vec2(m.map.repeat)); + const tex = texture(m.map, coords); + const color = vec3(tex).add(vec3(u.colorD)); + const intensity = vec3(dot(color, vec3(0.2125, 0.7154, 0.0721))); + return vec4(mix(intensity, color, u.colorD.w), tex.a); + }); + this.lightingModel = new THREE.LightingModel(); + this.lightingModel.direct = function({ lightDirection, lightColor, reflectedLight }: any) + { + const dotNL = normalView.dot(lightDirection).clamp(); + const irradiance = dotNL.mul(lightColor); + reflectedLight.directDiffuse.addAssign(irradiance.mul(vec4(BRDF_Lambert({ diffuseColor: diffuseColor.rgb })))); + }; + this.lightingModel.indirect = function(builder: any) + { + const { ambientOcclusion, irradiance, reflectedLight } = builder.context; + reflectedLight.indirectDiffuse.addAssign(irradiance.mul(BRDF_Lambert({ diffuseColor }))); + reflectedLight.indirectDiffuse.mulAssign(ambientOcclusion); + }; + this.lightingModelContext = (lights(this.allLights) as any).context({ lightingModel : this.lightingModel }); } /** @@ -81,7 +106,7 @@ class GL { * @param {string} path - The path of the texture * @returns {Promise} */ - static async loadTexture(path: string): Promise { + static async loadTexture(path: string): Promise { const texture: THREE.Texture = await new Promise((resolve, reject) => { this.textureLoader.load( path, @@ -109,28 +134,22 @@ class GL { * Load a texture empty. * @returns {THREE.Material} */ - static loadTextureEmpty(): THREE.MeshPhongMaterial { - const material = new THREE.MeshPhongMaterial(); - material.userData.uniforms = { - t: { value: undefined }, - }; - return material; + static loadTextureEmpty(): THREE.MeshPhongNodeMaterial { + return new THREE.MeshPhongNodeMaterial(); } /** * Create a material from texture. - * @returns {THREE.MeshPhongMaterial} + * @returns {THREE.MeshPhongNodeMaterial} */ static createMaterial(opts: { texture?: THREE.Texture | null; - flipX?: boolean; flipY?: boolean; - uniforms?: Record; side?: THREE.Side; - repeat?: number; + uniforms?: Record; opacity?: number; shadows?: boolean; - }): THREE.MeshPhongMaterial { + }): THREE.MeshPhongNodeMaterial { if (!opts.texture) { opts.texture = new THREE.Texture(); } @@ -139,80 +158,40 @@ class GL { opts.texture.flipY = opts.flipY ? true : false; opts.texture.wrapS = THREE.RepeatWrapping; opts.texture.wrapT = THREE.RepeatWrapping; - opts.repeat = Utils.valueOrDefault(opts.repeat, 1.0); + opts.texture.colorSpace = THREE.SRGBColorSpace; opts.opacity = Utils.valueOrDefault(opts.opacity, 1.0); opts.shadows = Utils.valueOrDefault(opts.shadows, true); opts.side = Utils.valueOrDefault(opts.side, THREE.DoubleSide); - const fragment = this.SHADER_FIX_FRAGMENT; - const vertex = this.SHADER_FIX_VERTEX; - const screenTone = this.screenTone; - const uniforms = opts.uniforms - ? opts.uniforms - : { - offset: { value: new THREE.Vector2() }, - colorD: { value: screenTone }, - repeat: { value: opts.repeat }, - enableShadows: { value: opts.shadows }, - }; - - // Program cache key for multiple shader programs - const key = fragment === this.SHADER_FIX_FRAGMENT ? 0 : 1; - - // Create material - const material = new THREE.MeshPhongMaterial({ + const material = new THREE.MeshPhongNodeMaterial({ map: opts.texture, side: opts.side, - transparent: true, + transparent: false, // for some reason transparency breaks shadows, reminder to fix this later + lights: opts.shadows, alphaTest: 0.5, opacity: opts.opacity, shininess: 0, - specular: new THREE.Color(0x000000), }); - material.userData.uniforms = uniforms; - material.userData.customDepthMaterial = new THREE.MeshDepthMaterial({ - depthPacking: THREE.RGBADepthPacking, - map: opts.texture, - alphaTest: 0.5, - }); - - // Edit shader information before compiling shader - material.onBeforeCompile = (shader) => { - shader.fragmentShader = fragment; - shader.vertexShader = vertex; - shader.uniforms.colorD = uniforms.colorD; - shader.uniforms.reverseH = { value: opts.flipX }; - shader.uniforms.repeat = { value: opts.repeat }; - shader.uniforms.offset = uniforms.offset; - shader.uniforms.enableShadows = { value: opts.shadows }; - material.userData.uniforms = shader.uniforms; - - // Important to run a unique shader only once and be able to use - // multiple shader with before compile - material.customProgramCacheKey = () => { - return '' + key; - }; + material.userData.uniforms = + { + offset: uniform(new THREE.Vector2()), + colorD: uniform(this.screenTone), + opacity: uniform(opts.opacity) }; - + material.colorNode = GL.colorShader({ m: material, u: material.userData.uniforms }); + material.lightsNode = opts.shadows ? GL.lightingModelContext : lights(); return material; } - static cloneMaterial(material: THREE.MeshPhongMaterial): THREE.MeshPhongMaterial { - return this.createMaterial({ - texture: material.map, - flipY: material.map.flipY, - side: material.side, - repeat: material.userData.uniforms.repeat.value, - opacity: material.opacity, - shadows: material.userData.uniforms.enableShadows.value, - }); + static cloneMaterial(material: THREE.MeshPhongNodeMaterial): THREE.MeshPhongNodeMaterial { + return this.createMaterial({ texture: material.map }); } /** * Get material THREE.Texture (if exists). - * @param {THREE.MeshPhongMaterial} + * @param {THREE.MeshPhongNodeMaterial} * @returns {THREE.Texture} */ - static getMaterialTexture(material: THREE.MeshPhongMaterial): THREE.Texture { + static getMaterialTexture(material: THREE.MeshPhongNodeMaterial): THREE.Texture { return material && material.map ? material.map : null; } @@ -241,7 +220,7 @@ class GL { return new THREE.Vector2(position.x * widthHalf + widthHalf, -(position.y * heightHalf) + heightHalf); } - static getMaterialTextureSize(material: THREE.MeshPhongMaterial | null): { width: number; height: number } { + static getMaterialTextureSize(material: THREE.MeshPhongNodeMaterial | null): { width: number; height: number } { return { width: (material?.map?.image as HTMLImageElement)?.width ?? 0, height: (material?.map?.image as HTMLImageElement)?.height ?? 0, diff --git a/src/Model/Animation.ts b/src/Model/Animation.ts index 13d8167e..83efcb20 100644 --- a/src/Model/Animation.ts +++ b/src/Model/Animation.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 { ANIMATION_EFFECT_CONDITION_KIND, ANIMATION_POSITION_KIND, Utils } from '../Common'; import { Battler, Picture2D } from '../Core'; import { AnimationFrame } from './AnimationFrame'; diff --git a/src/Model/AnimationFrame.ts b/src/Model/AnimationFrame.ts index 0a8f67af..86d7385d 100644 --- a/src/Model/AnimationFrame.ts +++ b/src/Model/AnimationFrame.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 { ANIMATION_EFFECT_CONDITION_KIND, Utils } from '../Common'; import { Picture2D } from '../Core'; import { AnimationFrameEffect, AnimationFrameEffectJSON } from './AnimationFrameEffect'; diff --git a/src/Model/AnimationFrameElement.ts b/src/Model/AnimationFrameElement.ts index 5492fb01..e45b1764 100644 --- a/src/Model/AnimationFrameElement.ts +++ b/src/Model/AnimationFrameElement.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 { Picture2D } from '../Core'; import { Base } from './Base'; diff --git a/src/Model/CameraProperties.ts b/src/Model/CameraProperties.ts index 7ca0cdbb..7cf29921 100644 --- a/src/Model/CameraProperties.ts +++ b/src/Model/CameraProperties.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, ScreenResolution, Utils } from '../Common'; import { Camera } from '../Core'; import { Data } from '../index'; diff --git a/src/Model/Color.ts b/src/Model/Color.ts index aaf267dd..3860344a 100644 --- a/src/Model/Color.ts +++ b/src/Model/Color.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 { Base } from './Base'; /** JSON data for initializing a color */ diff --git a/src/Model/DynamicValue.ts b/src/Model/DynamicValue.ts index b2b9b0fb..6f377342 100644 --- a/src/Model/DynamicValue.ts +++ b/src/Model/DynamicValue.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 { DYNAMIC_VALUE_KIND, PICTURE_KIND, Platform, SONG_KIND, Utils } from '../Common'; import { MapObjectCommandType } from '../Common/Types'; import { Game, ReactionInterpreter } from '../Core'; diff --git a/src/Model/MapProperties.ts b/src/Model/MapProperties.ts index d5f96f76..fdf4abbe 100644 --- a/src/Model/MapProperties.ts +++ b/src/Model/MapProperties.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, MAP_TRANSITION_KIND, Mathf, PICTURE_KIND, SONG_KIND, Utils } from '../Common'; import { Game, MapObject, Position } from '../Core'; import { Data, Manager, Scene } from '../index'; diff --git a/src/Model/Object3D.ts b/src/Model/Object3D.ts index 149e3648..afbbd7dc 100644 --- a/src/Model/Object3D.ts +++ b/src/Model/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 { CUSTOM_SHAPE_KIND, OBJECT_COLLISION_KIND, SHAPE_KIND, Utils } from '../Common'; import { Data } from '../index'; import { Shape } from './Shape'; diff --git a/src/Model/Shape.ts b/src/Model/Shape.ts index d5728232..4f0ba0f4 100644 --- a/src/Model/Shape.ts +++ b/src/Model/Shape.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 { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; import { CUSTOM_SHAPE_KIND, Paths, Platform, Utils } from '../Common'; import { CustomGeometry } from '../Core'; diff --git a/src/Model/Skybox.ts b/src/Model/Skybox.ts index dbac9159..3ecd4c4d 100644 --- a/src/Model/Skybox.ts +++ b/src/Model/Skybox.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, Utils } from '../Common'; import { Data, Manager } from '../index'; import { Base } from './Base'; @@ -44,7 +44,7 @@ export class Skybox extends Base { /** * Create the textures for the skybox. */ - createTextures(): THREE.MeshPhongMaterial[] { + createTextures(): THREE.MeshPhongNodeMaterial[] { return [this.left, this.right, this.top, this.bot, this.front, this.back].map((side) => { const texture = Manager.GL.textureLoader.load(Data.Pictures.get(PICTURE_KIND.SKYBOXES, side).getPath()); texture.wrapS = THREE.RepeatWrapping; diff --git a/src/Scene/Battle.ts b/src/Scene/Battle.ts index b096936e..ab343b95 100644 --- a/src/Scene/Battle.ts +++ b/src/Scene/Battle.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 { Data, Graphic, Manager, Model, Scene } from '..'; import { BATTLE_STEP, diff --git a/src/Scene/BattleInitialize.ts b/src/Scene/BattleInitialize.ts index 510851a8..f451fa4d 100644 --- a/src/Scene/BattleInitialize.ts +++ b/src/Scene/BattleInitialize.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 { Data, Graphic, Manager, Model, Scene } from '..'; import { ALIGN, diff --git a/src/Scene/Map.ts b/src/Scene/Map.ts index e6216a61..e233aa0b 100644 --- a/src/Scene/Map.ts +++ b/src/Scene/Map.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, DYNAMIC_VALUE_KIND, @@ -67,7 +67,7 @@ class Map extends Base { public currentPortion: Portion; public previousPortion: Portion; public mapPortions: MapPortion[]; - public textureTileset: THREE.MeshPhongMaterial; + public textureTileset: THREE.MeshPhongNodeMaterial; public collisions: Rectangle[][][][]; public previousCameraPosition: THREE.Vector3; public portionsObjectsUpdated: boolean; @@ -224,8 +224,10 @@ class Map extends Base { * Initialize sun light. */ initializeSunLight() { + Manager.GL.allLights.length = 0; const ambient = new THREE.AmbientLight(0xffffff, this.mapProperties.isSunLight ? 1.2 : 2); this.scene.add(ambient); + Manager.GL.allLights.push(ambient); if (this.mapProperties.isSunLight) { this.sunLight = new THREE.DirectionalLight(0xffffff, 2); this.sunLight.position.set(-1, 1.75, 1); @@ -242,6 +244,7 @@ class Map extends Base { this.sunLight.shadow.camera.bottom = -d; this.sunLight.shadow.camera.far = Data.Systems.SQUARE_SIZE * 350; this.sunLight.shadow.bias = -0.0003; + Manager.GL.allLights.push(this.sunLight); } } diff --git a/src/main.ts b/src/main.ts index beebd744..a63f1717 100644 --- a/src/main.ts +++ b/src/main.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 { Inputs, Platform } from './Common'; import { Data, Manager } from './index'; @@ -59,7 +59,7 @@ export class Main { await Data.Songs.read(); await Data.Videos.read(); await Data.Shapes.read(); - Manager.GL.initialize(); + await Manager.GL.initialize(); Manager.GL.resize(); Manager.Collisions.initialize(); await Data.SpecialElements.read(); diff --git a/tsconfig.json b/tsconfig.json index b7edc42e..3d2c0033 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,7 +2,7 @@ "compilerOptions": { "target": "es2020", "module": "esNext", - "moduleResolution": "node", + "moduleResolution": "bundler", "lib": [ "dom", "dom.iterable",