stuff

frontend/public/light.json

@@ -1 +1 @@
-{"topColor":[1,0.92,0.81,0.3],"midColor":[1,0.91,0.82,0.19],"bottomColor":[1,0.91,0.82,0.1],"pointLights":[{"label":"SunLight","position":[-2.0100000000000007,1.05,-3],"size":4,"color":[0.9247851371765137,0.7160086368313046,0.3467944264411926,1],"strength":22.68,"castShadow":true,"numShadowSamples":32,"shadowScale":0.63,"sizeMesh":0.22,"showLightMesh":true},{"label":"BlueLight","position":[1.6200000000000017,0.5799999999999998,-2.269999999999997],"size":3.09,"color":[0.0587158203125,0.6401400566101074,0.939453125,1],"strength":10,"castShadow":false,"numShadowSamples":10,"shadowScale":1,"sizeMesh":0.05,"showLightMesh":false},{"label":"GreenLight","position":[-0.5900000000000005,-0.4500000000000004,-0.3700000000000016],"size":1.46,"color":[0.41641953587532043,0.833984375,0.32251739501953125,1],"strength":10,"castShadow":false,"numShadowSamples":3,"shadowScale":1,"sizeMesh":0.05,"showLightMesh":false}]}
+{"topColor":[1,0.92,0.81,0.3],"midColor":[1,0.91,0.82,0.19],"bottomColor":[1,0.91,0.82,0.1],"pointLights":[{"label":"SunLight","position":[-2.0100000000000007,1.05,-1.7700000000000025],"size":4,"color":[0.9247851371765137,0.7160086368313046,0.3467944264411926,1],"strength":22.68,"castShadow":true,"numShadowSamples":32,"shadowScale":0.63,"sizeMesh":0.22,"showLightMesh":true},{"label":"BlueLight","position":[1.6200000000000017,0.29999999999999927,-1.9199999999999953],"size":3.09,"color":[0.0587158203125,0.6401400566101074,0.939453125,1],"strength":10,"castShadow":false,"numShadowSamples":10,"shadowScale":1,"sizeMesh":0.05,"showLightMesh":false},{"label":"GreenLight","position":[-0.5900000000000005,-0.4500000000000004,-0.3700000000000016],"size":1.46,"color":[0.41641953587532043,0.833984375,0.32251739501953125,1],"strength":10,"castShadow":false,"numShadowSamples":3,"shadowScale":1,"sizeMesh":0.05,"showLightMesh":false}]}

frontend/src/ImagePreloader.ts

