Use this skill when building lightweight interactive WebGL globe visualizations with cobe.js — marker placement, auto-rotation, responsive sizing, and framework integration.
cobe is a tiny WebGL globe renderer. It draws a dotted globe on a <canvas> element with smooth auto-rotation, configurable markers, and mouse/touch drag interaction — all in roughly 5 KB gzipped.
npm install cobe
Or via CDN:
<script src="https://unpkg.com/cobe"></script>
import createGlobe from "cobe";
const globe = createGlobe(canvasElement, {
devicePixelRatio: 2,
width: 600, // logical width (canvas is sized to width × devicePixelRatio)
height: 600,
phi: 0, // initial horizontal rotation (radians)
theta: 0.3, // initial vertical tilt (radians)
dark: 1, // 0 = light mode, 1 = dark mode
diffuse: 1.2, // surface shading intensity
mapSamples: 16000, // number of dots on the globe surface
mapBrightness: 6, // brightness of land dots
baseColor: [0.3, 0.3, 0.3], // RGB (0–1) for ocean/base
markerColor: [0.1, 0.8, 1], // RGB (0–1) for markers
glowColor: [0.05, 0.05, 0.2], // RGB (0–1) for atmospheric glow
markers: [
{ location: [37.7749, -122.4194], size: 0.06 }, // San Francisco
{ location: [51.5074, -0.1278], size: 0.06 }, // London
{ location: [35.6762, 139.6503], size: 0.04 }, // Tokyo
],
onRender: (state) => {
// Called every frame — use to animate rotation
state.phi += 0.005;
},
});
| Option | Type | Default | Description |
|---|---|---|---|
devicePixelRatio | number | 1 | Canvas resolution multiplier. Use window.devicePixelRatio for crisp rendering. |
width | number | 600 | Logical width of the canvas. |
height | number | 600 | Logical height of the canvas. |
phi | number | 0 | Initial horizontal rotation in radians. |
theta | number | 0 | Initial vertical tilt in radians. |
dark | number (0–1) | 1 | Dark mode intensity (0 = light, 1 = dark). |
diffuse | number | 1.2 | Controls the diffuse lighting on the globe surface. |
mapSamples | number | 16000 | Number of dots drawn on land masses. Higher = more detailed but slower. |
mapBrightness | number | 6 | Brightness of country/land dots. |
baseColor | [r, g, b] | [0.3, 0.3, 0.3] | Ocean / base color (values 0–1). |
markerColor | [r, g, b] | [1, 0.5, 1] | Marker dot color (values 0–1). |
glowColor | [r, g, b] | [1, 1, 1] | Atmospheric glow around the globe edge. |
markers | array | [] | Array of { location: [lat, lng], size: number } objects. |
onRender | function | — | Callback invoked every frame with a mutable state object. |
offset | [x, y] | [0, 0] | Pixel offset for positioning the globe within the canvas. |
scale | number | 1 | Scale factor of the globe. |
Each marker is defined by a geographic coordinate and a size: