From 4d054d72a2baad4697f896c53f83e43b9833a4fd Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Thu, 18 Aug 2022 21:35:55 -0700
Subject: [PATCH] webgl globe demo

---
 pnpm-lock.yaml                              | 12 +++++
 sites/kit.svelte.dev/package.json           |  1 +
 sites/kit.svelte.dev/src/routes/Grow.svelte | 50 +++++++++++++++++++++
 3 files changed, 63 insertions(+)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9e91bea0429f..d8248b5c2225 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -528,6 +528,7 @@ importers:
       '@sveltejs/kit': workspace:*
       '@sveltejs/site-kit': ^2.1.0
       '@types/node': ^16.11.36
+      cobe: ^0.6.0
       flexsearch: ^0.7.21
       marked: ^4.0.16
       prism-svelte: ^0.5.0
@@ -544,6 +545,7 @@ importers:
       '@sveltejs/kit': link:../../packages/kit
       '@sveltejs/site-kit': 2.1.0
       '@types/node': 16.11.42
+      cobe: 0.6.0
       flexsearch: 0.7.21
       marked: 4.0.17
       prism-svelte: 0.5.0
@@ -1476,6 +1478,12 @@ packages:
     engines: {node: '>=0.8'}
     dev: true
 
+  /cobe/0.6.0:
+    resolution: {integrity: sha512-+FuvBjhfxPMOGXkSzAmj3XVmXqq6vqKtufeg64axTr0ipBxOwGIpyXN6T6wR7SGRCueF/bkbyL2fMITtZwjUNQ==}
+    dependencies:
+      phenomenon: 1.6.0
+    dev: true
+
   /code-point-at/1.1.0:
     resolution: {integrity: sha512-RpAVKQA5T63xEj6/giIbUEtZwJ4UFIc3ZtvEkiaUERylqe8xb5IvqcgOurZLahv93CLKfxcw5YI+DZcUBRyLXA==}
     engines: {node: '>=0.10.0'}
@@ -3193,6 +3201,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /phenomenon/1.6.0:
+    resolution: {integrity: sha512-7h9/fjPD3qNlgggzm88cY58l9sudZ6Ey+UmZsizfhtawO6E3srZQXywaNm2lBwT72TbpHYRPy7ytIHeBUD/G0A==}
+    dev: true
+
   /picocolors/1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
 
diff --git a/sites/kit.svelte.dev/package.json b/sites/kit.svelte.dev/package.json
index 616f17709c90..ac506cc808a5 100644
--- a/sites/kit.svelte.dev/package.json
+++ b/sites/kit.svelte.dev/package.json
@@ -14,6 +14,7 @@
 		"@sveltejs/kit": "workspace:*",
 		"@sveltejs/site-kit": "^2.1.0",
 		"@types/node": "^16.11.36",
+		"cobe": "^0.6.0",
 		"flexsearch": "^0.7.21",
 		"marked": "^4.0.16",
 		"prism-svelte": "^0.5.0",
diff --git a/sites/kit.svelte.dev/src/routes/Grow.svelte b/sites/kit.svelte.dev/src/routes/Grow.svelte
index 4bb106ab79e2..bf8d9b833d7c 100644
--- a/sites/kit.svelte.dev/src/routes/Grow.svelte
+++ b/sites/kit.svelte.dev/src/routes/Grow.svelte
@@ -1,11 +1,61 @@
 <script>
+	import createGlobe from 'cobe';
+	import { onMount } from 'svelte';
 	import Grow from './grow.png';
+
+	let canvas;
+	let phi = 0;
+
+	onMount(() => {
+		const globe = createGlobe(canvas, {
+			devicePixelRatio: 2,
+			width: 1000 * 2,
+			height: 1000 * 2,
+			phi: 0,
+			theta: 0,
+			dark: 1,
+			diffuse: 1.2,
+			mapSamples: 16000,
+			mapBrightness: 6,
+			baseColor: [0.3, 0.3, 0.3],
+			markerColor: [0.1, 0.8, 1],
+			glowColor: [1, 1, 1],
+			offset: [0, 2000],
+			markers: [
+				// https://vercel.com/docs/concepts/edge-network/regions
+				{ location: [59.3293, 18.0686], size: 0.1 }, // Stockholm
+				{ location: [19.0760, 72.8777], size: 0.1 }, // Mumbai
+				{ location: [48.8566, 2.3522], size: 0.1 }, // Paris
+				{ location: [41.4993, -81.6944], size: 0.1 }, // Cleveland
+				{ location: [-33.9249, 18.4241], size: 0.1 }, // Cape Town
+				{ location: [53.3498, -6.2603], size: 0.1 }, // Dublin
+				{ location: [50.1109, 8.6821], size: 0.1 }, // Frankfurt
+				{ location: [-23.5558, -46.6396], size: 0.1 }, // São Paulo
+				{ location: [22.3193, 114.1694], size: 0.1 }, // Hong Kong
+				{ location: [35.6762, 139.6503], size: 0.1 }, // Tokyo
+				{ location: [38.9072, -77.0369], size: 0.1 }, // DC
+				{ location: [37.5665, 126.9780], size: 0.1 }, // Seoul
+				{ location: [34.6937, 135.5023], size: 0.1 }, // Osaka
+				{ location: [51.5072, -0.1276], size: 0.1 }, // London
+				{ location: [45.5152, -122.6784], size: 0.1 }, // Portland
+				{ location: [37.7595, -122.4367], size: 0.1 }, // SF
+				{ location: [1.3521, 103.8198], size: 0.1 }, // Singapore
+				{ location: [-33.8688, 151.2093], size: 0.1 } // Sydney
+			],
+			onRender: state => {
+				state.phi = phi;
+				phi += 0.008;
+			}
+		});
+	});
 </script>
 
 <h3>SvelteKit grows with you,<br/><span style="font-weight:bold">whatever</span> you're building</h3>
 
 <img src={Grow} alt="Build SSGs, MPAs, PWAs, or SPAs." />
 
+<canvas bind:this={canvas} style="width: 1000px; height: 500px;" />
+
 <style>
 	h3 {
 		margin-bottom: 3rem;