shuding / cobe Goto Github PK
View Code? Open in Web Editor NEW5kB WebGL globe lib.
Home Page: https://cobe.vercel.app
License: MIT License
5kB WebGL globe lib.
Home Page: https://cobe.vercel.app
License: MIT License
I would like to make a PR for this issue once you approve @shuding
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!
Add the un-optimized shader code and glslx to the build scripts.
Same configuration, globe spins faster in chrome/firefox than safari
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.
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 },
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.
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.
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
This can be reproduced here https://codesandbox.io/s/eager-sky-r2q0g
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 😢
Can create a basic docs site with Nextra later.
On top of #3, let’s create a bunch of useful examples:
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?
Cobe tested on windows, the GPU goes to 100%
Sites tested: https://upstash.com, https://vercel.com, https://cobe.vercel.app
how to add label plz?
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.
Is it possible to implement independent customization options for the color of the globe and the dots?
Any chance of adding a country/area glow feature to the globe via the api?
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
Samsung Galaxy S20+, on Google Chrome (version 96.0.4664.45)
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:
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.
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
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!
How can i do both autorotate and draggle in Render?
Would be nice to add click/hover events so that the globe can be used interactively.
A use case:
Thanks.
Ps. Awesome lib!
is there any way to customize the shape of the marker?
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
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
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.
Need to fork (or contribute to) Phenomenon to make this available.
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>
Thanks for the great lib!
The Demo does not work. It looks like the texture is not wrapped around the globe.
The following two work
I tried to put it in a minimum next.js app, the result is the same as the demo on cobe.vercel.app.
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
I'm sorry I'm a little new, but when he cob the page gets slow with the scroll
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.
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
Hello, is it possible to set a transparency level for the base color? Many thnxs!
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!
is there an example of the implementation of draggable with vue.js?
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
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?
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.