From 71625dbce00adf7fde22aea2554b9587537d8515 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Sat, 24 Sep 2022 23:42:00 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=A5=20Update=20interactive=20Globe=20w?= =?UTF-8?q?ith=20latest=20features?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 :) --- package.json | 5 +- pnpm-lock.yaml | 88 +++--- .../organisms/InteractiveGlobe2.svelte | 111 +++---- src/modules/globe2/frag.glsl | 45 +-- src/modules/globe2/index.ts | 207 ++++++++----- src/modules/globe2/pane.ts | 47 ++- src/modules/globe2/vertex.glsl | 39 ++- src/style/modules/_globe2.scss | 274 +++++++----------- static/images/globe-map-2k.png | Bin 26199 -> 46358 bytes static/images/globe-map-3k.png | Bin 46746 -> 0 bytes static/images/globe-map-4k.png | Bin 69459 -> 85867 bytes static/images/globe-map-dark-2k.png | Bin 0 -> 31322 bytes static/images/globe-map-dark-4k.png | Bin 0 -> 86186 bytes 13 files changed, 394 insertions(+), 422 deletions(-) delete mode 100644 static/images/globe-map-3k.png create mode 100644 static/images/globe-map-dark-2k.png create mode 100644 static/images/globe-map-dark-4k.png diff --git a/package.json b/package.json index 0c86228..ebb8b61 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "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" }, @@ -29,13 +30,13 @@ "@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", "browserslist": "^4.21.4", "cssnano": "^5.1.13", - "eslint": "^8.23.1", + "eslint": "^8.24.0", "eslint-plugin-svelte3": "^4.0.0", "postcss": "^8.4.16", "postcss-focus-visible": "^7.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6981871..bfdbf37 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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'} diff --git a/src/components/organisms/InteractiveGlobe2.svelte b/src/components/organisms/InteractiveGlobe2.svelte index 3b95fcf..2671a06 100644 --- a/src/components/organisms/InteractiveGlobe2.svelte +++ b/src/components/organisms/InteractiveGlobe2.svelte @@ -4,16 +4,17 @@