Skip to content

Commit

Permalink
animation setup
Browse files Browse the repository at this point in the history
  • Loading branch information
neuroprod committed Nov 27, 2023
1 parent 14bb59c commit 510d74c
Show file tree
Hide file tree
Showing 12 changed files with 329 additions and 208 deletions.
Binary file modified frontend/public/character_animation.bin
Binary file not shown.
359 changes: 177 additions & 182 deletions frontend/public/character_animation.json

Large diffs are not rendered by default.

10 changes: 7 additions & 3 deletions frontend/src/GLFTLoader.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export default class GLFTLoader {
public modelsGlass: Array<Model> = []
public modelsByName: { [name: string]: Model } = {};
public objects: Array<Object3D> = []
public objectsByID: { [id: number]: Object3D } = {};
public objectsByName: { [name: string]: Object3D } = {};
public meshes: Array<Mesh> = []
public materials: Array<Material> = []
Expand All @@ -39,7 +40,7 @@ export default class GLFTLoader {
private mainShader: TestShader;
private glassShader: GlassShader;
private url: string;
private animations: Array<Animation> = []
public animations: Array<Animation> = []


constructor(renderer: Renderer, url: string, preLoader: PreLoader) {
Expand Down Expand Up @@ -107,16 +108,17 @@ export default class GLFTLoader {
let interpolation = sampler.interpolation;

let data = this.getAnimationData(this.accessors[sampler.output], c.target.path);
let targetNode = this.objectsByID[c.target.node];

if (type == "rotation") {

let channel = new AnimationChannelQuaternion(type, start, stop, interpolation, timeData, this.objects[c.target.node])
let channel = new AnimationChannelQuaternion(type, start, stop, interpolation, timeData,targetNode )
channel.setData(data);
an.addChannel(channel);

} else if (type == "translation" || type == "scale") {

let channel = new AnimationChannelVector3(type, start, stop, interpolation, timeData, this.objects[c.target.node])
let channel = new AnimationChannelVector3(type, start, stop, interpolation, timeData, targetNode)
channel.setData(data);
an.addChannel(channel);
}
Expand Down Expand Up @@ -188,6 +190,8 @@ export default class GLFTLoader {
} else {
node = new Object3D(this.renderer, nodeData.name)
}

this.objectsByID[nodeID] = node;
this.objects.push(node);
this.objectsByName[node.label] = node;
parent.addChild(node);
Expand Down
30 changes: 15 additions & 15 deletions frontend/src/Main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,17 +31,12 @@ import CombinePass from "./renderPasses/CombinePass";
import RenderSettings from "./RenderSettings";
import BlurBloom from "./renderPasses/BlurBloom";
import {FpsScreen} from "./extras/FpsScreen";
import Texture from "./lib/textures/Texture";
import {TextureFormat} from "./lib/WebGPUConstants";
import Model from "./lib/model/Model";
import Material from "./lib/core/Material";
import Sphere from "./lib/meshes/Sphere";
import CubeTestShader from "./shaders/CubeTestShader";
import ShadowCubePass from "./renderPasses/ShadowCubePass";

import ShadowCube from "./renderPasses/ShadowCube";
import MainLight from "./MainLight";
import Box from "./lib/meshes/Box";

import TransformDebugger from "./lib/animation/TransformDebugger";
import AnimationMixer from "./lib/animation/AnimationMixer";


export default class Main {
Expand Down Expand Up @@ -82,6 +77,8 @@ export default class Main {
private centerRightHolder: Object3D;
private glFTLoaderChar: GLFTLoader;
private transformDebugger: TransformDebugger;
private animationMixer: AnimationMixer;


constructor(canvas: HTMLCanvasElement) {

Expand Down Expand Up @@ -169,8 +166,10 @@ export default class Main {

// this.glFTLoaderChar.root.addChild(m)
}
// this.glFTLoaderChar.root.setScale(100,100,100)
this.transformDebugger =new TransformDebugger(this.renderer, this.gBufferPass.modelRenderer,this.glFTLoaderChar.root.children[0]);

this.animationMixer = new AnimationMixer()
this.animationMixer.setAnimations(this.glFTLoaderChar.animations)
this.transformDebugger =new TransformDebugger(this.renderer, this.gBufferPass.modelRenderer,this.glFTLoaderChar.root.children[0]);
this.shadowPass.setModels(this.gBufferPass.modelRenderer.models);

this.laptopScreen =new LaptopScreen(this.renderer, this.glFTLoader.objectsByName["labtop"]);
Expand Down Expand Up @@ -225,12 +224,14 @@ this.transformDebugger =new TransformDebugger(this.renderer, this.gBufferPass.mo
}

private update() {
this.animationMixer.update();

this.leftHolder.setPosition(-this.renderer.ratio * 3 / 2, 0, 0)
this.rightHolder.setPosition(this.renderer.ratio * 3 / 2, 0, 0)
this.centerRightHolder.setPosition(-this.renderer.ratio * 3 / 4 +2, 0, 0)

this.glFTLoader.root.setPosition(0, -1.5, 0)
this.glFTLoaderChar.root.setPosition(-1.5, -1.5, -1);
this.glFTLoaderChar.root.setPosition(0, -1.5, -1);

this.updateCamera();
this.mill.update();
Expand All @@ -244,19 +245,18 @@ this.transformDebugger =new TransformDebugger(this.renderer, this.gBufferPass.mo
if(!this.renderer.useTimeStampQuery) UI.LText("Enable by running Chrome with: --enable-dawn-features=allow_unsafe_apis","",true)
this.timeStampQuery.onUI();
UI.popWindow()

this.lightPass.onUI();

UI.pushWindow("Render Setting")
this.canvasRenderPass.onUI();
UI.pushGroup("AO");
this.aoPass.onUI();
UI.popGroup()
RenderSettings.onUI();


this.reflectionPass.onUI();

UI.popWindow()

this.animationMixer.onUI();


}
Expand Down
29 changes: 26 additions & 3 deletions frontend/src/lib/animation/Animation.ts
Original file line number Diff line number Diff line change
@@ -1,28 +1,51 @@
import ObjectGPU from "../core/ObjectGPU";
import Renderer from "../Renderer";
import AnimationChannel from "./AnimationChannel";
import Timer from "../Timer";

export default class Animation extends ObjectGPU
{
private channels: Array<AnimationChannel>=[] ;
private startTime :number=Number.MAX_VALUE;
private stopTime :number=Number.MIN_VALUE;
private time:number =0;
private totalTime: number;
constructor(renderer:Renderer,label:string) {
super(renderer,label)

}

addChannel(channel: AnimationChannel) {
this.stopTime = Math.min(channel.startTime,this.startTime)
this.startTime = Math.max(channel.stopTime,this.stopTime)
this.startTime = Math.min(channel.startTime,this.startTime)
this.stopTime = Math.max(channel.stopTime,this.stopTime)
this.channels.push(channel)

}
init(){

this.totalTime =this.stopTime-this.startTime;
for(let c of this.channels)
{
c.setToObj();
}
}
update()
{
this.time +=Timer.delta;
if(this.time>this.totalTime){
this.time-=this.totalTime;
}
let t = this.time+this.startTime;

for(let c of this.channels)
{
c.setTime(t);
}
}

set() {
for(let c of this.channels)
{
c.setToObj()
}
}
}
28 changes: 27 additions & 1 deletion frontend/src/lib/animation/AnimationChannel.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,40 @@ export default class AnimationChannel{
stopTime:number;
private interpolation: "STEP" | "LINEAR";
private timeData: Array<number>;
private target: Object3D;
protected target: Object3D;
private hasAnime: boolean=true;
protected firstIndex: number;
constructor(type:"translation"|"rotation"|"scale",startTime:number,stopTime:number,interpolation:"STEP"|"LINEAR",timeData:Array<number>,target:Object3D) {
this.type =type;
this.startTime =startTime;
this.stopTime=stopTime
this.interpolation =interpolation;
this.timeData =timeData;
this.target=target;
if(this.timeData.length==2 && this.interpolation=="STEP"){
this.hasAnime =false;
}else{

}
}

setTime(t: number) {
if(!this.hasAnime)return;
for(let i =0;i<this.timeData.length;i++){
if(this.timeData[i]>t){
this.firstIndex =i;
break;
}
}

this.setForTime();
}

setToObj() {

}

protected setForTime() {

}
}
13 changes: 12 additions & 1 deletion frontend/src/lib/animation/AnimationChannelQuaternion.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,24 @@ import {Quaternion} from "math.gl";

export default class AnimationChannelQuaternion extends AnimationChannel{
private data: Array<Quaternion>;

private result:Quaternion;
constructor(type:"rotation",startTime:number,stopTime:number,interpolation:"STEP"|"LINEAR",timeData:Array<number>,target:Object3D) {
super(type,startTime,stopTime,interpolation,timeData,target)
}

setData(data: Array<Quaternion>) {
this.data =data;
this.result = this.data[0].clone()
//console.log(this.target.label,this.result)
}
protected setForTime() {
let fq = this.data[this.firstIndex];
this.result.set(fq.x,fq.y,fq.z,fq.w);

}
setToObj() {
// console.log("setRotation",this.result)

this.target.setRotation( this.result.x,this.result.y,this.result.z,this.result.w)
}
}
18 changes: 18 additions & 0 deletions frontend/src/lib/animation/AnimationChannelVector3.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,30 @@ import {Vector3} from "math.gl";

export default class AnimationChannelVector3 extends AnimationChannel{
private data: Array<Vector3>;
private result: Vector3;

constructor(type:"translation"|"scale",startTime:number,stopTime:number,interpolation:"STEP"|"LINEAR",timeData:Array<number>,target:Object3D) {
super(type,startTime,stopTime,interpolation,timeData,target)
}

setData(data: Array<Vector3>){
this.data =data;
this.result =this.data[0].clone();
}
setToObj() {
if(this.type=="scale"){
// console.log("setScale",this.result)
this.target.setScale(this.result.x,this.result.y,this.result.z)
}else{

this.target.setPosition(this.result.x,this.result.y,this.result.z)
}

}
protected setForTime() {
let fq = this.data[this.firstIndex];
this.result.set(fq.x,fq.y,fq.z);

}

}
40 changes: 40 additions & 0 deletions frontend/src/lib/animation/AnimationMixer.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@

import Animation from "./Animation";
import UI from "../UI/UI";
export default class AnimationMixer{
private animations: Array<Animation>;
private mixValue: number=0;
private animation1:number=0;
private animation2:number =1;
constructor() {

}
setAnimations(animations:Array<Animation>){
this.animations =animations;
}
onUI(){
UI.pushWindow("Animation")
//this.mixValue =UI.LFloatSlider("mix",this.mixValue,0,1);
UI.popWindow()
}
update(){
let anime1 = this.animations[this.animation1]
let anime2 = this.animations[this.animation2]

if(this.mixValue<0.01){
anime1.update()

anime1.set();

} else if(this.mixValue>0.99){
anime2.update()
anime2.set();

}else{
anime1.update()
anime2.update()

}

}
}
4 changes: 2 additions & 2 deletions frontend/src/lib/animation/TransformDebugger.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,15 @@ export default class TransformDebugger {
private mesh: Box;

constructor(renderer: Renderer, modelrenderer: ModelRenderer, rootTransform: Object3D) {
console.log(rootTransform)
// console.log(rootTransform)
this.renderer =renderer;
this.modelRenderer =modelrenderer;
this.mainShader = new GBufferShaderNormal(this.renderer, "gBufferShaderNormal");

this.mesh = new Box(this.renderer, {width : 5,height : 10,depth:5})

this.add(rootTransform, 0);
console.log(this.debugString)
console.log(this.debugString)
}


Expand Down
4 changes: 4 additions & 0 deletions frontend/src/lib/core/Object3D.ts
Original file line number Diff line number Diff line change
Expand Up @@ -116,4 +116,8 @@ export default class Object3D extends ObjectGPU {
getRotation() {
return this._rotation;
}

getPosition() {
return this._position;
}
}
2 changes: 1 addition & 1 deletion frontend/src/shaders/GbufferShaderNormal.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default class GBufferShaderNormal extends Shader{

this.needsTransform =true;
this.needsCamera=true;
this.logShaderCode=true;
//this.logShaderCode=true;
}
getShaderCode(): string {
return /* wgsl */ `
Expand Down

0 comments on commit 510d74c

Please sign in to comment.