A lightweight (5kB) WebGL globe lib. The name "COBE" stands for Cosmic Background Explorer.
- 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:
License
The MIT License.