texture.html
2.19 KB
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
<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: -->