@@ -15,7 +15,7 @@ import Texture from "./lib/textures/Texture";
 
         for(let img of preloadImages){
 
-            this.textureByName[img] =new TextureLoader(renderer,preloader,"textures/"+img+".png",{});
+            this.textureByName[img] =new TextureLoader(renderer,preloader,"textures/"+img+".png",{mipLevelCount:1});
         }
     }
     getTexture(name:string){

frontend/src/Main.ts

@@ -17,7 +17,7 @@ import UI from "./lib/UI/UI";
 import GBufferRenderPass from "./renderPasses/GBufferRenderPass";
 import Timer from "./lib/Timer";
 import LightRenderPass from "./renderPasses/LightRenderPass";
-import PostRenderPass from "./renderPasses/PostRenderPass";
+
 import JSONLoader from "./JSONLoader";
 import AORenderPass from "./renderPasses/AORenderPass";
 import AOBlurRenderPass from "./renderPasses/AOBlurRenderPass";
@@ -27,6 +27,9 @@ import GlassRenderPass from "./renderPasses/GlassRenderPass";
 import BlurLight from "./renderPasses/BlurLight";
 import {LaptopScreen} from "./extras/LaptopScreen";
 import Mill from "./extras/Mill";
+import CombinePass from "./renderPasses/CombinePass";
+import RenderSettings from "./RenderSettings";
+import BlurBloom from "./renderPasses/BlurBloom";
 
 
 export default class Main {
@@ -47,7 +50,7 @@ export default class Main {
     private gBufferPass: GBufferRenderPass;
     private timeStampQuery: TimeStampQuery;
     private lightPass: LightRenderPass;
-    private postPass: PostRenderPass;
+
     private lightJson: JSONLoader;
     private aoPass: AORenderPass;
     private aoBlurPass: AOBlurRenderPass;
@@ -56,6 +59,9 @@ export default class Main {
     private blurLightPass: BlurLight;
     private laptopScreen: LaptopScreen;
     private mill: Mill;
+    private combinePass: CombinePass;
+    private numberOfQueries: number=9;
+    private blurBloomPass: BlurBloom;
 
 
     constructor(canvas: HTMLCanvasElement) {
@@ -75,14 +81,14 @@ export default class Main {
         );
 
         this.renderer.init()
-        this.timeStampQuery = new TimeStampQuery(this.renderer, 8)
+        this.timeStampQuery = new TimeStampQuery(this.renderer, this.numberOfQueries)
 
 
         this.camera = new Camera(this.renderer, "mainCamera")
         this.renderer.camera = this.camera;
         new TextureLoader(this.renderer,this.preloader,"brdf_lut.png",{});
         new TextureLoader(this.renderer,this.preloader,"triangle.png",{});
-        new TextureLoader(this.renderer,this.preloader,"text.png",{});
+        new TextureLoader(this.renderer,this.preloader,"text_s.png",{});
         ImagePreloader.load(this.renderer, this.preloader);
 
         this.glFTLoader = new GLFTLoader(this.renderer, "roomFinal", this.preloader);
@@ -107,7 +113,8 @@ export default class Main {
         this.blurLightPass =new BlurLight(this.renderer);
         this.reflectionPass = new ReflectionRenderPass(this.renderer);
         this.glassPass =new GlassRenderPass(this.renderer)
-        this.postPass = new PostRenderPass(this.renderer)
+        this.combinePass=new CombinePass(this.renderer)
+        this.blurBloomPass = new BlurBloom(this.renderer)
 
 
         this.canvasRenderPass = new CanvasRenderPass(this.renderer);
@@ -151,8 +158,10 @@ export default class Main {
         this.timeStampQuery.setStamp("ReflectionPass");
         this.glassPass.add();
         this.timeStampQuery.setStamp("GlassPass");
-        this.postPass.add()
-        this.timeStampQuery.setStamp("PostPass");
+        this.combinePass.add()
+        this.timeStampQuery.setStamp("CombinePass");
+        this.blurBloomPass.add();
+        this.timeStampQuery.setStamp("BlurBloomPass");
         this.canvasRenderPass.add();
         this.timeStampQuery.setStamp("CanvasPass");
         this.timeStampQuery.stop();
@@ -173,21 +182,24 @@ export default class Main {
         this.leftHolder.setPosition(-this.renderer.ratio * 3 / 2, 0, 0)
         this.rightHolder.setPosition(this.renderer.ratio * 3 / 2, 0, 0)
         this.glFTLoader.root.setPosition(0, -1.5, 0)
-this.updateCamera();
+        this.updateCamera();
         this.mill.update();
 
         UI.pushWindow("Render Setting")
-        this.postPass.onUI();
+        this.canvasRenderPass.onUI();
+        RenderSettings.onUI();
+
         this.aoPass.onUI();
         this.reflectionPass.onUI();
+
         UI.popWindow()
 
 
         this.lightPass.onUI();
 
 
         UI.pushWindow("Debug/Performance")
-        this.canvasRenderPass.onUI();
+
         Timer.onUI()
         this.timeStampQuery.onUI();
         UI.popWindow()

frontend/src/RenderSettings.ts

@@ -0,0 +1,66 @@
+import RenderPass from "./lib/core/RenderPass";
+import UI from "./lib/UI/UI";
+
+class RenderSettings{
+    private passes:Array<RenderPass>=[];
+    public bloom_threshold: number=1;
+    public bloom_softThreshold:number=0.2;
+
+
+    public exposure=1;
+    public contrast =1;
+    public brightness:number =0;
+    public vibrance:number=0;
+    public saturation:number =0
+    public vin_amount: number =0.5;
+    public vin_falloff: number=0.4;
+    public bloom_strength: number =1;
+
+
+
+    constructor() {
+
+    }
+    registerPass(pass:RenderPass){
+        this.passes.push(pass);
+    }
+   onChange()
+   {
+       for(let p of this.passes)
+       {
+           p.onSettingsChange()
+       }
+
+   }
+   onUI(){
+        UI.pushGroup("Bloom");
+       this.bloom_threshold =UI.LFloatSlider("Threshold",this.bloom_threshold,0,20)
+       this.bloom_softThreshold =UI.LFloatSlider("SoftThreshold",this.bloom_softThreshold,0,1)
+       this.bloom_strength =UI.LFloatSlider("Strength", this.bloom_strength,0,5)
+       UI.popGroup()
+
+       UI.pushGroup("Post");
+       this.exposure=UI.LFloatSlider("Exposure",this.exposure,0,10);
+       this.brightness=UI.LFloatSlider("Brightness",this.brightness,-1,1);
+       this.contrast=UI.LFloatSlider("Contrast",this.contrast,0,2);
+
+       this.vibrance=UI.LFloatSlider("Vibrance",this.vibrance,-1,1);
+       this.saturation=UI.LFloatSlider("Saturation",this.saturation,-1,1);
+
+       UI.separator("Vignette");
+       this.vin_amount=UI.LFloatSlider("Amount",this.vin_amount,0,1);
+       this.vin_falloff=UI.LFloatSlider("Falloff",this.vin_falloff,0,1);
+
+
+
+
+
+
+
+       UI.popGroup()
+        this.onChange();
+
+    }
+
+}
+export default new RenderSettings()

frontend/src/extras/LaptopScreen.ts

@@ -13,7 +13,7 @@ export class LaptopScreen extends Model{
         this.material =new Material(this.renderer,this.label,new LaptopScreenShader(this.renderer,this.label));
         this.material.uniforms.setUniform("ratio",8/5);
         this.material.uniforms.setTexture("triangle",renderer.texturesByLabel["triangle.png"])
-        this.material.uniforms.setTexture("text",renderer.texturesByLabel["text.png"])
+        this.material.uniforms.setTexture("text",renderer.texturesByLabel["text_s.png"])
         this.setPosition(0.01,0,0.05)
         this.setScale(0.8,1,0.5)
         this.setEuler(Math.PI/2,0,0)

frontend/src/extras/LaptopScreenShader.ts

@@ -80,6 +80,7 @@ fn mainFragment(@location(0) uv0: vec2f,@location(1) normal: vec3f) -> GBufferOu
     
     var uvText = uv0;
       uvText.x*=uniforms.ratio;
+      uvText*=0.7;
     let colorText= textureSample(text, mySampler,uvText);
      output.color +=colorText;
 

frontend/src/extras/Mill.ts

@@ -4,7 +4,7 @@ import gsap from "gsap"
 export default class Mill{
     private millBed: Object3D;
     private millHead: Object3D;
-    private headPos: number =0.2;
+    private headPos: number =0.1;
     private tl: gsap.core.Timeline;
     private bedZ: number =-0.2;
 
@@ -16,7 +16,7 @@ export default class Mill{
         this.tl = gsap.timeline({repeat: 1000, repeatDelay: 1});
         this.tl.to(this,{"headPos":0.0,ease: "sine.inOut"})
         this.tl.to(this,{"bedZ":0.2,duration:4,ease: "sine.inOut"},">")
-        this.tl.to(this,{"headPos":0.2,ease: "sine.inOut"},">")
+        this.tl.to(this,{"headPos":0.1,ease: "sine.inOut"},">")
         this.tl.to(this,{"bedZ":-0.2,duration:2,ease: "sine.inOut"},"<")
     }
     update(){

frontend/src/lib/UI/UI_IC.ts

@@ -124,9 +124,9 @@ export default class UI_IC {
     multiLine: boolean = false,
     settings?: LTextSettings
   ) {
-    if (!UI_I.setComponent(text)) {
+    if (!UI_I.setComponent(text+label)) {
       if (!settings) settings = new LTextSettings();
-      let comp = new LText(UI_I.getID(text), label, text, multiLine, settings);
+      let comp = new LText(UI_I.getID(text+label), label, text, multiLine, settings);
       UI_I.addComponent(comp);
     }
     UI_I.popComponent();

frontend/src/lib/core/RenderPass.ts

@@ -29,7 +29,9 @@ export default class RenderPass extends ObjectGPU {
 
         this.passEncoder.end();
     }
+    onSettingsChange(){
 
+    }
     draw()
     {
 

frontend/src/renderPasses/AOBlurRenderPass.ts

@@ -28,7 +28,7 @@ export default class AOBlurRenderPass extends RenderPass{
             format: TextureFormat.R8Unorm,
             sampleCount: this.sampleCount,
             scaleToCanvas: true,
-            sizeMultiplier:0.5,
+            sizeMultiplier:1,
 
             usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
         });

frontend/src/renderPasses/BlurBloom.ts

@@ -0,0 +1,64 @@
+import Renderer from "../lib/Renderer";
+import RenderTexture from "../lib/textures/RenderTexture";
+import {TextureFormat} from "../lib/WebGPUConstants";
+import KawasePass from "./KawasePass";
+import RenderPass from "../lib/core/RenderPass";
+
+export default class BlurBloom {
+    private renderer: Renderer;
+    private numLevels =6;
+    private result: RenderTexture;
+    private targetTextures: Array<RenderTexture> = []
+    private passes: Array<RenderPass> = []
+
+    constructor(renderer: Renderer) {
+        this.renderer = renderer;
+
+        let start = this.renderer.texturesByLabel["BloomPrePass"] as RenderTexture
+        this.result = new RenderTexture(renderer, "BlurBloomPass",
+            {
+                scaleToCanvas: true, sizeMultiplier: 0.5, format: TextureFormat.RGBA16Float,
+                mipLevelCount: this.numLevels,
+                usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST
+            })
+        let scale = 1;
+        this.targetTextures.push(start);
+        for (let i = 0; i < this.numLevels; i++) {
+            scale *= 0.5;
+            let label= "BlurBloomLevel" + i;
+            if(i==0){
+                label ="BlurBloom";
+            }
+            let t = new RenderTexture(renderer, label,
+                {
+                    scaleToCanvas: true,
+                    sizeMultiplier: scale,
+                    format: TextureFormat.RGBA16Float,
+                    usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
+                })
+            this.targetTextures.push(t);
+            let kawasePass = new KawasePass(renderer, t, this.targetTextures[i]);
+            this.passes.push(kawasePass);
+        }
+
+        for (let i = this.numLevels-1;i>0; i--) {
+            console.log(this.numLevels,i,this.targetTextures[i+1].label, this.targetTextures[i].label)
+
+           let kawasePass = new KawasePass(renderer, this.targetTextures[i], this.targetTextures[i+1],false,true);
+          this.passes.push(kawasePass);
+        }
+
+    }
+
+    public add() {
+        for (let pass of this.passes) {
+            pass.add();
+
+        }
+
+
+
+    }
+
+
+}