shuding / cobe Goto Github PK

View Code? Open in Web Editor NEW

3.0K 14.0 163.0 436 KB

5kB WebGL globe lib.

Home Page: https://cobe.vercel.app

License: MIT License

JavaScript 21.82% GLSL 14.78% CSS 2.24% MDX 61.16%

webgl globe

cobe's Introduction

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:

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

License

The MIT License.

cobe's People

Contributors

$fractaledmind avatar$

Stargazers

Watchers

Forkers

hypefare alexanderbluhm madhanhere blokslabs bezerras-org-travels c-eo suryatmodulus alivelee th3hunt stefcab 4fe captbrogers farteryhr cozmoc khanhhh schlunsen 7linternational yolkmonday triandamai adithyaakrishna bakirdiyar thierryc abenezerbelachew kalechao87 wheatjs vnl dnzengou sky-neverland rodzadra bravo-lin twixes gattadesmond v-dale ithanlevin noisecrimeforks mariuszurban ninjanero mulualem-tekle zih0 dudi1896 juanpprieto ebo gr-qft johnphamous anaclumos ignaciorodrigues1 meerns doytsujin npmhieu steven-tey anthen oslego zehfernandes kamicodaxe flozia traviscooper aomini nova4u theolivenbaum junhoyeo well-prado jz222 giansalex dannychi cosmosecho chanyangpraise yejigd ya117 vikramiiitm icodein iuzn thewwwthing nocategory meszarosdezso zignis wobsoriano mattdanielbrown rdwz yosstraore thewwwthing-management nandorojo jaybhum jesse-21 lucswart noah-haf studioblvck jamesljohnson3 kiran-brahma xr-china thuangiovn kodiyak lckroom curtfehr berayb coder-devesh-agarwal neojams alexnesov afonsojramos jyezy amagiddmxh

cobe's Issues

Delta time

Without exposed delta time animation becomes framerate dependent, which in turn affects animation speed.

It should ideally be something like this:

onRender: (state, delta) => {
  state.phi += 0.5 * delta;
}

Of course library consumer can implement it themselves, but it would be very convenient.

Link to source on `draggable-and-rotate.mdx` links to `draggable.mdx` instead of `draggable-and-rotate.mdx`

https://cobe.vercel.app/docs/showcases/draggable-and-rotate

Increased recalculations per second (+CPU usage etc.) when used with other animations

When using COBE alone on my pages, everything works well.

However when I use COBE along with a marquee animation, performance really suffers. Recalcs/second is 60 continuously and CPU usage is pretty high.

The problem only happens when using both together, when I use either alone, there is no problems with perf. Is this behaviour expected?

The same issue can be seen on https://vercel.com/ homepage when scrolling down to the COBE implementation, recalcs are at 60 per second and CPU usage is high.

However when I remove the marquee animation from the DOM on https://vercel.com/, we go back to 0 recalcs per second.

The desired performance can also be found on https://dub.sh/ implementation without making any changes.

I know it is possible to conditionally use the globe with Intersection Observer but it seems weird that the issues only happen when there are other animations on the page. Any help would be greatly appreciated!

Difficulties rendering lots of points

Hey there. I'm trying to render the following points (242 total) in COBE but having issues as they're not all rendering (seem to be only rendering in NA). Points are valid and look like this on Google Maps:

Note: size is a variable set to 0.03.

