-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlolc.html
146 lines (116 loc) · 4.69 KB
/
lolc.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
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Hello Mesh </title>
<meta charset="utf-8">
<style>
body {
-webkit-touch-callout: none;
-webkit-user-select : none;
}
</style>
</head>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexNormal;
attribute vec3 aVertexPosition;
uniform mat4 uMVMatrix;
uniform mat4 uRTeapotMatrix;
uniform mat3 uNMatrix;
uniform mat4 uPMatrix;
//varying vec4 vColor;
varying vec3 vVertexNormal;
varying vec3 vVertexPosition;
varying vec4 vertexPositionEye4;
void main(void) {
vertexPositionEye4 = uMVMatrix *uRTeapotMatrix* vec4(aVertexPosition, 1.0);
vVertexPosition = vertexPositionEye4.xyz / vertexPositionEye4.w;
vec4 normalRot = uRTeapotMatrix * vec4(aVertexNormal, 1.0);
vVertexNormal = normalize(uNMatrix * normalRot.xyz);
gl_Position = uPMatrix * vertexPositionEye4;
}
</script>
<script id="shader-fs" type="x-shader/x-fragment">
precision highp float;
varying vec4 vColor;
varying vec3 vVertexNormal;
varying vec3 vVertexPosition;
varying vec4 vertexPositionEye4;
uniform mat4 uMVMatrix;
uniform mat4 uRMatrix;
uniform vec3 uAmbientLightColor;
uniform vec3 uDiffuseLightColor;
uniform vec3 uSpecularLightColor;
uniform vec3 uAmbientMaterialColor;
uniform vec3 uDiffuseMaterialColor;
uniform vec3 uSpecularMaterialColor;
uniform vec3 uLightPosition;
uniform float uShininess;
uniform samplerCube uCubeSampler;
uniform float uIsReflective;
void main(void) {
vec4 newLight = uMVMatrix * vec4(uLightPosition, 1.0);
vec3 vectorToLightSource = normalize(newLight.xyz - vVertexPosition);
// Need to rotate the normal for the texture sampling (and mirror it)
//vec4 newNormal = uRMatrix * vec4(vVertexNormal, 1.0);
//newNormal.x = -newNormal.x;
vec4 R = -reflect(-vertexPositionEye4, vec4(vVertexNormal, 1.0));
R = uRMatrix * R;
// Calculate n dot l for diffuse lighting
float diffuseLightWeightning = max(dot(vVertexNormal, vectorToLightSource), 0.0);
// Calculate the reflection vector (r) that is needed for specular light
vec3 reflectionVector = normalize(reflect(-vectorToLightSource, vVertexNormal));
// The camera in eye coordinates is located in the origin and is pointing
// along the negative z-axis. Calculate viewVector (v)
// in eye coordinates as:
// (0.0, 0.0, 0.0) - vertexPositionEye3
vec3 viewVectorEye = -normalize(vVertexPosition);
float rdotv = max(dot(reflectionVector, viewVectorEye), 0.0);
float specularLightWeightning = pow(rdotv, uShininess);
// Sum up all three reflection components and send to the fragment shader
vec4 fColor = vec4(((uAmbientLightColor*uAmbientMaterialColor)
+ (uDiffuseLightColor*uDiffuseMaterialColor) * diffuseLightWeightning
+ (uSpecularLightColor*uSpecularMaterialColor) * specularLightWeightning),1.0);
if(uIsReflective == 1.0)
gl_FragColor = textureCube(uCubeSampler, R.xyz)*0.9 + fColor*0.3;
else
gl_FragColor = fColor;
}
</script>
<script id="shader-vs-skybox" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
uniform mat4 uMVMatrix;
uniform mat3 uNMatrix;
uniform mat4 uPMatrix;
varying vec4 vVertexPosition;
void main(void) {
vVertexPosition = vec4(aVertexPosition, 1.0);
vec4 pos = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
gl_Position = pos.xyww;
}
</script>
<script id="shader-fs-skybox" type="x-shader/x-fragment">
precision mediump float;
varying vec4 vVertexPosition;
uniform samplerCube uCubeSampler;
void main(void) {
vec4 color = textureCube(uCubeSampler, normalize(vVertexPosition).xyz);
gl_FragColor = vec4(color.xyz, 1.0);
}
</script>
<script src="gl-matrix-min.js"></script>
<script src="webgl-utils.js"></script>
<script src="TriMesh.js"></script>
<script src="skybox.js"></script>
<script src="lolc.js"></script>
<body onload="startup();">
<canvas id="myGLCanvas" width="1000" height="800"></canvas>
<div>
<h4> Rotate Around Teapot </h4>
<button type="button" onclick="leftButton()">Left</button><button type="button" onclick="rightButton()">Right</button>
<h4> Rotate Teapot Itself</h4>
<button type="button" onclick="TupButton()">Up</button><p></p>
<button type="button" onclick="TleftButton()">Left</button><button type="button" onclick="TrightButton()">Right</button><p></p>
<button type="button" onclick="TdownButton()">Down</button>
</div>
</body>
</html>