|
|
|
@ -1,6 +1,6 @@ |
|
|
|
<html> |
|
|
|
<head> |
|
|
|
<title>First very simple WebGL example...</title> |
|
|
|
<title>My first animated and textured WebGL content.</title> |
|
|
|
|
|
|
|
<script src="./gl-matrix-min.js" type="text/javascript"></script> |
|
|
|
|
|
|
|
@ -188,7 +188,7 @@ |
|
|
|
function initMatrices(canvas) { |
|
|
|
modelViewMatrix = mat4.create(); |
|
|
|
mat4.translate( |
|
|
|
modelViewMatrix, modelViewMatrix, [0, 0, -8]); |
|
|
|
modelViewMatrix, modelViewMatrix, [0, 0, -4.6]); |
|
|
|
|
|
|
|
// Create a project matrix with 45 degree field of view |
|
|
|
projectionMatrix = mat4.create(); |
|
|
|
@ -354,10 +354,81 @@ |
|
|
|
gl_FragColor = texture2D(uSampler, vec2(vTexCoord.s, vTexCoord.t)); |
|
|
|
} |
|
|
|
</script> |
|
|
|
<style> |
|
|
|
* { |
|
|
|
font-family: Verdana, sans-serif; |
|
|
|
} |
|
|
|
.gl { |
|
|
|
position: absolute; |
|
|
|
top: 130px; |
|
|
|
left: 50%; |
|
|
|
transform: translate(-50%, 0); |
|
|
|
width: 200px; |
|
|
|
height: 200px; |
|
|
|
z-index: 2; |
|
|
|
} |
|
|
|
.content { |
|
|
|
position: fixed; |
|
|
|
top: 50%; |
|
|
|
left: 50%; |
|
|
|
/* bring your own prefixes */ |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
width: 800px; |
|
|
|
background: white; |
|
|
|
padding: 10px; |
|
|
|
border-style: solid; |
|
|
|
border-color: rgb(100, 190, 12); |
|
|
|
border-radius: 30px; |
|
|
|
border-width: 3px; |
|
|
|
z-index: 1; |
|
|
|
} |
|
|
|
#background { |
|
|
|
position: absolute; |
|
|
|
left: 0px; |
|
|
|
top: 0px; |
|
|
|
width: 1920px; |
|
|
|
height: 1200px; |
|
|
|
background-image: url(./background1.jpg); |
|
|
|
padding: 0px; |
|
|
|
margin: 0px; |
|
|
|
z-index: -1; |
|
|
|
} |
|
|
|
h1,h2,h3,h4,h5,h6 { |
|
|
|
font-weight: normal; |
|
|
|
} |
|
|
|
h1,h4 { |
|
|
|
text-decoration: underline; |
|
|
|
} |
|
|
|
h1 { |
|
|
|
font-size: x-large; |
|
|
|
} |
|
|
|
</style> |
|
|
|
</head> |
|
|
|
|
|
|
|
<body onLoad="startGl()"> |
|
|
|
<canvas id="cube" width="500" height="500"></canvas> |
|
|
|
<div id="background"></div> |
|
|
|
<div class="content"> |
|
|
|
<div class="gl"> |
|
|
|
<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: --> |
