texture.html 2.07 KB
<html>
	<head>
		<title>My first animated and textured WebGL content.</title>
		<link rel="stylesheet" href="css/main.css">
		<script type="text/javascript" src="js/gl-matrix-min.js"></script>
		<script type="text/javascript" src="js/texture.js"></script>

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

		<script id="texture-fragment-shader" type="x-shader/x-fragment">
			precision mediump float;
			varying vec2 vTexCoord;
			uniform sampler2D uSampler;
			void main(void) {
				// Return the pixel color: always output white
				gl_FragColor = texture2D(uSampler, vec2(vTexCoord.s, vTexCoord.t));
			}
		</script>
		<style>
			.texture {
				top: 130px;
			}
		</style>
	</head>

	<body onLoad="startGl()">
		<div id="background"></div>
		<div id="back" class="text">
			<a href="index.html">back</a>
		</div>
		<div class="content text">
			<div class="gl texture">
				<canvas id="cube" width="200", height="200"></canvas>
			</div>
			<h1>My first animated and textured WebGL content.</h1>
			<p>
			Finally my first small steps in the new world of WebGL. It is
			pretty cool to have hardware accelerated, animated 3D objects
			in your page.
			</p>
			<h2>Hidden on purpose.</h2>
			<p>
			This paragraph is hidden on purpose to see how the transparent
			background of the GL canvas behaves if positioned above another
			element. Now, we just fill in some stuff to get the paragraph
			filled with some more stuff. Eventually we will have so much text
			that it becomes big enought for the height of the GL canvas. Well,
			as the canvas is transparant at least the maximum height of the
			cube.
			</p>
			<h2>More to come...</h2>
		</div>
	</body>
</html>
<!-- vim: set ts=4 sw=4: -->