{ location: [31.7142921, -83.65242950000001], size },
{ location: [33.767315499999995, -84.42031399999999], size },
{ location: [42.31244435, -70.99786615], size },
{ location: [42.896227499999995, -78.858739], size },
{ location: [51.02751365, -114.08788025000001], size },
{ location: [35.2031535, -80.839829], size },
{ location: [41.8337853, -87.73209109999999], size },
{ location: [39.9830009, -82.9907458], size },
{ location: [32.818576300000004, -96.73205684999999], size },
{ location: [39.76426205, -104.8547921], size },
{ location: [42.352717600000005, -83.09919905000001], size },
{ location: [21.304547, -157.85567600000002], size },
{ location: [29.82371055, -95.4608972], size },
{ location: [39.77984395, -86.1330804], size },
{ location: [30.344972499999997, -81.683107], size },
{ location: [39.091919000000004, -94.57571949999999], size },
{ location: [36.2551973, -115.24317525000001], size },
{ location: [33.9984235, -118.4117363], size },
{ location: [26.2843986, -98.25672285], size },
{ location: [35.1290159, -89.9727275], size },
{ location: [25.782417199999998, -80.22945849999999], size },
{ location: [44.9707, -93.26149305], size },
{ location: [32.343799000000004, -86.2460375], size },
{ location: [45.557432649999996, -73.72422595], size },
{ location: [36.186640499999996, -86.785177], size },
{ location: [40.73069445, -74.182756], size },
{ location: [36.8952611, -76.26079849999999], size },
{ location: [41.2918234, -96.0696705], size },
{ location: [45.3969506, -75.68515930000001], size },
{ location: [40.00248215, -75.11806455], size },
{ location: [33.60437665, -112.12477965], size },
{ location: [40.43136105, -79.98062250000001], size },
{ location: [45.5427086, -122.65438705], size },
{ location: [37.5247702, -77.4932379], size },
{ location: [38.561539999999994, -121.46143000000001], size },
{ location: [40.7766584, -111.92093795], size },
{ location: [32.82451135, -117.10776394999999], size },
{ location: [37.296860249999995, -121.81741249999999], size },
{ location: [52.15046955, -106.66433225], size },
{ location: [47.607568799999996, -122.34206449999999], size },
{ location: [38.65333055, -90.2424233], size },
{ location: [30.46696975, -84.25399295], size },
{ location: [27.99631, -82.4201816], size },
{ location: [43.6732018, -79.3856657], size },
{ location: [49.257551, -123.1241015], size },
{ location: [49.895536699999994, -97.13845839999999], size },
{ location: [-22.723887, -47.29064905], size },
{ location: [-18.474900599999998, -69.9339087], size },
{ location: [-25.300007649999998, -57.59927675], size },
{ location: [-19.91800415, -43.96025575], size },
{ location: [-1.2773789500000001, -48.46033865], size },
{ location: [-26.87236705, -49.1051855], size },
{ location: [4.65217245, -74.1168857], size },
{ location: [-14.299662399999999, -51.30601355], size },
{ location: [-34.61609525, -58.43329585], size },
{ location: [-22.8951312, -47.0307984], size },
{ location: [-26.7641707, -51.103936000000004], size },
{ location: [-31.41632615, -64.18367305], size },
{ location: [-25.495855499999998, -49.2867291], size },
{ location: [-27.613, -48.485796449999995], size },
{ location: [-3.7933244, -38.519616850000006], size },
{ location: [-16.643023149999998, -49.26231855], size },
{ location: [14.62509855, -90.48624964999999], size },
{ location: [-2.1900563, -79.8868741], size },
{ location: [-26.9117879, -48.6669852], size },
{ location: [-26.263183750000003, -48.96204965], size },
{ location: [-7.1793288, -39.279641999999996], size },
{ location: [-12.055057949999998, -77.04511645], size },
{ location: [-3.1316333, -59.9825041], size },
{ location: [6.26951865, -75.5963912], size },
{ location: [19.32073795, -99.1526135], size },
{ location: [-38.5764851, -69.98143555], size },
{ location: [8.9714493, -79.53418020000001], size },
{ location: [5.8247628, -55.170394099999996], size },
{ location: [18.48531585, -72.36435255], size },
{ location: [-30.10096215, -51.1611463], size },
{ location: [20.8425118, -99.8198078], size },
{ location: [-0.2201641, -78.5123274], size },
{ location: [-21.21430685, -47.81704315], size },
{ location: [-22.914396449999998, -43.44766655], size },
{ location: [-12.87546575, -38.50142434999999], size },
{ location: [9.932542699999999, -84.0795782], size },
{ location: [-23.4685232, -47.4368306], size },
{ location: [12.0535331, -61.751805], size },
{ location: [-20.783552299999997, -49.3595], size },
{ location: [-23.682827699999997, -46.5956902], size },
{ location: [14.0745135, -87.2059352], size },
{ location: [-19.0045169, -48.362219550000006], size },
{ location: [-29.74957045, -75.74901785], size },
{ location: [12.110251649999999, -68.9398256], size },
{ location: [5.5922795, -0.16949415], size },
{ location: [36.7753606, 3.0601882], size },
{ location: [-18.9100122, 47.525580899999994], size },
{ location: [-33.928991999999994, 18.417396], size },
{ location: [33.56734135, -7.601930749999999], size },
{ location: [14.721548049999999, -17.47281405], size },
{ location: [-6.8160837, 39.2803583], size },
{ location: [11.8536314, 42.71460925], size },
{ location: [-29.861825, 31.009909], size },
{ location: [-17.831773, 31.045686], size },
{ location: [-26.205, 28.049722], size },
{ location: [-1.9713696, 30.032295050000002], size },
{ location: [6.53192585, 3.5285197999999998], size },
{ location: [-8.84002685, 13.242043500000001], size },
{ location: [-25.95086555, 32.7168218], size },
{ location: [-4.05052, 39.667169], size },
{ location: [6.328034, -10.797788], size },
{ location: [-1.3039015, 36.87741245], size },
{ location: [-20.1624522, 57.5028044], size },
{ location: [-21.130735950000002, 55.5265596], size },
{ location: [33.995133100000004, 9.701046999999999], size },
{ location: [33.995133100000004, 9.701046999999999], size },
{ location: [52.354619, 4.90395925], size },
{ location: [37.983941200000004, 23.7283052], size },
{ location: [41.3924744, 2.1404266], size },
{ location: [44.815366749999995, 20.42229365], size },
{ location: [52.50687675, 13.42475295], size },
{ location: [50.8465573, 4.351697], size },
{ location: [44.4378215, 26.096125649999998], size },
{ location: [47.48141835, 19.13001575], size },
{ location: [46.99999765, 28.8585803], size },
{ location: [55.686724299999995, 12.5700724], size },
{ location: [51.897076999999996, -8.4654674], size },
{ location: [53.3546379, -6.2509543999999995], size },
{ location: [51.238430949999994, 6.81434975], size },
{ location: [55.953345600000006, -3.1883749000000003], size },
{ location: [56.78821815, 60.475181449999994], size },
{ location: [50.12124765, 8.6365827], size },
{ location: [46.2048287, 6.1430469], size },
{ location: [57.7072326, 11.9670171], size },
{ location: [53.7113809, 9.2148899], size },
{ location: [60.110167849999996, 25.0186571], size },
{ location: [41.0091982, 28.9662187], size },
{ location: [54.5852951, 138.80176534999998], size },
{ location: [66.62321905, 94.86323974999999], size },
{ location: [50.402028200000004, 30.5312523], size },
{ location: [38.707750700000005, -9.136591899999999], size },
{ location: [51.4893171, -0.08817979999999997], size },
{ location: [49.60792785, 6.13640955], size },
{ location: [40.4167047, -3.7035825], size },
{ location: [53.44234835, -2.23337365], size },
{ location: [43.28032785, 5.3805534999999995], size },
{ location: [45.46129315, 9.1594985], size },
{ location: [53.88281835, 27.72698225], size },
{ location: [55.72453965, 37.62896485], size },
{ location: [48.1548703, 11.54184345], size },
{ location: [35.174897599999994, 33.36385679999999], size },
{ location: [59.97220885, 10.7202773], size },
{ location: [38.13725015, 13.347152300000001], size },
{ location: [48.85886575, 2.3469411], size },
{ location: [50.05966535, 14.4656111], size },
{ location: [64.1778866, -21.6929145], size },
{ location: [56.9717265, 24.128527300000002], size },
{ location: [41.8983351, 12.5451136], size },
{ location: [42.694936049999995, 23.31379865], size },
{ location: [59.917442449999996, 30.30525445], size },
{ location: [59.33376985, 17.980379499999998], size },
{ location: [59.471692250000004, 24.73822655], size },
{ location: [40.6403167, 22.9352716], size },
{ location: [48.220287400000004, 16.3796721], size },
{ location: [54.7008287, 25.25305795], size },
{ location: [52.2330014, 21.061419700000002], size },
{ location: [45.842672300000004, 15.964395], size },
{ location: [47.377442450000004, 8.5367237], size },
{ location: [31.9515694, 35.9239625], size },
{ location: [33.302430900000004, 44.3787992], size },
{ location: [33.8959203, 35.47843], size },
{ location: [26.4367824, 50.103999099999996], size },
{ location: [25.2856329, 51.5264162], size },
{ location: [25.2653471, 55.2924914], size },
{ location: [36.191162399999996, 44.009465199999994], size },
{ location: [41.8796717, -87.6267428], size },
{ location: [21.5810088, 39.16536120000001], size },
{ location: [29.3797091, 47.973562900000005], size },
{ location: [26.2235041, 50.5822436], size },
{ location: [23.5892955, 58.43755055], size },
{ location: [31.89785775, 35.19716635], size },
{ location: [24.638916000000002, 46.7160104], size },
{ location: [41.9972107, -87.6994707], size },
{ location: [23.0216238, 72.5797068], size },
{ location: [43.2363924, 76.9457275], size },
{ location: [40.370866899999996, 49.880659800000004], size },
{ location: [4.8895453, 114.9417574], size },
{ location: [13.7525438, 100.4934734], size },
{ location: [12.9767936, 77.590082], size },
{ location: [39.766548, -86.441242], size },
{ location: [18.6039761, 121.70496445], size },
{ location: [10.3710273, 123.84179285], size },
{ location: [30.7299626, 76.77700684999999], size },
{ location: [13.0836939, 80.270186], size },
{ location: [18.7882778, 98.9858802], size },
{ location: [22.3336887, 91.8342162], size },
{ location: [6.9387469, 79.8541134], size },
{ location: [23.7861979, 90.40261509999999], size },
{ location: [33.79361035, 130.5314035], size },
{ location: [20.97489655, 105.65248555], size },
{ location: [10.64974075, 106.69219355], size },
{ location: [22.2464669, 114.2094645], size },
{ location: [17.360589, 78.4740613], size },
{ location: [33.693811800000006, 73.06515110000001], size },
{ location: [-5.6869105, 106.6443241], size },
{ location: [23.1665971, 89.2095143], size },
{ location: [1.503555, 103.7495586], size },
{ location: [39.766548, -86.441242], size },
{ location: [25.05207385, 66.920821], size },
{ location: [27.709634700000002, 85.32078440000001], size },
{ location: [22.54142985, 88.3497893], size },
{ location: [3.1390764, 101.686827], size },
{ location: [31.5656822, 74.31418289999999], size },
{ location: [22.146851400000003, 113.57915275], size },
{ location: [4.2047375, 73.50325465], size },
{ location: [21.9812746, 96.082375], size },
{ location: [14.5951861, 120.9089353], size },
{ location: [19.0785451, 72.878176], size },
{ location: [21.1419879, 79.08703215], size },
{ location: [26.215820899999997, 127.6494835], size },
{ location: [28.56347375, 77.152755], size },
{ location: [34.661557, 135.38624545], size },
{ location: [40.023604, -86.885817], size },
{ location: [11.568271, 104.9224426], size },
{ location: [37.564966749999996, 126.97410149999999], size },
{ location: [1.32002285, 104.06059975], size },
{ location: [9.392205, 99.51933679999999], size },
{ location: [25.085375749999997, 121.56154305], size },
{ location: [41.28102905, 69.26474655], size },
{ location: [41.731907500000005, 44.80735935], size },
{ location: [27.4713546, 89.6336729], size },
{ location: [28.056502799999997, 145.02961325], size },
{ location: [47.9409121, 106.87729590000001], size },
{ location: [17.9640988, 102.61337069999999], size },
{ location: [16.8413605, 96.1817827], size },
{ location: [40.1535921, 44.49345045], size },
{ location: [-7.9785962999999995, 110.37023934999999], size },
{ location: [-34.961269, 138.63802385000002], size },
{ location: [-36.852095000000006, 174.7631803], size },
{ location: [-27.3411165, 153.073984], size },
{ location: [-35.2975906, 149.1012676], size },
{ location: [13.450186250000002, 144.7876394], size },
{ location: [-37.950559999999996, 145.318275], size },
{ location: [-22.26462485, 166.44491835000002], size },
{ location: [-31.9558964, 115.86058009999999], size },
{ location: [-33.869843900000006, 151.2082848], size },

