webgl-engine/index.html at master · klngbhn/webgl-engine · GitHub

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
<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>WebGL Engine</title>

		<script id="vertex-shader" type="x-shader/x-vertex">
			attribute vec4 vPosition;

			uniform mat4 modelMatrix;
			uniform mat4 projectionMatrix;
			uniform mat4 viewMatrix;

			void main()
			{
				gl_Position = projectionMatrix * viewMatrix * modelMatrix * vPosition;
			}
		</script>
		<script id="fragment-shader" type="x-shader/x-fragment">
			precision mediump float;

			uniform vec4 objectColor;

			void main()
			{
				gl_FragColor = objectColor;
			}
		</script>

		<script id="vertex-shader-lighting" type="x-shader/x-vertex">
			attribute vec4 vPosition;
			attribute vec4 vNormal;
			attribute vec2 vTexCoord;

			// position of the light in world coordinates
			uniform vec3 lightPosition;

			// transformation matrices
			uniform mat4 modelMatrix;
			uniform mat4 projectionMatrix;
			uniform mat4 viewMatrix;

			// pre-computed normal matrix
			uniform mat4 normalMatrix;

			varying vec4 position;
			varying vec4 lightPos;
			varying vec4 normal;

			varying highp vec2 vTextureCoord;

			void main()
			{
				lightPos = viewMatrix * vec4(lightPosition, 1);
				normal = normalMatrix * vNormal;

				mat4 modelViewMatrix = viewMatrix * modelMatrix;
				position = modelViewMatrix * vPosition;

				vTextureCoord = vTexCoord;

				gl_Position = projectionMatrix * position;
			}
		</script>
		<script id="fragment-shader-lighting" type="x-shader/x-fragment">
			precision mediump float;

			uniform sampler2D diffuseMap;

			// ambient intensity
			uniform vec4 Ia;

			// diffuse and specular intensities of the light source
			uniform vec4 Id;
			uniform vec4 Is;

			// ambient, diffuse and specular reflection factors (object specific)
			uniform vec4 ka;
			uniform vec4 kd;
			uniform vec4 ks;

			// constant, linear and quadratic attenuation factors
			const float c1 = 1.0;
			const float c2 = 0.0005;
			const float c3 = 0.000003;

			// specular exponent
			const float n = 5.0;

			varying vec4 position;
			varying vec4 lightPos;
			varying vec4 normal;

			varying highp vec2 vTextureCoord;

			void main()
			{

				// light direction
				vec3 L = normalize((lightPos - position).xyz);
				// normal
				vec3 N = normalize((normal).xyz);

				// view direction
				vec3 V = normalize((-position).xyz);
				// reflection direction
				vec3 R = reflect(-L, N);

				// distance between light source and vertex
				float distance = length(lightPos - position);
				// distance attenuation
				float fAtt = min(1.0 / (c1 + c2 * distance + c3 * pow(distance, 2.0)), 1.0);

				vec4 diffuseColor = texture2D(diffuseMap, vec2(vTextureCoord.s, vTextureCoord.t));
				gl_FragColor = Ia * ka + fAtt * (Id * diffuseColor * max(dot(N, L), 0.0) + Is * ks * pow(max(0.0, dot(R, V)), n));
			}
		</script>

		<script type="text/javascript" src="includes/webgl-utils.js">
		</script>
		<script type="text/javascript" src="includes/initShaders.js">
		</script>
		<script type="text/javascript" src="includes/gl-matrix.js">
		</script>
		<script type="text/javascript" src="main.js">
		</script>
	</head>
	<body>

		<canvas id="gl-canvas" width="512" height="512">
			If you see this, your browser doesn't support WebGL.
		</canvas>

	</body>
</html>