@chartts/gl 0.1.3 → 0.1.5

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 chunkOTQKQDB6_cjs = require('./chunk-OTQKQDB6.cjs');
 
 
 
 Object.defineProperty(exports, "Bar3D", {
   enumerable: true,
-  get: function () { return chunkQ4JAQOV3_cjs.Bar3D; }
+  get: function () { return chunkOTQKQDB6_cjs.Bar3D; }
 });
 Object.defineProperty(exports, "createBar3DPlugin", {
   enumerable: true,
-  get: function () { return chunkQ4JAQOV3_cjs.createBar3DPlugin; }
+  get: function () { return chunkOTQKQDB6_cjs.createBar3DPlugin; }
 });
 Object.defineProperty(exports, "createGLChart", {
   enumerable: true,
-  get: function () { return chunkQ4JAQOV3_cjs.createGLChart; }
+  get: function () { return chunkOTQKQDB6_cjs.createGLChart; }
 });
 //# sourceMappingURL=bar3d.cjs.map
 //# sourceMappingURL=bar3d.cjs.map

package/dist/bar3d.d.cts

@@ -1,5 +1,5 @@
-import { e as GLChartTypePlugin } from './factory-Cp9Kr7aa.cjs';
-export { B as Bar3D, b as GLChartData, c as GLChartInstance, d as GLChartOptions, f as GLDataPoint, x as createGLChart } from './factory-Cp9Kr7aa.cjs';
+import { e as GLChartTypePlugin } from './factory-jQSzXhK4.cjs';
+export { B as Bar3D, b as GLChartData, c as GLChartInstance, d as GLChartOptions, f as GLDataPoint, x as createGLChart } from './factory-jQSzXhK4.cjs';
 
 /**
  * Bar3D — cuboid mesh per bar, Phong lit.

package/dist/bar3d.d.ts

@@ -1,5 +1,5 @@
-import { e as GLChartTypePlugin } from './factory-Cp9Kr7aa.js';
-export { B as Bar3D, b as GLChartData, c as GLChartInstance, d as GLChartOptions, f as GLDataPoint, x as createGLChart } from './factory-Cp9Kr7aa.js';
+import { e as GLChartTypePlugin } from './factory-jQSzXhK4.js';
+export { B as Bar3D, b as GLChartData, c as GLChartInstance, d as GLChartOptions, f as GLDataPoint, x as createGLChart } from './factory-jQSzXhK4.js';
 
 /**
  * Bar3D — cuboid mesh per bar, Phong lit.

package/dist/bar3d.js

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

package/dist/{chunk-M24XMYGG.js → chunk-AGG2KSBO.js}

@@ -1811,20 +1811,37 @@ 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();
+  let locationColors = /* @__PURE__ */ new Map();
   const normalMatrix = new Float32Array(9);
-  let globePoints = [];
+  let screenPoints = [];
+  let seriesInfo = [];
   return {
     type: "globe3d",
     prepare(ctx) {
@@ -1838,108 +1855,199 @@ 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 locationMap = /* @__PURE__ */ new Map();
+      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];
+        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 label = data.categories?.[di] ?? "";
+          const key = `${lat.toFixed(1)}_${lng.toFixed(1)}`;
+          let loc = locationMap.get(key);
+          if (!loc) {
+            loc = { lat, lng, totalValue: 0, label, entries: [] };
+            locationMap.set(key, loc);
+          }
+          loc.totalValue += Math.abs(value);
+          loc.entries.push({ si: sIdx, di, value });
+          const [wx, wy, wz] = latLngToXYZ(lat, lng, GLOBE_RADIUS);
+          screenPoints.push({ si: sIdx, di, lat, lng, wx, wy, wz, value, name: s.name, label });
+        }
+      }
+      const patches = [];
+      locationColors = /* @__PURE__ */ new Map();
+      let maxVal = 0;
+      for (const loc of locationMap.values()) if (loc.totalValue > maxVal) maxVal = loc.totalValue;
+      if (maxVal === 0) maxVal = 1;
+      let locIdx = 0;
+      for (const loc of locationMap.values()) {
+        const colorHex = theme.colors[locIdx % theme.colors.length];
+        locationColors.set(loc.label, colorHex);
+        const color = hexToRGB(colorHex);
+        const normValue = loc.totalValue / maxVal;
+        patches.push({ lat: loc.lat, lng: loc.lng, value: loc.totalValue, normValue, color, si: 0, di: locIdx, name: loc.label, label: loc.label });
+        locIdx++;
+      }
+      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];
+      const verts = [];
+      const indices = [];
+      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) {
+            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
+          );
+        }
+      }
+      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, a + 1, b, a + 1, b + 1, b);
         }
       }
