From 9fdf15b83a4bf2d7e1ccaeeee959f78245aa830a Mon Sep 17 00:00:00 2001 From: Exelo Date: Thu, 20 Mar 2025 13:53:20 +0100 Subject: [PATCH] fix(graphics): fix display --- example/.gitignore | 1 + example/template/update.sh | 1 + packages/core/src/core/core.ts | 10 +++++-- .../graphics-2d/src/components/component.ts | 20 +++++++++++-- packages/graphics-2d/src/components/index.ts | 2 ++ .../graphics-2d/src/components/shape/index.ts | 2 ++ .../components/shape/shapes/circle.shape.ts | 17 ++++++++++- .../src/components/shape/shapes/index.ts | 1 + packages/graphics-2d/src/factory.ts | 6 ++-- packages/graphics-2d/src/index.ts | 1 + packages/graphics-2d/src/render.ts | 12 ++++++-- .../graphics-2d/src/shader/shader.manager.ts | 11 +++++--- .../graphics-2d/src/shader/shaders.const.ts | 6 ++-- .../graphics-2d/src/shader/shaders.enum.ts | 2 +- .../src/shader/shaders/circle.wgsl | 28 ++++++------------- 15 files changed, 80 insertions(+), 40 deletions(-) create mode 100644 example/.gitignore create mode 100644 packages/graphics-2d/src/components/index.ts create mode 100644 packages/graphics-2d/src/components/shape/index.ts create mode 100644 packages/graphics-2d/src/components/shape/shapes/index.ts diff --git a/example/.gitignore b/example/.gitignore new file mode 100644 index 00000000..71e9c16c --- /dev/null +++ b/example/.gitignore @@ -0,0 +1 @@ +/debug/ \ No newline at end of file diff --git a/example/template/update.sh b/example/template/update.sh index 3852095b..49d2cfd4 100755 --- a/example/template/update.sh +++ b/example/template/update.sh @@ -1,6 +1,7 @@ #!/bin/bash cd ../.. +pnpm clean pnpm build cd - mkdir -p node_modules/@nanoforge diff --git a/packages/core/src/core/core.ts b/packages/core/src/core/core.ts index 07a8de83..2d05fe3c 100644 --- a/packages/core/src/core/core.ts +++ b/packages/core/src/core/core.ts @@ -26,10 +26,14 @@ export class Core { public async run(): Promise { 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 { diff --git a/packages/graphics-2d/src/components/component.ts b/packages/graphics-2d/src/components/component.ts index bec886e5..259794df 100644 --- a/packages/graphics-2d/src/components/component.ts +++ b/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 { + public async init(): Promise { await this._init(); this._updateUniforms(); this._updatePipeline(); @@ -54,11 +54,22 @@ export abstract class NfgComponent { protected abstract _init(): Promise; 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, diff --git a/packages/graphics-2d/src/components/index.ts b/packages/graphics-2d/src/components/index.ts new file mode 100644 index 00000000..90d87fcd --- /dev/null +++ b/packages/graphics-2d/src/components/index.ts @@ -0,0 +1,2 @@ +export { NfgComponent } from "./component"; +export * from "./shape"; diff --git a/packages/graphics-2d/src/components/shape/index.ts b/packages/graphics-2d/src/components/shape/index.ts new file mode 100644 index 00000000..0b1d0089 --- /dev/null +++ b/packages/graphics-2d/src/components/shape/index.ts @@ -0,0 +1,2 @@ +export { NfgShape } from "./common/shape"; +export * from "./shapes"; diff --git a/packages/graphics-2d/src/components/shape/shapes/circle.shape.ts b/packages/graphics-2d/src/components/shape/shapes/circle.shape.ts index e324c25b..bbe369b3 100644 --- a/packages/graphics-2d/src/components/shape/shapes/circle.shape.ts +++ b/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, ]); } } diff --git a/packages/graphics-2d/src/components/shape/shapes/index.ts b/packages/graphics-2d/src/components/shape/shapes/index.ts new file mode 100644 index 00000000..71509e65 --- /dev/null +++ b/packages/graphics-2d/src/components/shape/shapes/index.ts @@ -0,0 +1 @@ +export { NfgCircle } from "./circle.shape"; diff --git a/packages/graphics-2d/src/factory.ts b/packages/graphics-2d/src/factory.ts index 786dc50c..8b3c8b8a 100644 --- a/packages/graphics-2d/src/factory.ts +++ b/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): NfgCircle { - return new NfgCircle(this._core, options); + createCircle(options?: Partial): Promise { + return new NfgCircle(this._core, options).init(); } } diff --git a/packages/graphics-2d/src/index.ts b/packages/graphics-2d/src/index.ts index 13807318..31996289 100644 --- a/packages/graphics-2d/src/index.ts +++ b/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"; diff --git a/packages/graphics-2d/src/render.ts b/packages/graphics-2d/src/render.ts index 522c683a..a2856837 100644 --- a/packages/graphics-2d/src/render.ts +++ b/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); } } diff --git a/packages/graphics-2d/src/shader/shader.manager.ts b/packages/graphics-2d/src/shader/shader.manager.ts index d21c84ca..728b76ba 100644 --- a/packages/graphics-2d/src/shader/shader.manager.ts +++ b/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(), + }), + ); } } diff --git a/packages/graphics-2d/src/shader/shaders.const.ts b/packages/graphics-2d/src/shader/shaders.const.ts index a6b7aea0..730fbb18 100644 --- a/packages/graphics-2d/src/shader/shaders.const.ts +++ b/packages/graphics-2d/src/shader/shaders.const.ts @@ -1,11 +1,11 @@ import { ShadersEnum } from "./shaders.enum"; export const SHADER_PATHS: Record = { - [ShadersEnum.RECTANGLE]: "rectangle.wgsl", + // [ShadersEnum.RECTANGLE]: "rectangle.wgsl", [ShadersEnum.CIRCLE]: "circle.wgsl", }; export const SHADER_NAMES: Record = { - [ShadersEnum.RECTANGLE]: "Rectangle shader", - [ShadersEnum.CIRCLE]: "Rectangle shader", + // [ShadersEnum.RECTANGLE]: "Rectangle shader", + [ShadersEnum.CIRCLE]: "Circle shader", }; diff --git a/packages/graphics-2d/src/shader/shaders.enum.ts b/packages/graphics-2d/src/shader/shaders.enum.ts index d65b22f8..19e57f89 100644 --- a/packages/graphics-2d/src/shader/shaders.enum.ts +++ b/packages/graphics-2d/src/shader/shaders.enum.ts @@ -1,4 +1,4 @@ export enum ShadersEnum { - RECTANGLE = 0, + // RECTANGLE = 0, CIRCLE = 1, } diff --git a/packages/graphics-2d/src/shader/shaders/circle.wgsl b/packages/graphics-2d/src/shader/shaders/circle.wgsl index db83509f..72061be5 100644 --- a/packages/graphics-2d/src/shader/shaders/circle.wgsl +++ b/packages/graphics-2d/src/shader/shaders/circle.wgsl @@ -5,8 +5,8 @@ var VERTICES: array, 3> = array, 3>( ); struct View { - position: vec2, - scale: f32, + position: vec4, + scale: vec2, size: vec2, }; @@ -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(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 { let alpha = 1.0 - smoothstep(1.0 - 3.0 * in.pixel_size, 1.0, length(in.local_space)); return vec4(in.color.rgb, in.color.a * alpha); } - -// @fragment -// fn fs_main(in: VertexOutput) -> @location(0) vec4 { -// let alpha = 1.0 - smoothstep(1.0 - 3.0 * in.pixel_size, 1.0, length(in.local_space)); -// let ambient = vec3(0.2, 0.5, 1.0); -// let ambient_strength = 0.02; -// let light_dir = vec3(1.0, 1.0, 2.0) / sqrt(6.0); -// let x = in.local_space.x; let y = in.local_space.y; -// let normal = vec3(x, y, sqrt(1.0 - x*x - y*y)); -// let brightness = (0.5 + max(dot(light_dir, normal), -0.5)) / 1.5; -// return vec4(ambient * ambient_strength + in.color.rgb * ((1.0 - ambient_strength) * brightness * brightness * brightness), in.color.a * alpha); -// } \ No newline at end of file