-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
136 lines (97 loc) · 2.81 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
<!DOCTYPE html>
<html>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
attribute vec4 vColor;
attribute vec2 vTexCoord;
varying vec4 fColor;
varying vec2 fTexCoord;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
void main()
{
gl_Position = projectionMatrix*modelViewMatrix*vPosition;
fColor = vColor;
fTexCoord = vTexCoord;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
varying vec4 fColor;
varying vec2 fTexCoord;
uniform sampler2D texture;
void main()
{
gl_FragColor = texture2D( texture, fTexCoord );
// gl_FragColor = fColor;
}
</script>
<script id="sphere-vertex" type="x-shader/x-vertex">
attribute vec4 vPosition;
attribute vec4 vNormal;
uniform vec4 translation;
uniform vec4 scale;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform vec4 ambientProduct, diffuseProduct, specularProduct;
uniform vec4 lightPosition;
uniform float shininess;
uniform mat3 normalMatrix;
uniform bool isPhongLighting;
varying vec3 PN, PL, PE;
void main()
{
vec3 pos = (modelViewMatrix * (vPosition+translation)).xyz;
if(lightPosition.w == 0.0) PL = normalize(lightPosition.xyz);
else PL = normalize( lightPosition.xyz - pos );
PE = -normalize(pos);
PN = normalize( normalMatrix*vNormal.xyz);
gl_Position = projectionMatrix*modelViewMatrix*((vPosition*scale) + translation);
}
</script>
<script id="sphere-fragment" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
uniform vec4 fColor;
uniform bool isPhongLighting;
uniform vec4 ambientProduct;
uniform vec4 diffuseProduct;
uniform vec4 specularProduct;
uniform float shininess;
varying vec3 PN, PL, PE;
vec4 fnColor = vec4(0.0);
void main()
{
if(isPhongLighting)
{
vec3 H = normalize( PL + PE );
vec4 ambient = ambientProduct;
float Kd = max( dot(PL, PN), 0.0 );
vec4 diffuse = Kd*diffuseProduct;
float Ks = pow( max(dot(PN, H), 0.0), shininess );
vec4 specular = Ks * specularProduct;
if( dot(PL, PN) < 0.0 ) specular = vec4(0.0, 0.0, 0.0, 1.0);
fnColor += ambient + diffuse +specular;
fnColor.a = 1.0;
}
gl_FragColor = fColor + fnColor;
// gl_FragColor = fnColor;
}
</script>
<script type="text/javascript" src="webgl-utils.js"></script>
<script type="text/javascript" src="initShaders.js"></script>
<script type="text/javascript" src="MV.js"></script>
<body>
<canvas style="border:1px solid black;" id="gl-canvas" width="512" height="512">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
<img id = "texImage" src = "snow.jpg" hidden></img>
<br />
<button onclick="plus_button()">W</button>
<button onclick="minus_button()">S</button>
<script type="text/javascript" src="script.js"></script>
</body>
</html>