-      if (pointVBO) pointVBO.update(new Float32Array(pv));
-      else pointVBO = createVertexBuffer(gl, new Float32Array(pv), gl.DYNAMIC_DRAW);
-      pointCount = globePoints.length;
+      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) {
+        gl.disable(gl.CULL_FACE);
         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 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);
+        const indexType = gl.UNSIGNED_SHORT;
+        gl.drawElements(gl.TRIANGLES, sphereIndexCount, indexType, 0);
+        disableVertexLayout(gl, layout);
+        gl.enable(gl.CULL_FACE);
       }
     },
+    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);
+        const locColor = locationColors.get(sp.label) ?? theme.textColor;
+        ctx2d.fillStyle = locColor;
+        ctx2d.globalAlpha = 0.9;
+        ctx2d.beginPath();
+        ctx2d.arc(screen.x, screen.y, 3, 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);
+      }
+      ctx2d.restore();
+    },
     needsLoop() {
       return false;
     },
     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;
@@ -1949,9 +2057,7 @@ function createGlobe3DPlugin() {
       sphereVBO = null;
       sphereIBO?.destroy();
       sphereIBO = null;
-      pointVBO?.destroy();
-      pointVBO = null;
-      globePoints = [];
+      screenPoints = [];
     }
   };
 }
@@ -3382,6 +3488,230 @@ function createGraphGLPlugin() {
   };
 }
 
