⚡ Enhanced Version

This is an enhanced version of the original COBE library with massively increased marker support:

• Up to 4,000+ markers using texture-based rendering (vs 64 in original)
• 256 markers using uniform-based rendering (legacy mode)
• Automatic mode selection - switches to texture-based for >256 markers
• Same lightweight footprint and API
• Fully compatible with original COBE

Perfect for applications that need to display many markers simultaneously, such as global analytics dashboards, world maps with extensive data points, or interactive geographical visualizations.

🚀 High-Capacity Marker Support

This enhanced version automatically switches between two rendering modes:

Uniform-based (≤256 markers)

• Uses traditional WebGL uniforms
• Compatible with all devices
• Optimal for smaller marker counts

Texture-based (>256 markers)

• Stores marker data in GPU textures
• Supports thousands of markers
• Automatically enabled when you have >256 markers
• Can be forced on with useTextureMarkers: true

// Example with thousands of markers
const markers = [];
for (let i = 0; i < 2000; i++) {
  markers.push({
    location: [Math.random() * 180 - 90, Math.random() * 360 - 180],
    size: 0.02,
    color: [Math.random(), Math.random(), Math.random()],
  });
}

const globe = createGlobe(canvas, {
  // ... other options
  markers: markers, // Automatically uses texture-based rendering
  useTextureMarkers: true, // Optional: force texture mode even for <256 markers
});

• Demo and configurations
• Use with React: https://codesandbox.io/s/eager-sky-r2q0g
• Use with vanilla JS: https://codesandbox.io/s/peaceful-gwen-m579y
• Use with Vue3: https://stackblitz.com/edit/vitejs-vite-l5a8xk?file=src/App.vue
• Use with Svelte: https://codesandbox.io/s/great-visvesvaraya-78yf6?file=/App.svelte

Quick Start

<canvas
  id="cobe"
  style="width: 500px; height: 500px;"
  width="1000"
  height="1000"
></canvas>

import createGlobe from "cobe";

let phi = 0;
let canvas = document.getElementById("cobe");

const globe = createGlobe(canvas, {
  devicePixelRatio: 2,
  width: 1000,
  height: 1000,
  phi: 0,
  theta: 0,
  dark: 0,
  diffuse: 1.2,
  scale: 1,
  mapSamples: 16000,
  mapBrightness: 6,
  baseColor: [0.3, 0.3, 0.3],
  markerColor: [1, 0.5, 1],
  glowColor: [1, 1, 1],
  offset: [0, 0],
  markers: [
    { location: [37.7595, -122.4367], size: 0.03 },
    { location: [40.7128, -74.006], size: 0.1 },
  ],
  onRender: (state) => {
    // Called on every animation frame.
    // `state` will be an empty object, return updated params.
    state.phi = phi;
    phi += 0.01;
  },
});

// `globe` will be a Phenomenon (https://github.com/vaneenige/phenomenon) instance.
// To pause requestAnimationFrame:
// `globe.toggle()`
// To remove the instance:
// `globe.destroy()`
// ...

Acknowledgment

This project is inspired & based on the great work of:

• Spherical Fibonacci Mapping, Benjamin Keinert et al.
• https://www.shadertoy.com/view/lllXz4, Inigo Quilez
• https://github.blog/2020-12-21-how-we-built-the-github-globe
• https://github.com/vaneenige/phenomenon
• https://github.com/evanw/glslx

World map asset from:

• https://de.wikipedia.org/wiki/Datei:World_map_blank_without_borders.svg

License

The MIT License.