the package is not wroking with vue2 / nuxt js.

Hey @shuding I have a question that the package has been converted to be an ESM only package. ?

Because while I'm trying to add this package in my project its working for just few minutes and after that is it showing me the error which you can see in the SS. I'm using nuxt js and vue 2.

I Tried to down grade the node-fetch package to verison 2 but it didn't helped me.

Please have a look and let me know

Thank you.

Cobe script fails on the Vercel deployment with Checkly checks

Anyone else has problem deploying Cobe to Vercel with Chekly checks (Next.js project)? I am using the example script from the Cobe page. It runs great in local environment, but when I deploy this to Vercel, the deploy is blocked by Checkly. It is failing with "1 Blocking Failures: Prevent these Checks from blocking your deployment by adjusting your"

If I check the deployment details in Checkly I see there are several console logs reported:

Any idea?

Disabled the auto resize event listener

Need to fork (or contribute to) Phenomenon to make this available.

Auto rotate plus draggable

How can i do both autorotate and draggle in Render?

Add shader code

Add the un-optimized shader code and glslx to the build scripts.

Precision problem

When setting a high sample number (in practice > 17000), the precision error will be noticeable:

We’re already using highp float, but it would be great to reduce the precision error even more by optimizing the computation steps as much as possible.

An alternative way is to introduce some deterministic randomness to the sampling here.

