-gbuffer draw

frontend/src/Main.ts

@@ -43,6 +43,8 @@ import GameCamera from "./GameCamera";
 import Ray from "./lib/Ray";
 import UI_I from "./lib/UI/UI_I";
 import Drawer from "./drawing/Drawer";
+import DrawingPreloader from "./drawing/DrawingPreloader";
+import {preloadImages} from "./PreloadData";
 
 
 export default class Main {
@@ -96,6 +98,7 @@ export default class Main {
     private gameCamera: GameCamera;
     public mouseRay:Ray;
     private drawer:Drawer
+    private drawingPreloader: DrawingPreloader;
     constructor(canvas: HTMLCanvasElement) {
 
         this.canvasManager = new CanvasManager(canvas);
@@ -110,7 +113,7 @@ export default class Main {
     public setup() {
         this.preloader = new PreLoader(
             ()=>{},
-            this.startPreload.bind(this)
+            this.startFinalPreload.bind(this)
         );
         this.camera = new Camera(this.renderer, "mainCamera")
         this.mouseRay =new Ray(this.renderer);
@@ -140,8 +143,7 @@ export default class Main {
 
 
     }
-    public startPreload(){
-
+    public startFinalPreload(){
 
 
         this.gBufferPass = new GBufferRenderPass(this.renderer);
@@ -163,25 +165,32 @@ export default class Main {
         this.canvasRenderPass = new CanvasRenderPass(this.renderer);
         this.renderer.setCanvasColorAttachment(this.canvasRenderPass.canvasColorAttachment)
 
+        UI.setWebGPU(this.renderer)
         GameModel.main=this;
 
 
 
 
         console.log("startPreload2")
         console.log("ready to render")
+
+        //
         this.preloader = new PreLoader(
             ()=>{},
             this.init.bind(this)
         );
+
+        this.drawingPreloader = new DrawingPreloader()
+        this.drawingPreloader.load(this.renderer,this.preloader)
+
         this.room = new Room(this.renderer, this.preloader);
         this.outside = new Outside(this.renderer, this.preloader);
 
         ImagePreloader.load(this.renderer, this.preloader);
 
 
        this.lightRoomJson = new JSONLoader("lightRoom", this.preloader);
-        UI.setWebGPU(this.renderer)
+
     }
     private init() {
 
@@ -215,6 +224,10 @@ export default class Main {
 
         this.drawer =new Drawer(this.renderer);
         this.gBufferPass.drawingRenderer.addDrawing(this.drawer.drawing)
+        for(let d of this.drawingPreloader.drawings){
+            d.resolveParent();
+            this.gBufferPass.drawingRenderer.addDrawing(d)
+        }
         GameModel.setTransition(Transitions.START_GAME)
 
 
@@ -284,7 +297,7 @@ export default class Main {
 
         }
         this.mouseRay.setFromCamera(this.camera,this.mouseListener.mousePos)
-        this.characterHandler.update(this.mouseListener.mousePos.clone(), this.mouseListener.isDownThisFrame)
+        if(!GameModel.lockView) this.characterHandler.update(this.mouseListener.mousePos.clone(), this.mouseListener.isDownThisFrame)
 
         if(this.drawer.enabled) this.drawer.setMouseData(this.mouseListener.isDownThisFrame,this.mouseListener.isUpThisFrame,this.mouseRay)
         //this.shadowPassCube.setLightPos(this.room.mainLight.getWorldPos());

frontend/src/drawing/Drawer.ts

@@ -7,29 +7,31 @@ import Renderer from "../lib/Renderer";
 import SelectItem from "../lib/UI/math/SelectItem";
 import GameModel from "../GameModel";
 import ColorV from "../lib/ColorV";
-import gsap  from "gsap";
+import gsap from "gsap";
 import {saveToBinFile} from "../lib/SaveUtils";
+
 export default class Drawer {
-    enabled: boolean = true;
+    enabled: boolean = false;
     drawing: Drawing;
     public drawSize = 0.02;
     private currentLine: DrawLine;
     private lines: Array<DrawLine> = [];
     private isDrawing: boolean = false;
-    private pointCount: number=0;
+    private pointCount: number = 0;
     private renderer: Renderer;
-    private parentArray:Array<SelectItem>=[]
-    private currentParent ="world"
-    private color:ColorV =new ColorV(1,1,1,1)
+    private parentArray: Array<SelectItem> = []
+    private currentParent = "world"
+    private color: ColorV = new ColorV(1, 1, 1, 1)
     private dataArr: Float32Array;
     private dataArrSmall: Int16Array;
+
     constructor(renderer: Renderer) {
         this.drawing = new Drawing(renderer, "drawerDrawing")
-        this.renderer =renderer;
+        this.renderer = renderer;
 
-        this.parentArray.push(new SelectItem('world','world'));
-        for(let l of this.renderer.modelLabels) {
-            this.parentArray.push(new SelectItem(l,l));
+        this.parentArray.push(new SelectItem('world', 'world'));
+        for (let l of this.renderer.modelLabels) {
+            this.parentArray.push(new SelectItem(l, l));
         }
     }
 
@@ -67,33 +69,32 @@ export default class Drawer {
         UI.pushWindow("drawing")
         if (UI.LBool("Enable", this.enabled)) {
             this.enabled = true;
-          this.drawing.visible = true;
+            this.drawing.visible = true;
         } else {
             this.enabled = false
             //this.drawing.visible = false;
         }
-        GameModel.lockView =UI.LBool("LockView", GameModel.lockView);
-        UI.LFloatSlider(this.drawing,"progress",0.0,1.0)
+        GameModel.lockView = UI.LBool("LockView", GameModel.lockView);
+        UI.LFloatSlider(this.drawing, "progress", 0.0, 1.0)
 
-        if(UI.LButton("Play")){
-            this.drawing.progress=0.0;
-            gsap.to(this.drawing,{progress:1,duration:2,ease:"power4.inOut"})
+        if (UI.LButton("Play")) {
+            this.drawing.progress = 0.0;
+            gsap.to(this.drawing, {progress: 1, duration: 2, ease: "power4.Out"})
         }
-        UI.LText(Math.round((this.pointCount*2*3)/1000)+"Kb","dataComp?")
-
-        let  p = UI.LSelect("parent",this.parentArray)
-        UI.LVector("offset",this.drawing.offset)
-        UI.LColor("color",this.color);
-        this.drawing.material.uniforms.setUniform('color',this.color)
-        if(p != this.currentParent){
-
-            if(p=="world"){
-                this.drawing.worldParent =null;
-            }
-            else{
-                this.drawing.worldParent =this.renderer.modelByLabel[p];
+        UI.LText(Math.round((this.pointCount * 2 * 3) / 1000) + "Kb", "dataComp?")
+
+        let p = UI.LSelect("parent", this.parentArray)
+        UI.LVector("offset", this.drawing.offset)
+        UI.LColor("color", this.color);
+        this.drawing.material.uniforms.setUniform('color', this.color)
+        if (p != this.currentParent) {
+
+            if (p == "world") {
+                this.drawing.worldParent = null;
+            } else {
+                this.drawing.worldParent = this.renderer.modelByLabel[p];
             }
-            this.currentParent =p;
+            this.currentParent = p;
         }
         this.drawSize = UI.LFloatSlider("Size", this.drawSize * 10, 0.01, 1,) / 10;
         if (UI.LButton("Undo")) {
@@ -105,11 +106,12 @@ export default class Drawer {
             this.lines = [];
             this.updateDrawing()
         }
-        let name =UI.LTextInput("name","name")
+        let name = UI.LTextInput("name", "name")
         if (UI.LButton("save")) {
 
+            this.updateDrawing()
 
-            saveToBinFile( this.dataArrSmall,name+"_"+this.currentParent)
+            saveToBinFile(this.dataArrSmall, name + "_" + this.currentParent)
         }
         UI.popWindow()
     }
@@ -119,21 +121,29 @@ export default class Drawer {
         let size = 0;
         let sizeS = 0;
         for (let l of this.lines) {
-           size+= l.points.length*4;
-           sizeS+= l.points.length*3;
+            size += l.points.length * 4;
+            sizeS += l.points.length * 3;
         }
-        this.dataArrSmall =new Int16Array(sizeS)
+        this.dataArrSmall = new Int16Array(sizeS + 6)
+        this.dataArrSmall[0] = Math.round(this.drawing.offset.x *1000);
+        this.dataArrSmall[1] =Math.round(this.drawing.offset.y *1000);
+        this.dataArrSmall[2] =Math.round(this.drawing.offset.z *1000);
+
+        this.dataArrSmall[3] =Math.round( this.color.x*255);
+        this.dataArrSmall[4] = Math.round(this.color.y*255);
+        this.dataArrSmall[5] =Math.round(this.color.z*255);
+
         this.dataArr = new Float32Array(size);
         let pointCount = 0;
         for (let l of this.lines) {
 
             for (let p of l.points) {
 
                 let pos = pointCount * 4;
-                let posS = pointCount * 3;
-                this.dataArrSmall[posS++]=Math.round(p.x*1000)
-                this.dataArrSmall[posS++]=Math.round(p.y*1000)
-                this.dataArrSmall[posS++]=Math.round(l.drawSize*1000)
+                let posS = pointCount * 3 + 6;
+                this.dataArrSmall[posS++] = Math.round(p.x * 1000)
+                this.dataArrSmall[posS++] = Math.round(p.y * 1000)
+                this.dataArrSmall[posS++] = Math.round(l.drawSize * 1000)
 
                 this.dataArr[pos++] = p.x;
                 this.dataArr[pos++] = p.y;
@@ -144,10 +154,11 @@ export default class Drawer {
 
 
         }
-        this.drawing.createBuffer(this.dataArr,"instanceBuffer")
+
+        this.drawing.createBuffer(this.dataArr, "instanceBuffer")
         this.drawing.numDrawInstancesMax = pointCount;
         this.drawing.numDrawInstances = pointCount;
-        this.pointCount =pointCount;
+        this.pointCount = pointCount;
 
     }
 }

frontend/src/drawing/Drawing.ts

@@ -6,6 +6,7 @@ import DrawShader from "../shaders/DrawShader";
 import Quad from "../lib/meshes/Quad";
 import Object3D from "../lib/core/Object3D";
 import {Vector3} from "math.gl";
+import ColorV from "../lib/ColorV";
 
 export default class Drawing extends Model{
     public drawData: DrawData;
@@ -16,8 +17,9 @@ export default class Drawing extends Model{
     worldParent: Object3D;
     progress:number =1
     offset =new Vector3();
+    protected color: ColorV = new ColorV(1, 1, 1, 1)
     position=new Vector3();
-    constructor(renderer:Renderer,label:string,data:any=null,numInstances:number=0) {
+    constructor(renderer:Renderer,label:string,numInstances:number=0) {
         super(renderer,label);
         this.numInstances =numInstances
         this.numDrawInstances=numInstances
@@ -70,4 +72,16 @@ export default class Drawing extends Model{
     getBufferByName(name: string) {
         return this.buffer;
     }
+
+    resolveParent() {
+
+
+                 let a =this.label.split("_");
+                 a.shift();
+                 let sa=a.join("_")
+        let parent=sa.split(".")[0];
+
+       if(parent=="world")return;
+        this.worldParent = this.renderer.modelByLabel[parent];
+    }
 }

frontend/src/drawing/DrawingLoader.ts

@@ -0,0 +1,56 @@
+import Renderer from "../lib/Renderer";
+import PreLoader from "../lib/PreLoader";
+import Drawing from "./Drawing";
+
+export default class DrawingLoader extends Drawing{
+
+
+    constructor(renderer:Renderer,preLoader:PreLoader,url) {
+
+        super(renderer,url,0)
+
+
+        preLoader.startLoad();
+        this.loadURL(url).then(() => {
+            preLoader.stopLoad();
+        });
+
+
+    }
+    async loadURL(url: any) {
+
+        const responseBuffer = await fetch(url )
+
+        let dataBuffer = await responseBuffer.arrayBuffer();
+       let data = new Int16Array(dataBuffer)
+
+
+        this.offset.x =data[0] /1000;
+        this.offset.y =data[1] /1000;
+        this.offset.z =data[2] /1000;
+
+        this.color.x =data[3] /255;
+        this.color.y =data[4] /255;
+        this.color.z =data[5] /255;
+        this.material.uniforms.setUniform("color",this.color)
+
+        let size = (data.length-6)/3;
+
+        let bufferData =new Float32Array(size*4)
+        let inputPos =6;
+        let outputPos=0;
+        for (let i= 0;i<size;i++ ){
+
+            bufferData[outputPos++] =data[inputPos++]/1000;
+            bufferData[outputPos++] =data[inputPos++]/1000;
+            bufferData[outputPos++] =data[inputPos++]/1000;
+            bufferData[outputPos++] =0;
+        }
+        this.numInstances =size
+        this.numDrawInstances=size
+        this.numDrawInstancesMax=size;
+        this.createBuffer( bufferData, "instanceBuffer")
+    }
+
+
+}

frontend/src/drawing/DrawingPreloader.ts

@@ -0,0 +1,28 @@
+import Renderer from "../lib/Renderer";
+import PreLoader from "../lib/PreLoader";
+import DrawingLoader from "./DrawingLoader";
+import Drawing from "./Drawing";
+
+
+export default class DrawingPreloader{
+
+    public drawings:Array<Drawing>=[]
+    constructor() {
+
+    }
+
+    load(renderer:Renderer,preloader:PreLoader) {
+        let drawings =["bird_birdHouse","fish_world","gooutside_door_HO","house_house","woods_world","demon_world","demonback_world","nice_world"];
+
+        for(let files of drawings){
+
+            let name = "drawings/"+files+".bin";
+
+            let drawing =     new DrawingLoader(renderer,preloader,name);
+            this.drawings.push(drawing)
+        }
+
+    }
+
+
+}

frontend/src/shaders/GlobalLightOutsideShader.ts

@@ -209,7 +209,7 @@ fn mainFragment(@location(0)  uv0: vec2f) -> @location(0) vec4f
         let shadowColorP =cubeShadow(shadowCubeDebug,uniforms.pointlightPos.xyz,world,uv0);
         let lightP =  pointLight(uniforms.pointlightPos.xyz,uniforms.pointlightColor,albedo,world,N,V,F0,roughness)*shadowColorP;
 
-    if(mra.w==0.0){return vec4(albedo,0.0);}
+    if(mra.w==0.0){return vec4(albedo*1.5,0.0);}
 
     return vec4(color+(lightL+lightP)*ao,smoothstep(uniforms.dof.x,uniforms.dof.y,depth) );
 }