# shuding/cobe

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/shuding-cobe).**

5,407 stars · 315 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/shuding/cobe
- Homepage: https://cobe.vercel.app
- awesome-repositories: https://awesome-repositories.com/repository/shuding-cobe.md

## Topics

`globe` `webgl`

## Description

Cobe is a WebGL globe library designed for interactive 3D geographic data visualization. It functions as a canvas-based map component that renders a world map, allowing for the plotting of latitude and longitude coordinates via markers and connecting arcs.

The library distinguishes itself by linking standard HTML elements to 3D coordinates using CSS anchor positioning. This integration enables the attachment of DOM elements, such as labels and tooltips, directly to markers and arcs on the sphere.

The system covers geographic data plotting and network connection mapping, utilizing automated rotation and user interactions to display spatial relationships. It handles the projection of geographic coordinates into 3D space and the interpolation of curved paths between global locations.

## Tags

### Graphics & Multimedia

- [Interactive 3D Globes](https://awesome-repositories.com/f/graphics-multimedia/interactive-3d-globes.md) — Creates an interactive 3D world map on a web canvas that supports real-time rotation and user interaction. ([source](https://cdn.jsdelivr.net/gh/shuding/cobe@main/README.md))
- [Fragment Shader Rendering](https://awesome-repositories.com/f/graphics-multimedia/fragment-shader-rendering.md) — Generates the spherical globe visually by calculating pixel colors directly within GLSL fragment shaders.
- [Geospatial Connection Mapping](https://awesome-repositories.com/f/graphics-multimedia/geospatial-connection-mapping.md) — Visualizes links between different global locations using arcs to represent relationships between cities.
- [Geospatial Plotting](https://awesome-repositories.com/f/graphics-multimedia/geospatial-plotting.md) — Maps specific latitude and longitude coordinates to a WebGL globe using markers and arcs.
- [Geographic Arc Drawing](https://awesome-repositories.com/f/graphics-multimedia/graphics-and-media/shape-drawing/arc-and-sector-drawing/geographic-arc-drawing.md) — Renders curved arcs connecting two geographic coordinates to visualize global movement or relationships. ([source](https://cdn.jsdelivr.net/gh/shuding/cobe@main/README.md))
- [Interactive Map Visualizations](https://awesome-repositories.com/f/graphics-multimedia/interactive-map-visualizations.md) — Provides a canvas-based 3D map component supporting real-time rotation and user interaction.
- [Geographic Plotting](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/geospatial-visualizations/custom-map-registrations/map-visual-styling/marker-visuals/geographic-plotting.md) — Places customized dots and connecting lines at specific latitude and longitude coordinates to visualize geographic data. ([source](https://cobe.vercel.app))
- [Geographic Visualization Tools](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/visualization-frameworks/coordinate-systems/geographic-converters/geographic-visualization-tools.md) — Provides a tool for plotting latitude and longitude coordinates on a 3D globe to visualize global connections.
- [WebGL Rendering](https://awesome-repositories.com/f/graphics-multimedia/webgl-rendering.md) — Uses WebGL for high-performance rendering of 3D world maps, markers, and arcs.
- [Automated Rotations](https://awesome-repositories.com/f/graphics-multimedia/interactive-3d-globes/automated-rotations.md) — Provides the ability to automate globe orientation updates within an animation loop for continuous spinning. ([source](https://cobe.vercel.app))
- [Render Loop Execution](https://awesome-repositories.com/f/graphics-multimedia/render-loop-execution.md) — Employs a programmatic render loop to continuously update globe rotation and redraw the WebGL canvas.
- [Vertex and Index Buffer Rendering](https://awesome-repositories.com/f/graphics-multimedia/textured-mesh-rendering/vertex-and-index-buffer-rendering.md) — Uses custom vertex and index buffers to render geographic markers and arcs efficiently on the GPU.

### Scientific & Mathematical Computing

- [Coordinate Projections](https://awesome-repositories.com/f/scientific-mathematical-computing/coordinate-projections.md) — Provides mathematical projections to map latitude and longitude coordinates into 3D Cartesian space.
- [Spherical Path Interpolations](https://awesome-repositories.com/f/scientific-mathematical-computing/linear-interpolators/path-coordinate-interpolators/spherical-path-interpolations.md) — Calculates curved arcs between global locations using spherical linear interpolation for visual connectivity.
- [Web Mapping Integrators](https://awesome-repositories.com/f/scientific-mathematical-computing/data-modeling-processing/geospatial-and-location-services/location-services/map-integration/web-mapping-integrators.md) — Integrates high-performance 3D map components into web applications with custom HTML overlays.

### User Interface & Experience

- [Coordinate-Linked UI](https://awesome-repositories.com/f/user-interface-experience/coordinate-linked-ui.md) — Connects standard HTML elements to 3D coordinates via CSS anchor positioning for labels and tooltips.
- [Anchor Attachments](https://awesome-repositories.com/f/user-interface-experience/interactive-ui-elements/interactive-tooltips/anchor-attachments.md) — Links HTML labels and tooltips to 3D markers using CSS anchor positioning. ([source](https://cobe.vercel.app/))

### Web Development

- [Element Anchoring](https://awesome-repositories.com/f/web-development/dom-element-selectors/element-anchoring.md) — Binds HTML elements to 3D coordinates by exposing CSS anchor names and visibility variables. ([source](https://cdn.jsdelivr.net/gh/shuding/cobe@main/README.md))
- [3D Coordinate Anchoring](https://awesome-repositories.com/f/web-development/dom-element-selectors/element-anchoring/3d-coordinate-anchoring.md) — Implements real-time synchronization of HTML element positions with 3D globe coordinates via CSS custom properties.