Custom marker shape?

is there any way to customize the shape of the marker?

Lighthouse / PageSpeed Insights

Hi, I'm working on a new homepage for SvelteKit and one idea we're considering is adding a WebGL globe - possibly with COBE. We try to keep our PageSpeed score high since developers who are considering us sometimes use our site as an example of how performant Svelte is (example). We consistently score in the 90s. However, the COBE site scored only 47 for me. I'm not sure if this is because of COBE itself or some other aspect of the site. It'd be great if the COBE site scored high so that I could have confidence that using COBE would not affect our own page's speed.

https://pagespeed.web.dev/report?url=https%3A%2F%2Fcobe.vercel.app%2F&form_factor=mobile

Add interaction events

Would be nice to add click/hover events so that the globe can be used interactively.

A use case:

hover on a location and the name shows up with info
click on a location and trigger an action (for example navigate to a different page)

Thanks.
Ps. Awesome lib!

Wrong Page Redirect in Draggable and Rotate Showcase

You can see the link in the bottom left corner where the Draggable and Auto Rotate is redirecting, It Should open Draggable and Auto Rotate.mdx instead of which it is opening Draggable.mdx

I would like to make a PR for this issue once you approve @shuding

Dots disappeared on Africa

On the preview map there are some missing dots on Africa continent crossing Algeria and Mali.

