-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
79 lines (65 loc) · 2.33 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - 3D Globe Three.js with location pointer</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="page">
<div class="title">Longe da vista, longe do coração, mas o coração tem olhos, e apenas uma oração</div>
<div class="globe-wrapper">
<canvas id="globe-3d"></canvas>
<canvas id="globe-2d-overlay"></canvas>
<div id="globe-popup-overlay">
<div class="globe-popup"></div>
</div>
</div>
</div>
<script type="x-shader/x-fragment" id="fragment-shader-map">
uniform sampler2D u_map_tex;
varying float vOpacity;
varying vec2 vUv;
void main() {
vec3 color = texture2D(u_map_tex, vUv).rgb;
color -= .2 * length(gl_PointCoord.xy - vec2(.5));
float dot = 1. - smoothstep(.38, .4, length(gl_PointCoord.xy - vec2(.5)));
if (dot < 0.5) discard;
gl_FragColor = vec4(color, dot * vOpacity);
}
</script>
<script type="x-shader/x-vertex" id="vertex-shader-map">
uniform sampler2D u_map_tex;
uniform float u_dot_size;
uniform float u_time_since_click;
uniform vec3 u_pointer;
#define PI 3.14159265359
varying float vOpacity;
varying vec2 vUv;
void main() {
vUv = uv;
// mask with world map
float visibility = step(.2, texture2D(u_map_tex, uv).r);
gl_PointSize = visibility * u_dot_size;
// make back dots semi-transparent
vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
vOpacity = (1. / length(mvPosition.xyz) - .7);
vOpacity = clamp(vOpacity, .03, 1.);
// add ripple
float t = u_time_since_click - .1;
t = max(0., t);
float max_amp = .15;
float dist = 1. - .5 * length(position - u_pointer); // 0 .. 1
float damping = 1. / (1. + 20. * t); // 1 .. 0
float delta = max_amp * damping * sin(5. * t * (1. + 2. * dist) - PI);
delta *= 1. - smoothstep(.8, 1., dist);
vec3 pos = position;
pos *= (1. + delta);
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.);
}
</script>
<!-- partial -->
<script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script><script type="module" src="./script.js"></script>
</body>
</html>