blittest

frontend/src/CanvasRenderPass.ts

@@ -5,13 +5,19 @@ import DepthStencilAttachment from "./lib/textures/DepthStencilAttachment";
 import RenderPass from "./lib/core/RenderPass";
 import Renderer from "./lib/Renderer";
 import ModelRenderer from "./lib/model/ModelRenderer";
-import UI from "./UI/UI";
+import UI from "./lib/UI/UI";
+import Blit from "./lib/Blit";
+import Material from "./lib/core/Material";
+import BlitShader from "./shaders/BlitShader";
+import ImagePreloader from "./ImagePreloader";
 
 export default class  extends RenderPass {
     private canvasColorTarget: RenderTexture;
     public canvasColorAttachment: ColorAttachment;
     private canvasDepthTarget: RenderTexture;
     public modelRenderer: ModelRenderer;
+    private blitMaterial: Material;
+    private blitTest: Blit;
 
 
 
@@ -30,18 +36,24 @@ export default class  extends RenderPass {
         this.canvasColorAttachment = new ColorAttachment(this.canvasColorTarget);
         this.colorAttachments =[this.canvasColorAttachment];
 
-        this.canvasDepthTarget = new RenderTexture(renderer, "canvasDepth", {
+       this.canvasDepthTarget = new RenderTexture(renderer, "canvasDepth", {
             format: TextureFormat.Depth16Unorm,
             sampleCount: 4,
             scaleToCanvas: true,
             usage: GPUTextureUsage.RENDER_ATTACHMENT
         });
         this.depthStencilAttachment = new DepthStencilAttachment(this.canvasDepthTarget);
 
+        this.blitMaterial =new Material(this.renderer,"blit", new BlitShader(this.renderer,"blit"))
+        this.blitMaterial.uniforms.setTexture("colorTexture",ImagePreloader.getTexture("chair_Color"))
+        this.blitTest =new Blit(renderer,'blit',this.blitMaterial)
+
 
     }
     draw() {
+        this.blitTest.draw(this);
         this.modelRenderer.draw(this);
+
         UI.drawGPU(this.passEncoder,true)
     }
 

frontend/src/lib/loaders/GLFTLoader.ts → frontend/src/GLFTLoader.ts

@@ -1,12 +1,12 @@
-import PreLoader from "../PreLoader";
-import Mesh from "../core/Mesh";
-import Renderer from "../Renderer";
-import Object3D from "../core/Object3D";
-import Model from "../model/Model";
-import TestShader from "../../shaders/TestShader";
-import Material from "../core/Material";
-import ImagePreloader from "../../ImagePreloader";
-import Texture from "../textures/Texture";
+import PreLoader from "./lib/PreLoader";
+import Mesh from "./lib/core/Mesh";
+import Renderer from "./lib/Renderer";
+import Object3D from "./lib/core/Object3D";
+import Model from "./lib/model/Model";
+import TestShader from "./shaders/TestShader";
+import Material from "./lib/core/Material";
+import ImagePreloader from "./ImagePreloader";
+
 
 type Accessor = {
     accessor: any;
@@ -35,7 +35,7 @@ export default class GLFTLoader {
 
         this.root = new Object3D(renderer, "sceneRoot");
         this.mainShader =new TestShader(this.renderer,"testShader");
-       // this.material =new Material(this.renderer,"testmaterial",testShader);
+
 
         preLoader.startLoad();
         this.loadURL(url).then(() => {

frontend/src/Main.ts

@@ -5,15 +5,15 @@ import Renderer from "./lib/Renderer";
 import PreLoader from "./lib/PreLoader";
 
 import Camera from "./lib/Camera";
-import GLFTLoader from "./lib/loaders/GLFTLoader";
+import GLFTLoader from "./GLFTLoader";
 
 import ImagePreloader from "./ImagePreloader";
 import {Vector2, Vector3} from "math.gl";
 import MouseListener from "./lib/MouseListener";
 import Object3D from "./lib/core/Object3D";
 import CanvasRenderPass from "./CanvasRenderPass";
 import TimeStampQuery from "./lib/TimeStampQuery";
-import UI from "./UI/UI";
+import UI from "./lib/UI/UI";
 
 
 export default class Main {

frontend/src/lib/Blit.ts

@@ -0,0 +1,46 @@
+import Renderer from "./Renderer";
+import RenderPass from "./core/RenderPass";
+import Material from "./core/Material";
+import Quad from "./meshes/Quad";
+import {CompareFunction} from "./WebGPUConstants";
+
+export default class Blit{
+    private material: Material;
+    private mesh: Quad;
+
+
+    constructor(renderer:Renderer,label:string, material:Material)
+    {
+        this.material =material;
+        this.material.depthWrite =false
+        this.material.depthCompare=CompareFunction.Always
+        this.mesh=new Quad(renderer)
+    }
+    draw(pass:RenderPass)
+    {
+        const passEncoder =pass.passEncoder;
+        this.material.makePipeLine(pass);
+
+        passEncoder.setPipeline(this.material.pipeLine);
+
+
+        passEncoder.setBindGroup(0,this.material.uniforms.bindGroup);
+
+        for (let attribute of this.material.shader.attributes) {
+            passEncoder.setVertexBuffer(
+                attribute.slot,
+                this.mesh.getBufferByName(attribute.name)
+            );
+        }
+
+
+            passEncoder.setIndexBuffer(this.mesh.indexBuffer, this.mesh.indexFormat);
+            passEncoder.drawIndexed(
+                this.mesh.numIndices,
+                1,
+                0,
+                0
+            );
+
+    }
+}

frontend/src/UI/UI.ts → frontend/src/lib/UI/UI.ts

@@ -27,8 +27,8 @@ import { UI_COLOR, UI_VEC2, UI_VEC3, UI_VEC4 } from "./UI_Types";
 import LVector, { LVectorSettings } from "./components/LVector";
 import LList, { LListSettings } from "./components/LList";
 import LListItem, { LListItemSettings } from "./components/LListItem";
-import WebGPU from "../../components/WebGPU";
-import Renderer from "../lib/Renderer";
+import WebGPU from "../../../components/WebGPU";
+import Renderer from "../Renderer";
 
 export default class UI {
   private static viewPort: Viewport | null;

frontend/src/UI/UI_I.ts → frontend/src/lib/UI/UI_I.ts

@@ -17,7 +17,7 @@ import EventCenter, {
 } from "./components/internal/EventCenter";
 import RendererGPU from "./GPU/RendererGPU";
 import Rect from "./math/Rect";
-import Renderer from "../lib/Renderer";
+import Renderer from "../Renderer";
 
 export default class UI_I {
   public static currentComponent: Component;

frontend/src/lib/WebGPUConstants.ts

@@ -6,25 +6,25 @@ export const GPUPrimitiveTopology = {
     TriangleStrip: 'triangle-strip',
 };
 
-export const GPUCompareFunction = {
-    Never: 'never',
-    Less: 'less',
-    Equal: 'equal',
-    LessEqual: 'less-equal',
-    Greater: 'greater',
-    NotEqual: 'not-equal',
-    GreaterEqual: 'greater-equal',
-    Always: 'always'
+export const CompareFunction = {
+    Never: 'never' as GPUCompareFunction,
+    Less: 'less' as GPUCompareFunction,
+    Equal: 'equal' as GPUCompareFunction,
+    LessEqual: 'less-equal' as GPUCompareFunction,
+    Greater: 'greater' as GPUCompareFunction,
+    NotEqual: 'not-equal' as GPUCompareFunction,
+    GreaterEqual: 'greater-equal' as GPUCompareFunction,
+    Always: 'always' as GPUCompareFunction,
 };
 
 export const StoreOp = {
-    Store: 'store'as GPUStoreOp,
-    Discard: 'discard'as GPUStoreOp
+    Store: 'store' as GPUStoreOp,
+    Discard: 'discard' as GPUStoreOp
 };
 
 export const LoadOp = {
     Load: 'load' as GPULoadOp,
-    Clear: 'clear'as GPULoadOp
+    Clear: 'clear' as GPULoadOp
 };
 
 export const GPUFrontFace = {
@@ -40,7 +40,7 @@ export const GPUCullMode = {
 
 export const IndexFormat = {
     Uint16: 'uint16' as GPUIndexFormat,
-    Uint32: 'uint32'as GPUIndexFormat
+    Uint32: 'uint32' as GPUIndexFormat
 };
 
 export const GPUVertexFormat = {
@@ -81,19 +81,19 @@ export const TextureFormat = {
     // 8-bit formats
 
     R8Unorm: 'r8unorm' as GPUTextureFormat,
-    R8Snorm: 'r8snorm'as GPUTextureFormat,
-    R8Uint: 'r8uint'as GPUTextureFormat,
-    R8Sint: 'r8sint'as GPUTextureFormat,
+    R8Snorm: 'r8snorm' as GPUTextureFormat,
+    R8Uint: 'r8uint' as GPUTextureFormat,
+    R8Sint: 'r8sint' as GPUTextureFormat,
 
     // 16-bit formats
 
-    R16Uint: 'r16uint'as GPUTextureFormat,
-    R16Sint: 'r16sint'as GPUTextureFormat,
-    R16Float: 'r16float'as GPUTextureFormat,
-    RG8Unorm: 'rg8unorm'as GPUTextureFormat,
-    RG8Snorm: 'rg8snorm'as GPUTextureFormat,
-    RG8Uint: 'rg8uint'as GPUTextureFormat,
-    RG8Sint: 'rg8sint'as GPUTextureFormat,
+    R16Uint: 'r16uint' as GPUTextureFormat,
+    R16Sint: 'r16sint' as GPUTextureFormat,
+    R16Float: 'r16float' as GPUTextureFormat,
+    RG8Unorm: 'rg8unorm' as GPUTextureFormat,
+    RG8Snorm: 'rg8snorm' as GPUTextureFormat,
+    RG8Uint: 'rg8uint' as GPUTextureFormat,
+    RG8Sint: 'rg8sint' as GPUTextureFormat,
 
     // 32-bit formats
 
@@ -114,7 +114,7 @@ export const TextureFormat = {
     // Packed 32-bit formats
     RGB9E5UFloat: 'rgb9e5ufloat' as GPUTextureFormat,//hdr
     RGB10A2Unorm: 'rgb10a2unorm' as GPUTextureFormat,
-    RG11B10uFloat: 'rgb10a2unorm'as GPUTextureFormat,
+    RG11B10uFloat: 'rgb10a2unorm' as GPUTextureFormat,
 
     // 64-bit formats
 
@@ -289,12 +289,12 @@ export const TextureDimension = {
 };
 
 export const TextureViewDimension = {
-    OneD: '1d' as  GPUTextureViewDimension,
-    TwoD: '2d' as  GPUTextureViewDimension,
-    TwoDArray: '2d-array' as  GPUTextureViewDimension,
-    Cube: 'cube' as  GPUTextureViewDimension,
-    CubeArray: 'cube-array' as  GPUTextureViewDimension,
-    ThreeD: '3d' as  GPUTextureViewDimension
+    OneD: '1d' as GPUTextureViewDimension,
+    TwoD: '2d' as GPUTextureViewDimension,
+    TwoDArray: '2d-array' as GPUTextureViewDimension,
+    Cube: 'cube' as GPUTextureViewDimension,
+    CubeArray: 'cube-array' as GPUTextureViewDimension,
+    ThreeD: '3d' as GPUTextureViewDimension
 };
 
 export const GPUTextureAspect = {

frontend/src/lib/core/Material.ts

@@ -2,7 +2,7 @@ import ObjectGPU from "./ObjectGPU";
 import Renderer from "../Renderer";
 import Shader from "./Shader";
 import RenderPass from "./RenderPass";
-import {TextureFormat} from "../WebGPUConstants";
+import {CompareFunction} from "../WebGPUConstants";
 import UniformGroup from "./UniformGroup";
 import ModelTransform from "../model/ModelTransform";
 import Camera from "../Camera";
@@ -11,10 +11,14 @@ export default class Material extends ObjectGPU {
     shader: Shader;
     pipeLine: GPURenderPipeline;
     private pipeLineLayout: GPUPipelineLayout;
-    //private renderPass: RenderPass;
+
     private colorTargets:Array<GPUColorTargetState>=[];
+    private depthStencilState:GPUDepthStencilState;
     private needsDepth: boolean =true;
     public uniforms:UniformGroup;
+    public depthWrite: boolean =true;
+    public depthCompare: GPUCompareFunction=CompareFunction.Less;
+
     constructor(renderer: Renderer, label: string, shader: Shader) {
         super(renderer, label);
         this.shader = shader;
@@ -29,7 +33,19 @@ export default class Material extends ObjectGPU {
 
         if(this.pipeLine)return;
         this.colorTargets =[]
-        this.colorTargets.push({ format:  TextureFormat.BGRA8Unorm as GPUTextureFormat });
+
+        for(let a of pass.colorAttachments){
+
+            this.colorTargets.push({ format:  a.renderTexture.options.format });
+        }
+        if(pass.depthStencilAttachment){
+            this.needsDepth =true;
+            this.depthStencilState={
+                depthWriteEnabled: this.depthWrite,
+                depthCompare: this.depthCompare,
+                format: pass.depthStencilAttachment.renderTexture.options.format,
+            }
+        }
         this.makePipeLineLayout()
 
 
@@ -64,23 +80,22 @@ export default class Material extends ObjectGPU {
             },
         };
         if (this.needsDepth) {
-            desc.depthStencil = {
-                depthWriteEnabled: true,
-                depthCompare: "less",
-                format: "depth16unorm",
-            };
+            desc.depthStencil =this.depthStencilState;
         }
         return desc;
     }
 
     private makePipeLineLayout() {
+        let layouts =[]
+        if(this.shader.needsCamera)layouts.push(Camera.getBindGroupLayout())
+        if(this.shader.needsTransform)layouts.push(ModelTransform.getBindGroupLayout())
+        layouts.push(this.uniforms.bindGroupLayout)
+
         this.pipeLineLayout= this.device.createPipelineLayout({
             label: "Material_pipelineLayout_" + this.label,
-            bindGroupLayouts: [Camera.getBindGroupLayout(),ModelTransform.getBindGroupLayout(),this.uniforms.bindGroupLayout],
+            bindGroupLayouts: layouts,
         });
     }
 
-    /*setRenderPass(renderPass: RenderPass) {
-        this.renderPass =renderPass;
-    }*/
+
 }