From f60c6caca6152a1784bfc2ec0d7e136c0369f454 Mon Sep 17 00:00:00 2001 From: nolan Date: Tue, 21 Jun 2022 12:15:12 +0800 Subject: [PATCH 001/716] Load avatar on localhost --- src/modules/avatar/avatar-controller.ts | 105 +++++++++++------- src/modules/input/enums.ts | 138 ------------------------ src/modules/input/index.ts | 1 - src/modules/scene/vscene.ts | 36 +++---- 4 files changed, 83 insertions(+), 197 deletions(-) delete mode 100644 src/modules/input/enums.ts delete mode 100644 src/modules/input/index.ts diff --git a/src/modules/avatar/avatar-controller.ts b/src/modules/avatar/avatar-controller.ts index 323cdb37..4d8c6bff 100644 --- a/src/modules/avatar/avatar-controller.ts +++ b/src/modules/avatar/avatar-controller.ts @@ -1,37 +1,76 @@ import * as BABYLON from "@babylonjs/core/Legacy/legacy"; import { - AbstractMesh, - // Skeleton, + Mesh, + Skeleton, ArcRotateCamera, - Scene - // DeviceSourceManager + Scene, + ActionManager, + ExecuteCodeAction } from "@babylonjs/core"; -// import Log from "@Modules/debugging/log"; +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import Log from "@Modules/debugging/log"; + /* eslint-disable @typescript-eslint/no-magic-numbers */ export class AvatarController { - private _avatar: AbstractMesh; - // private _skeleton: Skeleton = null; + private _avatar: Mesh; + private _skeleton: Skeleton; private _camera: ArcRotateCamera; private _scene: Scene; private _walkSpeed = 2; private _movement : BABYLON.Vector3; - private _rotationSpeed = 10 * Math.PI / 180; + private _rotationSpeed = 20 * Math.PI / 180; private _rotation = 0; + // private _idleAni : AnimationGroup; + // private _idleToWalkAni : AnimationGroup; - constructor(avatar: BABYLON.Nullable, camera: ArcRotateCamera, scene: Scene) { - this._avatar = avatar as AbstractMesh; + constructor(avatar: Mesh, skeleton: Skeleton, camera: ArcRotateCamera, scene: Scene) { + this._avatar = avatar; + this._skeleton = skeleton; this._camera = camera; this._scene = scene; this._movement = new BABYLON.Vector3(); + + // this._idleAni = this._scene.getAnimationGroupByName("idle") as AnimationGroup; + // this._idleToWalkAni = this._scene.getAnimationGroupByName("idle_to_walk") as AnimationGroup; } public start():void { this._scene.registerBeforeRender(this._update.bind(this)); - const canvas = this._scene.getEngine().getRenderingCanvas() as HTMLCanvasElement; - canvas.addEventListener("keyup", this._onKeyUp.bind(this), false); - canvas.addEventListener("keydown", this._onKeyDown.bind(this), false); + + // scene action manager to detect inputs + this._scene.actionManager = new ActionManager(this._scene); + + this._scene.actionManager.registerAction( + new ExecuteCodeAction(ActionManager.OnKeyDownTrigger, + this._onKeyDown.bind(this))); + + this._scene.actionManager.registerAction( + new ExecuteCodeAction(ActionManager.OnKeyUpTrigger, + this._onKeyUp.bind(this))); + /* + const targetedAnimations = this._idleToWalkAni.targetedAnimations; + // console.log(targetedAnimations); + + for (let i = 0; i < targetedAnimations.length; i++) { + const targetAni = targetedAnimations[i]; + const target = targetAni.target as Mesh; + // Log.debug(Log.types.AVATAR, "target:" + target.name); + this._avatar.getChildren((node) => { + if (target.name === node.name) { + Log.debug(Log.types.AVATAR, "apply:" + target.name); + targetAni.target = node; + return true; + } + return false; + }, false); + + } + + // Log.debug(Log.types.AVATAR, `paly idle_to_walk form ${this._idleToWalkAni.from} to ${this._idleToWalkAni.to}`); + this._idleToWalkAni.start(true, 1.0, this._idleToWalkAni.from, this._idleToWalkAni.to, false); +*/ } @@ -46,16 +85,13 @@ export class AvatarController { this._avatar.movePOV(movement.x, movement.y, movement.z); } - private _onKeyDown(e: KeyboardEvent) { - // Log.debug(Log.types.AVATAR, "key down:" + e.key.toLowerCase()); - if (!e.key) { - return; - } - if (e.repeat) { - return; - } - switch (e.key.toLowerCase()) { - case "space": + private _onKeyDown(evt: BABYLON.ActionEvent):void { + + // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access + // Log.debug(Log.types.AVATAR, evt.sourceEvent.key); + // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access + switch (evt.sourceEvent.key) { + case " ": break; case "w": @@ -79,33 +115,26 @@ export class AvatarController { } } - private _onKeyUp(e: KeyboardEvent) { - // Log.debug(Log.types.AVATAR, "key up:" + e.key.toLowerCase()); - if (!e.key) { - return; - } - if (e.repeat) { - return; - } - - switch (e.key.toLowerCase()) { - case "space": + private _onKeyUp(evt: BABYLON.ActionEvent):void { + // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access + switch (evt.sourceEvent.key) { + case " ": // Log.debug(Log.types.AVATAR, "jump"); break; case "w": - case "arrowup": + case "ArrowUp": this._movement.z = 0; break; case "a": - case "arrowleft": + case "ArrowLeft": this._rotation = 0; break; case "d": - case "arrowright": + case "ArrowRight": this._rotation = 0; break; case "s": - case "arrowdown": + case "ArrowDown": this._movement.z = 0; break; default: diff --git a/src/modules/input/enums.ts b/src/modules/input/enums.ts deleted file mode 100644 index 715b94e9..00000000 --- a/src/modules/input/enums.ts +++ /dev/null @@ -1,138 +0,0 @@ -/** - * Enum for Keyboard - */ -export enum Key { - Backspace = 8, - Tab = 9, - Enter = 13, - Shift = 16, - Ctrl = 17, - Alt = 18, - PauseBreak = 19, - CapsLock = 20, - Escape = 27, - Space = 32, - PageUp = 33, - PageDown = 34, - End = 35, - Home = 36, - - LeftArrow = 37, - UpArrow = 38, - RightArrow = 39, - DownArrow = 40, - - Insert = 45, - Delete = 46, - - Zero = 48, - ClosedParen = Zero, - One = 49, - ExclamationMark = One, - Two = 50, - AtSign = Two, - Three = 51, - PoundSign = Three, - Hash = PoundSign, - Four = 52, - DollarSign = Four, - Five = 53, - PercentSign = Five, - Six = 54, - Caret = Six, - Hat = Caret, - Seven = 55, - Ampersand = Seven, - Eight = 56, - Star = Eight, - Asterik = Star, - Nine = 57, - OpenParen = Nine, - - A = 65, - B = 66, - C = 67, - D = 68, - E = 69, - F = 70, - G = 71, - H = 72, - I = 73, - J = 74, - K = 75, - L = 76, - M = 77, - N = 78, - O = 79, - P = 80, - Q = 81, - R = 82, - S = 83, - T = 84, - U = 85, - V = 86, - W = 87, - X = 88, - Y = 89, - Z = 90, - - LeftWindowKey = 91, - RightWindowKey = 92, - SelectKey = 93, - - Numpad0 = 96, - Numpad1 = 97, - Numpad2 = 98, - Numpad3 = 99, - Numpad4 = 100, - Numpad5 = 101, - Numpad6 = 102, - Numpad7 = 103, - Numpad8 = 104, - Numpad9 = 105, - - Multiply = 106, - Add = 107, - Subtract = 109, - DecimalPoint = 110, - Divide = 111, - - F1 = 112, - F2 = 113, - F3 = 114, - F4 = 115, - F5 = 116, - F6 = 117, - F7 = 118, - F8 = 119, - F9 = 120, - F10 = 121, - F11 = 122, - F12 = 123, - - NumLock = 144, - ScrollLock = 145, - - SemiColon = 186, - Equals = 187, - Comma = 188, - Dash = 189, - Period = 190, - UnderScore = Dash, - PlusSign = Equals, - ForwardSlash = 191, - Tilde = 192, - GraveAccent = Tilde, - - OpenBracket = 219, - ClosedBracket = 221, - Quote = 222 -} - -/** - * Enum for Key state - */ -export enum KeyState { - KeyUp = 0, - KeyDown = 1 -} diff --git a/src/modules/input/index.ts b/src/modules/input/index.ts deleted file mode 100644 index fea9fd22..00000000 --- a/src/modules/input/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Key, KeyState } from "./enums"; diff --git a/src/modules/scene/vscene.ts b/src/modules/scene/vscene.ts index 35dbe4e0..8b19226c 100644 --- a/src/modules/scene/vscene.ts +++ b/src/modules/scene/vscene.ts @@ -17,7 +17,7 @@ import "@babylonjs/core/Meshes/meshBuilder"; // General Modules import Log from "@Modules/debugging/log"; // System Modules -import { NIL, v4 as uuidv4 } from "uuid"; +import { v4 as uuidv4 } from "uuid"; import { VVector3 } from "."; import { AvatarController } from "@Modules/avatar"; @@ -47,13 +47,13 @@ export class VScene { _sceneId: number; _scene: Scene; _entities: Map; - _avatar : AvatarController | null; + _avatarController : AvatarController | null; constructor(pEngine: Engine, pSceneId = 0) { this._entities = new Map(); this._scene = new Scene(pEngine); this._sceneId = pSceneId; - this._avatar = null; + this._avatarController = null; } getSceneId(): number { @@ -215,7 +215,7 @@ export class VScene { async buildTestScene(): Promise { /* eslint-disable @typescript-eslint/no-magic-numbers */ const aScene = this._scene; - // eslint-disable-next-line @typescript-eslint/no-magic-numbers + aScene.clearColor = new Color4(0.8, 0.8, 0.8, 0.0); // aScene.createDefaultCameraOrLight(true, true, true); @@ -245,25 +245,21 @@ export class VScene { // eslint-disable-next-line @typescript-eslint/no-magic-numbers // This attaches the camera to the canvas - camera.attachControl(NIL, true); + camera.attachControl(aScene.getEngine().getRenderingCanvas(), true); // load avatar model - const id = await this.addEntity({ - // await this.addEntity({ - name: "", - type: "Model", - modelUrl: "https://digisomni.com/avatars/nolan.glb", - position: { x: avatarPos.x, y: avatarPos.y, z: avatarPos.z }, - rotation: { x: 0, y: 0, z: 0 }, - dimensions: { x: 1, y: 1, z: 1 } - }); - - Log.debug(Log.types.ENTITIES, `entity id: ${id}`); - - const avatar = aScene.getMeshByID(id); + const result = await SceneLoader.ImportMeshAsync("", + "http://localhost:8080/assets/avatars/meshes/", "nolan.glb", aScene); + const avatar = result.meshes[0]; + avatar.scaling = new Vector3(1, 1, 1); + avatar.position = avatarPos; + + const skeleton = result.skeletons[0]; + this._avatarController = new AvatarController(avatar as BABYLON.Mesh, skeleton, camera, aScene); + this._avatarController.start(); + camera.parent = avatar; - this._avatar = new AvatarController(avatar, camera, aScene); - this._avatar.start(); + await this._scene.debugLayer.show(); } } From ec0e9d59b94a52c45b3003c7c6a82e8136d5f7b7 Mon Sep 17 00:00:00 2001 From: nolan Date: Tue, 21 Jun 2022 13:39:47 +0800 Subject: [PATCH 002/716] Add input map --- src/modules/avatar/avatar-controller.ts | 93 +++++++++---------------- 1 file changed, 31 insertions(+), 62 deletions(-) diff --git a/src/modules/avatar/avatar-controller.ts b/src/modules/avatar/avatar-controller.ts index 4d8c6bff..ee0d2e38 100644 --- a/src/modules/avatar/avatar-controller.ts +++ b/src/modules/avatar/avatar-controller.ts @@ -22,6 +22,8 @@ export class AvatarController { private _movement : BABYLON.Vector3; private _rotationSpeed = 20 * Math.PI / 180; private _rotation = 0; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + private _inputMap : any; // private _idleAni : AnimationGroup; // private _idleToWalkAni : AnimationGroup; @@ -31,12 +33,13 @@ export class AvatarController { this._camera = camera; this._scene = scene; this._movement = new BABYLON.Vector3(); - + this._inputMap = {}; // this._idleAni = this._scene.getAnimationGroupByName("idle") as AnimationGroup; // this._idleToWalkAni = this._scene.getAnimationGroupByName("idle_to_walk") as AnimationGroup; } public start():void { + /* eslint-disable @typescript-eslint/no-unsafe-member-access */ this._scene.registerBeforeRender(this._update.bind(this)); // scene action manager to detect inputs @@ -44,11 +47,15 @@ export class AvatarController { this._scene.actionManager.registerAction( new ExecuteCodeAction(ActionManager.OnKeyDownTrigger, - this._onKeyDown.bind(this))); + (evt) => { + this._inputMap[evt.sourceEvent.key] = evt.sourceEvent.type === "keydown"; + })); this._scene.actionManager.registerAction( new ExecuteCodeAction(ActionManager.OnKeyUpTrigger, - this._onKeyUp.bind(this))); + (evt) => { + this._inputMap[evt.sourceEvent.key] = evt.sourceEvent.type === "keydown"; + })); /* const targetedAnimations = this._idleToWalkAni.targetedAnimations; // console.log(targetedAnimations); @@ -75,7 +82,27 @@ export class AvatarController { private _update():void { - // eslint-disable-next-line new-cap + /* eslint-disable @typescript-eslint/no-unsafe-member-access */ + /* eslint-disable @typescript-eslint/dot-notation */ + this._movement.z = 0; + this._rotation = 0; + + if (this._inputMap["w"]) { + this._movement.z = -this._walkSpeed; + } else if (this._inputMap["s"]) { + this._movement.z = this._walkSpeed; + } + + if (this._inputMap["a"]) { + this._rotation = -this._rotationSpeed; + } else if (this._inputMap["d"]) { + this._rotation = this._rotationSpeed; + } + + if (this._inputMap[" "]) { + Log.debug(Log.types.AVATAR, "space"); + } + const dt = this._scene.getEngine().getDeltaTime() / 1000; const movement = this._movement.scale(dt); const rot = this._rotation * dt; @@ -84,62 +111,4 @@ export class AvatarController { this._avatar.rotate(BABYLON.Vector3.Up(), rot); this._avatar.movePOV(movement.x, movement.y, movement.z); } - - private _onKeyDown(evt: BABYLON.ActionEvent):void { - - // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access - // Log.debug(Log.types.AVATAR, evt.sourceEvent.key); - // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access - switch (evt.sourceEvent.key) { - case " ": - break; - - case "w": - // case "arrowup": - this._movement.z = -this._walkSpeed; - break; - case "a": - // case "arrowleft": - this._rotation = -this._rotationSpeed; - break; - case "d": - // case "arrowright": - this._rotation = this._rotationSpeed; - break; - case "s": - // case "arrowdown": - this._movement.z = this._walkSpeed; - break; - default: - - } - } - - private _onKeyUp(evt: BABYLON.ActionEvent):void { - // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access - switch (evt.sourceEvent.key) { - case " ": - // Log.debug(Log.types.AVATAR, "jump"); - break; - case "w": - case "ArrowUp": - this._movement.z = 0; - break; - case "a": - case "ArrowLeft": - this._rotation = 0; - break; - case "d": - case "ArrowRight": - this._rotation = 0; - break; - case "s": - case "ArrowDown": - this._movement.z = 0; - break; - default: - } - } - - } From dad595d656119112c6a87492fee3d46727bedcb1 Mon Sep 17 00:00:00 2001 From: nolan Date: Tue, 21 Jun 2022 15:26:06 +0800 Subject: [PATCH 003/716] Add animation control --- src/modules/avatar/avatar-controller.ts | 40 +++++++++++++++++++++---- src/modules/scene/vscene.ts | 6 ++-- 2 files changed, 38 insertions(+), 8 deletions(-) diff --git a/src/modules/avatar/avatar-controller.ts b/src/modules/avatar/avatar-controller.ts index ee0d2e38..f9eb1269 100644 --- a/src/modules/avatar/avatar-controller.ts +++ b/src/modules/avatar/avatar-controller.ts @@ -5,7 +5,8 @@ import { ArcRotateCamera, Scene, ActionManager, - ExecuteCodeAction + ExecuteCodeAction, + AnimationGroup } from "@babylonjs/core"; // eslint-disable-next-line @typescript-eslint/no-unused-vars @@ -20,12 +21,14 @@ export class AvatarController { private _scene: Scene; private _walkSpeed = 2; private _movement : BABYLON.Vector3; - private _rotationSpeed = 20 * Math.PI / 180; + private _rotationSpeed = 40 * Math.PI / 180; private _rotation = 0; // eslint-disable-next-line @typescript-eslint/no-explicit-any private _inputMap : any; - // private _idleAni : AnimationGroup; - // private _idleToWalkAni : AnimationGroup; + private _idleAnim : BABYLON.Nullable = null; + private _walkAnim : BABYLON.Nullable = null; + private _currentAnim: BABYLON.Nullable = null; + private _prevAnim: BABYLON.Nullable = null; constructor(avatar: Mesh, skeleton: Skeleton, camera: ArcRotateCamera, scene: Scene) { this._avatar = avatar; @@ -34,8 +37,6 @@ export class AvatarController { this._scene = scene; this._movement = new BABYLON.Vector3(); this._inputMap = {}; - // this._idleAni = this._scene.getAnimationGroupByName("idle") as AnimationGroup; - // this._idleToWalkAni = this._scene.getAnimationGroupByName("idle_to_walk") as AnimationGroup; } public start():void { @@ -56,6 +57,12 @@ export class AvatarController { (evt) => { this._inputMap[evt.sourceEvent.key] = evt.sourceEvent.type === "keydown"; })); + + this._walkAnim = this._scene.getAnimationGroupByName("Armature.001|Take 001|BaseLayer"); + if (this._walkAnim) { + this._walkAnim.loopAnimation = true; + this._walkAnim.stop(); + } /* const targetedAnimations = this._idleToWalkAni.targetedAnimations; // console.log(targetedAnimations); @@ -110,5 +117,26 @@ export class AvatarController { // eslint-disable-next-line new-cap this._avatar.rotate(BABYLON.Vector3.Up(), rot); this._avatar.movePOV(movement.x, movement.y, movement.z); + + this._animateAvatar(); + } + + private _animateAvatar() { + this._currentAnim = this._idleAnim; + + if (this._inputMap["w"] || this._inputMap["s"] || this._inputMap["a"] || this._inputMap["d"]) { + this._currentAnim = this._walkAnim; + } + + if (this._currentAnim !== null && this._currentAnim !== this._prevAnim) { + this._prevAnim?.stop(); + this._currentAnim.play(this._currentAnim.loopAnimation); + this._prevAnim = this._currentAnim; + } + // just because of no idle anim + if (this._currentAnim === null && this._prevAnim !== null) { + this._prevAnim.stop(); + this._prevAnim = null; + } } } diff --git a/src/modules/scene/vscene.ts b/src/modules/scene/vscene.ts index 8b19226c..3fa3c136 100644 --- a/src/modules/scene/vscene.ts +++ b/src/modules/scene/vscene.ts @@ -249,7 +249,9 @@ export class VScene { // load avatar model const result = await SceneLoader.ImportMeshAsync("", - "http://localhost:8080/assets/avatars/meshes/", "nolan.glb", aScene); + // "http://localhost:8080/assets/avatars/meshes/", "nolan.glb", aScene); + "http://localhost:8080/assets/avatars/meshes/", "WalkAnimationTest.glb", aScene); + const avatar = result.meshes[0]; avatar.scaling = new Vector3(1, 1, 1); avatar.position = avatarPos; @@ -260,6 +262,6 @@ export class VScene { camera.parent = avatar; - await this._scene.debugLayer.show(); + // await this._scene.debugLayer.show(); } } From 0c3acfbc410783bc17bdedb8e1fa16fe93357167 Mon Sep 17 00:00:00 2001 From: nolan Date: Tue, 21 Jun 2022 17:49:42 +0800 Subject: [PATCH 004/716] Make animation group of AvatarController injected form consturctor --- src/modules/avatar/avatar-controller.ts | 16 +++++++++++++--- src/modules/scene/vscene.ts | 6 +++--- 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/src/modules/avatar/avatar-controller.ts b/src/modules/avatar/avatar-controller.ts index f9eb1269..ea3ce6d0 100644 --- a/src/modules/avatar/avatar-controller.ts +++ b/src/modules/avatar/avatar-controller.ts @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-unsafe-call */ import * as BABYLON from "@babylonjs/core/Legacy/legacy"; import { Mesh, @@ -30,13 +31,22 @@ export class AvatarController { private _currentAnim: BABYLON.Nullable = null; private _prevAnim: BABYLON.Nullable = null; - constructor(avatar: Mesh, skeleton: Skeleton, camera: ArcRotateCamera, scene: Scene) { + constructor(avatar: Mesh, skeleton: Skeleton, camera: ArcRotateCamera, scene: Scene, animGroups: AnimationGroup[]) { this._avatar = avatar; this._skeleton = skeleton; this._camera = camera; this._scene = scene; this._movement = new BABYLON.Vector3(); this._inputMap = {}; + + animGroups.forEach((animGroup : AnimationGroup) => { + if (animGroup.name === "Armature.001|Take 001|BaseLayer") { + this._walkAnim = animGroup; + this._walkAnim.loopAnimation = true; + this._walkAnim.stop(); + } + }); + } public start():void { @@ -57,13 +67,13 @@ export class AvatarController { (evt) => { this._inputMap[evt.sourceEvent.key] = evt.sourceEvent.type === "keydown"; })); - + /* this._walkAnim = this._scene.getAnimationGroupByName("Armature.001|Take 001|BaseLayer"); if (this._walkAnim) { this._walkAnim.loopAnimation = true; this._walkAnim.stop(); } - /* + const targetedAnimations = this._idleToWalkAni.targetedAnimations; // console.log(targetedAnimations); diff --git a/src/modules/scene/vscene.ts b/src/modules/scene/vscene.ts index 3fa3c136..8db3706f 100644 --- a/src/modules/scene/vscene.ts +++ b/src/modules/scene/vscene.ts @@ -242,12 +242,11 @@ export class VScene { const camera = new BABYLON.ArcRotateCamera( // eslint-disable-next-line @typescript-eslint/no-magic-numbers "Camera", -Math.PI / 2, Math.PI / 2, 6, new BABYLON.Vector3(avatarPos.x, avatarPos.y + 1, avatarPos.z), aScene); - // eslint-disable-next-line @typescript-eslint/no-magic-numbers // This attaches the camera to the canvas camera.attachControl(aScene.getEngine().getRenderingCanvas(), true); - // load avatar model + // load avatar mesh const result = await SceneLoader.ImportMeshAsync("", // "http://localhost:8080/assets/avatars/meshes/", "nolan.glb", aScene); "http://localhost:8080/assets/avatars/meshes/", "WalkAnimationTest.glb", aScene); @@ -257,7 +256,8 @@ export class VScene { avatar.position = avatarPos; const skeleton = result.skeletons[0]; - this._avatarController = new AvatarController(avatar as BABYLON.Mesh, skeleton, camera, aScene); + const animationGroups = result.animationGroups; + this._avatarController = new AvatarController(avatar as BABYLON.Mesh, skeleton, camera, aScene, animationGroups); this._avatarController.start(); camera.parent = avatar; From c33ed0155e35f955edc4539c901fc8d4d0cff654 Mon Sep 17 00:00:00 2001 From: nolan Date: Tue, 21 Jun 2022 20:20:30 +0800 Subject: [PATCH 005/716] Add code headers --- src/modules/avatar/avatar-controller.ts | 9 +++++++-- src/modules/avatar/index.ts | 7 +++++++ 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/modules/avatar/avatar-controller.ts b/src/modules/avatar/avatar-controller.ts index ea3ce6d0..5652cd28 100644 --- a/src/modules/avatar/avatar-controller.ts +++ b/src/modules/avatar/avatar-controller.ts @@ -1,4 +1,10 @@ -/* eslint-disable @typescript-eslint/no-unsafe-call */ +/* +// Copyright 2021 Vircadia contributors. +// +// Distributed under the Apache License, Version 2.0. +// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html +*/ + import * as BABYLON from "@babylonjs/core/Legacy/legacy"; import { Mesh, @@ -10,7 +16,6 @@ import { AnimationGroup } from "@babylonjs/core"; -// eslint-disable-next-line @typescript-eslint/no-unused-vars import Log from "@Modules/debugging/log"; diff --git a/src/modules/avatar/index.ts b/src/modules/avatar/index.ts index 5e57fd88..064ec907 100644 --- a/src/modules/avatar/index.ts +++ b/src/modules/avatar/index.ts @@ -1 +1,8 @@ +/* +// Copyright 2021 Vircadia contributors. +// +// Distributed under the Apache License, Version 2.0. +// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html +*/ + export { AvatarController } from "./avatar-controller"; From b3803b3448593eca113d5f5291bd37f6ec014c1f Mon Sep 17 00:00:00 2001 From: nolan Date: Thu, 23 Jun 2022 12:08:39 +0800 Subject: [PATCH 006/716] Add move and turn animation control --- src/modules/avatar/avatar-controller.ts | 93 +++++++++++++++---------- src/modules/scene/vscene.ts | 40 ++++++++--- 2 files changed, 86 insertions(+), 47 deletions(-) diff --git a/src/modules/avatar/avatar-controller.ts b/src/modules/avatar/avatar-controller.ts index 5652cd28..362ba117 100644 --- a/src/modules/avatar/avatar-controller.ts +++ b/src/modules/avatar/avatar-controller.ts @@ -32,7 +32,10 @@ export class AvatarController { // eslint-disable-next-line @typescript-eslint/no-explicit-any private _inputMap : any; private _idleAnim : BABYLON.Nullable = null; - private _walkAnim : BABYLON.Nullable = null; + private _walkFwdAnim : BABYLON.Nullable = null; + private _walkbwdAnim : BABYLON.Nullable = null; + private _turnLeftAnim : BABYLON.Nullable = null; + private _turnRightAnim : BABYLON.Nullable = null; private _currentAnim: BABYLON.Nullable = null; private _prevAnim: BABYLON.Nullable = null; @@ -44,16 +47,53 @@ export class AvatarController { this._movement = new BABYLON.Vector3(); this._inputMap = {}; + const nodes = new Map(); + this._avatar.getChildren((node):boolean => { + nodes.set(node.name, node); + return true; + }, false); + animGroups.forEach((animGroup : AnimationGroup) => { - if (animGroup.name === "Armature.001|Take 001|BaseLayer") { - this._walkAnim = animGroup; - this._walkAnim.loopAnimation = true; - this._walkAnim.stop(); + switch (animGroup.name) { + case "idle02": + this._idleAnim = AvatarController._cloneAnimGroup(animGroup, nodes); + break; + case "walk_fwd": + this._walkFwdAnim = AvatarController._cloneAnimGroup(animGroup, nodes); + break; + case "walk_bwd": + this._walkbwdAnim = AvatarController._cloneAnimGroup(animGroup, nodes); + break; + case "turn_left": + this._turnLeftAnim = AvatarController._cloneAnimGroup(animGroup, nodes); + break; + case "turn_right": + this._turnRightAnim = AvatarController._cloneAnimGroup(animGroup, nodes); + break; + default: } + }); } + static _cloneAnimGroup(sourceAnimGroup : AnimationGroup, nodes : Map, loop = true):AnimationGroup { + const animGroup = new AnimationGroup(sourceAnimGroup.name); + animGroup.loopAnimation = loop; + + sourceAnimGroup.targetedAnimations.forEach((targetAnim) => { + const target = targetAnim.target as BABYLON.TransformNode; + const node = nodes.get(target.name); + if (node) { + // console.log(node.name); + animGroup.addTargetedAnimation(targetAnim.animation, node); + } + }); + + sourceAnimGroup.dispose(); + return animGroup; + } + public start():void { /* eslint-disable @typescript-eslint/no-unsafe-member-access */ this._scene.registerBeforeRender(this._update.bind(this)); @@ -72,34 +112,6 @@ export class AvatarController { (evt) => { this._inputMap[evt.sourceEvent.key] = evt.sourceEvent.type === "keydown"; })); - /* - this._walkAnim = this._scene.getAnimationGroupByName("Armature.001|Take 001|BaseLayer"); - if (this._walkAnim) { - this._walkAnim.loopAnimation = true; - this._walkAnim.stop(); - } - - const targetedAnimations = this._idleToWalkAni.targetedAnimations; - // console.log(targetedAnimations); - - for (let i = 0; i < targetedAnimations.length; i++) { - const targetAni = targetedAnimations[i]; - const target = targetAni.target as Mesh; - // Log.debug(Log.types.AVATAR, "target:" + target.name); - this._avatar.getChildren((node) => { - if (target.name === node.name) { - Log.debug(Log.types.AVATAR, "apply:" + target.name); - targetAni.target = node; - return true; - } - return false; - }, false); - - } - - // Log.debug(Log.types.AVATAR, `paly idle_to_walk form ${this._idleToWalkAni.from} to ${this._idleToWalkAni.to}`); - this._idleToWalkAni.start(true, 1.0, this._idleToWalkAni.from, this._idleToWalkAni.to, false); -*/ } @@ -139,16 +151,23 @@ export class AvatarController { private _animateAvatar() { this._currentAnim = this._idleAnim; - if (this._inputMap["w"] || this._inputMap["s"] || this._inputMap["a"] || this._inputMap["d"]) { - this._currentAnim = this._walkAnim; + if (this._inputMap["w"]) { + this._currentAnim = this._walkFwdAnim; + } else if (this._inputMap["s"]) { + this._currentAnim = this._walkbwdAnim; + } else if (this._inputMap["a"]) { + this._currentAnim = this._turnLeftAnim; + } else if (this._inputMap["d"]) { + this._currentAnim = this._turnRightAnim; } if (this._currentAnim !== null && this._currentAnim !== this._prevAnim) { this._prevAnim?.stop(); - this._currentAnim.play(this._currentAnim.loopAnimation); + this._currentAnim.start(this._currentAnim.loopAnimation, 1.0, 0.05, this._currentAnim.to, false); this._prevAnim = this._currentAnim; + // console.log("play anim", this._currentAnim.name, this._currentAnim.from, this._currentAnim.to); } - // just because of no idle anim + // just for no idle anim case if (this._currentAnim === null && this._prevAnim !== null) { this._prevAnim.stop(); this._prevAnim = null; diff --git a/src/modules/scene/vscene.ts b/src/modules/scene/vscene.ts index 8db3706f..00077c6a 100644 --- a/src/modules/scene/vscene.ts +++ b/src/modules/scene/vscene.ts @@ -9,7 +9,7 @@ /* eslint-disable new-cap */ import * as BABYLON from "@babylonjs/core/Legacy/legacy"; -import { Engine, MeshBuilder, Scene, SceneLoader } from "@babylonjs/core"; +import { AnimationGroup, Engine, MeshBuilder, Scene, SceneLoader } from "@babylonjs/core"; import { Color3, Color4, Vector3 } from "@babylonjs/core/Maths/math"; import { Mesh } from "@babylonjs/core/Meshes/mesh"; import "@babylonjs/loaders/glTF"; @@ -47,13 +47,15 @@ export class VScene { _sceneId: number; _scene: Scene; _entities: Map; - _avatarController : AvatarController | null; + _avatarController : Nullable; + _avatarAnimationGroups : AnimationGroup[]; constructor(pEngine: Engine, pSceneId = 0) { this._entities = new Map(); this._scene = new Scene(pEngine); this._sceneId = pSceneId; this._avatarController = null; + this._avatarAnimationGroups = []; } getSceneId(): number { @@ -85,6 +87,17 @@ export class VScene { return meshes.meshes[0] as Mesh; } + async loadAvatarAnimations(modelUrl: string): Promise { + const parsedUrl = new URL(modelUrl); + const urlWithoutFilename = modelUrl.substring(0, modelUrl.lastIndexOf("/")) + "/"; + const filename = parsedUrl.pathname.split("/").pop(); + + const result = await SceneLoader.ImportMeshAsync("", + urlWithoutFilename, filename, this._scene); + this._avatarAnimationGroups = result.animationGroups; + return result; + } + /** * Add an entity to the scene. * @@ -235,6 +248,12 @@ export class VScene { const box = BABYLON.MeshBuilder.CreateBox("box1", {}, aScene); box.position = new Vector3(5, 0.5, 5); + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const animResult = await this.loadAvatarAnimations( + "http://localhost:8080/assets/avatars/animations/AnimationsBasic.glb"); + // const animMesh = animResult.meshes[0].getChildren()[0] as Mesh; + // animMesh.parent?.dispose(); + // console.log("animation mesh:", animMesh.name); const avatarPos = new Vector3(0, 0, 0); @@ -247,21 +266,22 @@ export class VScene { camera.attachControl(aScene.getEngine().getRenderingCanvas(), true); // load avatar mesh - const result = await SceneLoader.ImportMeshAsync("", - // "http://localhost:8080/assets/avatars/meshes/", "nolan.glb", aScene); - "http://localhost:8080/assets/avatars/meshes/", "WalkAnimationTest.glb", aScene); + // const result = await SceneLoader.ImportMeshAsync("", + // "http://localhost:8080/assets/avatars/meshes/", "nolan.glb", aScene); + + + // use the same mesh temporary + const result = animResult; + const avatar = result.meshes[0] as Mesh; - const avatar = result.meshes[0]; avatar.scaling = new Vector3(1, 1, 1); avatar.position = avatarPos; const skeleton = result.skeletons[0]; - const animationGroups = result.animationGroups; - this._avatarController = new AvatarController(avatar as BABYLON.Mesh, skeleton, camera, aScene, animationGroups); + + this._avatarController = new AvatarController(avatar, skeleton, camera, aScene, this._avatarAnimationGroups); this._avatarController.start(); camera.parent = avatar; - - // await this._scene.debugLayer.show(); } } From 3e5679466a0fd0eef364549faa84b870a08d49d3 Mon Sep 17 00:00:00 2001 From: nolan Date: Thu, 23 Jun 2022 17:43:42 +0800 Subject: [PATCH 007/716] Trim unnecessary animtion data Trim unnecessary animtion data of avatar animationof avatar animation. Keep only rotation quaternion data --- src/modules/avatar/avatar-controller.ts | 7 +--- src/modules/scene/vscene.ts | 50 +++++++++++++++---------- 2 files changed, 32 insertions(+), 25 deletions(-) diff --git a/src/modules/avatar/avatar-controller.ts b/src/modules/avatar/avatar-controller.ts index 362ba117..3fdb73c8 100644 --- a/src/modules/avatar/avatar-controller.ts +++ b/src/modules/avatar/avatar-controller.ts @@ -8,7 +8,6 @@ import * as BABYLON from "@babylonjs/core/Legacy/legacy"; import { Mesh, - Skeleton, ArcRotateCamera, Scene, ActionManager, @@ -22,7 +21,6 @@ import Log from "@Modules/debugging/log"; /* eslint-disable @typescript-eslint/no-magic-numbers */ export class AvatarController { private _avatar: Mesh; - private _skeleton: Skeleton; private _camera: ArcRotateCamera; private _scene: Scene; private _walkSpeed = 2; @@ -39,9 +37,8 @@ export class AvatarController { private _currentAnim: BABYLON.Nullable = null; private _prevAnim: BABYLON.Nullable = null; - constructor(avatar: Mesh, skeleton: Skeleton, camera: ArcRotateCamera, scene: Scene, animGroups: AnimationGroup[]) { + constructor(avatar: Mesh, camera: ArcRotateCamera, scene: Scene, animGroups: AnimationGroup[]) { this._avatar = avatar; - this._skeleton = skeleton; this._camera = camera; this._scene = scene; this._movement = new BABYLON.Vector3(); @@ -85,12 +82,10 @@ export class AvatarController { const target = targetAnim.target as BABYLON.TransformNode; const node = nodes.get(target.name); if (node) { - // console.log(node.name); animGroup.addTargetedAnimation(targetAnim.animation, node); } }); - sourceAnimGroup.dispose(); return animGroup; } diff --git a/src/modules/scene/vscene.ts b/src/modules/scene/vscene.ts index 00077c6a..68cc3f9f 100644 --- a/src/modules/scene/vscene.ts +++ b/src/modules/scene/vscene.ts @@ -48,14 +48,12 @@ export class VScene { _scene: Scene; _entities: Map; _avatarController : Nullable; - _avatarAnimationGroups : AnimationGroup[]; + _avatarAnimationGroups : AnimationGroup[] = []; constructor(pEngine: Engine, pSceneId = 0) { this._entities = new Map(); this._scene = new Scene(pEngine); this._sceneId = pSceneId; - this._avatarController = null; - this._avatarAnimationGroups = []; } getSceneId(): number { @@ -87,15 +85,33 @@ export class VScene { return meshes.meshes[0] as Mesh; } - async loadAvatarAnimations(modelUrl: string): Promise { + async loadAvatarAnimations(modelUrl: string): Promise { const parsedUrl = new URL(modelUrl); const urlWithoutFilename = modelUrl.substring(0, modelUrl.lastIndexOf("/")) + "/"; const filename = parsedUrl.pathname.split("/").pop(); const result = await SceneLoader.ImportMeshAsync("", urlWithoutFilename, filename, this._scene); - this._avatarAnimationGroups = result.animationGroups; - return result; + + result.animationGroups.forEach((sourceAnimGroup) => { + const animGroup = new AnimationGroup(sourceAnimGroup.name); + + // trim unnecessary animation data + // just keep rotationQuaternion animation + sourceAnimGroup.targetedAnimations.forEach((targetAnim) => { + if (targetAnim.animation.targetProperty === "rotationQuaternion") { + animGroup.addTargetedAnimation(targetAnim.animation, targetAnim.target); + } + }); + this._avatarAnimationGroups.push(animGroup); + + sourceAnimGroup.dispose(); + }); + + const animMesh = result.meshes[0].getChildren()[0] as Mesh; + animMesh.parent?.dispose(); + + return animMesh; } /** @@ -231,13 +247,11 @@ export class VScene { aScene.clearColor = new Color4(0.8, 0.8, 0.8, 0.0); // aScene.createDefaultCameraOrLight(true, true, true); - const options = { groundColor: BABYLON.Color3.White() }; aScene.createDefaultEnvironment(options); - // This creates a light, aiming 0,1,0 - to the sky (non-mesh) // const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), aScene); @@ -249,11 +263,8 @@ export class VScene { box.position = new Vector3(5, 0.5, 5); // eslint-disable-next-line @typescript-eslint/no-unused-vars - const animResult = await this.loadAvatarAnimations( + const animMesh = await this.loadAvatarAnimations( "http://localhost:8080/assets/avatars/animations/AnimationsBasic.glb"); - // const animMesh = animResult.meshes[0].getChildren()[0] as Mesh; - // animMesh.parent?.dispose(); - // console.log("animation mesh:", animMesh.name); const avatarPos = new Vector3(0, 0, 0); @@ -266,22 +277,23 @@ export class VScene { camera.attachControl(aScene.getEngine().getRenderingCanvas(), true); // load avatar mesh - // const result = await SceneLoader.ImportMeshAsync("", - // "http://localhost:8080/assets/avatars/meshes/", "nolan.glb", aScene); - + const result = await SceneLoader.ImportMeshAsync("", + "http://localhost:8080/assets/avatars/meshes/", "nolan.glb", aScene); - // use the same mesh temporary - const result = animResult; const avatar = result.meshes[0] as Mesh; avatar.scaling = new Vector3(1, 1, 1); avatar.position = avatarPos; - const skeleton = result.skeletons[0]; + const avatarMesh = avatar.getChildren()[0] as Mesh; + avatarMesh.position = new Vector3(0, 1, 0); + avatarMesh.rotationQuaternion = animMesh.rotationQuaternion; - this._avatarController = new AvatarController(avatar, skeleton, camera, aScene, this._avatarAnimationGroups); + this._avatarController = new AvatarController(avatar, camera, aScene, this._avatarAnimationGroups); this._avatarController.start(); camera.parent = avatar; + + // await this._scene.debugLayer.show(); } } From ed905f6dedf237ef2434ef6f36973b47291249c1 Mon Sep 17 00:00:00 2001 From: nolan Date: Fri, 24 Jun 2022 12:27:43 +0800 Subject: [PATCH 008/716] modify avatar-controller.ts filename and import of babylon.js --- ...atar-controller.ts => AvatarController.ts} | 34 +++++++++++-------- src/modules/avatar/index.ts | 2 +- 2 files changed, 20 insertions(+), 16 deletions(-) rename src/modules/avatar/{avatar-controller.ts => AvatarController.ts} (85%) diff --git a/src/modules/avatar/avatar-controller.ts b/src/modules/avatar/AvatarController.ts similarity index 85% rename from src/modules/avatar/avatar-controller.ts rename to src/modules/avatar/AvatarController.ts index 3fdb73c8..6873ec88 100644 --- a/src/modules/avatar/avatar-controller.ts +++ b/src/modules/avatar/AvatarController.ts @@ -5,14 +5,18 @@ // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html */ -import * as BABYLON from "@babylonjs/core/Legacy/legacy"; +// import * as BABYLON from "@babylonjs/core/Legacy/legacy"; import { + Vector3, Mesh, ArcRotateCamera, Scene, ActionManager, ExecuteCodeAction, - AnimationGroup + AnimationGroup, + Nullable, + Node, + TransformNode } from "@babylonjs/core"; import Log from "@Modules/debugging/log"; @@ -24,27 +28,27 @@ export class AvatarController { private _camera: ArcRotateCamera; private _scene: Scene; private _walkSpeed = 2; - private _movement : BABYLON.Vector3; + private _movement : Vector3; private _rotationSpeed = 40 * Math.PI / 180; private _rotation = 0; // eslint-disable-next-line @typescript-eslint/no-explicit-any private _inputMap : any; - private _idleAnim : BABYLON.Nullable = null; - private _walkFwdAnim : BABYLON.Nullable = null; - private _walkbwdAnim : BABYLON.Nullable = null; - private _turnLeftAnim : BABYLON.Nullable = null; - private _turnRightAnim : BABYLON.Nullable = null; - private _currentAnim: BABYLON.Nullable = null; - private _prevAnim: BABYLON.Nullable = null; + private _idleAnim : Nullable = null; + private _walkFwdAnim : Nullable = null; + private _walkbwdAnim : Nullable = null; + private _turnLeftAnim : Nullable = null; + private _turnRightAnim : Nullable = null; + private _currentAnim: Nullable = null; + private _prevAnim: Nullable = null; constructor(avatar: Mesh, camera: ArcRotateCamera, scene: Scene, animGroups: AnimationGroup[]) { this._avatar = avatar; this._camera = camera; this._scene = scene; - this._movement = new BABYLON.Vector3(); + this._movement = new Vector3(); this._inputMap = {}; - const nodes = new Map(); + const nodes = new Map(); this._avatar.getChildren((node):boolean => { nodes.set(node.name, node); return true; @@ -74,12 +78,12 @@ export class AvatarController { } - static _cloneAnimGroup(sourceAnimGroup : AnimationGroup, nodes : Map, loop = true):AnimationGroup { + static _cloneAnimGroup(sourceAnimGroup : AnimationGroup, nodes : Map, loop = true):AnimationGroup { const animGroup = new AnimationGroup(sourceAnimGroup.name); animGroup.loopAnimation = loop; sourceAnimGroup.targetedAnimations.forEach((targetAnim) => { - const target = targetAnim.target as BABYLON.TransformNode; + const target = targetAnim.target as TransformNode; const node = nodes.get(target.name); if (node) { animGroup.addTargetedAnimation(targetAnim.animation, node); @@ -137,7 +141,7 @@ export class AvatarController { const rot = this._rotation * dt; // eslint-disable-next-line new-cap - this._avatar.rotate(BABYLON.Vector3.Up(), rot); + this._avatar.rotate(Vector3.Up(), rot); this._avatar.movePOV(movement.x, movement.y, movement.z); this._animateAvatar(); diff --git a/src/modules/avatar/index.ts b/src/modules/avatar/index.ts index 064ec907..f5135f00 100644 --- a/src/modules/avatar/index.ts +++ b/src/modules/avatar/index.ts @@ -5,4 +5,4 @@ // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html */ -export { AvatarController } from "./avatar-controller"; +export { AvatarController } from "./AvatarController"; From 08c848d467e17385251d85c6dbd9c662aa7cf6c0 Mon Sep 17 00:00:00 2001 From: nolan Date: Fri, 24 Jun 2022 13:34:35 +0800 Subject: [PATCH 009/716] Remove unused code --- src/modules/avatar/AvatarController.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/modules/avatar/AvatarController.ts b/src/modules/avatar/AvatarController.ts index 6873ec88..dc87e4a1 100644 --- a/src/modules/avatar/AvatarController.ts +++ b/src/modules/avatar/AvatarController.ts @@ -4,8 +4,6 @@ // Distributed under the Apache License, Version 2.0. // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html */ - -// import * as BABYLON from "@babylonjs/core/Legacy/legacy"; import { Vector3, Mesh, @@ -115,7 +113,6 @@ export class AvatarController { private _update():void { - /* eslint-disable @typescript-eslint/no-unsafe-member-access */ /* eslint-disable @typescript-eslint/dot-notation */ this._movement.z = 0; this._rotation = 0; @@ -162,9 +159,9 @@ export class AvatarController { if (this._currentAnim !== null && this._currentAnim !== this._prevAnim) { this._prevAnim?.stop(); - this._currentAnim.start(this._currentAnim.loopAnimation, 1.0, 0.05, this._currentAnim.to, false); + this._currentAnim.start(this._currentAnim.loopAnimation, 1.0, this._currentAnim.from, this._currentAnim.to, false); + this._currentAnim.goToFrame(2); this._prevAnim = this._currentAnim; - // console.log("play anim", this._currentAnim.name, this._currentAnim.from, this._currentAnim.to); } // just for no idle anim case if (this._currentAnim === null && this._prevAnim !== null) { From 4cf9829cd324860de8c2222c7df4b7973819dd36 Mon Sep 17 00:00:00 2001 From: nolan Date: Fri, 24 Jun 2022 13:52:58 +0800 Subject: [PATCH 010/716] Remove unused code --- src/modules/scene/vscene.ts | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/src/modules/scene/vscene.ts b/src/modules/scene/vscene.ts index 68cc3f9f..38aca47c 100644 --- a/src/modules/scene/vscene.ts +++ b/src/modules/scene/vscene.ts @@ -242,27 +242,20 @@ export class VScene { * @returns {Promise} when completed */ async buildTestScene(): Promise { - /* eslint-disable @typescript-eslint/no-magic-numbers */ const aScene = this._scene; + /* eslint-disable @typescript-eslint/no-magic-numbers */ aScene.clearColor = new Color4(0.8, 0.8, 0.8, 0.0); - // aScene.createDefaultCameraOrLight(true, true, true); + const options = { groundColor: BABYLON.Color3.White() }; aScene.createDefaultEnvironment(options); - // This creates a light, aiming 0,1,0 - to the sky (non-mesh) - // const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), aScene); - - // Default intensity is 1. Let's dim the light a small amount - // light.intensity = 0.7; - // BABYLON.MeshBuilder.CreateGround("ground", { width: 30, height: 30 }, aScene); const box = BABYLON.MeshBuilder.CreateBox("box1", {}, aScene); box.position = new Vector3(5, 0.5, 5); - // eslint-disable-next-line @typescript-eslint/no-unused-vars const animMesh = await this.loadAvatarAnimations( "http://localhost:8080/assets/avatars/animations/AnimationsBasic.glb"); @@ -270,7 +263,6 @@ export class VScene { // Creates, angles, distances and targets the camera const camera = new BABYLON.ArcRotateCamera( - // eslint-disable-next-line @typescript-eslint/no-magic-numbers "Camera", -Math.PI / 2, Math.PI / 2, 6, new BABYLON.Vector3(avatarPos.x, avatarPos.y + 1, avatarPos.z), aScene); // This attaches the camera to the canvas @@ -295,5 +287,6 @@ export class VScene { camera.parent = avatar; // await this._scene.debugLayer.show(); + /* eslint-enable @typescript-eslint/no-magic-numbers */ } } From 0f2d0cf6b31eafc29f094cad70f74a0b54e2a155 Mon Sep 17 00:00:00 2001 From: nolan Date: Fri, 24 Jun 2022 14:03:52 +0800 Subject: [PATCH 011/716] Upgrade babylon.js to 5.10.0 --- package-lock.json | 42 ++++++++++++++++++++---------------------- package.json | 6 +++--- 2 files changed, 23 insertions(+), 25 deletions(-) diff --git a/package-lock.json b/package-lock.json index 437d0ad1..de28be56 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1274,37 +1274,30 @@ } }, "@babylonjs/core": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/@babylonjs/core/-/core-4.2.1.tgz", - "integrity": "sha512-Z2ZVNRKPB1UvmMeqQtxCJKrQtQ/hb5FcAZi66YEEE0MKBQlLmf6oZEM9vS1RljPK7NZoV/dZSdwjJgiQlGsuhA==", + "version": "5.10.0", + "resolved": "https://registry.npmjs.org/@babylonjs/core/-/core-5.10.0.tgz", + "integrity": "sha512-xAfEYbYykHRwV633Q0rpbA+v/GpeBm7cVC2/YgwzcySJ5JYB/oAfx/MEKJX4PXIQctZ7SjipcE5HdnMh0H1F2g==", "requires": { - "tslib": ">=1.10.0" + "tslib": "^2.3.1" } }, "@babylonjs/loaders": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/@babylonjs/loaders/-/loaders-4.2.1.tgz", - "integrity": "sha512-huLdk18nTqwXHYIbxpXRTo1smcL1eCD8TvvyWiHciRjPttpRNjoACSR/G2J2FD0ymSBu8ZS8cdMvq1by7x2DsA==", + "version": "5.10.0", + "resolved": "https://registry.npmjs.org/@babylonjs/loaders/-/loaders-5.10.0.tgz", + "integrity": "sha512-n4pQvLyNiT8A08iWD44V/3WdA8I40D8auBrelbfeZ+dQh/4HGnPNkfFAfUrwS00HwP44ncl3DMJcbrYg/hdLog==", "requires": { - "@babylonjs/core": "4.2.1", - "babylonjs-gltf2interface": "4.2.1", - "tslib": ">=1.10.0" - }, - "dependencies": { - "babylonjs-gltf2interface": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/babylonjs-gltf2interface/-/babylonjs-gltf2interface-4.2.1.tgz", - "integrity": "sha512-ZBfKgIoztO1x1nyf9aPQJ+WXmB6Kw0VlyxvcKchIixbICqeeExiN8nmjvypwXC4hl+5ZDMnUKQNrIhh7uzulnA==" - } + "@babylonjs/core": "^5.10.0", + "babylonjs-gltf2interface": "^5.10.0", + "tslib": "^2.3.1" } }, "@babylonjs/materials": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/@babylonjs/materials/-/materials-4.2.1.tgz", - "integrity": "sha512-G4mfmixt2BnATaa2/uhf7xfZv4fqD6bGHocbEWT1Iu0KOJcpU7Q0EYjN8bqx78hVFjd94e4g0/7Bey2JaGrakA==", + "version": "5.10.0", + "resolved": "https://registry.npmjs.org/@babylonjs/materials/-/materials-5.10.0.tgz", + "integrity": "sha512-aTtSbZe5Cfj52C5AAsPH4GSXevIVbqGOCgnoxUq1/9SiSi8Ak3yil7+JZD5XsCSht71+K5/ar4wuln9pXt22oA==", "requires": { - "@babylonjs/core": "4.2.1", - "tslib": ">=1.10.0" + "@babylonjs/core": "^5.10.0", + "tslib": "^2.3.1" } }, "@bcoe/v8-coverage": { @@ -3331,6 +3324,11 @@ "babel-preset-current-node-syntax": "^1.0.0" } }, + "babylonjs-gltf2interface": { + "version": "5.12.1", + "resolved": "https://registry.npmjs.org/babylonjs-gltf2interface/-/babylonjs-gltf2interface-5.12.1.tgz", + "integrity": "sha512-a/4BoUHqqq48xcvPTHuDpbPEQnrTveoDvb9bHEiRdixo6pad40MehqJNs9ZK8ru0RDFLeyCJUPUhMykMazxq8w==" + }, "balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", diff --git a/package.json b/package.json index b69d57d9..72a4f922 100644 --- a/package.json +++ b/package.json @@ -15,9 +15,9 @@ "test": "echo \"No test specified\" && exit 0" }, "dependencies": { - "@babylonjs/core": "^4.2.1", - "@babylonjs/loaders": "^4.2.1", - "@babylonjs/materials": "^4.2.1", + "@babylonjs/core": "^5.10.0", + "@babylonjs/loaders": "^5.10.0", + "@babylonjs/materials": "^5.10.0", "@quasar/extras": "^1.12.1", "@vircadia/web-sdk": "^2022.1.1", "axios": "^0.21.4", From 3473da502b91ea010fb50d1f27adc194dfa25a00 Mon Sep 17 00:00:00 2001 From: nolan Date: Fri, 24 Jun 2022 15:25:07 +0800 Subject: [PATCH 012/716] Add pressing a key show/hide babylon.js debug layer in development mode --- src/modules/avatar/AvatarController.ts | 8 ++++--- src/modules/scene/vscene.ts | 30 +++++++++++++++++++++++++- 2 files changed, 34 insertions(+), 4 deletions(-) diff --git a/src/modules/avatar/AvatarController.ts b/src/modules/avatar/AvatarController.ts index dc87e4a1..f16c7af9 100644 --- a/src/modules/avatar/AvatarController.ts +++ b/src/modules/avatar/AvatarController.ts @@ -21,6 +21,7 @@ import Log from "@Modules/debugging/log"; /* eslint-disable @typescript-eslint/no-magic-numbers */ +/* eslint-disable @typescript-eslint/no-unsafe-member-access */ export class AvatarController { private _avatar: Mesh; private _camera: ArcRotateCamera; @@ -92,11 +93,12 @@ export class AvatarController { } public start():void { - /* eslint-disable @typescript-eslint/no-unsafe-member-access */ this._scene.registerBeforeRender(this._update.bind(this)); // scene action manager to detect inputs - this._scene.actionManager = new ActionManager(this._scene); + if (!this._scene.actionManager) { + this._scene.actionManager = new ActionManager(this._scene); + } this._scene.actionManager.registerAction( new ExecuteCodeAction(ActionManager.OnKeyDownTrigger, @@ -159,7 +161,7 @@ export class AvatarController { if (this._currentAnim !== null && this._currentAnim !== this._prevAnim) { this._prevAnim?.stop(); - this._currentAnim.start(this._currentAnim.loopAnimation, 1.0, this._currentAnim.from, this._currentAnim.to, false); + this._currentAnim.start(this._currentAnim.loopAnimation, 1.0, 0.05, this._currentAnim.to, false); this._currentAnim.goToFrame(2); this._prevAnim = this._currentAnim; } diff --git a/src/modules/scene/vscene.ts b/src/modules/scene/vscene.ts index 38aca47c..65bd1646 100644 --- a/src/modules/scene/vscene.ts +++ b/src/modules/scene/vscene.ts @@ -9,7 +9,8 @@ /* eslint-disable new-cap */ import * as BABYLON from "@babylonjs/core/Legacy/legacy"; -import { AnimationGroup, Engine, MeshBuilder, Scene, SceneLoader } from "@babylonjs/core"; +import { AnimationGroup, Engine, MeshBuilder, Scene, SceneLoader, + ActionManager, ActionEvent, ExecuteCodeAction } from "@babylonjs/core"; import { Color3, Color4, Vector3 } from "@babylonjs/core/Maths/math"; import { Mesh } from "@babylonjs/core/Meshes/mesh"; import "@babylonjs/loaders/glTF"; @@ -53,6 +54,13 @@ export class VScene { constructor(pEngine: Engine, pSceneId = 0) { this._entities = new Map(); this._scene = new Scene(pEngine); + + this._scene.actionManager = new ActionManager(this._scene); + this._scene.actionManager.registerAction( + new ExecuteCodeAction(ActionManager.OnKeyUpTrigger, + this._onKeyUp.bind(this)) + ); + this._sceneId = pSceneId; } @@ -289,4 +297,24 @@ export class VScene { // await this._scene.debugLayer.show(); /* eslint-enable @typescript-eslint/no-magic-numbers */ } + + // eslint-disable-next-line class-methods-use-this + private _onKeyUp(evt: ActionEvent) :void { + // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access + switch (evt.sourceEvent.key) { + case "|": + if (process.env.NODE_ENV === "development") { + if (this._scene.debugLayer.isVisible()) { + this._scene.debugLayer.hide(); + } else { + // eslint-disable-next-line @typescript-eslint/no-floating-promises + this._scene.debugLayer.show(); + } + } + break; + + default: + break; + } + } } From 1497e2a0f514518054a910fcc4437d248fb7c098 Mon Sep 17 00:00:00 2001 From: nolan Date: Fri, 24 Jun 2022 17:40:47 +0800 Subject: [PATCH 013/716] Fix animation t pose appear issue --- src/modules/avatar/AvatarController.ts | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/modules/avatar/AvatarController.ts b/src/modules/avatar/AvatarController.ts index f16c7af9..90a4f0f7 100644 --- a/src/modules/avatar/AvatarController.ts +++ b/src/modules/avatar/AvatarController.ts @@ -161,14 +161,8 @@ export class AvatarController { if (this._currentAnim !== null && this._currentAnim !== this._prevAnim) { this._prevAnim?.stop(); - this._currentAnim.start(this._currentAnim.loopAnimation, 1.0, 0.05, this._currentAnim.to, false); - this._currentAnim.goToFrame(2); + this._currentAnim.start(this._currentAnim.loopAnimation, 1.0, 2, this._currentAnim.to, false); this._prevAnim = this._currentAnim; } - // just for no idle anim case - if (this._currentAnim === null && this._prevAnim !== null) { - this._prevAnim.stop(); - this._prevAnim = null; - } } } From b6588298330c404ea6525f48c2a28d53887d8ece Mon Sep 17 00:00:00 2001 From: nolan Date: Sat, 25 Jun 2022 11:22:24 +0800 Subject: [PATCH 014/716] Fix avatar Hip animation --- src/modules/scene/vscene.ts | 28 ++++++++++++++++++++-------- 1 file changed, 20 insertions(+), 8 deletions(-) diff --git a/src/modules/scene/vscene.ts b/src/modules/scene/vscene.ts index 65bd1646..49b374dc 100644 --- a/src/modules/scene/vscene.ts +++ b/src/modules/scene/vscene.ts @@ -101,13 +101,29 @@ export class VScene { const result = await SceneLoader.ImportMeshAsync("", urlWithoutFilename, filename, this._scene); + const mesh = result.meshes[0].getChildren()[0] as Mesh; + result.animationGroups.forEach((sourceAnimGroup) => { + const animGroup = new AnimationGroup(sourceAnimGroup.name); + // scale of Armature + const scale = mesh.scaling; // trim unnecessary animation data - // just keep rotationQuaternion animation sourceAnimGroup.targetedAnimations.forEach((targetAnim) => { - if (targetAnim.animation.targetProperty === "rotationQuaternion") { + // scale postion animation of Hips node + // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access + if (targetAnim.target.name === "Hips" && targetAnim.animation.targetProperty === "position") { + const anim = targetAnim.animation.clone(); + const keys = anim.getKeys(); + keys.forEach((keyFrame) => { + const pos = keyFrame.value as Vector3; + keyFrame.value = pos.multiply(scale); + }); + + animGroup.addTargetedAnimation(anim, targetAnim.target); + // keep rotationQuaternion animation of all nodes + } else if (targetAnim.animation.targetProperty === "rotationQuaternion") { animGroup.addTargetedAnimation(targetAnim.animation, targetAnim.target); } }); @@ -116,10 +132,9 @@ export class VScene { sourceAnimGroup.dispose(); }); - const animMesh = result.meshes[0].getChildren()[0] as Mesh; - animMesh.parent?.dispose(); + mesh.parent?.dispose(); - return animMesh; + return mesh; } /** @@ -286,15 +301,12 @@ export class VScene { avatar.position = avatarPos; const avatarMesh = avatar.getChildren()[0] as Mesh; - avatarMesh.position = new Vector3(0, 1, 0); avatarMesh.rotationQuaternion = animMesh.rotationQuaternion; this._avatarController = new AvatarController(avatar, camera, aScene, this._avatarAnimationGroups); this._avatarController.start(); camera.parent = avatar; - - // await this._scene.debugLayer.show(); /* eslint-enable @typescript-eslint/no-magic-numbers */ } From 37b02f5afe939c18f3e56ee3ad39f6d3bc2fc67d Mon Sep 17 00:00:00 2001 From: nolan Date: Mon, 27 Jun 2022 10:10:17 +0800 Subject: [PATCH 015/716] Modify code headers --- src/modules/avatar/AvatarController.ts | 11 ++++++++--- src/modules/avatar/index.ts | 10 +++++++--- 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/src/modules/avatar/AvatarController.ts b/src/modules/avatar/AvatarController.ts index 90a4f0f7..2bffc770 100644 --- a/src/modules/avatar/AvatarController.ts +++ b/src/modules/avatar/AvatarController.ts @@ -1,9 +1,14 @@ -/* -// Copyright 2021 Vircadia contributors. +// +// AvatarController.ts +// +// Created by Nolan Huang on 17 Jun 2022. +// Copyright 2022 Vircadia contributors. +// Copyright 2022 DigiSomni LLC. // // Distributed under the Apache License, Version 2.0. // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html -*/ +// + import { Vector3, Mesh, diff --git a/src/modules/avatar/index.ts b/src/modules/avatar/index.ts index f5135f00..f92206c0 100644 --- a/src/modules/avatar/index.ts +++ b/src/modules/avatar/index.ts @@ -1,8 +1,12 @@ -/* -// Copyright 2021 Vircadia contributors. +// +// index.ts +// +// Created by Nolan Huang on 17 Jun 2022. +// Copyright 2022 Vircadia contributors. +// Copyright 2022 DigiSomni LLC. // // Distributed under the Apache License, Version 2.0. // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html -*/ +// export { AvatarController } from "./AvatarController"; From 06605c923a99a87749a7b2d248c4598a6affebec Mon Sep 17 00:00:00 2001 From: nolan Date: Mon, 27 Jun 2022 11:04:31 +0800 Subject: [PATCH 016/716] Add import & dependency of inspector --- package-lock.json | 80 +++++++++++++++++++++++++++++++++++++ package.json | 1 + src/modules/scene/vscene.ts | 5 +++ 3 files changed, 86 insertions(+) diff --git a/package-lock.json b/package-lock.json index de28be56..f275e7f9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1281,6 +1281,42 @@ "tslib": "^2.3.1" } }, + "@babylonjs/gui": { + "version": "5.12.1", + "resolved": "https://registry.npmjs.org/@babylonjs/gui/-/gui-5.12.1.tgz", + "integrity": "sha512-UQhsTn330Y0UDPMfw5Mn5G+AaiSWjt33fgnIdPYEhvSqzK0mui3m1/nMghi/Mo5pTYMsSZQLDfn4TbyLZa6tug==", + "requires": { + "tslib": "^2.4.0" + }, + "dependencies": { + "tslib": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", + "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==" + } + } + }, + "@babylonjs/gui-editor": { + "version": "5.12.1", + "resolved": "https://registry.npmjs.org/@babylonjs/gui-editor/-/gui-editor-5.12.1.tgz", + "integrity": "sha512-Ca/FduyJ240Z47OeRuSMJI3SgG/yoUxf/Nyxtzx4eYQk69OU/LwXAjG6ZBGhMTtfgcHygTIodO++Hb3sidy1vg==" + }, + "@babylonjs/inspector": { + "version": "5.10.0", + "resolved": "https://registry.npmjs.org/@babylonjs/inspector/-/inspector-5.10.0.tgz", + "integrity": "sha512-zxgMstbQozDqRS9LzOHNiYqXxO+MO5QAW1CZmlXHAinXfwZq73sV/SSisikuAw9w1nmB0EsGLlrtLMzmkh2wiQ==", + "requires": { + "@babylonjs/core": "^5.10.0", + "@babylonjs/gui": "^5.10.0", + "@babylonjs/gui-editor": "^5.10.0", + "@babylonjs/loaders": "^5.10.0", + "@babylonjs/materials": "^5.10.0", + "@babylonjs/serializers": "^5.10.0", + "@fortawesome/fontawesome-svg-core": "^6.1.0", + "@fortawesome/free-regular-svg-icons": "^6.0.0", + "@fortawesome/free-solid-svg-icons": "^6.0.0" + } + }, "@babylonjs/loaders": { "version": "5.10.0", "resolved": "https://registry.npmjs.org/@babylonjs/loaders/-/loaders-5.10.0.tgz", @@ -1300,6 +1336,21 @@ "tslib": "^2.3.1" } }, + "@babylonjs/serializers": { + "version": "5.12.1", + "resolved": "https://registry.npmjs.org/@babylonjs/serializers/-/serializers-5.12.1.tgz", + "integrity": "sha512-zYzirUaqBQHODJURlN9BhNqWGvhGdTIFDzzxBw7DCYfDiimVwRXFMEDm73JP/qqJbzMl8COjZUaiIbtOZvR5gg==", + "requires": { + "tslib": "^2.4.0" + }, + "dependencies": { + "tslib": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", + "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==" + } + } + }, "@bcoe/v8-coverage": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz", @@ -1346,6 +1397,35 @@ } } }, + "@fortawesome/fontawesome-common-types": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz", + "integrity": "sha512-wVn5WJPirFTnzN6tR95abCx+ocH+3IFLXAgyavnf9hUmN0CfWoDjPT/BAWsUVwSlYYVBeCLJxaqi7ZGe4uSjBA==" + }, + "@fortawesome/fontawesome-svg-core": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz", + "integrity": "sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.1.1" + } + }, + "@fortawesome/free-regular-svg-icons": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.1.1.tgz", + "integrity": "sha512-xXiW7hcpgwmWtndKPOzG+43fPH7ZjxOaoeyooptSztGmJxCAflHZxXNK0GcT0uEsR4jTGQAfGklDZE5NHoBhKg==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.1.1" + } + }, + "@fortawesome/free-solid-svg-icons": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.1.tgz", + "integrity": "sha512-0/5exxavOhI/D4Ovm2r3vxNojGZioPwmFrKg0ZUH69Q68uFhFPs6+dhAToh6VEQBntxPRYPuT5Cg1tpNa9JUPg==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.1.1" + } + }, "@humanwhocodes/config-array": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz", diff --git a/package.json b/package.json index 72a4f922..96c468f4 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ }, "dependencies": { "@babylonjs/core": "^5.10.0", + "@babylonjs/inspector": "^5.10.0", "@babylonjs/loaders": "^5.10.0", "@babylonjs/materials": "^5.10.0", "@quasar/extras": "^1.12.1", diff --git a/src/modules/scene/vscene.ts b/src/modules/scene/vscene.ts index 49b374dc..e6df0554 100644 --- a/src/modules/scene/vscene.ts +++ b/src/modules/scene/vscene.ts @@ -52,6 +52,11 @@ export class VScene { _avatarAnimationGroups : AnimationGroup[] = []; constructor(pEngine: Engine, pSceneId = 0) { + if (process.env.NODE_ENV === "development") { + import("@babylonjs/core/Debug/debugLayer"); + import("@babylonjs/inspector"); + } + this._entities = new Map(); this._scene = new Scene(pEngine); From 3100155ee9273dbfc6687a1093638b33e605d0c0 Mon Sep 17 00:00:00 2001 From: nolan Date: Mon, 27 Jun 2022 11:06:45 +0800 Subject: [PATCH 017/716] Replace evt.sourceEvent.key with evt.sourceEvent.code --- src/modules/avatar/AvatarController.ts | 27 +++++++++++++------------- src/modules/scene/vscene.ts | 12 +++++++----- 2 files changed, 20 insertions(+), 19 deletions(-) diff --git a/src/modules/avatar/AvatarController.ts b/src/modules/avatar/AvatarController.ts index 2bffc770..3d10be34 100644 --- a/src/modules/avatar/AvatarController.ts +++ b/src/modules/avatar/AvatarController.ts @@ -22,8 +22,6 @@ import { TransformNode } from "@babylonjs/core"; -import Log from "@Modules/debugging/log"; - /* eslint-disable @typescript-eslint/no-magic-numbers */ /* eslint-disable @typescript-eslint/no-unsafe-member-access */ @@ -108,13 +106,13 @@ export class AvatarController { this._scene.actionManager.registerAction( new ExecuteCodeAction(ActionManager.OnKeyDownTrigger, (evt) => { - this._inputMap[evt.sourceEvent.key] = evt.sourceEvent.type === "keydown"; + this._inputMap[evt.sourceEvent.code] = evt.sourceEvent.type === "keydown"; })); this._scene.actionManager.registerAction( new ExecuteCodeAction(ActionManager.OnKeyUpTrigger, (evt) => { - this._inputMap[evt.sourceEvent.key] = evt.sourceEvent.type === "keydown"; + this._inputMap[evt.sourceEvent.code] = evt.sourceEvent.type === "keydown"; })); } @@ -124,20 +122,21 @@ export class AvatarController { this._movement.z = 0; this._rotation = 0; - if (this._inputMap["w"]) { + if (this._inputMap["KeyW"]) { this._movement.z = -this._walkSpeed; - } else if (this._inputMap["s"]) { + } else if (this._inputMap["KeyS"]) { this._movement.z = this._walkSpeed; } - if (this._inputMap["a"]) { + if (this._inputMap["KeyA"]) { this._rotation = -this._rotationSpeed; - } else if (this._inputMap["d"]) { + } else if (this._inputMap["KeyD"]) { this._rotation = this._rotationSpeed; } - if (this._inputMap[" "]) { - Log.debug(Log.types.AVATAR, "space"); + // eslint-disable-next-line no-empty + if (this._inputMap["Space"]) { + } const dt = this._scene.getEngine().getDeltaTime() / 1000; @@ -154,13 +153,13 @@ export class AvatarController { private _animateAvatar() { this._currentAnim = this._idleAnim; - if (this._inputMap["w"]) { + if (this._inputMap["KeyW"]) { this._currentAnim = this._walkFwdAnim; - } else if (this._inputMap["s"]) { + } else if (this._inputMap["KeyS"]) { this._currentAnim = this._walkbwdAnim; - } else if (this._inputMap["a"]) { + } else if (this._inputMap["KeyA"]) { this._currentAnim = this._turnLeftAnim; - } else if (this._inputMap["d"]) { + } else if (this._inputMap["KeyD"]) { this._currentAnim = this._turnRightAnim; } diff --git a/src/modules/scene/vscene.ts b/src/modules/scene/vscene.ts index e6df0554..156705eb 100644 --- a/src/modules/scene/vscene.ts +++ b/src/modules/scene/vscene.ts @@ -317,14 +317,15 @@ export class VScene { // eslint-disable-next-line class-methods-use-this private _onKeyUp(evt: ActionEvent) :void { - // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access - switch (evt.sourceEvent.key) { - case "|": - if (process.env.NODE_ENV === "development") { + /* eslint-disable @typescript-eslint/no-unsafe-member-access */ + switch (evt.sourceEvent.code) { + case "Slash": + if (process.env.NODE_ENV === "development" + && evt.sourceEvent.shiftKey) { if (this._scene.debugLayer.isVisible()) { this._scene.debugLayer.hide(); } else { - // eslint-disable-next-line @typescript-eslint/no-floating-promises + // eslint-disable-next-line @typescript-eslint/no-floating-promises this._scene.debugLayer.show(); } } @@ -333,5 +334,6 @@ export class VScene { default: break; } + /* eslint-enbale @typescript-eslint/no-unsafe-member-access */ } } From 4357c3e81e8b5a379946bfb5d9c9531ae782c626 Mon Sep 17 00:00:00 2001 From: nolan Date: Mon, 27 Jun 2022 13:25:45 +0800 Subject: [PATCH 018/716] Fix BABYLON import --- src/modules/scene/vscene.ts | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/src/modules/scene/vscene.ts b/src/modules/scene/vscene.ts index 156705eb..27bcc40c 100644 --- a/src/modules/scene/vscene.ts +++ b/src/modules/scene/vscene.ts @@ -8,11 +8,10 @@ // This is disabled because TS complains about BABYLON's use of cap'ed function names /* eslint-disable new-cap */ -import * as BABYLON from "@babylonjs/core/Legacy/legacy"; import { AnimationGroup, Engine, MeshBuilder, Scene, SceneLoader, - ActionManager, ActionEvent, ExecuteCodeAction } from "@babylonjs/core"; + ActionManager, ActionEvent, ExecuteCodeAction, ArcRotateCamera, StandardMaterial, + Mesh } from "@babylonjs/core"; import { Color3, Color4, Vector3 } from "@babylonjs/core/Maths/math"; -import { Mesh } from "@babylonjs/core/Meshes/mesh"; import "@babylonjs/loaders/glTF"; import "@babylonjs/core/Meshes/meshBuilder"; // General Modules @@ -98,7 +97,7 @@ export class VScene { return meshes.meshes[0] as Mesh; } - async loadAvatarAnimations(modelUrl: string): Promise { + async loadAvatarAnimations(modelUrl: string): Promise { const parsedUrl = new URL(modelUrl); const urlWithoutFilename = modelUrl.substring(0, modelUrl.lastIndexOf("/")) + "/"; const filename = parsedUrl.pathname.split("/").pop(); @@ -222,7 +221,7 @@ export class VScene { // Apply a color if requested. if (pProperties.color) { - const colorMaterial = new BABYLON.StandardMaterial(pProperties.name + "-material", this._scene); + const colorMaterial = new StandardMaterial(pProperties.name + "-material", this._scene); colorMaterial.emissiveColor = new Color3(pProperties.color.r, pProperties.color.g, pProperties.color.b); entity.material = colorMaterial; } @@ -276,12 +275,12 @@ export class VScene { aScene.clearColor = new Color4(0.8, 0.8, 0.8, 0.0); const options = { - groundColor: BABYLON.Color3.White() + groundColor: Color3.White() }; aScene.createDefaultEnvironment(options); - const box = BABYLON.MeshBuilder.CreateBox("box1", {}, aScene); + const box = MeshBuilder.CreateBox("box1", {}, aScene); box.position = new Vector3(5, 0.5, 5); const animMesh = await this.loadAvatarAnimations( @@ -290,8 +289,8 @@ export class VScene { const avatarPos = new Vector3(0, 0, 0); // Creates, angles, distances and targets the camera - const camera = new BABYLON.ArcRotateCamera( - "Camera", -Math.PI / 2, Math.PI / 2, 6, new BABYLON.Vector3(avatarPos.x, avatarPos.y + 1, avatarPos.z), aScene); + const camera = new ArcRotateCamera( + "Camera", -Math.PI / 2, Math.PI / 2, 6, new Vector3(avatarPos.x, avatarPos.y + 1, avatarPos.z), aScene); // This attaches the camera to the canvas camera.attachControl(aScene.getEngine().getRenderingCanvas(), true); From 0440eee4ba668f10449e2553a11ac03666380dc9 Mon Sep 17 00:00:00 2001 From: nolan Date: Tue, 28 Jun 2022 13:43:43 +0800 Subject: [PATCH 019/716] Add walk left and walk right control --- src/modules/avatar/AvatarController.ts | 57 ++++++++++++++++++++------ 1 file changed, 44 insertions(+), 13 deletions(-) diff --git a/src/modules/avatar/AvatarController.ts b/src/modules/avatar/AvatarController.ts index 3d10be34..2918fc1f 100644 --- a/src/modules/avatar/AvatarController.ts +++ b/src/modules/avatar/AvatarController.ts @@ -1,3 +1,4 @@ +/* eslint-disable new-cap */ // // AvatarController.ts // @@ -19,17 +20,19 @@ import { AnimationGroup, Nullable, Node, - TransformNode + TransformNode, + Scalar } from "@babylonjs/core"; /* eslint-disable @typescript-eslint/no-magic-numbers */ /* eslint-disable @typescript-eslint/no-unsafe-member-access */ +/* eslint-disable @typescript-eslint/dot-notation */ export class AvatarController { private _avatar: Mesh; private _camera: ArcRotateCamera; private _scene: Scene; - private _walkSpeed = 2; + private _walkSpeed = 5; private _movement : Vector3; private _rotationSpeed = 40 * Math.PI / 180; private _rotation = 0; @@ -38,11 +41,15 @@ export class AvatarController { private _idleAnim : Nullable = null; private _walkFwdAnim : Nullable = null; private _walkbwdAnim : Nullable = null; + private _walkLeftAnim : Nullable = null; + private _walkRightAnim : Nullable = null; private _turnLeftAnim : Nullable = null; private _turnRightAnim : Nullable = null; private _currentAnim: Nullable = null; private _prevAnim: Nullable = null; + private _shiftKey = false; + constructor(avatar: Mesh, camera: ArcRotateCamera, scene: Scene, animGroups: AnimationGroup[]) { this._avatar = avatar; this._camera = camera; @@ -67,6 +74,12 @@ export class AvatarController { case "walk_bwd": this._walkbwdAnim = AvatarController._cloneAnimGroup(animGroup, nodes); break; + case "walk_left": + this._walkLeftAnim = AvatarController._cloneAnimGroup(animGroup, nodes); + break; + case "walk_right": + this._walkRightAnim = AvatarController._cloneAnimGroup(animGroup, nodes); + break; case "turn_left": this._turnLeftAnim = AvatarController._cloneAnimGroup(animGroup, nodes); break; @@ -107,31 +120,42 @@ export class AvatarController { new ExecuteCodeAction(ActionManager.OnKeyDownTrigger, (evt) => { this._inputMap[evt.sourceEvent.code] = evt.sourceEvent.type === "keydown"; + this._shiftKey = evt.sourceEvent.shiftKey === true; })); this._scene.actionManager.registerAction( new ExecuteCodeAction(ActionManager.OnKeyUpTrigger, (evt) => { this._inputMap[evt.sourceEvent.code] = evt.sourceEvent.type === "keydown"; + this._shiftKey = evt.sourceEvent.shiftKey === true; })); } private _update():void { - /* eslint-disable @typescript-eslint/dot-notation */ - this._movement.z = 0; - this._rotation = 0; - if (this._inputMap["KeyW"]) { - this._movement.z = -this._walkSpeed; + this._movement.z = Scalar.Lerp(this._movement.z, -this._walkSpeed, 0.1); } else if (this._inputMap["KeyS"]) { - this._movement.z = this._walkSpeed; + this._movement.z = Scalar.Lerp(this._movement.z, this._walkSpeed, 0.1); + } else { + this._movement.z = 0; } if (this._inputMap["KeyA"]) { - this._rotation = -this._rotationSpeed; + if (this._shiftKey) { + this._movement.x = Scalar.Lerp(this._movement.x, this._walkSpeed, 0.1); + } else { + this._rotation = Scalar.Lerp(this._rotation, -this._rotationSpeed, 0.1); + } } else if (this._inputMap["KeyD"]) { - this._rotation = this._rotationSpeed; + if (this._shiftKey) { + this._movement.x = Scalar.Lerp(this._movement.x, -this._walkSpeed, 0.1); + } else { + this._rotation = Scalar.Lerp(this._rotation, this._rotationSpeed, 0.1); + } + } else { + this._movement.x = 0; + this._rotation = 0; } // eslint-disable-next-line no-empty @@ -143,7 +167,6 @@ export class AvatarController { const movement = this._movement.scale(dt); const rot = this._rotation * dt; - // eslint-disable-next-line new-cap this._avatar.rotate(Vector3.Up(), rot); this._avatar.movePOV(movement.x, movement.y, movement.z); @@ -158,9 +181,17 @@ export class AvatarController { } else if (this._inputMap["KeyS"]) { this._currentAnim = this._walkbwdAnim; } else if (this._inputMap["KeyA"]) { - this._currentAnim = this._turnLeftAnim; + if (this._shiftKey) { + this._currentAnim = this._walkRightAnim; + } else { + this._currentAnim = this._turnLeftAnim; + } } else if (this._inputMap["KeyD"]) { - this._currentAnim = this._turnRightAnim; + if (this._shiftKey) { + this._currentAnim = this._walkLeftAnim; + } else { + this._currentAnim = this._turnRightAnim; + } } if (this._currentAnim !== null && this._currentAnim !== this._prevAnim) { From 1d5ef88ed70881f0577e31a4b576525c585fa469 Mon Sep 17 00:00:00 2001 From: Giga Date: Tue, 28 Jun 2022 17:48:37 +1200 Subject: [PATCH 020/716] Don't hide top bar for some overlays --- src/components/overlays/debug/DebugWindow.vue | 2 +- src/components/overlays/explore/Explore.vue | 2 +- src/components/overlays/people/People.vue | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/overlays/debug/DebugWindow.vue b/src/components/overlays/debug/DebugWindow.vue index b66abc76..ebc99f53 100644 --- a/src/components/overlays/debug/DebugWindow.vue +++ b/src/components/overlays/debug/DebugWindow.vue @@ -22,7 +22,7 @@ :defaultWidth="600" :defaultLeft="40" :defaultTop="400" - :hoverShowBar="true" + :hoverShowBar="false" :style="{ 'background': 'rgba(0, 0, 0, 0.3)', 'box-shadow': 'none', border: 'none' }" > Date: Tue, 28 Jun 2022 17:59:07 +1200 Subject: [PATCH 021/716] Remove reset button --- src/components/components/login/MetaverseLogin.vue | 7 ------- src/components/components/login/MetaverseRegister.vue | 9 --------- 2 files changed, 16 deletions(-) diff --git a/src/components/components/login/MetaverseLogin.vue b/src/components/components/login/MetaverseLogin.vue index 1a50b30f..8e010446 100644 --- a/src/components/components/login/MetaverseLogin.vue +++ b/src/components/components/login/MetaverseLogin.vue @@ -11,7 +11,6 @@