-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsolarSystem.html
106 lines (77 loc) · 2.97 KB
/
solarSystem.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
<html>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 v_Norm;
attribute vec4 v_Pos;
uniform vec4 v_Light;
uniform vec4 v_Camera;
uniform mat4 m_Model;
uniform mat4 m_View;
uniform mat4 m_Proj;
varying vec3 o_Norm;
varying vec3 o_Camera;
varying vec3 o_Light;
attribute vec2 vTexCoord;
varying vec2 fTexCoord;
void main()
{
mat4 m_ModelView = m_View * m_Model;
vec4 tmp_Pos = m_ModelView * v_Pos;
fTexCoord = vTexCoord;
o_Norm = normalize(m_ModelView * v_Norm).xyz;
o_Light = (m_View * v_Light).xyz;
o_Camera = normalize(-tmp_Pos).xyz;
//fix to point light
// directional light
if (v_Light.w != 0.0 )
o_Light = o_Light - tmp_Pos.xyz;
gl_Position = m_Proj * tmp_Pos;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
varying vec3 o_Norm;
varying vec3 o_Camera;
varying vec3 o_Light;
varying vec2 fTexCoord;
uniform float col_Shininess;
uniform vec3 col_Ambient, col_Diffuse, col_Specular, col_Emission;
uniform vec3 light_Ambient, light_Diffuse, light_Specular;
uniform sampler2D texture;
void main()
{
vec3 N = normalize(o_Norm);
vec3 E = normalize(o_Camera);
vec3 L = normalize(o_Light);
vec3 H = normalize(L + E);
vec3 ambient = col_Ambient * light_Ambient;
float Kd = max(dot(L, N), 0.0);
vec3 diffuse = Kd * col_Diffuse * light_Diffuse;
float Ks = pow(max(dot(N, H), 0.0), col_Shininess);
vec3 specular = Ks * col_Specular * light_Specular;
// discard the specular highlight if the light's behind the vertex
if (dot(L, N) < 0.0)
specular = vec3(0.0, 0.0, 0.0);
gl_FragColor.xyz = (ambient + diffuse + col_Emission)* texture2D( texture, fTexCoord ).rgb;
gl_FragColor.a = 1.0;
}
</script>
<script type="text/javascript" src="basic files\webgl-utils.js"></script>
<script type="text/javascript" src="basic files\InitShaders.js"></script>
<script type="text/javascript" src="C:\Users\user\Desktop\uni\4th year fall\comp graph\basic files\MV.js"></script>
<script type="text/javascript" src="solarSystem.js"></script>
<body>
<canvas id="gl-canvas" width="1350" height="640">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
<img id = "sun" src = "textures\sun.jpg" crossorigin="anonymous" hidden></img>
<img id = "earth" src = "textures\earth.jpg" crossorigin="anonymous" hidden></img>
<img id = "jupiter" src = "textures\jupiter.jpg" crossorigin="anonymous" hidden></img>
<img id = "mars" src = "textures\mars.jpg" crossorigin="anonymous" hidden></img>
<img id = "venus" src = "textures\venus.jpg" crossorigin="anonymous" hidden></img>
<img id = "mercury" src = "textures\mercury.jpg" crossorigin="anonymous" hidden></img>
<img id = "neptune" src = "textures\neptune.jpg" crossorigin="anonymous" hidden></img>
<img id = "saturn" src = "textures\saturn.jpg" crossorigin="anonymous" hidden></img>
<img id = "uranus" src = "textures\uranus.jpg" crossorigin="anonymous" hidden></img>
<br/>
</body>
</html>