https://github.com/shuding/cobe

5kB WebGL globe lib.
https://github.com/shuding/cobe

globe webgl

Last synced: 2 days ago
JSON representation

5kB WebGL globe lib.

• Host: GitHub
• URL: https://github.com/shuding/cobe
• Owner: shuding
• License: mit
• Created: 2021-11-18T18:26:41.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-06-18T12:37:34.000Z (6 months ago)
• Last Synced: 2024-12-03T15:07:49.521Z (9 days ago)
• Topics: globe, webgl
• Language: MDX
• Homepage: https://cobe.vercel.app
• Size: 441 KB
• Stars: 3,293
• Watchers: 16
• Forks: 180
• Open Issues: 25
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - shuding/cobe - 5kB WebGL globe lib. (MDX)
• jimsghstars - shuding/cobe - 5kB WebGL globe lib. (MDX)

README

        

[![COBE](card.png)](https://cobe.vercel.app)

A lightweight (5kB) WebGL globe lib. The name "COBE" stands for Cosmic Background Explorer.


---

- [**Demo** and configurations](https://cobe.vercel.app)

- 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

```html

```

```js

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](https://dl.acm.org/doi/10.1145/2816795.2818131), 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.