WebGL-workshop/index.html at master · egraether/WebGL-workshop · 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html lang=en>
<head>

	<meta name="author" content="Eberhard Gräther">
	<meta name="description" content="WebGL workshop for FH-Salzburg Barcamp 2012">

	<title>WebGL workshop</title>

	<style type="text/css">

		#canvas {
			width : 100%;
			height : 100%;
			position : fixed;
			top : 0px;
			left : 0px;
			z-index : -1;
			background-color : #AAA;
		}

		#error {
			display : none;
		}

	</style>

</head>
<body>

	<div id="error">
		WebGL does not work in your browser. Find out why at
		<a href="http://get.webgl.org">http://get.webgl.org</a>
	</div>

	<canvas id="canvas"></canvas>

	<!--
		vertex shader:
		- processes attribute variables to define the position of each vertex
	-->

	<script id="vertex-shader-script" type="x-shader/x-vertex" charset="utf-8">

		/**
			uniforms: defined for all vertices
		*/

		uniform mat4 uProjectionMatrix;
		uniform mat4 uModelViewMatrix;

		uniform vec3 uAmbientLightColor;

		uniform vec3 uDirectionalLightColor;
		uniform vec3 uDirectionalLightDirection;


		/**
			attributes: defined for each vertex
		*/

		attribute vec3 aVertex;
		attribute vec3 aNormal;


		/**
			varyings:
			- send data to the fragment shader
			- gets interpolated for fragments between vertices
		*/

		varying vec3 vLight;


		/**
			main: needs to set 'gl_Position'
		*/

		void main( void ) {

			gl_Position = uProjectionMatrix * uModelViewMatrix * vec4( aVertex, 1.0 );

			float directionalLightIntensity = dot( aNormal, normalize( uDirectionalLightDirection ) );

			vLight = uAmbientLightColor + uDirectionalLightColor * directionalLightIntensity;

		}

	</script>


	<!--
		fragment shader:
		- sets the color of each pixel
	-->

	<script id="fragment-shader-script" type="x-shader/x-fragment" charset="utf-8">

		/**
			necessary for whatever reason
		*/

		precision mediump float;


		/**
			uniforms: defined for all fragments
		*/

		uniform vec3 uColor;


		/**
			varyings: sent from the vertex shader
		*/

		varying vec3 vLight;


		/**
			main: needs to set 'gl_FragColor'
		*/

		void main(void) {

			gl_FragColor = vec4( uColor * vLight, 1.0 );

		}

	</script>

	<script type="text/javascript" charset="utf-8" src="lib/requestAnimationFrame.js"></script>
	<script type="text/javascript" charset="utf-8" src="lib/glMatrix.js"></script>

	<script type="text/javascript" charset="utf-8" src="src/utilities.js"></script>
	<script type="text/javascript" charset="utf-8" src="src/WebGLUtilities.js"></script>

	<script type="text/javascript" charset="utf-8" src="src/TrackballCamera.js"></script>

	<script type="text/javascript" charset="utf-8" src="src/Geometry.js"></script>
	<script type="text/javascript" charset="utf-8" src="src/Mesh.js"></script>
	<script type="text/javascript" charset="utf-8" src="src/Shader.js"></script>
	<script type="text/javascript" charset="utf-8" src="src/Scene.js"></script>

	<script type="text/javascript" charset="utf-8" src="src/main.js"></script>

	<script type="text/javascript" charset="utf-8">

		window.onload = function() {

			main();

		};

	</script>

</body>
</html>