Maximum Number of Markers

Hey!

I'm trying to render around 6,000 but only 50 or so markers seem to be showing up on my map, code is here: https://github.com/hackclub/site/blob/10c57825053b4d6a12ba9fb7acaa03926150b971/pages/donate2.js#L48 and the preview is deployed here: https://v3-git-redesign-donate.hackclub.dev/donate2/ and my markers are here: https://github.com/hackclub/site/blob/redesign-donate/components/donate/locations.js

I was wondering if there's a max no. of markers?

Thanks so much!

Multicolored Markers

Would like a way to specify color of markers individually instead of globally.
Makes the map much more useful being able to have a legend based on colors

Cannot make cobe responsive (resize) with Vue3

Hi,
Iam using Vue 3 and started from the provided example. Unfortunately Iam not able to make the globe resize when the window becomes smaller. I've looked for props and options, but it seems I cannot find a way to do it.
Is there something already implemented for that?

Here is my cobe component code:

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import createGlobe from 'cobe';

export interface GlobeProps {
  size?: number
  devicePixelRatio?: number
  phi?: number
  theta?: number
  dark?: number
  diffuse?: number
  mapSamples?: number
  mapBrightness?: number
  rotation?: number
}

const props = withDefaults(defineProps<GlobeProps>(), {
  size: 600,
  devicePixelRatio: 2,
  phi: 0,
  theta: 0,
  dark: 1,
  diffuse: 1.2,
  mapSamples: 15000,
  mapBrightness: 6,
  rotation: 0.005
})

const el = ref();
const phi = ref(0);

onMounted(() => {
  createGlobe(el.value, {
    devicePixelRatio: 2,
    width: props.size * 2,
    height: props.size * 2,
    phi: 0,
    theta: 0,
    dark: 1,
    diffuse: 1.2,
    mapSamples: 15000,
    mapBrightness: 6,
    baseColor: [0.3, 0.3, 0.3],
    markerColor: [0.1, 0.8, 1],
    glowColor: [1, 1, 1],
    markers: [
      // longitude latitude
      { location: [37.7595, -122.4367], size: 0.03 },
      { location: [40.7128, -74.006], size: 0.03 },
    ],
    onRender: (state: any) => {
      // Called on every animation frame.
      // `state` will be an empty object, return updated params.
      state.phi = phi.value;
      phi.value += props.rotation;
    },
  });
});
                                                                                                                                            </script>

<template>
  <canvas
    ref="el"
    :style="{ width: `${props.size}px`, height: `${props.size}px` }"
    :width="props.size * 2"
    :height="props.size * 2"
  ></canvas>
