feat(graphics): add dynamic size handle of canvas

Author: Exeloo

packages/graphics-2d/src/components/component.ts

@@ -40,7 +40,7 @@ export abstract class NfgComponent {
 
   public async init(): Promise<typeof this> {
     await this._init();
-    this._updateUniforms();
+    this.updateUniforms();
     this._updatePipeline();
     return this;
   }
@@ -52,6 +52,27 @@ export abstract class NfgComponent {
     pass.draw(this._vertices.length / this._vertexLength, this._duplicate);
   }
 
+  public updateUniforms(): void {
+    const uniformArray = new Float32Array([
+      0,
+      0,
+      0,
+      1,
+      1,
+      1,
+      this._core.initContext.canvas.width,
+      this._core.initContext.canvas.height,
+    ]);
+    console.log(this._core.initContext.canvas.width, this._core.initContext.canvas.height);
+    if (!this._uniformBuffer)
+      this._uniformBuffer = this._core.device.createBuffer({
+        label: "View Uniforms",
+        size: uniformArray.byteLength,
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+      });
+    this._core.device.queue.writeBuffer(this._uniformBuffer, 0, uniformArray);
+  }
+
   protected abstract _init(): Promise<void>;
 
   protected _setVertices(raw: number[]): void {
@@ -96,25 +117,6 @@ export abstract class NfgComponent {
     this._updateBindGroup();
   }
 
-  protected _updateUniforms(): void {
-    const uniformArray = new Float32Array([
-      0,
-      0,
-      0,
-      1,
-      1,
-      1,
-      this._core.initContext.canvas.width,
-      this._core.initContext.canvas.height,
-    ]);
-    this._uniformBuffer = this._core.device.createBuffer({
-      label: "View Uniforms",
-      size: uniformArray.byteLength,
-      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST, // Une uniform est une valeur constante pour le gpu
-    });
-    this._core.device.queue.writeBuffer(this._uniformBuffer, 0, uniformArray);
-  }
-
   protected _updateBindGroup(): void {
     this._bindGroup = this._core.device.createBindGroup({
       label: `${this._label} renderer bind group`,

packages/graphics-2d/src/render/window.ts

@@ -4,9 +4,16 @@ import { type GraphicsRender } from "../render";
 export class NfgWindow {
   private _components: NfgComponent[] = [];
   private _render: GraphicsRender;
+  private _uniformTimeout: boolean = false;
+  private _uniformNeed: boolean = false;
 
   constructor(render: GraphicsRender) {
     this._render = render;
+
+    window.addEventListener("resize", () => {
+      this._updateWindowSize();
+    });
+    this._updateWindowSize();
   }
 
   get width(): number {
@@ -22,7 +29,27 @@ export class NfgWindow {
   }
 
   public render(): void {
+    if (this._uniformNeed) {
+      this.updateAllUniforms();
+      this._uniformNeed = false;
+    }
     this._render.render(this._components);
     this._components = [];
   }
+
+  private _updateWindowSize(): void {
+    this._render.canvas.width = window.innerWidth;
+    this._render.canvas.height = window.innerHeight;
+    // Uncomment if need performances
+    // if (this._uniformTimeout) return;
+    this._uniformTimeout = true;
+    this._uniformNeed = true;
+    setTimeout(() => {
+      this._uniformTimeout = false;
+    }, 100);
+  }
+
+  private updateAllUniforms(): void {
+    this._components.forEach((component) => component.updateUniforms());
+  }
 }