💥 Update interactive Globe with latest features

It was long and painful but it's finally looking neat!

- place markers on globe following camera world matrix
- show location on marker hover instead of showing label near dot
- make marker easier to select
- make rotation constant no matter the monitor refresh rate by using a delta timed animation
- [wip] lighting the globe with a dark area / todo: how to get current sun lighting from a location?

Merci Julien :)
This commit is contained in:
2022-09-24 23:42:00 +02:00
parent b764b4d1d1
commit 71625dbce0
13 changed files with 394 additions and 422 deletions

88
pnpm-lock.yaml generated
View File

@@ -5,7 +5,7 @@ specifiers:
'@sveltejs/adapter-auto': ^1.0.0-next.80
'@sveltejs/adapter-node': ^1.0.0-next.95
'@sveltejs/adapter-vercel': ^1.0.0-next.77
'@sveltejs/kit': ^1.0.0-next.499
'@sveltejs/kit': ^1.0.0-next.503
'@typescript-eslint/eslint-plugin': ^5.38.0
'@typescript-eslint/parser': ^5.38.0
base-64: ^1.0.0
@@ -13,7 +13,7 @@ specifiers:
cssnano: ^5.1.13
dayjs: ^1.11.5
embla-carousel: ^7.0.3
eslint: ^8.23.1
eslint: ^8.24.0
eslint-plugin-svelte3: ^4.0.0
focus-visible: ^5.2.0
motion: ^10.14.2
@@ -25,6 +25,7 @@ specifiers:
postcss-sort-media-queries: ^4.3.0
sanitize.css: ^13.0.0
sass: ^1.55.0
suncalc: ^1.9.0
svelte: ^3.50.1
svelte-check: ^2.9.0
svelte-preprocess: ^4.10.7
@@ -42,6 +43,7 @@ dependencies:
motion: 10.14.2
ogl: 0.0.99
sanitize.css: 13.0.0
suncalc: 1.9.0
swell-js: 3.17.6
tweakpane: 3.1.0
@@ -49,14 +51,14 @@ devDependencies:
'@sveltejs/adapter-auto': 1.0.0-next.80
'@sveltejs/adapter-node': 1.0.0-next.95
'@sveltejs/adapter-vercel': 1.0.0-next.77
'@sveltejs/kit': 1.0.0-next.499_svelte@3.50.1+vite@3.1.3
'@typescript-eslint/eslint-plugin': 5.38.0_wsb62dxj2oqwgas4kadjymcmry
'@typescript-eslint/parser': 5.38.0_irgkl5vooow2ydyo6aokmferha
'@sveltejs/kit': 1.0.0-next.503_svelte@3.50.1+vite@3.1.3
'@typescript-eslint/eslint-plugin': 5.38.0_4gkcvl6qsi23tqqawfqgcwtp54
'@typescript-eslint/parser': 5.38.0_7ilbxdl5iguzcjriqqcg2m5cku
base-64: 1.0.0
browserslist: 4.21.4
cssnano: 5.1.13_postcss@8.4.16
eslint: 8.23.1
eslint-plugin-svelte3: 4.0.0_rhh4tpcyg7zwtq6pdnkzw5gxma
eslint: 8.24.0
eslint-plugin-svelte3: 4.0.0_snydkosur25h6rjxszquwacaua
postcss: 8.4.16
postcss-focus-visible: 7.1.0_postcss@8.4.16
postcss-normalize: 10.0.1_yroec54rl3ndwvbunmnefp5nvy
@@ -531,8 +533,8 @@ packages:
- supports-color
dev: true
/@sveltejs/kit/1.0.0-next.499_svelte@3.50.1+vite@3.1.3:
resolution: {integrity: sha512-HoNsQ9CjdPLlDZLwcCsJTx5tW8YI3xhXEcJGuFHPLf600QcfeJWmQtE6mQF/SiykFkYR+2fD1GdRzKynJbZDMA==}
/@sveltejs/kit/1.0.0-next.503_svelte@3.50.1+vite@3.1.3:
resolution: {integrity: sha512-QSEHe40qMOYjXirxS57dIa9NU4FntlYh+KYslBzasjMCfSiUkHGaWMJRz8uU+R4BWnThD9SdCo7F/NwDxu5LRQ==}
engines: {node: '>=16.14'}
hasBin: true
requiresBuild: true
@@ -604,8 +606,8 @@ packages:
resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==}
dev: true
/@types/node/18.7.18:
resolution: {integrity: sha512-m+6nTEOadJZuTPkKR/SYK3A2d7FZrgElol9UP1Kae90VVU4a6mxnPuLiIW1m4Cq4gZ/nWb9GrdVXJCoCazDAbg==}
/@types/node/18.7.20:
resolution: {integrity: sha512-adzY4vLLr5Uivmx8+zfSJ5fbdgKxX8UMtjtl+17n0B1q1Nz8JEmE151vefMdpD+1gyh+77weN4qEhej/O7budQ==}
dev: true
/@types/pug/2.0.6:
@@ -615,16 +617,16 @@ packages:
/@types/resolve/1.17.1:
resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==}
dependencies:
'@types/node': 18.7.18
'@types/node': 18.7.20
dev: true
/@types/sass/1.43.1:
resolution: {integrity: sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g==}
dependencies:
'@types/node': 18.7.18
'@types/node': 18.7.20
dev: true
/@typescript-eslint/eslint-plugin/5.38.0_wsb62dxj2oqwgas4kadjymcmry:
/@typescript-eslint/eslint-plugin/5.38.0_4gkcvl6qsi23tqqawfqgcwtp54:
resolution: {integrity: sha512-GgHi/GNuUbTOeoJiEANi0oI6fF3gBQc3bGFYj40nnAPCbhrtEDf2rjBmefFadweBmO1Du1YovHeDP2h5JLhtTQ==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies:
@@ -635,12 +637,12 @@ packages:
typescript:
optional: true
dependencies:
'@typescript-eslint/parser': 5.38.0_irgkl5vooow2ydyo6aokmferha
'@typescript-eslint/parser': 5.38.0_7ilbxdl5iguzcjriqqcg2m5cku
'@typescript-eslint/scope-manager': 5.38.0
'@typescript-eslint/type-utils': 5.38.0_irgkl5vooow2ydyo6aokmferha
'@typescript-eslint/utils': 5.38.0_irgkl5vooow2ydyo6aokmferha
'@typescript-eslint/type-utils': 5.38.0_7ilbxdl5iguzcjriqqcg2m5cku
'@typescript-eslint/utils': 5.38.0_7ilbxdl5iguzcjriqqcg2m5cku
debug: 4.3.4
eslint: 8.23.1
eslint: 8.24.0
ignore: 5.2.0
regexpp: 3.2.0
semver: 7.3.7
@@ -650,7 +652,7 @@ packages:
- supports-color
dev: true
/@typescript-eslint/parser/5.38.0_irgkl5vooow2ydyo6aokmferha:
/@typescript-eslint/parser/5.38.0_7ilbxdl5iguzcjriqqcg2m5cku:
resolution: {integrity: sha512-/F63giJGLDr0ms1Cr8utDAxP2SPiglaD6V+pCOcG35P2jCqdfR7uuEhz1GIC3oy4hkUF8xA1XSXmd9hOh/a5EA==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies:
@@ -664,7 +666,7 @@ packages:
'@typescript-eslint/types': 5.38.0
'@typescript-eslint/typescript-estree': 5.38.0_typescript@4.8.3
debug: 4.3.4
eslint: 8.23.1
eslint: 8.24.0
typescript: 4.8.3
transitivePeerDependencies:
- supports-color
@@ -678,7 +680,7 @@ packages:
'@typescript-eslint/visitor-keys': 5.38.0
dev: true
/@typescript-eslint/type-utils/5.38.0_irgkl5vooow2ydyo6aokmferha:
/@typescript-eslint/type-utils/5.38.0_7ilbxdl5iguzcjriqqcg2m5cku:
resolution: {integrity: sha512-iZq5USgybUcj/lfnbuelJ0j3K9dbs1I3RICAJY9NZZpDgBYXmuUlYQGzftpQA9wC8cKgtS6DASTvF3HrXwwozA==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies:
@@ -689,9 +691,9 @@ packages:
optional: true
dependencies:
'@typescript-eslint/typescript-estree': 5.38.0_typescript@4.8.3
'@typescript-eslint/utils': 5.38.0_irgkl5vooow2ydyo6aokmferha
'@typescript-eslint/utils': 5.38.0_7ilbxdl5iguzcjriqqcg2m5cku
debug: 4.3.4
eslint: 8.23.1
eslint: 8.24.0
tsutils: 3.21.0_typescript@4.8.3
typescript: 4.8.3
transitivePeerDependencies:
@@ -724,7 +726,7 @@ packages:
- supports-color
dev: true
/@typescript-eslint/utils/5.38.0_irgkl5vooow2ydyo6aokmferha:
/@typescript-eslint/utils/5.38.0_7ilbxdl5iguzcjriqqcg2m5cku:
resolution: {integrity: sha512-6sdeYaBgk9Fh7N2unEXGz+D+som2QCQGPAf1SxrkEr+Z32gMreQ0rparXTNGRRfYUWk/JzbGdcM8NSSd6oqnTA==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies:
@@ -734,9 +736,9 @@ packages:
'@typescript-eslint/scope-manager': 5.38.0
'@typescript-eslint/types': 5.38.0
'@typescript-eslint/typescript-estree': 5.38.0_typescript@4.8.3
eslint: 8.23.1
eslint: 8.24.0
eslint-scope: 5.1.1
eslint-utils: 3.0.0_eslint@8.23.1
eslint-utils: 3.0.0_eslint@8.24.0
transitivePeerDependencies:
- supports-color
- typescript
@@ -859,7 +861,7 @@ packages:
postcss: ^8.1.0
dependencies:
browserslist: 4.21.4
caniuse-lite: 1.0.30001410
caniuse-lite: 1.0.30001411
fraction.js: 4.2.0
normalize-range: 0.1.2
picocolors: 1.0.0
@@ -909,8 +911,8 @@ packages:
engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
hasBin: true
dependencies:
caniuse-lite: 1.0.30001410
electron-to-chromium: 1.4.258
caniuse-lite: 1.0.30001411
electron-to-chromium: 1.4.261
node-releases: 2.0.6
update-browserslist-db: 1.0.9_browserslist@4.21.4
dev: true
@@ -940,13 +942,13 @@ packages:
resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
dependencies:
browserslist: 4.21.4
caniuse-lite: 1.0.30001410
caniuse-lite: 1.0.30001411
lodash.memoize: 4.1.2
lodash.uniq: 4.5.0
dev: true
/caniuse-lite/1.0.30001410:
resolution: {integrity: sha512-QoblBnuE+rG0lc3Ur9ltP5q47lbguipa/ncNMyyGuqPk44FxbScWAeEO+k5fSQ8WekdAK4mWqNs1rADDAiN5xQ==}
/caniuse-lite/1.0.30001411:
resolution: {integrity: sha512-HPnJKESKuhKpHvMY1/ux7J3nG7xG8jRuL4lbyCjDRm0doTNV91tcRk60xrP7Ym9DtJH/yuqntDWBJCqpXB4b7g==}
dev: true
/chalk/4.1.2:
@@ -1256,8 +1258,8 @@ packages:
domhandler: 4.3.1
dev: true
/electron-to-chromium/1.4.258:
resolution: {integrity: sha512-vutF4q0dTUXoAFI7Vbtdwen/BJVwPgj8GRg/SElOodfH7VTX+svUe62A5BG41QRQGk5HsZPB0M++KH1lAlOt0A==}
/electron-to-chromium/1.4.261:
resolution: {integrity: sha512-fVXliNUGJ7XUVJSAasPseBbVgJIeyw5M1xIkgXdTSRjlmCqBbiSTsEdLOCJS31Fc8B7CaloQ/BFAg8By3ODLdg==}
dev: true
/embla-carousel/7.0.3:
@@ -1496,13 +1498,13 @@ packages:
engines: {node: '>=10'}
dev: true
/eslint-plugin-svelte3/4.0.0_rhh4tpcyg7zwtq6pdnkzw5gxma:
/eslint-plugin-svelte3/4.0.0_snydkosur25h6rjxszquwacaua:
resolution: {integrity: sha512-OIx9lgaNzD02+MDFNLw0GEUbuovNcglg+wnd/UY0fbZmlQSz7GlQiQ1f+yX0XvC07XPcDOnFcichqI3xCwp71g==}
peerDependencies:
eslint: '>=8.0.0'
svelte: ^3.2.0
dependencies:
eslint: 8.23.1
eslint: 8.24.0
svelte: 3.50.1
dev: true
@@ -1522,13 +1524,13 @@ packages:
estraverse: 5.3.0
dev: true
/eslint-utils/3.0.0_eslint@8.23.1:
/eslint-utils/3.0.0_eslint@8.24.0:
resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0}
peerDependencies:
eslint: '>=5'
dependencies:
eslint: 8.23.1
eslint: 8.24.0
eslint-visitor-keys: 2.1.0
dev: true
@@ -1542,8 +1544,8 @@ packages:
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dev: true
/eslint/8.23.1:
resolution: {integrity: sha512-w7C1IXCc6fNqjpuYd0yPlcTKKmHlHHktRkzmBPZ+7cvNBQuiNjx0xaMTjAJGCafJhQkrFJooREv0CtrVzmHwqg==}
/eslint/8.24.0:
resolution: {integrity: sha512-dWFaPhGhTAiPcCgm3f6LI2MBWbogMnTJzFBbhXVRQDJPkr9pGZvVjlVfXd+vyDcWPA2Ic9L2AXPIQM0+vk/cSQ==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
hasBin: true
dependencies:
@@ -1558,7 +1560,7 @@ packages:
doctrine: 3.0.0
escape-string-regexp: 4.0.0
eslint-scope: 7.1.1
eslint-utils: 3.0.0_eslint@8.23.1
eslint-utils: 3.0.0_eslint@8.24.0
eslint-visitor-keys: 3.3.0
espree: 9.4.0
esquery: 1.4.0
@@ -3284,6 +3286,10 @@ packages:
postcss-selector-parser: 6.0.10
dev: true
/suncalc/1.9.0:
resolution: {integrity: sha512-vMJ8Byp1uIPoj+wb9c1AdK4jpkSKVAywgHX0lqY7zt6+EWRRC3Z+0Ucfjy/0yxTVO1hwwchZe4uoFNqrIC24+A==}
dev: false
/supports-color/7.2.0:
resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
engines: {node: '>=8'}