Commit 9582c312d721e35a4656f242671033fc8feaf24f
1 parent
3ffbb23c
beautify the texture thing somewhat
Showing
1 changed file
with
74 additions
and
3 deletions
| 1 | 1 | <html> |
| 2 | 2 | <head> |
| 3 | - <title>First very simple WebGL example...</title> | |
| 3 | + <title>My first animated and textured WebGL content.</title> | |
| 4 | 4 | |
| 5 | 5 | <script src="./gl-matrix-min.js" type="text/javascript"></script> |
| 6 | 6 | |
| ... | ... | @@ -188,7 +188,7 @@ |
| 188 | 188 | function initMatrices(canvas) { |
| 189 | 189 | modelViewMatrix = mat4.create(); |
| 190 | 190 | mat4.translate( |
| 191 | - modelViewMatrix, modelViewMatrix, [0, 0, -8]); | |
| 191 | + modelViewMatrix, modelViewMatrix, [0, 0, -4.6]); | |
| 192 | 192 | |
| 193 | 193 | // Create a project matrix with 45 degree field of view |
| 194 | 194 | projectionMatrix = mat4.create(); |
| ... | ... | @@ -354,10 +354,81 @@ |
| 354 | 354 | gl_FragColor = texture2D(uSampler, vec2(vTexCoord.s, vTexCoord.t)); |
| 355 | 355 | } |
| 356 | 356 | </script> |
| 357 | + <style> | |
| 358 | + * { | |
| 359 | + font-family: Verdana, sans-serif; | |
| 360 | + } | |
| 361 | + .gl { | |
| 362 | + position: absolute; | |
| 363 | + top: 130px; | |
| 364 | + left: 50%; | |
| 365 | + transform: translate(-50%, 0); | |
| 366 | + width: 200px; | |
| 367 | + height: 200px; | |
| 368 | + z-index: 2; | |
| 369 | + } | |
| 370 | + .content { | |
| 371 | + position: fixed; | |
| 372 | + top: 50%; | |
| 373 | + left: 50%; | |
| 374 | + /* bring your own prefixes */ | |
| 375 | + transform: translate(-50%, -50%); | |
| 376 | + width: 800px; | |
| 377 | + background: white; | |
| 378 | + padding: 10px; | |
| 379 | + border-style: solid; | |
| 380 | + border-color: rgb(100, 190, 12); | |
| 381 | + border-radius: 30px; | |
| 382 | + border-width: 3px; | |
| 383 | + z-index: 1; | |
| 384 | + } | |
| 385 | + #background { | |
| 386 | + position: absolute; | |
| 387 | + left: 0px; | |
| 388 | + top: 0px; | |
| 389 | + width: 1920px; | |
| 390 | + height: 1200px; | |
| 391 | + background-image: url(./background1.jpg); | |
| 392 | + padding: 0px; | |
| 393 | + margin: 0px; | |
| 394 | + z-index: -1; | |
| 395 | + } | |
| 396 | + h1,h2,h3,h4,h5,h6 { | |
| 397 | + font-weight: normal; | |
| 398 | + } | |
| 399 | + h1,h4 { | |
| 400 | + text-decoration: underline; | |
| 401 | + } | |
| 402 | + h1 { | |
| 403 | + font-size: x-large; | |
| 404 | + } | |
| 405 | + </style> | |
| 357 | 406 | </head> |
| 358 | 407 | |
| 359 | 408 | <body onLoad="startGl()"> |
| 360 | - <canvas id="cube" width="500" height="500"></canvas> | |
| 409 | + <div id="background"></div> | |
| 410 | + <div class="content"> | |
| 411 | + <div class="gl"> | |
| 412 | + <canvas id="cube" width="200", height="200"></canvas> | |
| 413 | + </div> | |
| 414 | + <h1>My first animated and textured WebGL content.</h1> | |
| 415 | + <p> | |
| 416 | + Finally my first small steps in the new world of WebGL. It is | |
| 417 | + pretty cool to have hardware accelerated, animated 3D objects | |
| 418 | + in your page. | |
| 419 | + </p> | |
| 420 | + <h2>Hidden on purpose.</h2> | |
| 421 | + <p> | |
| 422 | + This paragraph is hidden on purpose to see how the transparent | |
| 423 | + background of the GL canvas behaves if positioned above another | |
| 424 | + element. Now, we just fill in some stuff to get the paragraph | |
| 425 | + filled with some more stuff. Eventually we will have so much text | |
| 426 | + that it becomes big enought for the height of the GL canvas. Well, | |
| 427 | + as the canvas is transparant at least the maximum height of the | |
| 428 | + cube. | |
| 429 | + </p> | |
| 430 | + <h2>More to come...</h2> | |
| 431 | + </div> | |
| 361 | 432 | </body> |
| 362 | 433 | </html> |
| 363 | 434 | <!-- vim: set ts=4 sw=4: --> | ... | ... |
Please
register
or
login
to post a comment