Move normalization to shader

kaplayjs · Jan 25, 2025 · 6a0cae7 · 6a0cae7
1 parent 7f9d267
commit 6a0cae7
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 25 deletions.
diff --git a/src/constants.ts b/src/constants.ts
@@ -1,6 +1,6 @@
 // some default charsets for loading bitmap fonts
 export const ASCII_CHARS =
-    " !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~";
+	" !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~";
 export const DEF_ANCHOR = "topleft";
 export const BG_GRID_SIZE = 64;
 export const DEF_FONT = "monospace";
@@ -19,9 +19,9 @@ export const DEF_FONT_FILTER = "linear";
 export const LOG_MAX = 8;
 export const LOG_TIME = 4;
 export const VERTEX_FORMAT = [
-    { name: "a_pos", size: 2 },
-    { name: "a_uv", size: 2 },
-    { name: "a_color", size: 4 },
+	{ name: "a_pos", size: 2 },
+	{ name: "a_uv", size: 2 },
+	{ name: "a_color", size: 4 },
 ];
 const STRIDE = VERTEX_FORMAT.reduce((sum, f) => sum + f.size, 0);
 const MAX_BATCHED_QUAD = 2048;
@@ -37,8 +37,11 @@ varying vec2 v_pos;
 varying vec2 v_uv;
 varying vec4 v_color;
 
+uniform float width;
+uniform float height;
+
 vec4 def_vert() {
-	return vec4(a_pos, 0.0, 1.0);
+	return vec4(a_pos.x / width * 2.0 - 1.0, a_pos.y / -height * 2.0 + 1.0, 0.0, 1.0);
 }
 
 {{user}}
@@ -89,13 +92,13 @@ vec4 frag(vec2 pos, vec2 uv, vec4 color, sampler2D tex) {
 `;
 export const COMP_DESC = new Set(["id", "require"]);
 export const COMP_EVENTS = new Set([
-    "add",
-    "fixedUpdate",
-    "update",
-    "draw",
-    "destroy",
-    "inspect",
-    "drawInspect",
+	"add",
+	"fixedUpdate",
+	"update",
+	"draw",
+	"destroy",
+	"inspect",
+	"drawInspect",
 ]);
 export const DEF_OFFSCREEN_DIS = 200;
 // maximum y velocity with body()

diff --git a/src/gfx/draw/drawRaw.ts b/src/gfx/draw/drawRaw.ts
@@ -31,19 +31,11 @@ export function drawRaw(
     const vertLength = attributes.pos.length / 2;
     const vv: number[] = new Array(vertLength * 8);
 
-    const w = width();
-    const h = height();
     let index = 0;
     for (let i = 0; i < vertLength; i++) {
         scratchPt.x = attributes.pos[i * 2];
         scratchPt.y = attributes.pos[i * 2 + 1];
-        // normalized world space coordinate [-1.0 ~ 1.0]
-        screen2ndc(
-            transform.transformPoint(scratchPt, scratchPt),
-            w,
-            h,
-            scratchPt,
-        );
+        transform.transformPoint(scratchPt, scratchPt)
 
         vv[index++] = scratchPt.x;
         vv[index++] = scratchPt.y;
@@ -62,5 +54,7 @@ export function drawRaw(
         shader,
         parsedTex,
         uniform,
+        width(),
+        height()
     );
 }
diff --git a/src/gfx/gfx.ts b/src/gfx/gfx.ts
@@ -164,6 +164,8 @@ export class BatchRenderer {
         shader: Shader,
         tex: Texture | null = null,
         uniform: Uniform | null = null,
+        width: number,
+        height: number
     ) {
         if (
             primitive !== this.curPrimitive
@@ -172,10 +174,10 @@ export class BatchRenderer {
             || ((this.curUniform != uniform)
                 && !deepEq(this.curUniform, uniform))
             || this.vqueue.length + verts.length * this.stride
-                > this.maxVertices
+            > this.maxVertices
             || this.iqueue.length + indices.length > this.maxIndices
         ) {
-            this.flush();
+            this.flush(width, height);
         }
         const indexOffset = this.vqueue.length / this.stride;
         let l = verts.length;
@@ -192,7 +194,7 @@ export class BatchRenderer {
         this.curUniform = uniform;
     }
 
-    flush() {
+    flush(width: number, height: number) {
         if (
             !this.curPrimitive
             || !this.curShader
@@ -217,6 +219,10 @@ export class BatchRenderer {
         if (this.curUniform) {
             this.curShader.send(this.curUniform);
         }
+        this.curShader.send({
+            width,
+            height
+        });
         this.curTex?.bind();
         gl.drawElements(
             this.curPrimitive,

diff --git a/src/gfx/stack.ts b/src/gfx/stack.ts
@@ -48,7 +48,7 @@ export function popTransform() {
 }
 
 export function flush() {
-    _k.gfx.renderer.flush();
+    _k.gfx.renderer.flush(width(), height());
 }
 
 // get game width