-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·113 lines (87 loc) · 3.37 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
<!DOCTYPE html>
<html>
<head>
<title>3DTetris</title>
<script type="text/javascript" src="../js/three.js"></script>
<script type="text/javascript" src="../js/physi.js"></script>
<script type='text/javascript' src='../js/Tween.js'></script>
<script type="text/javascript" src="../js/app.js"></script>
</head>
<script id="vertexShader" type="x-shader/x-vertex">
varying vec3 N;
varying vec3 v;
varying vec3 light;
varying vec2 vUv;
uniform float gtime;
void main(void)
{
vUv = uv;
vec3 vertex = position; // position is a built-in variable, always available
N = normalize(normalMatrix*normal); // normal is a built-i variable, always available
vec4 v4 = modelViewMatrix*vec4(vertex,1.0);
v = v4.xyz;
// next we calculate the light position in world Coordinates relative to the sphere
vec4 lightInRelCoords = vec4(500.0,100.0,500.0,1.0);
vec4 light4 = modelViewMatrix*lightInRelCoords;
light = light4.xyz;
// finally we return the position in projection coordinates
gl_Position = projectionMatrix * modelViewMatrix * vec4(vertex,1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
varying vec3 N;
// an interpolated position in world coordinates
varying vec3 v;
// a light position in world coordinates
varying vec3 light;
// an interpolated texture coordinate in the range [0,1]x[0,1]
varying vec2 vUv;
// we also get several uniforms from the javascript program
uniform sampler2D block; // a texture
uniform vec3 ambient; // colors for ambient, diffuse, and specular illumination
uniform vec3 diffuse;
uniform vec3 specular;
uniform float shininess; // the shininess of the specular light
uniform float blinnphong; // 0.0 for phong, >0.0 for blinnphong
uniform float texLevel; // the fraction of pixel light coming from the texture
uniform float repeatBlocks;
void main (void)
{
// illumination vectors
vec3 lightPos = light;
vec3 position = v; // fragment position in world coordinates, with camera at (0,0,0)
vec3 eyeVector = normalize(cameraPosition - position);
vec3 lightVector = normalize(lightPos - position);
vec3 normal = normalize(N);
//ambient illumination
vec4 Iamb = vec4(0.1*ambient,1.0);
// diffuse illumination
vec4 Idiff = vec4(diffuse,1.0) * 0.5 * max(dot(normal,lightVector), 0.0);
//Phong illumination
vec3 reflection = normalize(-reflect(lightVector,normal));
float phong0 = max(dot(reflection,eyeVector),0.0);
float phong = pow(phong0, shininess);
// Blinn-Phone illumination, you need to complete this one!
float BP = phong; // modify this to be the Blinn-Phong illumination, i.e. dot product of Eye+Light with Normal, raised to power
// pick a model Phong or BlinnPhong for the specular illumination intensity, spec
float spec;
if (blinnphong==0.0)
spec = phong;
else
spec = BP;
// calculate the specular illumination
vec4 Ispec = spec*vec4(specular,1.0);
// calculate the texture illumination
vec4 texColor = texture2D(block,vUv*repeatBlocks);
// average the texture with the standard lighting model, to get the fragment color
gl_FragColor = texLevel*texColor + (1.0-texLevel)*(Ispec + Idiff + Iamb);
}
</script>
<body>
<div id="WebGL-output">
</div>
<div id="score" style="position:absolute;left:10%;top:10%;height:50px;width:200px;">
0
</div>
</body>
</html>