-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
181 lines (149 loc) · 6.7 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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="/math/vector.js"></script>
<script src="/math/matrix.js"></script>
<script src="/math/quaternion.js"></script>
<script src="/math/interpolator.js"></script>
<script src="/core/libs.js"></script>
<script src="/core/BSpline.js"></script>
<script src="/core/primitives.js"></script>
<script src="/core/quadrics.js"></script>
<script src="/core/program.js"></script>
<script src="/core/transitions.js"></script>
<script src="/core/transform.js"></script>
<script src="/core/globject.js"></script>
<script src="/core/pose.js"></script>
<script src="/characters/baloon.js"></script>
<script src="/characters/brown.js"></script>
<script src="/characters/cloud.js"></script>
<script src="/characters/conny.js"></script>
<script src="/characters/island.js"></script>
<script src="/characters/leonard.js"></script>
<script src="/characters/mountain.js"></script>
<script src="/characters/tree.js"></script>
</head>
<body style="margin: 0">
<canvas id="canvas" style="position: absolute; background-color: black">
</canvas>
<script id="vertexShader" type="x-shader/x-vertex">
attribute vec3 position;
attribute vec3 normal;
uniform mat4 PMatrix, VMatrix, MMatrix;
uniform mat4 lightPMatrix, lightVMatrix;
uniform mat4 normalMatrix;
varying vec3 calculatedPosition;
varying vec3 vNormal;
varying vec3 staticNormal;
varying vec4 vTexCoord;
void main() {
gl_Position = PMatrix * VMatrix * MMatrix * vec4(position, 1.);
calculatedPosition = vec3(gl_Position);
staticNormal = normal;
vNormal = normalize(vec3(normalMatrix * vec4(normal, 1.)));
vTexCoord = lightPMatrix * lightVMatrix * MMatrix * vec4(position, 1.);
vTexCoord.xy /= vTexCoord.w;
vTexCoord.xy *= 0.5;
vTexCoord.xy += 0.5;
vTexCoord.z /= 1000.;
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
precision mediump float;
uniform vec3 color;
uniform vec3 sky_color;
uniform vec3 light_source_direction;
uniform vec3 light_source_ambient_color;
uniform vec3 light_source_diffuse_color;
uniform vec3 light_source_specular_color;
uniform float cellSize;
uniform int spread;
uniform float bias;
uniform float normal_bias;
uniform vec3 mat_ambient_color;
uniform vec3 mat_diffuse_color;
uniform vec3 mat_specular_color;
uniform float mat_shininess;
uniform vec3 view_direction;
uniform float fog_density;
uniform sampler2D u_projectedTexture;
varying vec3 calculatedPosition;
varying vec3 vNormal;
varying vec3 staticNormal;
varying vec4 vTexCoord;
const int MAX_ITER_AVERAGE = 10;
float getLightAmount(vec2 texCoord, float depthFromLight, float bias) {
bool inRange =
texCoord.x >= 0.0 &&
texCoord.x <= 1.0 &&
texCoord.y >= 0.0 &&
texCoord.y <= 1.0;
depthFromLight += bias;
return (inRange && depthFromLight < 1. && depthFromLight < vTexCoord.z)
? 0.
: 1.;
}
float getAverageLightAmount(float bias) {
float lightAmount = 0., depthFromLight;
int count = 0;
for (int i = 0; i <= MAX_ITER_AVERAGE; i++) {
if (i > spread)
break;
for (int j = 0; j <= MAX_ITER_AVERAGE; j++) {
if (j > spread)
break;
vec2 displace1 = cellSize * vec2(i, j), displace2 = cellSize * vec2(i, -j);
depthFromLight = texture2D(u_projectedTexture, vTexCoord.xy + displace1).r;
lightAmount += getLightAmount(vTexCoord.xy + displace1, depthFromLight, bias);
depthFromLight = texture2D(u_projectedTexture, vTexCoord.xy - displace1).r;
lightAmount += getLightAmount(vTexCoord.xy - displace1, depthFromLight, bias);
depthFromLight = texture2D(u_projectedTexture, vTexCoord.xy + displace2).r;
lightAmount += getLightAmount(vTexCoord.xy + displace2, depthFromLight, bias);
depthFromLight = texture2D(u_projectedTexture, vTexCoord.xy - displace2).r;
lightAmount += getLightAmount(vTexCoord.xy - displace2, depthFromLight, bias);
count += 4;
}
}
lightAmount /= float(count);
return lightAmount;
}
void main() {
float unbiasedDepthFromLight = texture2D(u_projectedTexture, vTexCoord.xy).r;
vec3 I_ambient = light_source_ambient_color * mat_ambient_color;
vec3 I_diffuse = light_source_diffuse_color * mat_diffuse_color * max(0., dot(light_source_direction, vNormal));
vec3 reflection_direction = reflect(light_source_direction, vNormal);
vec3 I_specular = light_source_specular_color * mat_specular_color * pow(max(0., dot(reflection_direction, view_direction)), mat_shininess);
float totalBias = (1. - abs(dot(vNormal, light_source_direction))) * normal_bias + bias;
float lightAmount = getAverageLightAmount(totalBias);
vec3 I = I_ambient + lightAmount * (I_diffuse + I_specular);
float distanceFromCamera = length(calculatedPosition);
float fogIntensity = 1. - exp2(-fog_density * fog_density * distanceFromCamera * distanceFromCamera * 1.442695);
fogIntensity = clamp(fogIntensity, 0., 1.);
gl_FragColor = vec4(mix(color * I, sky_color, fogIntensity), 1.);
}
</script>
<script id="shadowVertexShader" type="x-shader/x-vertex">
attribute vec3 position;
attribute vec3 normal;
uniform mat4 PMatrix, VMatrix, MMatrix;
uniform mat4 normalMatrix;
varying vec4 calculatedPosition;
varying vec3 vNormal;
void main() {
gl_Position = PMatrix * VMatrix * MMatrix * vec4(position, 1.);
calculatedPosition = gl_Position;
vNormal = normal;
}
</script>
<script id="shadowFragmentShader" type="x-shader/x-fragment">
precision highp float;
varying vec4 calculatedPosition;
varying vec3 vNormal;
void main() {
gl_FragColor = vec4(calculatedPosition.zzz / 1000., 1.);
}
</script>
<script src="/main.js"></script>
</body>
</html>