-
Notifications
You must be signed in to change notification settings - Fork 0
/
cube.html
123 lines (102 loc) · 4.15 KB
/
cube.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
<!doctype html>
<!--
cube.html - Demonstrates rendering and animation of simple cube objects
GOAL Display a stack of three cubes, differently colored. The top cube
can be rotated left or right in 90-degree increments using the two
buttons on the page. Clicking a button should trigger a smooth
animation of the top cube rotating to its new orientation; that is,
we increment the angle a little each frame until a full 90-degree
rotation is completed, at which point the angle no longer increments
and the animation stops. Clicking either button while the top cube
is currently animating should ideally do nothing; that is, buttons
are effectively disabled until animation stops (how you do this is
up to you). If you are unable to get the smooth animation working,
then at least have the buttons trigger the appropriate 90-degree
rotation as a single step.
TODO There are various smaller todo items throughout the three source
files for this assignment. In addition, as described above, you must
decide how to manage the start and stop of each animation sequence.
Depending on your approach, this will likely require one or more
new functions rather than simply modifying existing functions.
-->
<html xmlns="http://www.w3.org/1999/hmtl" lang="en">
<head>
<title>Rubik's Cube Visualizer - Evan Van Dam and Cassie Graves</title>
<meta charset="UTF-8"/>
<style type="text/css">
canvas { background: blue; }
</style>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
attribute vec3 vNormal;
attribute vec4 vColor;
varying vec4 fColor;
uniform vec4 ambientProduct, diffuseProduct, specularProduct;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform vec4 lightPosition;
uniform float shininess;
void main()
{
vec3 pos = -(modelViewMatrix * vPosition).xyz;
vec3 light = lightPosition.xyz;
vec3 L = normalize( light - pos );
vec3 E = normalize( -pos );
vec3 H = normalize( L + E );
vec4 NN = vec4(vNormal,0);
// Transform vertex normal into eye coordinates
vec3 N = normalize( (modelViewMatrix*NN).xyz);
// Compute terms in the illumination equation
vec4 ambient = ambientProduct;
float Kd = max( dot(L, N), 0.0 );
vec4 diffuse = Kd*diffuseProduct;
float Ks = pow( max(dot(N, H), 0.0), shininess );
vec4 specular = Ks * specularProduct;
if( dot(L, N) < 0.0 ) {
specular = vec4(0.0, 0.0, 0.0, 1.0);
}
gl_Position = projectionMatrix * modelViewMatrix * vPosition;
fColor = vColor + ambient + diffuse + specular;
fColor.a = 1.0;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
varying vec4 fColor;
void
main()
{
gl_FragColor = fColor;
}
</script>
<script type="text/javascript" src="./Common/webgl-utils.js"></script>
<script type="text/javascript" src="./Common/initShaders.js"></script>
<script type="text/javascript" src="./Common/MV.js"></script>
<script type="text/javascript" src="initGL.js"></script>
<script type="text/javascript" src="cube.js"></script>
</head>
<body style="background-color:black;text-align:center;">
<canvas id="gl-canvas" width="1024" height="768">Oops ...
your browser doesn't support the HTML5 canvas element</canvas>
<div>
<button id="Btn_Ortho">Orthogonal </button>
<button id="Btn_Perspective"> Perspective </button>
<!-- <button id="Btn_Orbit"> Orbit </button> -->
</div>
<div>
<button id="Btn_TopR"> Yellow </button>
<button id="Btn_BotR"> White </button>
<button id="Btn_LeftR"> Green </button>
<button id="Btn_RightR"> Blue </button>
<button id="Btn_RedR"> Red </button>
<button id="Btn_FrontR"> Orange </button>
</div>
<span style="color: white"> Initial Cube: </span>
<input type="file" id="stateFileInput" name="state-file" value="Initial State"/>
<span style="color: white"> Solution: </span>
<input type="file" id="solutionFileInput" name="solution-file" value="Solution"/>
<script type="text/javascript" src="fileReader.js"></script>
</body>
</html>