-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
106 lines (87 loc) · 3.99 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
<!DOCTYPE html>
<html>
<head>
<title>RubiksCube</title>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 positionVertex;
attribute vec4 normalVertex;
attribute vec4 vertexColor;
varying vec4 lightColor;
uniform vec4 ambientProduct, diffuseProduct, specularProduct;
uniform mat4 transformation;
uniform mat4 projection;
uniform vec4 lightPosition;
uniform float shininess;
void main()
{
vec3 pos = -(transformation * positionVertex).xyz;
vec3 light = lightPosition.xyz;
vec3 L = normalize( light - pos );
vec3 E = normalize( -pos );
vec3 H = normalize( L + E );
vec3 N = normalize( (transformation*normalVertex).xyz);
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 = projection * transformation * positionVertex;
lightColor = ambient + diffuse + specular + vertexColor;
lightColor.a = 1.0;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
varying vec4 lightColor;
void
main()
{
gl_FragColor = lightColor;
}
</script>
<script type="text/javascript" src="js/Color.js"></script>
<script type="text/javascript" src="webgl-utils/shapes/Shape.js"></script>
<script type="text/javascript" src="webgl-utils/Light.js"></script>
<script type="text/javascript" src="webgl-utils/Material.js"></script>
<script type="text/javascript" src="webgl-utils/Camera.js"></script>
<script type="text/javascript" src="webgl-utils/Model.js"></script>
<script type="text/javascript" src="webgl-utils/shapes/3d/FancySolidCube.js"></script>
<script type="text/javascript" src="vendor/js/webgl-utils.js"></script>
<script type="text/javascript" src="vendor/js/initShaders.js"></script>
<script type="text/javascript" src="vendor/js/mv.js"></script>
<script type="text/javascript" src="webgl-utils/shapes/3d/SolidCuboid.js"></script>
<script type="text/javascript" src="webgl-utils/shapes/3d/SolidCube.js"></script>
<script type="text/javascript" src="js/RubiksCube.js"></script>
<script type="text/javascript" src="js/Direction.js"></script>
<script type="text/javascript" src="webgl-utils/shapes/CubeColors.js"></script>
<script type="text/javascript" src="js/Face.js"></script>
<script type="text/javascript" src="js/Cubie.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="webgl-utils/Scene.js"></script>
<script type="text/javascript" src="js/initButtons.js"></script>
<script type="text/javascript" src="js/onload.js"></script>
</head>
<body style="background-color:grey;text-align:center">
<canvas id="canvasA" width="512" height="512" style="background: blue">Sorry, your browser does not support WebGL.</canvas>
<canvas id="canvasB" width="512" height="512" style="background: blue">Sorry, your browser does not support WebGL.</canvas>
<div>
<button id="spinR">Turn Red</button>
<button id="spinB">Turn Blue</button>
<button id="spinW">Turn White</button>
<button id="spinO">Turn Orange</button>
<button id="spinY">Turn Yellow</button>
<button id="spinG">Turn Green</button>
</br></br>
<button id="zoomIn">Zoom In</button>
<button id="zoomOut">Zoom Out</button>
</br></br>
<input type="file" id="state" />
<input type="file" id="solve" />
</div>
</body>
</html>