-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnew.html
156 lines (140 loc) · 5.56 KB
/
new.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
<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<!--
Emissive color is used to make the lights seem to glow yellow when
they are turned on.
This code is derived from the Diskworld-2.html
The Shaders are still complex but have been simplified slightly.
-->
<head>
<title>Drift to the top</title>
<style>
body {
background-color: #EEEEEE;
}
label {
white-space: pre;
margin-left: 25px;
}
</style>
<!-- This shader is exactly as provided -->
<script type="x-shader/x-vertex" id="vshader-source">
attribute vec3 a_coords;
attribute vec3 a_normal;
uniform mat4 modelview;
uniform mat4 projection;
varying vec3 v_normal;
varying vec3 v_eyeCoords;
void main() {
vec4 coords = vec4(a_coords,1.0);
vec4 eyeCoords = modelview * coords;
gl_Position = projection * eyeCoords;
v_normal = normalize(a_normal);
v_eyeCoords = eyeCoords.xyz/eyeCoords.w;
}
</script>
<script type="x-shader/x-fragment" id="fshader-source">
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
struct MaterialProperties {
vec4 diffuseColor; // diffuseColor.a is alpha for the fragment
vec3 specularColor;
vec3 emissiveColor;
float specularExponent;
};
struct LightProperties {
bool enabled;
vec4 position;
vec3 color;
float attenuation; // Linear attenuation factor, >= 0. Only point lights attenuate.
vec3 spotDirection; // Note: only a point light can be a spotlight
float spotCosineCutoff; // if <= 0, this is not a spotlight, if >= 1, the light cone shrinks to nothing
float spotExponent;
};
uniform MaterialProperties material; // do two-sided lighting, but assume front and back materials are the same
uniform LightProperties lights[4];
uniform mat3 normalMatrix;
varying vec3 v_normal;
varying vec3 v_eyeCoords;
vec3 lightingEquation( LightProperties light, MaterialProperties material,
vec3 eyeCoords, vec3 N, vec3 V ) {
// N is normal vector, V is direction to viewer.
vec3 L, R; // Light direction and reflected light direction.
float spotFactor = 2.0; // multiplier to account for spotlight
float attenuationFactor = 1.0; // multiplier to account for light attenuation with distance
if ( light.position.w == 0.0 ) {
L = normalize( light.position.xyz );
}
else {
L = normalize( light.position.xyz/light.position.w - v_eyeCoords );
if (light.spotCosineCutoff > 0.0) { // the light is a spotlight
vec3 D = -normalize(light.spotDirection);
float spotCosine = dot(D,L);
if (spotCosine >= light.spotCosineCutoff) {
spotFactor = pow(spotCosine,light.spotExponent);
}
else { // The point is outside the cone of light from the spotlight.
spotFactor = 0.0; // The light will add no color to the point.
}
}
if (light.attenuation > 0.0) {
float dist = distance(eyeCoords,light.position.xyz/light.position.w);
attenuationFactor = 1.0 / (1.0 + dist*light.attenuation);
}
}
if (dot(L,N) <= 0.0) {
return vec3(0.0);
}
vec3 reflection = dot(L,N) * light.color * material.diffuseColor.rgb;
R = -reflect(L,N);
if (dot(R,V) > 0.0) {
float factor = pow(dot(R,V),material.specularExponent);
reflection += factor * material.specularColor * light.color;
}
return spotFactor*attenuationFactor*reflection;
}
void main() {
vec3 normal = normalize( normalMatrix*v_normal );
vec3 viewDirection = normalize( -v_eyeCoords); // (Assumes a perspective projection.)
vec3 color = material.emissiveColor;
for (int i = 0; i < 4; i++) {
if (lights[i].enabled) {
if (gl_FrontFacing) {
color += lightingEquation( lights[i], material, v_eyeCoords,
normal, viewDirection);
}
else {
color += lightingEquation( lights[i], material, v_eyeCoords,
-normal, viewDirection);
}
}
}
gl_FragColor = vec4(color,material.diffuseColor.a);
}
</script>
<script type="text/javascript" src="gl-matrix-min.js"></script>
<script type="text/javascript" src="trackball-rotator.js"></script>
<script type="text/javascript" src="basic-object-models-IFS.js"></script>
<script type="text/javascript" src="adder.js"></script>
</head>
<body onload="init()">
<h2>Drift for the top</h2>
<noscript><hr><h3>This page requires Javascript and a web browser that supports WebGL</h3><hr></noscript>
<p id="message" style="font-weight:bold">Drag your mouse on the model to rotate it. Animate object by checking the checkboxes, and change the scale with the slider.<br>
</p>
<p>
<p>
<label>Scale: <input type="range" min="50" max="200" value="100" class="slider" id="scale"></label>
<span id="demo"></span>%
<label>Animate: <input type="checkbox" id="animCheck" onchange="setAnimating(this.checked)"></label>
<button id="reset" style="margin-left:40px">Reset</button>
</p>
<div>
<canvas width=600 height=480 id="webglcanvas" style="background-color:blue"></canvas>
</div>
</body>
</html>