@vectojs/core 1.22.0 → 1.24.0

package/dist/{chunk-UPULSLKA.mjs → chunk-ME4LB2HB.mjs}

@@ -922,10 +922,11 @@ var FLOATS_PER_POINT = 7;
 var POINT_STRIDE = FLOATS_PER_POINT * 4;
 var VERTS_PER_QUAD = 4;
 var INDICES_PER_QUAD = 6;
-var FLOATS_PER_RECT_VERT = 6;
-var RECT_VERT_STRIDE = FLOATS_PER_RECT_VERT * 4;
-var FLOATS_PER_SPRITE_VERT = 8;
-var SPRITE_VERT_STRIDE = FLOATS_PER_SPRITE_VERT * 4;
+var PACKED_QUAD_VERT_STRIDE = 16;
+var PACKED_RECT_VERT_STRIDE = 12;
+var PACKED_UV_OFFSET = 8;
+var PACKED_TINT_OFFSET = 12;
+var PACKED_RECT_TINT_OFFSET = 8;
 function buildQuadIndices(quads) {
   const out = new Uint32Array(quads * INDICES_PER_QUAD);
   for (let i = 0; i < quads; i++) {
@@ -940,6 +941,35 @@ function buildQuadIndices(quads) {
   }
   return out;
 }
+function encodeUnorm(v, max) {
+  return v <= 0 ? 0 : v >= 1 ? max : v * max + 0.5 | 0;
+}
+var LITTLE_ENDIAN = new Uint8Array(new Uint32Array([1]).buffer)[0] === 1;
+function packTint(r, g, b, a) {
+  const ri = encodeUnorm(r, 255);
+  const gi = encodeUnorm(g, 255);
+  const bi = encodeUnorm(b, 255);
+  const ai = encodeUnorm(a, 255);
+  return LITTLE_ENDIAN ? ai << 24 | bi << 16 | gi << 8 | ri : ri << 24 | gi << 16 | bi << 8 | ai;
+}
+function createPackedBuffer(byteLength) {
+  const bytes = new ArrayBuffer(byteLength);
+  return {
+    bytes,
+    f32: new Float32Array(bytes),
+    u16: new Uint16Array(bytes),
+    u32: new Uint32Array(bytes),
+    u8: new Uint8Array(bytes)
+  };
+}
+function growPacked(buf, neededBytes) {
+  if (neededBytes <= buf.bytes.byteLength) return buf;
+  let cap = buf.bytes.byteLength;
+  while (cap < neededBytes) cap *= 2;
+  const grown = createPackedBuffer(cap);
+  grown.u8.set(buf.u8);
+  return grown;
+}
 var POINT_VERT = `#version 300 es
 in vec2 a_pos;
 in float a_radius;
@@ -1067,7 +1097,7 @@ function link(gl, vsSrc, fsSrc) {
   }
   return program;
 }
-function writeQuad(out, o, x, y, width, height, u0, v0, u1, v1, r, g, b, al, rotation) {
+function writeQuad(out, byteOffset, x, y, width, height, u0, v0, u1, v1, r, g, b, al, rotation) {
   let x1;
   let y1;
   let x2;
@@ -1095,40 +1125,39 @@ function writeQuad(out, o, x, y, width, height, u0, v0, u1, v1, r, g, b, al, rot
     x3 = x - hs;
     y3 = y + hc;
   }
-  out[o] = x;
-  out[o + 1] = y;
-  out[o + 2] = u0;
-  out[o + 3] = v0;
-  out[o + 4] = r;
-  out[o + 5] = g;
-  out[o + 6] = b;
-  out[o + 7] = al;
-  out[o + 8] = x1;
-  out[o + 9] = y1;
-  out[o + 10] = u1;
-  out[o + 11] = v0;
-  out[o + 12] = r;
-  out[o + 13] = g;
-  out[o + 14] = b;
-  out[o + 15] = al;
-  out[o + 16] = x2;
-  out[o + 17] = y2;
-  out[o + 18] = u1;
-  out[o + 19] = v1;
-  out[o + 20] = r;
-  out[o + 21] = g;
-  out[o + 22] = b;
-  out[o + 23] = al;
-  out[o + 24] = x3;
-  out[o + 25] = y3;
-  out[o + 26] = u0;
-  out[o + 27] = v1;
-  out[o + 28] = r;
-  out[o + 29] = g;
-  out[o + 30] = b;
-  out[o + 31] = al;
+  const iu0 = encodeUnorm(u0, 65535);
+  const iv0 = encodeUnorm(v0, 65535);
+  const iu1 = encodeUnorm(u1, 65535);
+  const iv1 = encodeUnorm(v1, 65535);
+  const tint = packTint(r, g, b, al);
+  const f32 = out.f32;
+  const u16 = out.u16;
+  const u32 = out.u32;
+  const fi = byteOffset >> 2;
+  const si = byteOffset + PACKED_UV_OFFSET >> 1;
+  const ti = byteOffset + PACKED_TINT_OFFSET >> 2;
+  f32[fi] = x;
+  f32[fi + 1] = y;
+  u16[si] = iu0;
+  u16[si + 1] = iv0;
+  u32[ti] = tint;
+  f32[fi + 4] = x1;
+  f32[fi + 5] = y1;
+  u16[si + 8] = iu1;
+  u16[si + 9] = iv0;
+  u32[ti + 4] = tint;
+  f32[fi + 8] = x2;
+  f32[fi + 9] = y2;
+  u16[si + 16] = iu1;
+  u16[si + 17] = iv1;
+  u32[ti + 8] = tint;
+  f32[fi + 12] = x3;
+  f32[fi + 13] = y3;
+  u16[si + 24] = iu0;
+  u16[si + 25] = iv1;
+  u32[ti + 12] = tint;
 }
-function writeRectQuad(out, o, x, y, width, height, r, g, b, al, rotation) {
+function writeRectQuad(out, byteOffset, x, y, width, height, r, g, b, al, rotation) {
   let x1;
   let y1;
   let x2;
@@ -1156,30 +1185,22 @@ function writeRectQuad(out, o, x, y, width, height, r, g, b, al, rotation) {
     x3 = x - hs;
     y3 = y + hc;
   }
-  out[o] = x;
-  out[o + 1] = y;
-  out[o + 2] = r;
-  out[o + 3] = g;
-  out[o + 4] = b;
-  out[o + 5] = al;
-  out[o + 6] = x1;
-  out[o + 7] = y1;
-  out[o + 8] = r;
-  out[o + 9] = g;
-  out[o + 10] = b;
-  out[o + 11] = al;
-  out[o + 12] = x2;
-  out[o + 13] = y2;
-  out[o + 14] = r;
-  out[o + 15] = g;
-  out[o + 16] = b;
-  out[o + 17] = al;
-  out[o + 18] = x3;
-  out[o + 19] = y3;
-  out[o + 20] = r;
-  out[o + 21] = g;
-  out[o + 22] = b;
-  out[o + 23] = al;
+  const tint = packTint(r, g, b, al);
+  const f32 = out.f32;
+  const u32 = out.u32;
+  const fi = byteOffset >> 2;
+  f32[fi] = x;
+  f32[fi + 1] = y;
+  u32[fi + 2] = tint;
+  f32[fi + 3] = x1;
+  f32[fi + 4] = y1;
+  u32[fi + 5] = tint;
+  f32[fi + 6] = x2;
+  f32[fi + 7] = y2;
+  u32[fi + 8] = tint;
+  f32[fi + 9] = x3;
+  f32[fi + 10] = y3;
+  u32[fi + 11] = tint;
 }
 function grow(data, needed) {
   if (needed <= data.length) return data;
@@ -1226,9 +1247,16 @@ function createWebGLPointRenderer(canvas) {
   gl.bindVertexArray(rectVAO);
   gl.bindBuffer(gl.ARRAY_BUFFER, rectBuffer);
   gl.enableVertexAttribArray(rAPos);
-  gl.vertexAttribPointer(rAPos, 2, gl.FLOAT, false, RECT_VERT_STRIDE, 0);
+  gl.vertexAttribPointer(rAPos, 2, gl.FLOAT, false, PACKED_RECT_VERT_STRIDE, 0);
   gl.enableVertexAttribArray(rAColor);
-  gl.vertexAttribPointer(rAColor, 4, gl.FLOAT, false, RECT_VERT_STRIDE, 8);
+  gl.vertexAttribPointer(
+    rAColor,
+    4,
+    gl.UNSIGNED_BYTE,
+    true,
+    PACKED_RECT_VERT_STRIDE,
+    PACKED_RECT_TINT_OFFSET
+  );
   const sAPos = gl.getAttribLocation(spriteProgram, "a_pos");
   const sAUv = gl.getAttribLocation(spriteProgram, "a_uv");
   const sATint = gl.getAttribLocation(spriteProgram, "a_tint");
@@ -1239,11 +1267,25 @@ function createWebGLPointRenderer(canvas) {
   gl.bindVertexArray(spriteVAO);
   gl.bindBuffer(gl.ARRAY_BUFFER, spriteBuffer);
   gl.enableVertexAttribArray(sAPos);
-  gl.vertexAttribPointer(sAPos, 2, gl.FLOAT, false, SPRITE_VERT_STRIDE, 0);
+  gl.vertexAttribPointer(sAPos, 2, gl.FLOAT, false, PACKED_QUAD_VERT_STRIDE, 0);
   gl.enableVertexAttribArray(sAUv);
-  gl.vertexAttribPointer(sAUv, 2, gl.FLOAT, false, SPRITE_VERT_STRIDE, 8);
+  gl.vertexAttribPointer(
+    sAUv,
+    2,
+    gl.UNSIGNED_SHORT,
+    true,
+    PACKED_QUAD_VERT_STRIDE,
+    PACKED_UV_OFFSET
+  );
   gl.enableVertexAttribArray(sATint);
-  gl.vertexAttribPointer(sATint, 4, gl.FLOAT, false, SPRITE_VERT_STRIDE, 16);
+  gl.vertexAttribPointer(
+    sATint,
+    4,
+    gl.UNSIGNED_BYTE,
+    true,
+    PACKED_QUAD_VERT_STRIDE,
+    PACKED_TINT_OFFSET
+  );
   const gAPos = gl.getAttribLocation(msdfProgram, "a_pos");
   const gAUv = gl.getAttribLocation(msdfProgram, "a_uv");
   const gATint = gl.getAttribLocation(msdfProgram, "a_tint");
@@ -1255,11 +1297,25 @@ function createWebGLPointRenderer(canvas) {
   gl.bindVertexArray(glyphVAO);
   gl.bindBuffer(gl.ARRAY_BUFFER, glyphBuffer);
   gl.enableVertexAttribArray(gAPos);
-  gl.vertexAttribPointer(gAPos, 2, gl.FLOAT, false, SPRITE_VERT_STRIDE, 0);
+  gl.vertexAttribPointer(gAPos, 2, gl.FLOAT, false, PACKED_QUAD_VERT_STRIDE, 0);
   gl.enableVertexAttribArray(gAUv);
-  gl.vertexAttribPointer(gAUv, 2, gl.FLOAT, false, SPRITE_VERT_STRIDE, 8);
+  gl.vertexAttribPointer(
+    gAUv,
+    2,
+    gl.UNSIGNED_SHORT,
+    true,
+    PACKED_QUAD_VERT_STRIDE,
+    PACKED_UV_OFFSET
+  );
   gl.enableVertexAttribArray(gATint);
-  gl.vertexAttribPointer(gATint, 4, gl.FLOAT, false, SPRITE_VERT_STRIDE, 16);
+  gl.vertexAttribPointer(
+    gATint,
+    4,
+    gl.UNSIGNED_BYTE,
+    true,
+    PACKED_QUAD_VERT_STRIDE,
+    PACKED_TINT_OFFSET
+  );
   const cAPos = gl.getAttribLocation(circleQuadProgram, "a_pos");
   const cAUv = gl.getAttribLocation(circleQuadProgram, "a_uv");
   const cATint = gl.getAttribLocation(circleQuadProgram, "a_tint");
@@ -1269,11 +1325,25 @@ function createWebGLPointRenderer(canvas) {
   gl.bindVertexArray(circleQuadVAO);
   gl.bindBuffer(gl.ARRAY_BUFFER, circleQuadBuffer);
   gl.enableVertexAttribArray(cAPos);
-  gl.vertexAttribPointer(cAPos, 2, gl.FLOAT, false, SPRITE_VERT_STRIDE, 0);
+  gl.vertexAttribPointer(cAPos, 2, gl.FLOAT, false, PACKED_QUAD_VERT_STRIDE, 0);
   gl.enableVertexAttribArray(cAUv);
-  gl.vertexAttribPointer(cAUv, 2, gl.FLOAT, false, SPRITE_VERT_STRIDE, 8);
+  gl.vertexAttribPointer(
+    cAUv,
+    2,
+    gl.UNSIGNED_SHORT,
+    true,
+    PACKED_QUAD_VERT_STRIDE,
+    PACKED_UV_OFFSET
+  );
   gl.enableVertexAttribArray(cATint);
-  gl.vertexAttribPointer(cATint, 4, gl.FLOAT, false, SPRITE_VERT_STRIDE, 16);
+  gl.vertexAttribPointer(
+    cATint,
+    4,
+    gl.UNSIGNED_BYTE,
+    true,
+    PACKED_QUAD_VERT_STRIDE,
+    PACKED_TINT_OFFSET
+  );
   gl.bindVertexArray(null);
   const quadIndexBuffer = gl.createBuffer();
   let quadIndexCapacity = 0;
@@ -1283,7 +1353,6 @@ function createWebGLPointRenderer(canvas) {
     while (cap < quads) cap *= 2;
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, quadIndexBuffer);
     gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, buildQuadIndices(cap), gl.STATIC_DRAW);
-    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
     quadIndexCapacity = cap;
   };
   for (const vao of [rectVAO, spriteVAO, glyphVAO, circleQuadVAO]) {
@@ -1298,11 +1367,11 @@ function createWebGLPointRenderer(canvas) {
   let distanceRange = 4;
   let pointData = new Float32Array(FLOATS_PER_POINT * 1024);
   let pointCount = 0;
-  let rectData = new Float32Array(FLOATS_PER_RECT_VERT * VERTS_PER_QUAD * 256);
+  let rectData = createPackedBuffer(PACKED_RECT_VERT_STRIDE * VERTS_PER_QUAD * 256);
   let rectCount = 0;
-  let spriteData = new Float32Array(FLOATS_PER_SPRITE_VERT * VERTS_PER_QUAD * 256);
+  let spriteData = createPackedBuffer(PACKED_QUAD_VERT_STRIDE * VERTS_PER_QUAD * 256);
   let spriteCount = 0;
-  let glyphData = new Float32Array(FLOATS_PER_SPRITE_VERT * VERTS_PER_QUAD * 1024);
+  let glyphData = createPackedBuffer(PACKED_QUAD_VERT_STRIDE * VERTS_PER_QUAD * 1024);
   let glyphCount = 0;
   let frameDrawCalls = 0;
   let lastFrameDrawCalls = 0;
@@ -1310,7 +1379,7 @@ function createWebGLPointRenderer(canvas) {
   let atlasSwitches = 0;
   let circleQuadFallbacks = 0;
   let circlePoints = 0;
-  let circleQuadData = new Float32Array(FLOATS_PER_SPRITE_VERT * VERTS_PER_QUAD * 64);
+  let circleQuadData = createPackedBuffer(PACKED_QUAD_VERT_STRIDE * VERTS_PER_QUAD * 64);
   let circleQuadCount = 0;
   let logicalW = 0;
   let logicalH = 0;
@@ -1320,11 +1389,11 @@ function createWebGLPointRenderer(canvas) {
   const maxPointSize = pointSizeRange ? pointSizeRange[1] : Infinity;
   const drawGlyphs = () => {
     if (glyphCount === 0 || !msdfTexture) return;
-    const floats = glyphCount * VERTS_PER_QUAD * FLOATS_PER_SPRITE_VERT;
+    const bytes = glyphCount * VERTS_PER_QUAD * PACKED_QUAD_VERT_STRIDE;
     gl.useProgram(msdfProgram);
     gl.bindVertexArray(glyphVAO);
     gl.bindBuffer(gl.ARRAY_BUFFER, glyphBuffer);
-    gl.bufferData(gl.ARRAY_BUFFER, glyphData.subarray(0, floats), gl.DYNAMIC_DRAW);
+    gl.bufferData(gl.ARRAY_BUFFER, glyphData.u8.subarray(0, bytes), gl.DYNAMIC_DRAW);
     gl.activeTexture(gl.TEXTURE0);
     gl.bindTexture(gl.TEXTURE_2D, msdfTexture);
     gl.uniform1i(gUTex, 0);
@@ -1391,8 +1460,8 @@ function createWebGLPointRenderer(canvas) {
     },
     addSprite(x, y, width, height, u0, v0, u1, v1, color = "#ffffff", alpha = 1, rotation = 0) {
       if (!texture) return;
-      const stride = FLOATS_PER_SPRITE_VERT * VERTS_PER_QUAD;
-      spriteData = grow(spriteData, (spriteCount + 1) * stride);
+      const stride = PACKED_QUAD_VERT_STRIDE * VERTS_PER_QUAD;
+      spriteData = growPacked(spriteData, (spriteCount + 1) * stride);
       const rgba = parseColorToRGBA(color);
       writeQuad(
         spriteData,
@@ -1436,8 +1505,8 @@ function createWebGLPointRenderer(canvas) {
     },
     addGlyph(x, y, width, height, u0, v0, u1, v1, color = "#ffffff", alpha = 1, rotation = 0) {
       if (!msdfTexture) return;
-      const stride = FLOATS_PER_SPRITE_VERT * VERTS_PER_QUAD;
-      glyphData = grow(glyphData, (glyphCount + 1) * stride);
+      const stride = PACKED_QUAD_VERT_STRIDE * VERTS_PER_QUAD;
+      glyphData = growPacked(glyphData, (glyphCount + 1) * stride);
       const rgba = parseColorToRGBA(color);
       writeQuad(
         glyphData,
@@ -1462,8 +1531,8 @@ function createWebGLPointRenderer(canvas) {
       const needsQuad = logicalW > 0 && (x < radius || y < radius || x > logicalW - radius || y > logicalH - radius) || radius * 2 * dpr > maxPointSize;
       if (needsQuad) {
         circleQuadFallbacks++;
-        const stride = FLOATS_PER_SPRITE_VERT * VERTS_PER_QUAD;
-        circleQuadData = grow(circleQuadData, (circleQuadCount + 1) * stride);
+        const stride = PACKED_QUAD_VERT_STRIDE * VERTS_PER_QUAD;
+        circleQuadData = growPacked(circleQuadData, (circleQuadCount + 1) * stride);
         const rgba = parseColorToRGBA(color);
         const d = radius * 2;
         writeQuad(
@@ -1500,8 +1569,8 @@ function createWebGLPointRenderer(canvas) {
       pointCount++;
     },
     addRect(x, y, width, height, color, alpha = 1, rotation = 0) {
-      const stride = FLOATS_PER_RECT_VERT * VERTS_PER_QUAD;
-      rectData = grow(rectData, (rectCount + 1) * stride);
+      const stride = PACKED_RECT_VERT_STRIDE * VERTS_PER_QUAD;
+      rectData = growPacked(rectData, (rectCount + 1) * stride);
       const rgba = parseColorToRGBA(color);
       writeRectQuad(
         rectData,
@@ -1520,11 +1589,11 @@ function createWebGLPointRenderer(canvas) {
     },
     flush() {
       if (rectCount > 0) {
-        const floats = rectCount * VERTS_PER_QUAD * FLOATS_PER_RECT_VERT;
+        const bytes = rectCount * VERTS_PER_QUAD * PACKED_RECT_VERT_STRIDE;
         gl.useProgram(rectProgram);
         gl.bindVertexArray(rectVAO);
         gl.bindBuffer(gl.ARRAY_BUFFER, rectBuffer);
-        gl.bufferData(gl.ARRAY_BUFFER, rectData.subarray(0, floats), gl.DYNAMIC_DRAW);
+        gl.bufferData(gl.ARRAY_BUFFER, rectData.u8.subarray(0, bytes), gl.DYNAMIC_DRAW);
         gl.uniform2f(rURes, logicalW, logicalH);
         ensureQuadIndices(rectCount);
         gl.drawElements(gl.TRIANGLES, rectCount * INDICES_PER_QUAD, gl.UNSIGNED_INT, 0);
@@ -1545,22 +1614,22 @@ function createWebGLPointRenderer(canvas) {
         frameDrawCalls++;
       }
       if (circleQuadCount > 0) {
-        const floats = circleQuadCount * VERTS_PER_QUAD * FLOATS_PER_SPRITE_VERT;
+        const bytes = circleQuadCount * VERTS_PER_QUAD * PACKED_QUAD_VERT_STRIDE;
         gl.useProgram(circleQuadProgram);
         gl.bindVertexArray(circleQuadVAO);
         gl.bindBuffer(gl.ARRAY_BUFFER, circleQuadBuffer);
-        gl.bufferData(gl.ARRAY_BUFFER, circleQuadData.subarray(0, floats), gl.DYNAMIC_DRAW);
+        gl.bufferData(gl.ARRAY_BUFFER, circleQuadData.u8.subarray(0, bytes), gl.DYNAMIC_DRAW);
         gl.uniform2f(cURes, logicalW, logicalH);
         ensureQuadIndices(circleQuadCount);
         gl.drawElements(gl.TRIANGLES, circleQuadCount * INDICES_PER_QUAD, gl.UNSIGNED_INT, 0);
         frameDrawCalls++;
       }
       if (spriteCount > 0 && texture) {
-        const floats = spriteCount * VERTS_PER_QUAD * FLOATS_PER_SPRITE_VERT;
+        const bytes = spriteCount * VERTS_PER_QUAD * PACKED_QUAD_VERT_STRIDE;
         gl.useProgram(spriteProgram);
         gl.bindVertexArray(spriteVAO);
         gl.bindBuffer(gl.ARRAY_BUFFER, spriteBuffer);
-        gl.bufferData(gl.ARRAY_BUFFER, spriteData.subarray(0, floats), gl.DYNAMIC_DRAW);
+        gl.bufferData(gl.ARRAY_BUFFER, spriteData.u8.subarray(0, bytes), gl.DYNAMIC_DRAW);
         gl.activeTexture(gl.TEXTURE0);
         gl.bindTexture(gl.TEXTURE_2D, texture);
         gl.uniform1i(sUTex, 0);

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export * from './renderer/colorParse';
 export * from './renderer/url';
 export * from './renderer/GlyphRasterAtlas';
 export * from './renderer/TextRasterCache';
+export * from './performance/UserTiming';
 export * from './tree/Entity';
 export * from './tree/Scene';
 export * from './components/TextEntity';