</template>

<style lang="scss" scoped>
canvas {
  width: 100%;
  height: 100%;
  //max-width: 100% !important;
  //max-height: 100% !important;
}
</style>

Earth drawing error

This can be reproduced here https://codesandbox.io/s/eager-sky-r2q0g

Transparent base color

Hello, is it possible to set a transparency level for the base color? Many thnxs!

Performance problem | GPU

I have found a problem related to GPU consumption, this is the reason for the poor performance in low-range pc's and mobile devices.

draggable with vue?

is there an example of the implementation of draggable with vue.js?

Unique marker colors

I would really like to add unique colors for the markers.
Since markers is a vec4, and I don't think GL has a vec5, seems like need to make a new vec3 for each marker color with the 8bit RGB value. Does that sound correct?

Love to hear your thoughts before implementing it.

Great lib, thanks for not using any bloated libs!

Offset options not working

Based on doc, there's the offset options, but it doesn't seems to work.

Change offset x and y value. Globe stays the same position
https://codesandbox.io/s/dark-hooks-ed5k19?file=/src/App.js

Cannot read properties of `null` (reading 'enable') - When hardware acceleration is disabled

White flash on page load (noticeable only on black/dark backgrounds)

First of all, thank you for creating this library! The design and API is slick :^)

There seems to be a white flash on page load where the cobe globe is, noticeable only on dark backgrounds.

To replicate:

Go to https://cobe.vercel.app/
Switch from "Light" to "Dark" in the footer of the website
Keep reloading - this happens inconsistently

What I have tried: setting a background-color property on the <canvas> element, but the white flash persists.

In https://cobe.vercel.app/, the transition is less jarring because there is a borderRadius: 50% applied to the canvas, causing a white circular flash when in normal cases would be a rectangular flash.

bug.mp4

Cobe's playground https://cobe-playground.vercel.app/ broken on Chrome.

Cobe's playground https://cobe-playground.vercel.app/ is broken on my Chrome on both normal and incognito modes, but it's fine on Safari.

Chrome version: Version 109.0.5414.119 (Official Build) (arm64)
OS: Darwin DMFD93W41Q 22.3.0 Darwin Kernel Version 22.3.0

Issue with dots display

There seems to be an issue with the formula used to say whether a dot in land or not.
If you look at Africa there is always a vertical line of uncolored dots - see screenshots . I have tried lots of variation in the playground but could not find any parameter that solved it. I also noticed a small glitch for Antartica and was wondering if it was the same issue

It might be linked to precisions as I don't see it in one of your post picture : https://pbs.twimg.com/media/FGa7EGPXEAUF0bd?format=jpg&name=large

PS: Could it be a PC/mac issue as I looked at our project on a mac and couldn't replicate the error.

Docs site

Can create a basic docs site with Nextra later.

Marker onClick or onHover event?

Hi, is there any way to know when a marker was clicked or hovered over?
I want to display a custom tooltip when a marker is clicked, wondering if this is possible with cobe

Auto rotate something like blink

At first time i would like to say this is rock Lib, I have used the latest React 18.2.0, but looks like blinking, and try to downgrade to 17.0.2 and running smooth, any ideas for this one. Thanks in advance

Sample code not working on Chrome on Android 12

Thanks for the great lib!

The Demo does not work. It looks like the texture is not wrapped around the globe.

Demo and configurations

The following two work

Use with React: https://codesandbox.io/s/eager-sky-r2q0g
Use with vanilla JS: https://codesandbox.io/s/peaceful-gwen-m579y

I tried to put it in a minimum next.js app, the result is the same as the demo on cobe.vercel.app.

https://github.com/rjyo/cobe-test

https://cobe-test.vercel.app/

Rotate to Location on Vue.js

Hey, can anyone help me making the Rotate to Location work exactly like the React Example on:

https://cobe.vercel.app/docs/showcases/rotate-to-location

Sadly, I did everything as similar as possible, but the THETA just go nuts!

