-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
154 lines (123 loc) · 4.46 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
<html>
<head>
<title>MIDI WebGL</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css">
<!-- Fragment shader program -->
<script id="sandboxFragmentShader" type="x-shader/x-fragment">
#ifdef GL_ES
precision mediump float;
#endif
uniform float time;
uniform vec2 resolution;
void main( void ) {
// background thing
vec2 position = ( gl_FragCoord.xy / resolution.xy * 2.0) - 1.0;
vec4 veca = vec4((mod(atan(position.x ,position.y) / 1.6, 0.1) * 15.0 + 0.5) * 0.6);
vec4 vecb = vec4(0.2, sin(time), 0.3, 1.0) * (1.5- length(position));
float l = (length(vec2(position.x , position.y)));
vec4 color = veca * vecb * l;
// spinny thing
float th = atan(position.y, position.x) + time*0.5;
th = mod(th, 3.14159*0.125);
// color things
float rmod = th * 0.2;
float gmod = th * 0.5;
float bmod = th * 1.0;
gl_FragColor = vec4(color.x + rmod, color.y + gmod, color.z + bmod, 1.0);
}
</script>
<!-- Vertex shader program -->
<script id="sandboxVertexShader" type="x-shader/x-vertex">
attribute vec3 position;
uniform mat4 modelview, projection;
void main(void) {
gl_Position = projection * modelview * vec4(position, 1.0);
}
</script>
<script id="3DfragmentShader" type="x-shader/x-fragment">
#ifdef GL_ES
precision mediump float;
#endif
varying vec3 Position;
varying vec3 Normal;
varying vec2 TexCoord;
uniform sampler2D Tex1;
struct LightInfo {
vec4 LightPosition; // Light position in eye coords.
vec3 LightIntensity; // A,D,S intensity
bool LightEnabled;
};
uniform LightInfo Light;
struct MaterialInfo {
vec3 Ka; // Ambient reflectivity
vec3 Kd; // Diffuse reflectivity
vec3 Ks; // Specular reflectivity
float Shininess; // Specular shininess factor
};
uniform MaterialInfo Material;
void phongModel( vec3 pos, vec3 norm, out vec3 ambAndDiff, out vec3 spec ) {
vec3 s = normalize(vec3(Light.LightPosition));
vec3 v = normalize(-pos.xyz);
vec3 r = reflect(-s, norm);
vec3 ambient = Light.LightIntensity * Material.Ka;
float sDotN = max(dot(s,norm), 0.0);
vec3 diffuse = Light.LightIntensity * Material.Kd * sDotN;
spec = vec3(0.0);
if(sDotN > 0.0)
spec = Light.LightIntensity * Material.Ks *
pow(max(dot(r,v), 0.0), Material.Shininess);
ambAndDiff = ambient + diffuse;
}
void main() {
vec4 texColor = texture2D(Tex1, TexCoord);
//vec4 texColor = vec4(0.0, 0.3, 0.0, 1.0);
if(Light.LightEnabled){
vec3 ambAndDiff, spec;
phongModel( Position, Normal, ambAndDiff, spec );
gl_FragColor = (vec4( ambAndDiff, 1.0 ) * texColor) + vec4(spec,1.0);
} else{
/*
* For efficiency, only check for alpha discards
* when lighitng is turned off
* (otherwise we just assume we don't want
* transparency)
*/
if(texColor.w == 0.0)
discard;
gl_FragColor = (texColor);
}
}
</script>
<script id="3DvertexShader" type="x-shader/x-vertex">
attribute vec3 VertexPosition;
attribute vec3 VertexNormal;
attribute vec2 VertexTexCoord;
// position in world coordinates (for lighting)
varying vec3 Position;
varying vec3 Normal;
varying vec2 TexCoord;
uniform mat4 ModelViewMatrix;
uniform mat4 ProjectionMatrix;
uniform mat3 NormalMatrix;
void main()
{
TexCoord = vec2(VertexTexCoord.x, VertexTexCoord.y);
Normal = normalize(NormalMatrix * VertexNormal);
Position = vec3(ModelViewMatrix * vec4(VertexPosition,1.0));
mat4 MVP = ProjectionMatrix * ModelViewMatrix;
gl_Position = MVP * vec4(VertexPosition,1.0);
}
</script>
<script src="js/jquery-1.10.0.js" type="text/javascript"></script>
<script src="js/sylvester.js" type="text/javascript"></script>
<script src="js/glUtils.js" type="text/javascript"></script>
<script src="js/modelloader.js" type="text/javascript"></script>
<script src="js/modelrenderer.js" type="text/javascript"></script>
<script src="js/textureloader.js" type="text/javascript"></script>
<script src="js/sandbox.js" type="text/javascript"></script>
<script src="js/renderer.js" type="text/javascript"></script>
<script src="js/runner.js" type="text/javascript"></script>
</head>
<body onload="start()"></body>
</html>