-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·144 lines (105 loc) · 4.62 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>🚀🚯🕹️</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="score"></div>
<!-- The overlay -->
<div id="myNav" class="overlay">
<div id="reset">RESET</div>
<!-- Button to close the overlay navigation -->
<a id="close_button" href="javascript:void(0)" class="closebtn" onClick="startClock();">Start</a>
<!-- Overlay content -->
<div class="overlay-content">
<span id="overlay_description_text">
🚀🚯🕹️<br><br>
👩🏻🚀💬 "Hello? HELLO! Can you hear me. We need your help! Dangerous space debris has been detected in 🌍 orbit."<br><br>
👩🏻🚀💬 "I need to repair some satellites, but I'll need you to clean up some space debris so i can do it safely!"<br><br>
👩🏻🚀💬 "Our tracking stations will highlight the debris in red but you need to select the debris to be removed by tapping on it!"
</span>
<span id="overlay_questions">
</span>
</div>
</div>
<!-- Use any element to open/show the overlay navigation menu -->
<!-- <span id="open_overlay_btn" onclick="openNav()">open</span> -->
</body>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/three.min.js"></script>
<script src="js/helper_functions.js"></script>
<!-- Shaders -->
<script id="vertexShader" type="x-shader/x-vertex">
varying vec2 vUv;
varying vec3 vNormal;
void main()
{
vUv = uv; //Texture position
vNormal = normal; // Calculate surface normal
gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
uniform sampler2D texture1;
uniform sampler2D texture2;
uniform sampler2D spectexture;
uniform sampler2D cloudtexture;
uniform vec3 sunDirection;
uniform vec3 viewDirection;
varying vec2 vUv;
varying vec3 vNormal;
void main()
{
vec3 view = normalize(viewDirection);
// Values from textures using the texture coordinate from the vertex shader
vec3 colorDay = texture2D(texture1, vUv).rgb;
vec3 colorNight = texture2D(texture2, vUv).rgb;
vec3 colorSpec = texture2D(spectexture, vUv).rgb;
// Rather than a RGB colour for the clouds we just want a numerical value
// In this case we use the red channel although this is obviosuly not ideal
float cloudamount = texture2D(cloudtexture, vUv).r;
//Calculate the diffuse component of the reflected light from the sun
float sphere_diffuse = max(dot(normalize(vNormal), sunDirection), 0.0);
// Calculate the amount of atmospheric reflection absed on viewer position
float atmos_amount = max(dot(normalize(vNormal), sunDirection), 0.0);
vec3 R = 2.0 * ( dot(normalize(vNormal),sunDirection)) * normalize(vNormal) - sunDirection;
vec3 E = view;
//Calculate amount of specular light reflected
//vec3 specular_value = colorSpec * pow( max(dot(R,E), 0.0), 6.0 ); Not Working
vec3 specular_value = colorSpec * 0.0;
vec3 lights;
if (colorNight.r < 0.6) {
// lights = vec3(colorNight.r/3.0,colorNight.g/3.0,colorNight.b/1.5);
lights = vec3(colorNight.r*1.0,colorNight.g*1.0,colorNight.b*1.0);
} else {
lights = vec3(colorNight.r*1.0,colorNight.g*0.8,colorNight.b*0.4);
}
colorNight=lights;
// compute cosine sun to normal so -1 is away from sun and +1 is toward sun.
float cosineAngleSunToNormal = dot(normalize(vNormal), sunDirection);
// sharpen the edge beween the transition
//cosineAngleSunToNormal = clamp( cosineAngleSunToNormal * 30.0, -1.0, 1.0);
sphere_diffuse = clamp( sphere_diffuse * 10.0, -1.0, 1.0);
// convert to 0 to 1 for mixing
float mixAmount = cosineAngleSunToNormal * 0.5 + 0.5;
// Select day or night texture based on mix.
vec3 blue = vec3(0.2,0.4,0.8);
vec3 color = mix( colorNight+vec3(0.1,0.1,0.2)*cloudamount, colorDay+(specular_value/1.3)+vec3(1.0,1.0,1.0)*cloudamount+blue*(1.0-atmos_amount), sphere_diffuse);
gl_FragColor = vec4( color , 1.0 );
}
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-40268265-1', 'auto');
ga('send', 'pageview');
</script>
<script src="js/questions.js"></script>
<script src="js/main.js"></script>
</html>