-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
61 lines (59 loc) · 2.71 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
<!doctype html>
<html><head><title>3d miku</title>
<script src="gl-matrix-min.js"></script>
<script src="tga.js"></script>
<script src="imgloader.js"></script>
<script src="objparser.js"></script>
<script src="miku.js"></script>
<script type="glsl" id="vs">
precision mediump float;
// uniform: プログラムからVertex Shaderに送られてくる定数
uniform mat4 modelviewMatrix; // 平行起動回転行列
uniform mat4 projectionMatrix; // 錐台(frustum)変換行列
// attribute: プログラムからVertex Shaderに送られてくる頂点データ
attribute vec3 vertex; // 頂点座標
attribute vec3 normal; // 頂点の法線ベクトル
attribute vec2 texcoord; // テクスチャ頂点座標
// varying: Vertex ShaderからFragment Shaderに送るデータ
varying vec3 e_normal; // 法線ベクトルと平行移動回転行列との積
varying vec3 eye_v; // 視線ベクトル
varying vec2 texpos; // テクスチャ座標
void main() {
// 頂点座標をクリッピング座標系に変換する
gl_Position = projectionMatrix * modelviewMatrix * vec4(vertex, 1.0);
// 法線ベクトルと視線ベクトルを世界座標系に変換する
e_normal = vec3(modelviewMatrix * vec4(normal, 0.0));
eye_v = (modelviewMatrix * vec4(vertex, 1.0)).xyz;
// テクスチャ座標は素通しする
texpos = texcoord;
}
</script>
<script type="glsl" id="fs">
precision mediump float;
uniform vec3 kdcolor; // 拡散光
uniform vec3 kscolor; // 鏡面光
uniform float nscolor; // 光沢率
uniform float hasTexture; // テクスチャがあるかどうかのフラグ
uniform sampler2D texture; // テクスチャ画像
// varying: Vertex ShaderからFragment Shaderに送られるデータ
varying vec3 e_normal; // 法線ベクトル
varying vec3 eye_v; // 視線ベクトル
varying vec2 texpos; // テクスチャ座標
void main() {
vec3 n = normalize(e_normal); // 正規化された法線ベクトル
vec3 light_v = normalize(vec3(1, 1, 1)); // 正規化された入射光ベクトル
float diffuse = max(dot(light_v, n), 0.0); // 拡散光は入射光ベクトルと法線との内積
float specular = pow(max(dot(-normalize(eye_v), reflect(-light_v, n)), 0.0), nscolor); // 鏡面光は視線ベクトルと反射光ベクトルの内積
float l = 0.5; // 環境光の強さ
if(hasTexture > 0.5) {
vec4 texcolor = texture2D(texture, texpos); // テクスチャ画像から座標の色を取得する
gl_FragColor.rgb = (kdcolor * texcolor.rgb) * (diffuse + l) + kscolor * specular;
gl_FragColor.a = texcolor.a;
} else {
gl_FragColor = vec4(kdcolor * diffuse + kscolor * specular, 1.0) + vec4(kdcolor, 1.0) * vec4(l, l, l, 1.0);
}
}
</script>
</title><body>
<canvas id="canvas" width="512" height="512"></canvas>
</body></html>