Fix/graphics/fix display

example/.gitignore

@@ -0,0 +1 @@
+/debug/

example/template/update.sh

@@ -1,6 +1,7 @@
 #!/bin/bash
 
 cd ../..
+pnpm clean
 pnpm build
 cd -
 mkdir -p node_modules/@nanoforge

packages/core/src/core/core.ts

@@ -26,10 +26,14 @@ export class Core {
   public async run(): Promise<void> {
     const context = this.getExecutionContext();
     const libraries = this.config.libraryManager.getRunnerLibraries();
-    while (context.isRunning) {
+    const interval = setInterval(async () => {
+      if (!context.isRunning) {
+        clearInterval(interval);
+        this.runClear(this.getClearContext());
+        return;
+      }
       await this.runExecute(context, libraries);
-    }
-    this.runClear(this.getClearContext());
+    }, 200);
   }
 
   private getInitContext(options: IRunOptions): InitContext {

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

@@ -25,7 +25,7 @@ export abstract class NfgComponent {
       entries: [
         {
           binding: 0,
-          visibility: GPUShaderStage.VERTEX | GPUShaderStage.COMPUTE | GPUShaderStage.FRAGMENT,
+          visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
           buffer: {},
         },
       ],
@@ -37,7 +37,7 @@ export abstract class NfgComponent {
     });
   }
 
-  public async init(): Promise<NfgComponent> {
+  public async init(): Promise<typeof this> {
     await this._init();
     this._updateUniforms();
     this._updatePipeline();
@@ -54,11 +54,22 @@ export abstract class NfgComponent {
   protected abstract _init(): Promise<void>;
 
   protected _setVertices(raw: number[]): void {
+    const len = this._vertices?.byteLength ?? -1;
     this._vertices = new Float32Array(raw);
-    this._updateVertexBuffer();
+    if (len !== this._vertices.byteLength) this._updateVertexBuffer();
+    else this._writeVertexBuffer();
   }
 
   protected _updateVertexBuffer(): void {
+    this._vertexBuffer = this._core.device.createBuffer({
+      label: `${this._label} vertices`,
+      size: this._vertices.byteLength,
+      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+    });
+    this._writeVertexBuffer();
+  }
+
+  protected _writeVertexBuffer(): void {
     this._core.device.queue.writeBuffer(this._vertexBuffer, 0, this._vertices);
   }
 
@@ -88,6 +99,9 @@ export abstract class NfgComponent {
     const uniformArray = new Float32Array([
       0,
       0,
+      0,
+      1,
+      1,
       1,
       this._core.initContext.canvas.width,
       this._core.initContext.canvas.height,

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

@@ -0,0 +1,2 @@
+export { NfgComponent } from "./component";
+export * from "./shape";

packages/graphics-2d/src/components/shape/index.ts

@@ -0,0 +1,2 @@
+export { NfgShape } from "./common/shape";
+export * from "./shapes";

packages/graphics-2d/src/components/shape/shapes/circle.shape.ts

@@ -38,8 +38,9 @@ export class NfgCircle extends NfgShape {
     this._vertexLength = 7;
 
     this._pos = options?.pos ?? { x: 0, y: 0 };
-    this._radius = options?.radius ?? 1;
+    this._radius = options?.radius ?? 0.1;
     this._color = options?.color ?? { r: 0, g: 0, b: 0, a: 1 };
+    this._updateVertices();
   }
 
   public setPosition(pos: IVertex2D): NfgCircle {
@@ -73,6 +74,20 @@ export class NfgCircle extends NfgShape {
       this._color.g,
       this._color.b,
       this._color.a,
+      this._pos.x,
+      this._pos.y,
+      this._radius,
+      this._color.r,
+      this._color.g,
+      this._color.b,
+      this._color.a,
+      this._pos.x,
+      this._pos.y,
+      this._radius,
+      this._color.r,
+      this._color.g,
+      this._color.b,
+      this._color.a,
     ]);
   }
 }

packages/graphics-2d/src/components/shape/shapes/index.ts

@@ -0,0 +1 @@
+export { NfgCircle } from "./circle.shape";

packages/graphics-2d/src/factory.ts

@@ -1,4 +1,4 @@
-import { NfgCircle } from "./components/shape/shapes/circle.shape";
+import { NfgCircle } from "./components";
 import { type GraphicsCore } from "./core";
 import { type ICircleOptions } from "./types";
 
@@ -9,7 +9,7 @@ export class GraphicsFactory {
     this._core = core;
   }
 
-  createCircle(options?: Partial<ICircleOptions>): NfgCircle {
-    return new NfgCircle(this._core, options);
+  createCircle(options?: Partial<ICircleOptions>): Promise<NfgCircle> {
+    return new NfgCircle(this._core, options).init();
   }
 }

packages/graphics-2d/src/index.ts

@@ -1,4 +1,5 @@
 import "./shader/shaders";
 
 export * from "./types";
+export * from "./components";
 export { Graphics2DLibrary } from "./graphics-2d.library";

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

@@ -25,6 +25,7 @@ export class GraphicsRender {
     this._canvasContext.configure({
       device: this._core.device,
       format: this._canvasFormat,
+      alphaMode: "premultiplied",
     });
   }
 
@@ -39,10 +40,11 @@ export class GraphicsRender {
   render(components: NfgComponent[]): void {
     const [encoder, pass] = this._beginRender();
     this._renderComponents(pass, components);
-    this._endRender(encoder);
+    this._endRender(pass, encoder);
   }
 
   private _beginRender(): [GPUCommandEncoder, GPURenderPassEncoder] {
+    console.log(1);
     const encoder = this._core.device.createCommandEncoder();
 
     const pass = encoder.beginRenderPass({
@@ -65,7 +67,13 @@ export class GraphicsRender {
     }
   }
 
-  private _endRender(encoder: GPUCommandEncoder): void {
+  private _endRender(pass: GPURenderPassEncoder, encoder: GPUCommandEncoder): void {
+    pass.end();
+    console.log(pass);
     this._core.device.queue.submit([encoder.finish()]);
+    this._core.device.queue.onSubmittedWorkDone().then(() => {
+      console.log("Done");
+    });
+    console.log(this._core.device.queue);
   }
 }

packages/graphics-2d/src/shader/shader.manager.ts

@@ -38,9 +38,12 @@ export class ShaderManager {
       throw new Error("Could not find shader");
     }
     const shaderFile = await this._assetManager.getWgsl(path);
-    this._core.device.createShaderModule({
-      label: SHADER_NAMES[shader],
-      code: await shaderFile.getText(),
-    });
+    this._shaders.set(
+      shader,
+      this._core.device.createShaderModule({
+        label: SHADER_NAMES[shader],
+        code: await shaderFile.getText(),
+      }),
+    );
   }
 }

packages/graphics-2d/src/shader/shaders.const.ts

@@ -1,11 +1,11 @@
 import { ShadersEnum } from "./shaders.enum";
 
 export const SHADER_PATHS: Record<ShadersEnum, string> = {
-  [ShadersEnum.RECTANGLE]: "rectangle.wgsl",
+  // [ShadersEnum.RECTANGLE]: "rectangle.wgsl",
   [ShadersEnum.CIRCLE]: "circle.wgsl",
 };
 
 export const SHADER_NAMES: Record<ShadersEnum, string> = {
-  [ShadersEnum.RECTANGLE]: "Rectangle shader",
-  [ShadersEnum.CIRCLE]: "Rectangle shader",
+  // [ShadersEnum.RECTANGLE]: "Rectangle shader",
+  [ShadersEnum.CIRCLE]: "Circle shader",
 };

packages/graphics-2d/src/shader/shaders.enum.ts

@@ -1,4 +1,4 @@
 export enum ShadersEnum {
-  RECTANGLE = 0,
+  // RECTANGLE = 0,
   CIRCLE = 1,
 }

packages/graphics-2d/src/shader/shaders/circle.wgsl

@@ -5,8 +5,8 @@ var<private> VERTICES: array<vec2<f32>, 3> = array<vec2<f32>, 3>(
 );
 
 struct View {
-    position: vec2<f32>,
-    scale: f32,
+    position: vec4<f32>,
+    scale: vec2<f32>,
     size: vec2<f32>,
 };
 
@@ -46,24 +46,24 @@ fn vertex_main(
 
     var position = instance.position;
     var radius = instance.radius;
-    if radius * y < 1.414214 * view.scale {
-        let a = (position - view.position) / view.scale;
+    if radius * y < 1.414214 * view.scale.x {
+        let a = (position - view.position.xy) / view.scale.x;
         let b = (floor(a * y) + 0.5) / y;
-        let c = b * view.scale + view.position;
+        let c = b * view.scale.x + view.position.xy;
         position = c;
-        radius = 1.414214 * view.scale / y;
+        radius = 1.414214 * view.scale.x / y;
     }
 
     let world_space = local_space * radius + position;
 
-    let view_space = (world_space - view.position) / view.scale;
+    let view_space = (world_space - view.position.xy) / view.scale.x;
 
     let clip_space = vec4<f32>(view_space.x * aspect, view_space.y, 0.0, 1.0);
 
     out.clip_space  = clip_space;
     out.local_space = local_space;
     out.color       = vec4(pow(instance.color.rgb, vec3(2.2)), instance.color.a);
-    out.pixel_size  = view.scale / (radius * y);
+    out.pixel_size  = view.scale.x / (radius * y);
     return out;
 }
 
@@ -72,15 +72,3 @@ fn fragment_main(in: VertexOutput) -> @location(0) vec4<f32> {
     let alpha = 1.0 - smoothstep(1.0 - 3.0 * in.pixel_size, 1.0, length(in.local_space));
     return vec4<f32>(in.color.rgb, in.color.a * alpha);
 }
-
-// @fragment
-// fn fs_main(in: VertexOutput) -> @location(0) vec4<f32> {
-//     let alpha = 1.0 - smoothstep(1.0 - 3.0 * in.pixel_size, 1.0, length(in.local_space));
-//     let ambient = vec3<f32>(0.2, 0.5, 1.0);
-//     let ambient_strength = 0.02;
-//     let light_dir = vec3<f32>(1.0, 1.0, 2.0) / sqrt(6.0);
-//     let x = in.local_space.x; let y = in.local_space.y;
-//     let normal = vec3<f32>(x, y, sqrt(1.0 - x*x - y*y));
-//     let brightness = (0.5 + max(dot(light_dir, normal), -0.5)) / 1.5;
-//     return vec4<f32>(ambient * ambient_strength + in.color.rgb * ((1.0 - ambient_strength) * brightness * brightness * brightness), in.color.a * alpha);
-// }