globe.gl 2.41.0 → 2.41.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
<head>
|
|
2
|
+
<style>
|
|
3
|
+
body { margin: 0; }
|
|
4
|
+
|
|
5
|
+
#time {
|
|
6
|
+
position: absolute;
|
|
7
|
+
bottom: 8px;
|
|
8
|
+
left: 8px;
|
|
9
|
+
color: lightblue;
|
|
10
|
+
font-family: monospace;
|
|
11
|
+
}
|
|
12
|
+
</style>
|
|
13
|
+
|
|
14
|
+
<script src="//unpkg.com/globe.gl"></script>
|
|
15
|
+
<!-- <script src="../../dist/globe.gl.js"></script>-->
|
|
16
|
+
</head>
|
|
17
|
+
|
|
18
|
+
<body>
|
|
19
|
+
<div id="globeViz"></div>
|
|
20
|
+
<div id="time"></div>
|
|
21
|
+
|
|
22
|
+
<script type="module">
|
|
23
|
+
import { TextureLoader, ShaderMaterial, Vector2 } from 'https://esm.sh/three';
|
|
24
|
+
import * as solar from 'https://esm.sh/solar-calculator';
|
|
25
|
+
|
|
26
|
+
const VELOCITY = 1; // minutes per frame
|
|
27
|
+
|
|
28
|
+
// Custom shader: Blends night and day images to simulate day/night cycle
|
|
29
|
+
const dayNightShader = {
|
|
30
|
+
vertexShader: `
|
|
31
|
+
varying vec3 vNormal;
|
|
32
|
+
varying vec2 vUv;
|
|
33
|
+
void main() {
|
|
34
|
+
vNormal = normalize(normalMatrix * normal);
|
|
35
|
+
vUv = uv;
|
|
36
|
+
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
|
37
|
+
}
|
|
38
|
+
`,
|
|
39
|
+
fragmentShader: `
|
|
40
|
+
#define PI 3.141592653589793
|
|
41
|
+
uniform sampler2D dayTexture;
|
|
42
|
+
uniform sampler2D nightTexture;
|
|
43
|
+
uniform vec2 sunPosition;
|
|
44
|
+
uniform vec2 globeRotation;
|
|
45
|
+
varying vec3 vNormal;
|
|
46
|
+
varying vec2 vUv;
|
|
47
|
+
|
|
48
|
+
float toRad(in float a) {
|
|
49
|
+
return a * PI / 180.0;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
vec3 Polar2Cartesian(in vec2 c) { // [lng, lat]
|
|
53
|
+
float theta = toRad(90.0 - c.x);
|
|
54
|
+
float phi = toRad(90.0 - c.y);
|
|
55
|
+
return vec3( // x,y,z
|
|
56
|
+
sin(phi) * cos(theta),
|
|
57
|
+
cos(phi),
|
|
58
|
+
sin(phi) * sin(theta)
|
|
59
|
+
);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
void main() {
|
|
63
|
+
float invLon = toRad(globeRotation.x);
|
|
64
|
+
float invLat = -toRad(globeRotation.y);
|
|
65
|
+
mat3 rotX = mat3(
|
|
66
|
+
1, 0, 0,
|
|
67
|
+
0, cos(invLat), -sin(invLat),
|
|
68
|
+
0, sin(invLat), cos(invLat)
|
|
69
|
+
);
|
|
70
|
+
mat3 rotY = mat3(
|
|
71
|
+
cos(invLon), 0, sin(invLon),
|
|
72
|
+
0, 1, 0,
|
|
73
|
+
-sin(invLon), 0, cos(invLon)
|
|
74
|
+
);
|
|
75
|
+
vec3 rotatedSunDirection = rotX * rotY * Polar2Cartesian(sunPosition);
|
|
76
|
+
float intensity = dot(normalize(vNormal), normalize(rotatedSunDirection));
|
|
77
|
+
vec4 dayColor = texture2D(dayTexture, vUv);
|
|
78
|
+
vec4 nightColor = texture2D(nightTexture, vUv);
|
|
79
|
+
float blendFactor = smoothstep(-0.1, 0.1, intensity);
|
|
80
|
+
gl_FragColor = mix(nightColor, dayColor, blendFactor);
|
|
81
|
+
}
|
|
82
|
+
`
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
const sunPosAt = dt => {
|
|
86
|
+
const day = new Date(+dt).setUTCHours(0, 0, 0, 0);
|
|
87
|
+
const t = solar.century(dt);
|
|
88
|
+
const longitude = (day - dt) / 864e5 * 360 - 180;
|
|
89
|
+
return [longitude - solar.equationOfTime(t) / 4, solar.declination(t)];
|
|
90
|
+
};
|
|
91
|
+
|
|
92
|
+
let dt = +new Date();
|
|
93
|
+
const timeEl = document.getElementById('time');
|
|
94
|
+
|
|
95
|
+
const world = new Globe(document.getElementById('globeViz'));
|
|
96
|
+
|
|
97
|
+
Promise.all([
|
|
98
|
+
new TextureLoader().loadAsync('//unpkg.com/three-globe/example/img/earth-day.jpg'),
|
|
99
|
+
new TextureLoader().loadAsync('//unpkg.com/three-globe/example/img/earth-night.jpg')
|
|
100
|
+
]).then(([dayTexture, nightTexture]) => {
|
|
101
|
+
const material = new ShaderMaterial({
|
|
102
|
+
uniforms: {
|
|
103
|
+
dayTexture: { value: dayTexture },
|
|
104
|
+
nightTexture: { value: nightTexture },
|
|
105
|
+
sunPosition: { value: new Vector2() },
|
|
106
|
+
globeRotation: { value: new Vector2() }
|
|
107
|
+
},
|
|
108
|
+
vertexShader: dayNightShader.vertexShader,
|
|
109
|
+
fragmentShader: dayNightShader.fragmentShader
|
|
110
|
+
});
|
|
111
|
+
|
|
112
|
+
world.globeMaterial(material)
|
|
113
|
+
// Update globe rotation on shader
|
|
114
|
+
.onZoom(({ lng, lat }) => material.uniforms.globeRotation.value.set(lng, lat));
|
|
115
|
+
|
|
116
|
+
requestAnimationFrame(() =>
|
|
117
|
+
(function animate() {
|
|
118
|
+
// animate time of day
|
|
119
|
+
dt += VELOCITY * 60 * 1000;
|
|
120
|
+
timeEl.textContent = new Date(dt).toLocaleString();
|
|
121
|
+
material.uniforms.sunPosition.value.set(...sunPosAt(dt));
|
|
122
|
+
requestAnimationFrame(animate);
|
|
123
|
+
})()
|
|
124
|
+
);
|
|
125
|
+
});
|
|
126
|
+
</script>
|
|
127
|
+
</body>
|
|
Binary file
|