-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.html
193 lines (152 loc) · 5.45 KB
/
main.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
<!DOCTYPE html>
<html>
<script id="vertex-shader" type="x-shader/x-vertex">#version 300 es
in vec4 vPosition;
in vec3 vNormal;
//in vec4 vColor;
in vec2 vTexCoord;
out vec3 pos; //vertex position in eye coordinates
out vec3 Lpos; //light position in eye coordinates
out vec3 N; //vertex normal in eye coordinates
//out vec4 fColor;
out vec2 fTexCoord;
//uniform vec4 ambientProduct, diffuseProduct, specularProduct;
uniform mat4 modelViewMatrix;
uniform mat4 normalMatrix;
uniform mat4 projectionMatrix;
uniform vec4 lightPosition;
uniform float shininess;
void
main()
{
// Transform vertex normal into eye coordinates
pos = (modelViewMatrix * vPosition).xyz;
N = normalize( (normalMatrix*vec4(vNormal,0.0)).xyz);
// Pass through light position in eye coordinates
Lpos = lightPosition.xyz;
gl_Position = projectionMatrix * modelViewMatrix * vPosition;
//Transform texture into eye coordinates
fTexCoord = vTexCoord;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">#version 300 es
precision mediump float;
uniform sampler2D texture1; //space painting
uniform sampler2D texture2; //black and white painting
uniform int blendTextures;
uniform vec4 ambientProduct, diffuseProduct, specularProduct;
uniform float shininess;
//The following uniforms are for funkyColorShaded and funkyColor functions
uniform vec2 iResolution; // viewport resolution (in pixels)
uniform float iTime; // shader playback time (in seconds)
//in vec4 fColor;
in vec2 fTexCoord;
in vec3 pos;
in vec3 Lpos;
in vec3 N;
layout(location=0) out vec4 fragColor ;
//ADS function
vec4 ads(vec3 pos, vec3 Lpos, vec3 fN) {
vec3 N = normalize(fN);
vec3 L = normalize(Lpos - pos);
vec3 V = normalize(-pos);
vec3 H = normalize(V+L); // Blinn phong half vector
//terms in illumination equation
vec4 ambient = ambientProduct;
float lightDotNormal = max( dot(L,N), 0.0);
vec4 diffuse = vec4(0.0, 0.0, 0.0, 1.0);
vec4 specular = vec4(0.0, 0.0, 0.0, 1.0);
diffuse = lightDotNormal*diffuseProduct;
float reflectedDotViewShiny = pow(max(dot(N,H), 0.0), 30.0);
specular = reflectedDotViewShiny*specularProduct;
if (dot(L,N)<0.0){
specular = vec4(0.0, 0.0, 0.0, 1.0);
}
vec4 color = ambient + diffuse + specular;
color.a = 1.0;
return color;
}
/* funkyColorShaded: FUNCTION in order to map color to Time *
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ *
* Argument: 1. fragColor
2. fTexCoord
3. vec3 pos
* Function: This function maps color to time and dims farther pos.z and makes
* closer pos.z values brighter. It also dims and brightens everything
* with the amplitude made into a sin function. This is done to give a
* a sense of night before the sun comes up, then day and then night again.
*/
void funkyColorShaded(out vec4 fragColor, in vec2 fTexCoord, in vec3 pos )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fTexCoord/iResolution.xy;
//Make a float variable that is incrementally added over time such that the
//background gets lighter as the sun comes up
float brightnessVarience = sin((3.14/32.0)*(iTime-13.0));
// Time varying pixel color
vec3 col = brightnessVarience+0.5*sin(iTime+uv.xyx+vec3(0,2,4));
// Output to screen
fragColor = vec4(col,1.0);
//shade the z component of fragColor based on how far away it is To give a sense of depth
pos.z /= 28.0;
fragColor.x += pos.z;
fragColor.y += pos.z;
fragColor.z += pos.z;
}
/* funkyColor: FUNCTION in order to map color to Time *
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ *
* Argument: 1. fragColor
* 2. fTexCoord
* Function: This function maps color to time.
*/
void funkyColor( out vec4 fragColor, in vec2 fTexCoord )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fTexCoord/iResolution.xy;
// Time varying pixel color
vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));
// Output to screen
fragColor = vec4(col,1.0);
}
void
main()
{
if( blendTextures == 0)
{
funkyColorShaded(fragColor, fTexCoord.xy, pos);
}
else if (blendTextures == 1)
{ //utilize the option of coloring the outside and inside (I use this for the cone)
if (gl_FrontFacing) {
fragColor = ads(pos, Lpos.xyz, N);
} else {
funkyColorShaded(fragColor, fTexCoord.xy, pos);
}
} else if (blendTextures == 2) { // if blendTextures =2, then call funkyColorShaded for a special effect
if (gl_FrontFacing) {
fragColor = texture(texture1, fTexCoord);
} else {
funkyColorShaded(fragColor, fTexCoord.xy, pos);
}
} else if (blendTextures ==3){
fragColor= texture(texture2, fTexCoord);
} else if (blendTextures ==4){
funkyColor(fragColor, fTexCoord.xy);
} else {
fragColor = mix(texture( texture1, fTexCoord ), texture( texture2, fTexCoord ), 0.5);
}
}
</script>
<script type="text/javascript" src="Common/webgl-utils.js"></script>
<script type="text/javascript" src="Common/initShaders.js"></script>
<script type="text/javascript" src="Common/MV.js"></script>
<script type="text/javascript" src="objects.js"></script>
<script type="text/javascript" src="main.js"></script>
<body>
<canvas id="gl-canvas" width="512" height="512">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
<br/>
<br/>
</body>
</html>