+// src/charts/torus3d/torus3d-type.ts
+var RADIAL_SEGMENTS = 64;
+var HEIGHT_STEPS = 200;
+var TOTAL_HEIGHT = 6;
+var MIN_RADIUS = 0.6;
+var MAX_RADIUS = 2;
+function createTorus3DPlugin() {
+  let vbo = null;
+  let ibo = null;
+  let indexCount = 0;
+  let use32bit = false;
+  const modelMatrix = mat4();
+  const normalMatrix = new Float32Array(9);
+  let labelPoints = [];
+  return {
+    type: "torus3d",
+    prepare(ctx) {
+      const { renderer, data, options, theme } = ctx;
+      const gl = renderer.gl;
+      const series = data.series;
+      renderer.registerProgram(
+        "mesh",
+        MESH_VERT,
+        MESH_FRAG,
+        [...MESH_VERT_UNIFORMS, ...MESH_FRAG_UNIFORMS],
+        MESH_VERT_ATTRIBUTES
+      );
+      const s = series[0];
+      if (!s || s.values.length === 0) return;
+      const opts = options;
+      const intensity = opts.intensity ?? 1;
+      const numRings = s.values.length;
+      let maxVal = 0;
+      for (const v of s.values) if (Math.abs(v) > maxVal) maxVal = Math.abs(v);
+      if (maxVal === 0) maxVal = 1;
+      const ringRadii = [];
+      for (let i = 0; i < numRings; i++) {
+        const norm = Math.abs(s.values[i]) / maxVal;
+        ringRadii.push((MIN_RADIUS + norm * (MAX_RADIUS - MIN_RADIUS)) * intensity);
+      }
+      const ringColors = [];
+      const ringHexColors = [];
+      for (let i = 0; i < numRings; i++) {
+        const hex = theme.colors[i % theme.colors.length];
+        ringHexColors.push(hex);
+        ringColors.push(hexToRGB(hex));
+      }
+      function catmullRom(p0, p1, p2, p3, t) {
+        return 0.5 * (2 * p1 + (-p0 + p2) * t + (2 * p0 - 5 * p1 + 4 * p2 - p3) * t * t + (-p0 + 3 * p1 - 3 * p2 + p3) * t * t * t);
+      }
+      function radiusAt(t) {
+        const f = t * (numRings - 1);
+        const i = Math.max(0, Math.min(Math.floor(f), numRings - 2));
+        const frac = f - i;
+        const p0 = ringRadii[Math.max(0, i - 1)];
+        const p1 = ringRadii[i];
+        const p2 = ringRadii[Math.min(numRings - 1, i + 1)];
+        const p3 = ringRadii[Math.min(numRings - 1, i + 2)];
+        return Math.max(MIN_RADIUS * 0.5, catmullRom(p0, p1, p2, p3, frac));
+      }
+      function colorAt(t) {
+        const f = t * (numRings - 1);
+        const i = Math.max(0, Math.min(Math.floor(f), numRings - 2));
+        const frac = f - i;
+        const c0 = ringColors[Math.max(0, i - 1)];
+        const c1 = ringColors[i];
+        const c2 = ringColors[Math.min(numRings - 1, i + 1)];
+        const c3 = ringColors[Math.min(numRings - 1, i + 2)];
+        return [
+          Math.max(0, Math.min(1, catmullRom(c0[0], c1[0], c2[0], c3[0], frac))),
+          Math.max(0, Math.min(1, catmullRom(c0[1], c1[1], c2[1], c3[1], frac))),
+          Math.max(0, Math.min(1, catmullRom(c0[2], c1[2], c2[2], c3[2], frac)))
+        ];
+      }
+      const verts = [];
+      const indices = [];
+      labelPoints = [];
+      for (let h = 0; h <= HEIGHT_STEPS; h++) {
+        const t = h / HEIGHT_STEPS;
+        const y = (t - 0.5) * TOTAL_HEIGHT;
+        const radius = radiusAt(t);
+        const color = colorAt(t);
+        const eps = 2e-3;
+        const rPrev = radiusAt(Math.max(0, t - eps));
+        const rNext = radiusAt(Math.min(1, t + eps));
+        const drdy = (rNext - rPrev) / (2 * eps * TOTAL_HEIGHT);
+        for (let seg = 0; seg <= RADIAL_SEGMENTS; seg++) {
+          const theta = seg / RADIAL_SEGMENTS * Math.PI * 2;
+          const cosT = Math.cos(theta);
+          const sinT = Math.sin(theta);
+          const nx = cosT;
+          const ny = -drdy;
+          const nz = sinT;
+          const nlen = Math.sqrt(nx * nx + ny * ny + nz * nz) || 1;
+          verts.push(
+            radius * cosT,
+            y,
+            radius * sinT,
+            nx / nlen,
+            ny / nlen,
+            nz / nlen,
+            color[0],
+            color[1],
+            color[2]
+          );
+        }
+      }
+      for (let i = 0; i < numRings; i++) {
+        const t = (i + 0.5) / numRings;
+        const y = (t - 0.5) * TOTAL_HEIGHT;
+        const r = ringRadii[i];
+        labelPoints.push({
+          si: 0,
+          di: i,
+          wx: r + 0.4,
+          wy: y,
+          wz: 0,
+          value: s.values[i],
+          label: data.categories?.[i] ?? `${i + 1}`,
+          color: ringHexColors[i]
+        });
+      }
+      for (let h = 0; h < HEIGHT_STEPS; h++) {
+        for (let seg = 0; seg < RADIAL_SEGMENTS; seg++) {
+          const a = h * (RADIAL_SEGMENTS + 1) + seg;
+          const b = a + RADIAL_SEGMENTS + 1;
+          indices.push(a, a + 1, b, a + 1, b + 1, b);
+        }
+      }
+      const capStart = verts.length / 9;
+      const bottomColor = colorAt(0);
+      verts.push(0, -0.5 * TOTAL_HEIGHT, 0, 0, -1, 0, bottomColor[0], bottomColor[1], bottomColor[2]);
+      const topColor = colorAt(1);
+      verts.push(0, 0.5 * TOTAL_HEIGHT, 0, 0, 1, 0, topColor[0], topColor[1], topColor[2]);
+      for (let seg = 0; seg < RADIAL_SEGMENTS; seg++) {
+        indices.push(capStart, seg + 1, seg);
+        const topRow = HEIGHT_STEPS * (RADIAL_SEGMENTS + 1);
+        indices.push(capStart + 1, topRow + seg, topRow + seg + 1);
+      }
+      const vertArr = new Float32Array(verts);
+      use32bit = verts.length / 9 > 65535;
+      const idxArr = use32bit ? new Uint32Array(indices) : new Uint16Array(indices);
+      if (vbo) vbo.update(vertArr);
+      else vbo = createVertexBuffer(gl, vertArr, gl.DYNAMIC_DRAW);
+      if (ibo) ibo.update(idxArr);
+      else ibo = createIndexBuffer(gl, idxArr, gl.DYNAMIC_DRAW);
+      indexCount = indices.length;
+      mat4Identity(modelMatrix);
+    },
+    render(ctx) {
+      const { renderer, camera } = ctx;
+      const gl = renderer.gl;
+      const prog = renderer.getProgram("mesh");
+      prog.use();
+      prog.setMat4("u_projView", camera.projViewMatrix);
+      prog.setMat4("u_model", modelMatrix);
+      mat3NormalFromMat4(normalMatrix, modelMatrix);
+      prog.setMat3("u_normalMatrix", normalMatrix);
+      setLightUniforms(prog, defaultLightConfig(), camera.position);
+      prog.setFloat("u_opacity", ctx.animationProgress);
+      if (vbo && ibo) {
+        gl.disable(gl.CULL_FACE);
+        vbo.bind();
+        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, layout);
+        ibo.bind();
+        gl.drawElements(gl.TRIANGLES, indexCount, use32bit ? gl.UNSIGNED_INT : gl.UNSIGNED_SHORT, 0);
+        disableVertexLayout(gl, layout);
+        gl.enable(gl.CULL_FACE);
+      }
+    },
+    renderOverlay(ctx, ctx2d) {
+      const { camera, width, height, theme, animationProgress } = ctx;
+      if (animationProgress < 0.3) return;
+      ctx2d.save();
+      ctx2d.font = `bold ${theme.fontSize}px ${theme.fontFamily}`;
+      ctx2d.textBaseline = "middle";
+      for (const lp of labelPoints) {
+        const screen = projectToScreen(new Float32Array([lp.wx, lp.wy, lp.wz]), camera.projViewMatrix, width, height);
+        if (!screen || screen.z < -1 || screen.z > 1) continue;
+        ctx2d.fillStyle = lp.color;
+        ctx2d.globalAlpha = 0.9;
+        ctx2d.beginPath();
+        ctx2d.arc(screen.x, screen.y, 4, 0, Math.PI * 2);
+        ctx2d.fill();
+        ctx2d.fillStyle = theme.textColor;
+        ctx2d.globalAlpha = 0.85;
+        ctx2d.textAlign = "left";
+        ctx2d.fillText(`${lp.label}: ${lp.value}`, screen.x + 10, screen.y);
+      }
+      ctx2d.restore();
+    },
+    needsLoop() {
+      return false;
+    },
+    hitTest(ctx, x, y) {
+      const { camera, width, height } = ctx;
+      let closest = null;
+      let closestDist = 30;
+      for (const lp of labelPoints) {
+        const screen = projectToScreen(new Float32Array([lp.wx, lp.wy, lp.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: lp.si, dataIndex: lp.di, value: lp.value, x: screen.x, y: screen.y, seriesName: lp.label };
+        }
+      }
+      return closest;
+    },
+    dispose() {
+      vbo?.destroy();
+      vbo = null;
+      ibo?.destroy();
+      ibo = null;
+      labelPoints = [];
+    }
+  };
+}
+
 // src/api/factory.ts
 function Scatter3D(container, opts) {
   const { data, ...options } = opts;
@@ -3458,7 +3788,12 @@ function GraphGL(container, opts) {
   const { data, ...options } = opts;
   return createGLChart(container, createGraphGLPlugin(), data, options);
 }
+function Torus3D(container, opts) {
+  const { data, ...options } = opts;
+  if (!options.camera) options.camera = { position: [4, 2, 6], target: [0, 0, 0] };
+  return createGLChart(container, createTorus3DPlugin(), data, options);
+}
 
-export { Bar3D, DEFAULT_GL_THEME, FlowGL, Globe3D, GraphGL, LIGHT_GL_THEME, Line3D, Lines3D, LinesGL, Map3D, Scatter3D, ScatterGL, Surface3D, applyVertexLayout, compileShader, createBar3DPlugin, createCamera, createFlowGLPlugin, createGLChart, createGLRenderer, createGlobe3DPlugin, createGraphGLPlugin, createGrid3D, createIndexBuffer, createLine3DPlugin, createLines3DPlugin, createLinesGLPlugin, createMap3DPlugin, createOrbitControls, createPickingSystem, createScatter3DPlugin, createScatterGLPlugin, createShaderProgram, createSurface3DPlugin, createVertexBuffer, createVertexLayout, defaultLightConfig, hexToRGB, mat4, mat4Identity, mat4Invert, mat4LookAt, mat4Multiply, mat4Perspective, projectToScreen, resolveTheme, setLightUniforms, toRad, updateCamera, updateOrbitControls, vec3 };
-//# sourceMappingURL=chunk-M24XMYGG.js.map
-//# sourceMappingURL=chunk-M24XMYGG.js.map
+export { Bar3D, DEFAULT_GL_THEME, FlowGL, Globe3D, GraphGL, LIGHT_GL_THEME, Line3D, Lines3D, LinesGL, Map3D, Scatter3D, ScatterGL, Surface3D, Torus3D, applyVertexLayout, compileShader, createBar3DPlugin, createCamera, createFlowGLPlugin, createGLChart, createGLRenderer, createGlobe3DPlugin, createGraphGLPlugin, createGrid3D, createIndexBuffer, createLine3DPlugin, createLines3DPlugin, createLinesGLPlugin, createMap3DPlugin, createOrbitControls, createPickingSystem, createScatter3DPlugin, createScatterGLPlugin, createShaderProgram, createSurface3DPlugin, createTorus3DPlugin, createVertexBuffer, createVertexLayout, defaultLightConfig, hexToRGB, mat4, mat4Identity, mat4Invert, mat4LookAt, mat4Multiply, mat4Perspective, projectToScreen, resolveTheme, setLightUniforms, toRad, updateCamera, updateOrbitControls, vec3 };
+//# sourceMappingURL=chunk-AGG2KSBO.js.map
+//# sourceMappingURL=chunk-AGG2KSBO.js.map