skin

frontend/src/GLFTLoader.ts

@@ -110,7 +110,7 @@ export default class GLFTLoader {
 
         } else if(skinID!=undefined){
             material = new Material(this.renderer, name, this.skinShader);
-
+            material.skin = this.skins[skinID];
         }
         else {
             material = new Material(this.renderer, name, this.mainShader);
@@ -349,7 +349,7 @@ export default class GLFTLoader {
             let convData =new Float32Array(data)
             let inverseMatrixes = this.toMatrixData(convData)
 
-            let skin=new Skin(s.name,nodeArray,inverseMatrixes)
+            let skin=new Skin(this.renderer,s.name,nodeArray,inverseMatrixes)
             this.skins.push(skin);
         }
 console.log(this.skins);

frontend/src/Main.ts

@@ -157,9 +157,8 @@ export default class Main {
         }
 
         // this.glFTLoaderChar.root.setPosition(0, -1.5, 0);
-      /* let arm = this.glFTLoaderChar.objectsByName["Armature"];
-      arm.setScale(1,1,1)
-        arm.setRotation(0,0,0,0)*/
+
+
         for (let m of this.glFTLoaderChar.models) {
             this.gBufferPass.modelRenderer.addModel(m)
 
@@ -169,7 +168,7 @@ export default class Main {
 
         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.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"]);
@@ -231,7 +230,7 @@ export default class Main {
         this.centerRightHolder.setPosition(-this.renderer.ratio * 3 / 4 +2, 0, 0)
 
         this.glFTLoader.root.setPosition(0, -1.5, 0)
-        this.glFTLoaderChar.root.setPosition(0, -1.5, -1);
+        this.glFTLoaderChar.root.setPosition(1, -1.5, -1);
 
         this.updateCamera();
         this.mill.update();

frontend/src/lib/animation/Skin.ts

@@ -1,27 +1,33 @@
 import Object3D from "../core/Object3D";
 import {Matrix4} from "math.gl";
+import UniformGroup from "../core/UniformGroup";
+import Renderer from "../Renderer";
+import {ShaderType} from "../core/ShaderTypes";
+
+export default class Skin extends UniformGroup{
 
-export default class Skin{
-    private label: string;
     private objects: Array<Object3D>;
     private invBindMatrices: Array<Matrix4>;
     private dataArray:Float32Array
-    constructor(label:string,objects:Array<Object3D>,invBindMatrices:Array<Matrix4>) {
-        this.label =label;
+    constructor(renderer:Renderer,label:string,objects:Array<Object3D>,invBindMatrices:Array<Matrix4>) {
+      super(renderer,label,"skin")
+
         this.objects=objects;
         this.invBindMatrices =invBindMatrices;
         this.dataArray =new Float32Array(16*this.objects.length)
-        this.update()
+        this.addUniform("matrices",  this.dataArray,GPUShaderStage.VERTEX,ShaderType.mat4,this.objects.length)
+
+        //console.log(this.getShaderText(4))
     }
-    public update(){
-        for(let i=0;i<this.objects.length;i++){
+    public updateData(){
+       for(let i=0;i<this.objects.length;i++){
             let invMatrix =  this.invBindMatrices[i]
             let objMatrix =  this.objects[i].worldMatrix;
 
-            let m = invMatrix.clone().multiplyRight(objMatrix);
+            let m = invMatrix.clone().multiplyLeft(objMatrix);
             this.dataArray.set(m,16*i);
         }
-
+        this.setUniform("matrices", this.dataArray)
 
     }
 }

frontend/src/lib/core/Material.ts

@@ -6,6 +6,7 @@ import {CompareFunction} from "../WebGPUConstants";
 import UniformGroup from "./UniformGroup";
 import ModelTransform from "../model/ModelTransform";
 import Camera from "../Camera";
+import Skin from "../animation/Skin";
 
 export default class Material extends ObjectGPU {
     shader: Shader;
@@ -18,7 +19,7 @@ export default class Material extends ObjectGPU {
     private colorTargets: Array<GPUColorTargetState> = [];
     private depthStencilState: GPUDepthStencilState;
     private needsDepth: boolean = true;
-
+    public skin:Skin
     constructor(renderer: Renderer, label: string, shader: Shader) {
         super(renderer, label);
         this.shader = shader;
@@ -97,9 +98,8 @@ export default class Material extends ObjectGPU {
         let layouts = []
         if (this.shader.needsCamera) layouts.push(Camera.getBindGroupLayout())
         if (this.shader.needsTransform) layouts.push(ModelTransform.getBindGroupLayout())
-        if(this.uniforms)
-        layouts.push(this.uniforms.bindGroupLayout)
-
+        if(this.uniforms) layouts.push(this.uniforms.bindGroupLayout)
+        if(this.skin) layouts.push(this.skin.bindGroupLayout)
         this.pipeLineLayout = this.device.createPipelineLayout({
             label: "Material_pipelineLayout_" + this.label,
             bindGroupLayouts: layouts,

frontend/src/lib/core/ShaderTypes.ts

@@ -9,6 +9,7 @@ export const ShaderType = {
     vec2: 'vec2f',
     vec3: 'vec3f',
     vec4: 'vec4f',
+    vec4i: 'vec4i',
     mat4: 'mat4x4',
 }
 
@@ -32,14 +33,17 @@ export function getShaderTextForShaderType(type:string,arrayLength =1)
         case ShaderType.vec4:
             t = "vec4f";
             break;
+        case ShaderType.vec4i:
+            t = "vec4i";
+            break;
         case ShaderType.mat4:
             if(arrayLength==1){
                 t = "mat4x4f";
             }
 
             break;
         default:
-
+console.warn("no default value")
     }
     //implement arrays
     return t;
@@ -61,9 +65,11 @@ export function getFormatForShaderType(type:string)
         case ShaderType.vec4:
             format ="float32x4";
             break;
-
+        case ShaderType.vec4i:
+            format ="sint32x4";
+            break;
         default:
-
+            console.warn("no default value")
     }
     return format as GPUVertexFormat;
 
@@ -84,11 +90,14 @@ export function getSizeForShaderType(type:string,arrayLength =1)
         case ShaderType.vec4:
             size =4
             break;
+        case ShaderType.vec4i:
+            size =4
+            break;
         case ShaderType.mat4:
             size =16
             break;
         default:
-
+            console.warn("no default size")
     }
 
     return size*arrayLength;

frontend/src/lib/core/UniformGroup.ts

@@ -8,7 +8,7 @@ import {getSizeForShaderType, ShaderType} from "./ShaderTypes";
 type Uniform = {
     name: string,
     size: number,
-    data: MathArray | number,
+    data: MathArray | number | Float32Array,
     offset: number,
     usage: GPUShaderStageFlags,
     dirty: boolean
@@ -54,7 +54,7 @@ export default class UniformGroup extends ObjectGPU {
 
     }
 
-    addUniform(name: string, value: MathArray | number, usage: GPUShaderStageFlags = GPUShaderStage.FRAGMENT, format = ShaderType.auto, arraySize = 1) {
+    addUniform(name: string, value: MathArray | number | Float32Array, usage: GPUShaderStageFlags = GPUShaderStage.FRAGMENT, format = ShaderType.auto, arraySize = 1) {
         const found = this.uniforms.find((element) => element.name == name);
         if (found) {
             console.log("uniform already exist " + this.label + " " + name)
@@ -110,7 +110,7 @@ export default class UniformGroup extends ObjectGPU {
         //this.samplerUniforms.push({name:name,sampler:sampler,usage:GPUShaderStage.FRAGMENT})
     }
 
-    setUniform(name: string, value: MathArray | number) {
+    setUniform(name: string, value:Float32Array | MathArray | number) {
         const found = this.uniforms.find((element) => element.name == name);
 
         if (found) {
@@ -121,7 +121,7 @@ export default class UniformGroup extends ObjectGPU {
                 if (found.size == 1) {
                     this.bufferData[found.offset] = found.data as number;
                 } else {
-                    this.bufferData.set(found.data as MathArray, found.offset)
+                    this.bufferData.set(found.data as ArrayLike<number>, found.offset)
 
                 }
 

frontend/src/lib/model/ModelRenderer.ts

@@ -24,10 +24,11 @@ export default class ModelRenderer{
             model.material.makePipeLine(pass);
 
             passEncoder.setPipeline(model.material.pipeLine);
-
             passEncoder.setBindGroup(1,model.modelTransform.bindGroup);
             passEncoder.setBindGroup(2,model.material.uniforms.bindGroup);
-
+            if(model.material.skin){
+                passEncoder.setBindGroup(3,model.material.skin.bindGroup);
+            }
 
             for (let attribute of model.material.shader.attributes) {
                 let buffer  = model.mesh.getBufferByName(attribute.name);

frontend/src/shaders/DepthShader.ts

@@ -51,8 +51,6 @@ fn mainVertex( ${this.getShaderAttributes()} ) -> VertexOutput
 fn mainFragment(@location(0) model: vec3f)  -> @location(0) vec4f
 {
 
-
-
  
 
   return vec4(distance(model,camera.worldPosition.xyz),0.0,0.0,1.0);

frontend/src/shaders/GBufferShaderSkin.ts

@@ -15,10 +15,11 @@ export default class GBufferShaderSkin extends Shader{
             this.addAttribute("aNormal", ShaderType.vec3);
             this.addAttribute("aTangent",ShaderType.vec4);
             this.addAttribute("aUV0", ShaderType.vec2);
-
+            this.addAttribute("aWeights", ShaderType.vec4);
+            this.addAttribute("aJoints", ShaderType.vec4i);
         }
        // this.addUniform("skinMatrices",0,GPUShaderStage.FRAGMENT,ShaderType.mat4,64);
-        //this.addUniform("skinMatrices",0);
+        this.addUniform("skinMatrices",0);
         this.addTexture("colorTexture",DefaultTextures.getWhite(this.renderer))
         this.addTexture("mraTexture",DefaultTextures.getMRE(this.renderer))
         this.addTexture("normalTexture",DefaultTextures.getNormal(this.renderer))
@@ -51,18 +52,32 @@ struct GBufferOutput {
 ${Camera.getShaderText(0)}
 ${ModelTransform.getShaderText(1)}
 ${this.getShaderUniforms(2)}
+struct Skin
+{
+    matrices : array<mat4x4<f32>,49>
+}
+@group(3) @binding(0)  var<uniform> skin : Skin ;
+
+
+
 
 @vertex
 fn mainVertex( ${this.getShaderAttributes()} ) -> VertexOutput
 {
     var output : VertexOutput;
     
-    output.position =camera.viewProjectionMatrix*model.modelMatrix *vec4( aPos,1.0);
+    var skinMatrix = skin.matrices[aJoints.x]*aWeights.x;
+    skinMatrix+= skin.matrices[aJoints.y]*aWeights.y;
+    skinMatrix+= skin.matrices[aJoints.z]*aWeights.z;
+   skinMatrix+= skin.matrices[aJoints.w]*aWeights.w;
+    
+    output.position =camera.viewProjectionMatrix*skinMatrix *vec4( aPos,1.0);
     output.uv0 =aUV0;
 
-    output.normal =model.normalMatrix *aNormal;
-    output.tangent =model.normalMatrix*aTangent.xyz;
-     output.biTangent =model.normalMatrix* (normalize(cross( normalize(aTangent.xyz), normalize(aNormal)))*aTangent.w);
+    output.normal =(skinMatrix *vec4(aNormal,0.0)).xyz;
+    output.tangent =(skinMatrix *vec4(aTangent.xyz,0.0)).xyz;
+    let bitangent = (normalize(cross( normalize(aTangent.xyz), normalize(aNormal)))*aTangent.w);
+     output.biTangent =(skinMatrix *vec4(bitangent,0.0)).xyz;;
     return output;
 }