-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
216 lines (183 loc) · 7.93 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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
<html>
<head>
<title>Bugatti Veyron - Auto Show</title>
<link rel="shortcut icon" href="img/favicon.png">
<link rel="stylesheet" type="text/css" href="bower_components/colpick-jQuery-Color-Picker/css/colpick.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="bower_components/threejs/build/three.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/colpick-jQuery-Color-Picker/js/colpick.js"></script>
<script src="bower_components/threejs/examples/js/loaders/BinaryLoader.js"></script>
<script src="bower_components/threejs/examples/js/loaders/TGALoader.js"></script>
<script src="bower_components/stats.js/build/stats.min.js"></script>
<script src="bower_components/threejs/examples/js/libs/dat.gui.min.js"></script>
<script src="bower_components/threejs/examples/js/shaders/CopyShader.js"></script>
<script src="bower_components/threejs/examples/js/postprocessing/EffectComposer.js"></script>
<script src="bower_components/threejs/examples/js/postprocessing/RenderPass.js"></script>
<script src="bower_components/threejs/examples/js/postprocessing/ShaderPass.js"></script>
<script src="bower_components/threejs/examples/js/postprocessing/MaskPass.js"></script>
<script src="bower_components/threejs/examples/js/controls/OrbitControls.js"></script>
</head>
<body>
<div id="loader">
<span></span>
<img src="img/bugatti-logo.png" alt=""/>
</div>
<script type="text/x-glsl" id="vertex-shader">
uniform vec3 lightPosition[4];
varying vec2 vUv;
varying vec3 lVector[4];
varying vec4 lPosition[4];
varying vec3 vNormal;
varying vec3 eyePosition;
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
#ifdef HAS_UV
vUv = uv;
#else
vUv = vec2(0, 0);
#endif
vNormal = normalMatrix * normal;
eyePosition = (modelViewMatrix * vec4(position, 1.0)).xyz;
vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0);
for (int i = 0; i < 4; i++) {
lPosition[i] = viewMatrix * vec4(lightPosition[i], 1.0);
lVector[i] = lPosition[i].xyz - modelViewPosition.xyz;
}
}
</script>
<script type="text/x-glsl" id="fragment-shader">
uniform int type;
uniform vec3 rho;
uniform vec3 ambient;
uniform sampler2D map;
uniform vec3 lightPower;
uniform vec2 textureRepeat;
uniform int isMap;
uniform sampler2D normalMap;
uniform vec3 diffuseColor;
uniform vec3 specColor;
uniform float roughness;
uniform vec3 lightPosition[4];
const float PI = 3.14159265359;
varying vec2 vUv;
varying vec3 lVector[4];
varying vec4 lPosition[4];
varying vec3 vNormal;
varying vec3 eyePosition;
#ifdef HAS_NORMAL_MAP
#extension GL_OES_standard_derivatives : enable
vec3 perturbNormal2Arb(vec3 eye_pos, vec3 defaultNormal) {
vec3 q0 = dFdx(eye_pos.xyz);
vec3 q1 = dFdy(eye_pos.xyz);
vec2 st0 = dFdx(vUv.st);
vec2 st1 = dFdy(vUv.st);
vec3 S = normalize(q0 * st1.t - q1 * st0.t);
vec3 T = normalize(-q0 * st1.s + q1 * st0.s);
vec3 N = normalize(defaultNormal);
vec3 mapN = texture2D(normalMap, vUv * textureRepeat).xyz * 2.0 - 1.0;
mat3 tsn = mat3(S, T, N);
return normalize(tsn * mapN);
}
#endif
vec3 beta(vec3 lightPower, vec3 lVector) {
return (lightPower / (4.0 * PI * length(lVector)));
}
// Cook-Torrance approximation
float G(float LdotH) {
return (1.0 / pow(LdotH, 2.0));
}
// Fresnel reflection, Schlick approximation
vec3 F(float LdotH, vec3 specColor) {
return specColor + (vec3(1.0) - specColor) * pow(1.0 - LdotH, 5.0);
}
// Trowbridge-Reitz
float D(float NdotH, float roughness) {
float A = pow(roughness, 2.0);
float B = PI * pow(pow(NdotH, 2.0) * (A - 1.0) + 1.0, 2.0);
return A / B;
}
void main() {
vec3 outRadiance = vec3(0.0);
vec3 currentRho = rho;
vec3 normal = vNormal;
#ifdef HAS_NORMAL_MAP
normal = perturbNormal2Arb(eyePosition, vNormal);
#endif
#ifdef HAS_MAP
currentRho = texture2D(map, vUv * textureRepeat).xyz;
#endif
if (type == 1) {
// Phong
// http://www.mathematik.uni-marburg.de/~thormae/lectures/graphics1/code/WebGLShaderLightMat/ShaderLightMat.html
for (int i = 0; i < 4; i++) {
vec3 vertPos = vec3(lPosition[i]) / lPosition[i].w;
vec3 lightDir = normalize(lightPosition[i] - vertPos);
vec3 reflectDir = reflect(-lightDir, vNormal);
vec3 viewDir = normalize(-vertPos);
float lambertian = max(dot(lightDir, normal), 0.0);
float specular = 0.0;
if(lambertian > 0.0) {
float specAngle = max(dot(reflectDir, viewDir), 0.0);
specular = pow(specAngle, 4.0);
// according to the rendering equation we would need to multiply
// with the the "lambertian", but this has little visual effect
specular *= lambertian;
}
outRadiance += (lambertian * diffuseColor + specular * specColor);
}
} else if (type == 2) {
// Microfacet
for (int i = 0; i < 4; i++) {
vec3 n = normalize(vNormal);
vec3 v = normalize(-eyePosition);
vec3 l = normalize(lVector[i]);
vec3 h = normalize(l+v);
float NdotH = max(0.000000000001, dot(n, h));
float VdotH = max(0.000000000001, dot(v, h));
float NdotV = max(0.000000000001, dot(n, v));
float NdotL = max(0.000000000001, dot(n, l));
vec3 specular = F(VdotH, specColor) * G(VdotH) * D(NdotH, roughness) / 4.0;
outRadiance += beta(lightPower, lVector[i]) * NdotL * specular;
}
} else {
// Lambert (default)
for (int i = 0; i < 4; i++) {
float dotProduct = dot(normal, normalize(lVector[i]));
float pointLightWeighting = max(dotProduct, 0.0);
outRadiance += (beta(lightPower, lVector[i]) * pointLightWeighting * currentRho / PI);
}
}
outRadiance += ambient;
gl_FragColor = vec4(outRadiance, 1.0);
}
</script>
<script type="text/x-glsl" id="vertex-default-texture">
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
</script>
<script type="text/x-glsl" id="fragment-vignette">
uniform float offset;
uniform float darkness;
uniform sampler2D tDiffuse;
varying vec2 vUv;
void main() {
vec4 texel = texture2D(tDiffuse, vUv);
vec2 uv = (vUv - vec2(0.5) ) * vec2(offset);
gl_FragColor = vec4(mix(texel.rgb, vec3(1.0 - darkness), dot(uv, uv)), texel.a);
}
</script>
<div id="panel">
<div id="logo">
<img src="img/bugatti-logo.png" alt=""/>
</div>
</div>
<div id="controls">
<button class="btn icon-color"></button>
</div>
<script src="js/main.js"></script>
</body>
</html>