`<script setup lang="ts">
import { ref, onMounted, defineProps, watchEffect } from "vue";
import createGlobe, { Marker } from "cobe";

const el = ref();
const focusRef: any = ref([0, 0]);

onMounted(() => {
let width = 0;
let currentPhi = 0;
let currentTheta = 0;
const doublePi = Math.PI * 2;
const onResize = () => el.value && (width = el.value.offsetWidth);
window.addEventListener("resize", onResize);
onResize();
createGlobe(el.value, {
devicePixelRatio: 2,
width: width * 2,
height: width * 2,
phi: 0,
theta: 0.3,
dark: 0.7,
diffuse: 3,
mapSamples: 16000,
mapBrightness: 10,
baseColor: [0.4, 0.4, 0.4],
markerColor: [251 / 255, 255 / 255, 255 / 255],
glowColor: [0, 0, 0],
markers: props.markers,
onRender: (state) => {
state.phi = currentPhi;
state.theta = currentTheta;
const [focusPhi, focusTheta] = focusRef.value;
const distPositive = (focusPhi - currentPhi + doublePi) % doublePi;
const distNegative = (currentPhi - focusPhi + doublePi) % doublePi;
if (distPositive < distNegative) {
currentPhi += distPositive * 0.08;
} else {
currentPhi -= distNegative * 0.08;
}
currentTheta = currentTheta * 0.92 + focusTheta * 0.08;
state.width = width * 2;
state.height = width * 2;
},
});
setTimeout(() => (el.value.style.opacity = "1"));
});

const props = defineProps({
markers: {
type: Array as () => Marker[],
default: () => [
{ location: [37.78, -122.412], size: 0.1 },
{ location: [52.52, 13.405], size: 0.1 },
{ location: [35.676, 139.65], size: 0.1 },
{ location: [-34.6, -58.38], size: 0.1 },
],
},
marker: {
type: Object as () => Marker,
required: true,
},
});

watchEffect(() => {
if (props.marker.location !== undefined) {
focusRef.value = props.marker.location;
locationToAngles(focusRef.value[0], focusRef.value[1]);
console.log(focusRef.value[0], focusRef.value[1]);
}
});

function locationToAngles(lat, long) {
return [
Math.PI - ((long * Math.PI) / 180 - Math.PI / 2),
(lat * Math.PI) / 180,
];
}
</script>

I'm using Vue 2.7.10

docs: improve examples by adding removeEventListener to resize events

The examples of the implementation using React are a life saver, but I believe we can improve them by adding the removeEventListener for the resize event.

window.removeEventListener('resize', onResize);

Here the PR:
#76

Performance issues on Windows

Cobe tested on windows, the GPU goes to 100%

Sites tested: https://upstash.com, https://vercel.com, https://cobe.vercel.app

The globe spins slower in safari

Same configuration, globe spins faster in chrome/firefox than safari

Examples

On top of #3, let’s create a bunch of useful examples:

How to use it inside a framework, for example React
How to manually rotate the globe to a certain location
How to animate it with 3rd party animation libs

Country / area glow?

Any chance of adding a country/area glow feature to the globe via the api?

Why does my site slow down

I'm sorry I'm a little new, but when he cob the page gets slow with the scroll

Slow performance on mobile

I created a globe on this draft of a new SvelteKit homepage: https://kit-svelte-4iwujf16y-svelte.vercel.app/

When I pull it up on mobile, it makes the page laggy and temporarily locks up my phone. I confirmed with another maintainer who also has a high-end phone.

I think it should be possible as I noticed https://stripe.com/blog/globe works fine on my phone.

I'm not sure if I've done anything obviously wrong. You can see my code here: https://github.com/benmccann/kit/blob/2c2ff26d0c2765571977d46a54602f3b08dc130d/sites/kit.svelte.dev/src/routes/Grow.svelte

Separate Customization of Globe and Dot Colors

Is it possible to implement independent customization options for the color of the globe and the dots?

Implement Cobe in Angular 13

Samples not rendering

Samsung Galaxy S20+, on Google Chrome (version 96.0.4664.45)

https://twitter.com/batataquatro/status/1462808646052634630

Pause globe rotation

Hi folks,

I have been trying out Cobe in a vanilla js project. How would one go about creating a button to pause the canvas rotation like the one in the demo?

The quick start guide in the readme mentions "to pause requestAnimationFrame: globe.toggle()". I'm relatively new to Javascript. Could someone point me in the right direction how to implement this?

draggable & rotate-to-location with Vanilla js

Hi, this is the Lib I was looking for!!
Are there any examples of vanillajs code for draggable & rotate-to-location?

I don't know the react, so I'm having a hard time applying it 😢

Add cleanup to examples

The vue and svelte version examples do not have any sort of cleanup when components unmount. There needs to be a call to .destroy() to avoid memory leak.