You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
2.2 KiB
70 lines
2.2 KiB
<html>
|
|
<head>
|
|
<title>My first animated and textured WebGL content.</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/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();init()" onScroll="parallax()">
|
|
<div id="back" class="text">
|
|
<a href="index.html">back</a>
|
|
</div>
|
|
<div id="background">
|
|
<div id="content" class="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>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
<!-- vim: set ts=4 sw=4: -->
|