-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
193 lines (148 loc) · 5.25 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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<html>
<head>
<title>CSCI-510: Assn 6 - Materials and Shading</title>
<!-- vertex Shader -->
<script id="sphereMap-V" type="x-shader/x-vertex">
#version 300 es
precision mediump float;
// Vertex shader for phong illumination model
// Per vertex shading
// Vertex Attributes
// change here
in vec3 aVertexPosition; // in model coords
in vec2 aUV; // u-v coordinates
// outputs
out vec2 theUV; // pass uv's onto the fragment shader
// for object rotation
uniform vec3 theta;
void main()
{
// Compute the sines and cosines of each rotation
// about each axis
vec3 angles = radians( theta );
vec3 c = cos( angles );
vec3 s = sin( angles );
// rotation matrices
mat4 rx = mat4 ( 1.0, 0.0, 0.0, 0.0,
0.0, c.x, s.x, 0.0,
0.0, -s.x, c.x, 0.0,
0.0, 0.0, 0.0, 1.0 );
mat4 ry = mat4 ( c.y, 0.0, -s.y, 0.0,
0.0, 1.0, 0.0, 0.0,
s.y, 0.0, c.y, 0.0,
0.0, 0.0, 0.0, 1.0 );
mat4 rz = mat4 ( c.z, s.z, 0.0, 0.0,
-s.z, c.z, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 0.0, 1.0 );
// pass uvs to fragment shader
theUV = aUV;
// transform vertex to clip space
gl_Position = rz * ry * rx * vec4 (aVertexPosition, 1.0);
}
</script>
<!-- fragment Shader -->
<script id="sphereMap-F" type="x-shader/x-fragment">
#version 300 es
// Fragment shader for phong illumination model
// Per vertex shading
precision lowp float;
// uvs passed in from vertex shader
in vec2 theUV;
// texture type
uniform int texType;
// the texture to use
uniform sampler2D theTexture;
// Color that is the result of this shader
out vec4 fragColor;
vec3 blue = vec3(0, 0, 1.0);
vec3 green = vec3(0, 1.0, 1);
vec4 procColor(vec2 tex_coords){
float s = tex_coords[0];
float t = tex_coords[1];
return vec4(blue * s + green * (1.0 - t), 1.0);
}
void main(void) {
fragColor = texture (theTexture, theUV);
if (texType == 1) {
fragColor = procColor(theUV);
}
}
</script>
<!-- Matrix library and code for standard transformations -->
<script type="text/javascript" src="gl-matrix-min.js"></script>
<!-- include the shape creation functions -->
<script type="text/javascript" src="./cgIShape.js"></script>
<!-- definition of standard shapes -->
<script type="text/javascript" src="./myShapes-min.js"></script>
<!-- include the main tesselation functions -->
<script type="text/javascript" src="./textureMain.js"></script>
<!-- texture images -->
<img id="world-texture" src="1_earth_16k.jpg" style="display: none;"> </img>
<img id="my-image" src="my_image.jpg" style="display: none;"> </img>
<!-- keyboard functions -->
<script type="text/javascript">
function gotKey (event) {
var key = event.key;
// change object type
if (key == 'c') {
nowShowing = 'Cube';
angles = cube_angles;
}
if (key == 's') {
nowShowing = 'Sphere';
angles = sphere_angles;
}
// change texture
if (key == '1') curTexture = 'globe';
if (key == '2') curTexture = 'myimage';
if (key == '3') curTexture = 'proc';
// incremental rotation
if (key == 'x') angles[0] -= angleInc;
if (key == 'y') angles[1] -= angleInc;
if (key == 'z') angles[2] -= angleInc;
if (key == 'X') angles[0] += angleInc;
if (key == 'Y') angles[1] += angleInc;
if (key == 'Z') angles[2] += angleInc;
draw();
}
</script>
<script type="text/javascript">
// Call init once the webpage has loaded
window.onload = init;
</script>
</head>
<body>
<h1>CSCI-510: Assn 7 - Textures</h1>
<table>
<tr>
<td><canvas id="webgl-canvas" width="500" height="500">
Your browser does not support the HTML5 canvas element.
</canvas></td>
<td>
<h3>Controls</h3>
<table border="1">
<tbody>
<tr>
<td>x, y, z</td>
<td>Rotate the current shape forward about the x, y, or z axis</td>
</tr>
<tr>
<td>X, Y, Z</td>
<td>Rotate the current shape backward about the x, y, or z axis</td>
</tr>
<tr>
<td>c</td>
<td>Select the cube as the current shape</td>
</tr>
<tr>
<td>s</td>
<td>Select the sphere as the current shape</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</body>
</html>