-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
105 lines (81 loc) · 3.24 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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>Cubeworld</title>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 aVertexPosition;
attribute vec3 aNormal;
attribute vec2 aTextureCoord;
uniform mat4 uModelMatrix;
uniform mat4 uViewMatrix;
uniform mat4 uProjectionMatrix;
uniform mat4 uNormalMatrix;
varying vec2 vTextureCoord;
varying vec4 vPosition;
varying vec4 vNormal;
const int NUM_LIGHTS = 3;
uniform vec3 uLightPosition[NUM_LIGHTS];
varying vec4 vLightPos[NUM_LIGHTS];
void main() {
mat4 modelViewMatrix = uViewMatrix * uModelMatrix;
vNormal = uNormalMatrix * vec4(aNormal, 0.0);
// vLightPos = uViewMatrix * vec4(uLightPosition, 1);
for(int i=0; i < NUM_LIGHTS; i++){
vLightPos[i] = vec4(uLightPosition[i], 1);
}
vPosition = uModelMatrix * aVertexPosition;
//vPosition = modelViewMatrix * aVertexPosition;
vTextureCoord = aTextureCoord;
gl_Position = uProjectionMatrix * uViewMatrix * vPosition;
//gl_Position = uProjectionMatrix * vPosition;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
varying vec2 vTextureCoord;
varying vec4 vPosition;
varying vec4 vNormal;
const int NUM_LIGHTS = 3;
varying vec4 vLightPos[NUM_LIGHTS];
uniform sampler2D uSampler;
uniform vec4 uIa;
uniform vec4 uId[NUM_LIGHTS];
uniform vec4 uIs[NUM_LIGHTS];
uniform vec4 uKa;
uniform vec4 uKd;
uniform vec4 uKs;
uniform float uSpecularExponent;
const float c1 = 1.0;
const float c2 = 0.0005;
const float c3 = 0.000003;
void main() {
vec4 finalColor = vec4(0.0,0.0,0.0,1.0);
vec3 N = normalize(vNormal.xyz);
vec3 V = normalize((-vPosition).xyz);
for(int i=0; i < NUM_LIGHTS; i++){
vec3 L = normalize((vLightPos[i] - vPosition).xyz);
vec3 R = reflect(-L, N);
float d = distance(vLightPos[i], vPosition);
float fAtt = min(1.0/c1 + c2 * d + c3 * pow(d, 2.0), 1.0);
finalColor += fAtt * (uId[i] * texture2D(uSampler, vTextureCoord) * max(dot(N, L), 0.0) + uIs[i] * uKs * pow(max(dot(R, V), 0.0), uSpecularExponent));
}
gl_FragColor = uIa * uKa + finalColor;
}
</script>
<script type="text/javascript" src="common/initShaders.js"></script>
<script type="text/javascript" src="common/gl-matrix.js"></script>
</head>
<body>
<canvas id="gl-canvas" width="1920" height="1080">
If you see this, your browser doesn't support WebGL.
</canvas>
<script type="text/javascript" src="gl.js"></script>
<script type="text/javascript" src="helper.js"></script>
<script type="text/javascript" src="camera.js"></script>
<script type="text/javascript" src="cube.js"></script>
<script type="text/javascript" src="light.js"></script>
<script type="text/javascript" src="game.js"></script>
<script type="text/javascript" src="input.js"></script>
</body>
</html>