@chartts/gl 0.1.3 → 0.1.4

package/README.md

@@ -0,0 +1,55 @@
+<p align="center">
+  <a href="https://www.npmjs.com/package/@chartts/gl"><img src="https://img.shields.io/npm/v/@chartts/gl?color=06B6D4&label=npm" alt="npm version" /></a>
+  <a href="https://github.com/chartts/chartts/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-06B6D4" alt="MIT License" /></a>
+  <a href="https://chartts.com"><img src="https://img.shields.io/badge/docs-chartts.com-06B6D4" alt="Documentation" /></a>
+</p>
+
+# @chartts/gl
+
+WebGL chart types for Chartts. GPU-accelerated 3D and high-performance 2D charts.
+
+## Install
+
+```bash
+npm install @chartts/gl @chartts/core
+```
+
+## Chart types
+
+| Type | Import |
+|------|--------|
+| 3D Bar | `@chartts/gl/bar3d` |
+| 3D Line | `@chartts/gl/line3d` |
+| 3D Scatter | `@chartts/gl/scatter3d` |
+| 3D Surface | `@chartts/gl/surface3d` |
+| 3D Globe | `@chartts/gl/globe3d` |
+| GL Scatter (2D, 100k+ points) | `@chartts/gl/scatter-gl` |
+| GL Lines (2D, high-perf) | `@chartts/gl/lines-gl` |
+| GL Flow (particle animation) | `@chartts/gl/flow-gl` |
+| GL Graph (force layout) | `@chartts/gl/graph-gl` |
+| 3D Lines | `@chartts/gl/lines3d` |
+| 3D Map | `@chartts/gl/map3d` |
+
+## Usage
+
+```ts
+import { createGLChart } from "@chartts/gl"
+import { bar3dChartType } from "@chartts/gl/bar3d"
+
+const chart = createGLChart(container, bar3dChartType, data, {
+  width: 800,
+  height: 600,
+})
+```
+
+## Part of Chartts
+
+Beautiful charts. Tiny bundle. Every framework.
+
+- [Documentation](https://chartts.com/docs)
+- [GitHub](https://github.com/chartts/chartts)
+- [All packages](https://www.npmjs.com/org/chartts)
+
+## License
+
+MIT

package/dist/bar3d.cjs

@@ -1,20 +1,20 @@
 'use strict';
 
-var chunkQ4JAQOV3_cjs = require('./chunk-Q4JAQOV3.cjs');
+var chunkJCECG2KY_cjs = require('./chunk-JCECG2KY.cjs');
 
 
 
 Object.defineProperty(exports, "Bar3D", {
   enumerable: true,
-  get: function () { return chunkQ4JAQOV3_cjs.Bar3D; }
+  get: function () { return chunkJCECG2KY_cjs.Bar3D; }
 });
 Object.defineProperty(exports, "createBar3DPlugin", {
   enumerable: true,
-  get: function () { return chunkQ4JAQOV3_cjs.createBar3DPlugin; }
+  get: function () { return chunkJCECG2KY_cjs.createBar3DPlugin; }
 });
 Object.defineProperty(exports, "createGLChart", {
   enumerable: true,
-  get: function () { return chunkQ4JAQOV3_cjs.createGLChart; }
+  get: function () { return chunkJCECG2KY_cjs.createGLChart; }
 });
 //# sourceMappingURL=bar3d.cjs.map
 //# sourceMappingURL=bar3d.cjs.map

package/dist/bar3d.js

@@ -1,3 +1,3 @@
-export { Bar3D, createBar3DPlugin, createGLChart } from './chunk-M24XMYGG.js';
+export { Bar3D, createBar3DPlugin, createGLChart } from './chunk-XGQDO4VO.js';
 //# sourceMappingURL=bar3d.js.map
 //# sourceMappingURL=bar3d.js.map

package/dist/{chunk-Q4JAQOV3.cjs → chunk-JCECG2KY.cjs}

@@ -1813,20 +1813,36 @@ function createSurface3DPlugin() {
 }
 
 // src/charts/globe3d/globe3d-type.ts
+var GLOBE_RADIUS = 3;
+var SEGMENTS = 128;
+var RINGS = 64;
 function latLngToXYZ(lat, lng, radius) {
   const phi = (90 - lat) * Math.PI / 180;
   const theta = (lng + 180) * Math.PI / 180;
-  return [-radius * Math.sin(phi) * Math.cos(theta), radius * Math.cos(phi), radius * Math.sin(phi) * Math.sin(theta)];
+  return [
+    -radius * Math.sin(phi) * Math.cos(theta),
+    radius * Math.cos(phi),
+    radius * Math.sin(phi) * Math.sin(theta)
+  ];
+}
+function angularDistance(lat1, lng1, lat2, lng2) {
+  const p1 = lat1 * Math.PI / 180, p2 = lat2 * Math.PI / 180;
+  const dl = (lng2 - lng1) * Math.PI / 180;
+  return Math.acos(
+    Math.min(1, Math.max(
+      -1,
+      Math.sin(p1) * Math.sin(p2) + Math.cos(p1) * Math.cos(p2) * Math.cos(dl)
+    ))
+  );
 }
 function createGlobe3DPlugin() {
   let sphereVBO = null;
   let sphereIBO = null;
   let sphereIndexCount = 0;
-  let pointVBO = null;
-  let pointCount = 0;
   const modelMatrix = mat4();
   const normalMatrix = new Float32Array(9);
-  let globePoints = [];
+  let screenPoints = [];
+  let seriesInfo = [];
   return {
     type: "globe3d",
     prepare(ctx) {
@@ -1840,93 +1856,178 @@ function createGlobe3DPlugin() {
         [...MESH_VERT_UNIFORMS, ...MESH_FRAG_UNIFORMS],
         MESH_VERT_ATTRIBUTES
       );
-      renderer.registerProgram(
-        "point3d",
-        POINT_VERT,
-        POINT_FRAG,
-        [...POINT_VERT_UNIFORMS, ...POINT_FRAG_UNIFORMS],
-        POINT_VERT_ATTRIBUTES
-      );
-      const globeRadius = 3;
-      const segments = 64, rings = 32;
-      const sphereColor = [0.12, 0.22, 0.48];
-      const sv = [], si = [];
-      for (let ring = 0; ring <= rings; ring++) {
-        const phi = ring / rings * Math.PI;
-        for (let seg = 0; seg <= segments; seg++) {
-          const theta = seg / segments * Math.PI * 2;
-          const nx = Math.sin(phi) * Math.cos(theta), ny = Math.cos(phi), nz = Math.sin(phi) * Math.sin(theta);
-          sv.push(nx * globeRadius, ny * globeRadius, nz * globeRadius, nx, ny, nz, ...sphereColor);
-        }
-      }
-      for (let ring = 0; ring < rings; ring++) for (let seg = 0; seg < segments; seg++) {
-        const a = ring * (segments + 1) + seg, b = a + segments + 1;
-        si.push(a, b, a + 1, a + 1, b, b + 1);
-      }
-      if (sphereVBO) sphereVBO.update(new Float32Array(sv));
-      else sphereVBO = createVertexBuffer(gl, new Float32Array(sv), gl.STATIC_DRAW);
-      if (sphereIBO) sphereIBO.update(new Uint16Array(si));
-      else sphereIBO = createIndexBuffer(gl, new Uint16Array(si), gl.STATIC_DRAW);
-      sphereIndexCount = si.length;
-      globePoints = [];
-      const pv = [];
+      const patches = [];
+      let maxVal = 0;
+      for (const s of series) for (const v of s.values) if (Math.abs(v) > maxVal) maxVal = Math.abs(v);
+      if (maxVal === 0) maxVal = 1;
+      seriesInfo = [];
+      screenPoints = [];
       for (let sIdx = 0; sIdx < series.length; sIdx++) {
         const s = series[sIdx];
-        const color = hexToRGB(s.color ?? theme.colors[sIdx % theme.colors.length]);
+        const colorHex = s.color ?? theme.colors[sIdx % theme.colors.length];
+        const color = hexToRGB(colorHex);
+        seriesInfo.push({ name: s.name, color: colorHex });
         for (let di = 0; di < s.values.length; di++) {
           const lat = s.y?.[di] ?? 0, lng = s.x?.[di] ?? 0, value = s.values[di];
-          const [wx, wy, wz] = latLngToXYZ(lat, lng, globeRadius * (1 + value * 5e-3));
-          pv.push(wx, wy, wz, color[0], color[1], color[2], Math.max(4, value * 0.3));
-          globePoints.push({ si: sIdx, di, lat, lng, wx, wy, wz, value, name: s.name });
+          const normValue = Math.abs(value) / maxVal;
+          patches.push({ lat, lng, value, normValue, color, si: sIdx, di, name: s.name, label: data.categories?.[di] ?? "" });
+          const [wx, wy, wz] = latLngToXYZ(lat, lng, GLOBE_RADIUS);
+          screenPoints.push({ si: sIdx, di, lat, lng, wx, wy, wz, value, name: s.name, label: data.categories?.[di] ?? "" });
         }
       }
-      if (pointVBO) pointVBO.update(new Float32Array(pv));
-      else pointVBO = createVertexBuffer(gl, new Float32Array(pv), gl.DYNAMIC_DRAW);
-      pointCount = globePoints.length;
+      const baseColor = [0.03, 0.05, 0.12];
+      const patchRadius = 0.8;
+      const gratLatStep = 30, gratLngStep = 30;
+      const gratWidth = 0.015;
+      const gratColor = [0.08, 0.12, 0.22];
+      console.log(`[Globe3D] Building sphere ${SEGMENTS}x${RINGS}, ${patches.length} data patches`);
+      const verts = [];
+      const indices = [];
+      let patchedVerts = 0;
+      for (let ring = 0; ring <= RINGS; ring++) {
+        const phi = ring / RINGS * Math.PI;
+        const lat = 90 - ring / RINGS * 180;
+        for (let seg = 0; seg <= SEGMENTS; seg++) {
+          const theta = seg / SEGMENTS * Math.PI * 2;
+          const lng = seg / SEGMENTS * 360 - 180;
+          const nx = Math.sin(phi) * Math.cos(theta);
+          const ny = Math.cos(phi);
+          const nz = Math.sin(phi) * Math.sin(theta);
+          let r = baseColor[0], g = baseColor[1], b = baseColor[2];
+          const latMod = (lat % gratLatStep + gratLatStep) % gratLatStep;
+          const latDist = Math.min(latMod, gratLatStep - latMod) * Math.PI / 180;
+          const lngMod = (lng % gratLngStep + gratLngStep) % gratLngStep;
+          const lngDist = Math.min(lngMod, gratLngStep - lngMod) * Math.PI / 180;
+          const gratDist = Math.min(latDist, lngDist);
+          if (gratDist < gratWidth) {
+            const gratT = 1 - gratDist / gratWidth;
+            r = r + (gratColor[0] - r) * gratT;
+            g = g + (gratColor[1] - g) * gratT;
+            b = b + (gratColor[2] - b) * gratT;
+          }
+          let ar = 0, ag = 0, ab = 0;
+          for (const patch of patches) {
+            const dist = angularDistance(lat, lng, patch.lat, patch.lng);
+            if (dist < patchRadius) {
+              const t = 1 - dist / patchRadius;
+              const influence = t * (0.4 + t * 0.6) * patch.normValue;
+              ar += patch.color[0] * influence;
+              ag += patch.color[1] * influence;
+              ab += patch.color[2] * influence;
+            }
+          }
+          if (ar > 0.01 || ag > 0.01 || ab > 0.01) {
+            patchedVerts++;
+            r = Math.min(1, r + ar);
+            g = Math.min(1, g + ag);
+            b = Math.min(1, b + ab);
+          }
+          verts.push(
+            nx * GLOBE_RADIUS,
+            ny * GLOBE_RADIUS,
+            nz * GLOBE_RADIUS,
+            nx,
+            ny,
+            nz,
+            r,
+            g,
+            b
+          );
+        }
+      }
+      console.log(`[Globe3D] ${patchedVerts} / ${(RINGS + 1) * (SEGMENTS + 1)} vertices colored by data`);
+      for (let ring = 0; ring < RINGS; ring++) {
+        for (let seg = 0; seg < SEGMENTS; seg++) {
+          const a = ring * (SEGMENTS + 1) + seg;
+          const b = a + SEGMENTS + 1;
+          indices.push(a, b, a + 1, a + 1, b, b + 1);
+        }
+      }
+      const vertArr = new Float32Array(verts);
+      const idxArr = new Uint16Array(indices);
+      if (sphereVBO) sphereVBO.update(vertArr);
+      else sphereVBO = createVertexBuffer(gl, vertArr, gl.DYNAMIC_DRAW);
+      if (sphereIBO) sphereIBO.update(idxArr);
+      else sphereIBO = createIndexBuffer(gl, idxArr, gl.DYNAMIC_DRAW);
+      sphereIndexCount = indices.length;
       mat4Identity(modelMatrix);
     },
     render(ctx) {
       const { renderer, camera } = ctx;
       const gl = renderer.gl;
       const progress = ctx.animationProgress;
-      const meshProg = renderer.getProgram("mesh");
-      meshProg.use();
-      meshProg.setMat4("u_projView", camera.projViewMatrix);
-      meshProg.setMat4("u_model", modelMatrix);
+      const prog = renderer.getProgram("mesh");
+      prog.use();
+      prog.setMat4("u_projView", camera.projViewMatrix);
+      prog.setMat4("u_model", modelMatrix);
       mat3NormalFromMat4(normalMatrix, modelMatrix);
-      meshProg.setMat3("u_normalMatrix", normalMatrix);
-      setLightUniforms(meshProg, defaultLightConfig(), camera.position);
-      meshProg.setFloat("u_opacity", progress * 0.9);
+      prog.setMat3("u_normalMatrix", normalMatrix);
+      setLightUniforms(prog, defaultLightConfig(), camera.position);
+      prog.setFloat("u_opacity", progress);
       if (sphereVBO && sphereIBO) {
         sphereVBO.bind();
-        const ml = createVertexLayout([
-          { location: meshProg.attributes["a_position"], size: 3 },
-          { location: meshProg.attributes["a_normal"], size: 3 },
-          { location: meshProg.attributes["a_color"], size: 3 }
+        const layout = createVertexLayout([
+          { location: prog.attributes["a_position"], size: 3 },
+          { location: prog.attributes["a_normal"], size: 3 },
+          { location: prog.attributes["a_color"], size: 3 }
         ]);
-        applyVertexLayout(gl, ml);
+        applyVertexLayout(gl, layout);
         sphereIBO.bind();
-        gl.drawElements(gl.TRIANGLES, sphereIndexCount, gl.UNSIGNED_SHORT, 0);
-        disableVertexLayout(gl, ml);
+        const indexType = gl.UNSIGNED_SHORT;
+        gl.drawElements(gl.TRIANGLES, sphereIndexCount, indexType, 0);
+        disableVertexLayout(gl, layout);
       }
-      const pointProg = renderer.getProgram("point3d");
-      if (pointProg && pointVBO && pointCount > 0) {
-        pointProg.use();
-        pointProg.setMat4("u_projView", camera.projViewMatrix);
-        pointProg.setMat4("u_model", modelMatrix);
-        pointProg.setFloat("u_pixelRatio", renderer.pixelRatio);
-        pointProg.setFloat("u_sizeAttenuation", 30);
-        pointProg.setFloat("u_opacity", progress);
-        pointVBO.bind();
-        const pl = createVertexLayout([
-          { location: pointProg.attributes["a_position"], size: 3 },
-          { location: pointProg.attributes["a_color"], size: 3 },
-          { location: pointProg.attributes["a_size"], size: 1 }
-        ]);
-        applyVertexLayout(gl, pl);
-        gl.drawArrays(gl.POINTS, 0, pointCount);
-        disableVertexLayout(gl, pl);
+    },
+    renderOverlay(ctx, ctx2d) {
+      const { camera, width, height, theme, animationProgress } = ctx;
+      if (animationProgress < 0.5) return;
+      ctx2d.save();
+      const seenLabels = /* @__PURE__ */ new Set();
+      ctx2d.font = `${theme.fontSize - 1}px ${theme.fontFamily}`;
+      ctx2d.textBaseline = "middle";
+      for (const sp of screenPoints) {
+        if (!sp.label || seenLabels.has(sp.label)) continue;
+        const screen = projectToScreen(
+          new Float32Array([sp.wx, sp.wy, sp.wz]),
+          camera.projViewMatrix,
+          width,
+          height
+        );
+        if (!screen || screen.z < -1 || screen.z > 1 || screen.z > 0.97) continue;
+        seenLabels.add(sp.label);
+        ctx2d.fillStyle = theme.textColor;
+        ctx2d.globalAlpha = 0.7;
+        ctx2d.beginPath();
+        ctx2d.arc(screen.x, screen.y, 2.5, 0, Math.PI * 2);
+        ctx2d.fill();
+        ctx2d.fillStyle = theme.textColor;
+        ctx2d.globalAlpha = 0.85;
+        ctx2d.textAlign = "left";
+        ctx2d.fillText(sp.label, screen.x + 8, screen.y);
+      }
+      if (seriesInfo.length > 1) {
+        const lx = 12, ly = height - 14 - seriesInfo.length * 18;
+        ctx2d.fillStyle = "rgba(0,0,0,0.45)";
+        ctx2d.globalAlpha = 1;
+        ctx2d.beginPath();
+        ctx2d.roundRect(lx - 6, ly - 8, 120, seriesInfo.length * 18 + 12, 6);
+        ctx2d.fill();
+        ctx2d.textAlign = "left";
+        ctx2d.textBaseline = "top";
+        ctx2d.font = `${theme.fontSize - 1}px ${theme.fontFamily}`;
+        for (let i = 0; i < seriesInfo.length; i++) {
+          const s = seriesInfo[i];
+          const y = ly + i * 18;
+          ctx2d.fillStyle = s.color;
+          ctx2d.globalAlpha = 0.9;
+          ctx2d.beginPath();
+          ctx2d.arc(lx + 4, y + 6, 4, 0, Math.PI * 2);
+          ctx2d.fill();
+          ctx2d.fillStyle = "rgba(255,255,255,0.8)";
+          ctx2d.fillText(s.name, lx + 14, y);
+        }
       }
+      ctx2d.restore();
     },
     needsLoop() {
       return false;
@@ -1934,14 +2035,26 @@ function createGlobe3DPlugin() {
     hitTest(ctx, x, y) {
       const { camera, width, height } = ctx;
       let closest = null;
-      let closestDist = 20;
-      for (const gp of globePoints) {
-        const screen = projectToScreen(new Float32Array([gp.wx, gp.wy, gp.wz]), camera.projViewMatrix, width, height);
+      let closestDist = 25;
+      for (const sp of screenPoints) {
+        const screen = projectToScreen(
+          new Float32Array([sp.wx, sp.wy, sp.wz]),
+          camera.projViewMatrix,
+          width,
+          height
+        );
         if (!screen || screen.z < -1 || screen.z > 1) continue;
         const dist = Math.sqrt((screen.x - x) ** 2 + (screen.y - y) ** 2);
         if (dist < closestDist) {
           closestDist = dist;
-          closest = { seriesIndex: gp.si, dataIndex: gp.di, value: gp.value, x: gp.lng, y: gp.lat, seriesName: gp.name };
+          closest = {
+            seriesIndex: sp.si,
+            dataIndex: sp.di,
+            value: sp.value,
+            x: sp.lng,
+            y: sp.lat,
+            seriesName: sp.label || sp.name
+          };
         }
       }
       return closest;
@@ -1951,9 +2064,7 @@ function createGlobe3DPlugin() {
       sphereVBO = null;
       sphereIBO?.destroy();
       sphereIBO = null;
-      pointVBO?.destroy();
-      pointVBO = null;
-      globePoints = [];
+      screenPoints = [];
     }
   };
 }
@@ -3512,5 +3623,5 @@ exports.toRad = toRad;
 exports.updateCamera = updateCamera;
 exports.updateOrbitControls = updateOrbitControls;
 exports.vec3 = vec3;
-//# sourceMappingURL=chunk-Q4JAQOV3.cjs.map
-//# sourceMappingURL=chunk-Q4JAQOV3.cjs.map
+//# sourceMappingURL=chunk-JCECG2KY.cjs.map
+//# sourceMappingURL=chunk-JCECG2KY.cjs.map