-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
89 lines (79 loc) · 2.86 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
<!DOCTYPE html><html>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 a_position;
attribute vec3 a_normal;
uniform vec3 u_lightWorldPosition;
uniform vec3 u_viewWorldPosition;
uniform mat4 u_world;
uniform mat4 u_worldViewProjection;
uniform mat4 u_worldInverseTranspose;
// For Fragment
varying vec3 v_normal;
varying vec3 v_surfaceToLight;
varying vec3 v_surfaceToView;
void
main()
{
gl_Position = u_worldViewProjection * a_position;
v_normal = mat3(u_worldInverseTranspose) * a_normal;
vec3 surfaceWorldPosition = (u_world * a_position).xyz;
v_surfaceToLight = u_lightWorldPosition - surfaceWorldPosition;
v_surfaceToView = u_viewWorldPosition - surfaceWorldPosition;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
varying vec3 v_normal;
varying vec3 v_surfaceToLight;
varying vec3 v_surfaceToView;
uniform vec4 u_color;
uniform float u_shininess;
uniform vec3 u_lightDirection;
uniform float u_innerLimit; // in dot space
uniform float u_outerLimit; // in dot space
uniform int isSpot;
void
main()
{
// calculate light
vec3 normal = normalize(v_normal);
vec3 surfaceToLightDirection = normalize(v_surfaceToLight);
gl_FragColor = u_color;
vec3 surfaceToViewDirection = normalize(v_surfaceToView);
vec3 halfVector = normalize(surfaceToLightDirection + surfaceToViewDirection);
float dotFromDirection = dot(surfaceToLightDirection,-u_lightDirection);
float inLight = smoothstep(u_outerLimit, u_innerLimit, dotFromDirection);
float light = inLight * dot(normal, surfaceToLightDirection);
float specular = inLight * pow(dot(normal, halfVector), u_shininess);
gl_FragColor.rgb *= light;
//gl_FragColor.rgb += specular;
}
</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>
<script type="text/javascript" src="input.js"></script>
<script type="text/javascript" src="utility.js"></script>
<script type="text/javascript" src="object.js"></script>
<script type="text/javascript" src="main.js"></script>
<body>
<canvas id="gl-canvas" width="600" height="600">>
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
<div class="slidecontainer">
<input type="range" min="-76" max="76" value="0" class="range" id="upperArmRotation">
</div>
<b>Rotate Upper Arm</b>
<div class="slidecontainer">
<input type="range" min="-29" max="29" value="0" class="range" id="lowerArmRotation">
</div>
<b>Rotate Lower Arm</b>
<div class="slidecontainer">
<input type="range" min="-35" max="35" value="0" class="range" id="baseRotation">
</div>
<b>Rotate Base</b>
<p></p>
<input type="checkbox" id ="allowMouse"> Allow Mouse Click<br>
<button class="button" id = "play_anim">Play Animation</button>
</body>
</html>