square.html 1.44 KB
<html>
	<head>
		<title>First very simple WebGL example...</title>
		<link rel="stylesheet" href="css/main.css">
		<script type="text/javascript" src="js/parallax.js"></script>
		<script type="text/javascript" src="js/gl-matrix-min.js"></script>
		<script type="text/javascript" src="js/square.js"></script>

		<script id="square-vertex-shader" type="x-shader/x-vertex">
			attribute vec3 vertexPos;
			uniform mat4 modelViewMatrix;
			uniform mat4 projectionMatrix;
			void main(void) {
				// Return the transformed and projected vertex value
				gl_Position =
					projectionMatrix * modelViewMatrix * vec4(vertexPos, 1.0);
			}
		</script>

		<script id="square-fragment-shader" type="x-shader/x-fragment">
			void main(void) {
				// Return the pixel color: always output white
				gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
			}
		</script>

		<style>
			.result_container {
				height: 200px;
			}
		</style>
	</head>

	<body onLoad="startGl();init()" onScroll="parallax()">
		<div id="background"></div>
		<div id="back" class="text">
			<a href="index.html">back</a>
		</div>
		<div id="content" class="text">
			<h1>First very simple WebGL example...</h1>
			<p>
			This is the beginning, not even 3D. Just initialize the
			GL context and draw a square.
			</p>
			<h2>Result</h2>
			<div class="gl">
				<canvas id="square" width="200" height="200"></canvas>
			</div>
			<p class="result_container"></p>
		</div>
	</body>
</html>
<!-- vim: set ts=4 sw=4: -->