Commit 9582c312d721e35a4656f242671033fc8feaf24f
1 parent
3ffbb23c
beautify the texture thing somewhat
Showing
1 changed file
with
74 additions
and
3 deletions
| 1 | <html> | 1 | <html> |
| 2 | <head> | 2 | <head> |
| 3 | - <title>First very simple WebGL example...</title> | 3 | + <title>My first animated and textured WebGL content.</title> |
| 4 | 4 | ||
| 5 | <script src="./gl-matrix-min.js" type="text/javascript"></script> | 5 | <script src="./gl-matrix-min.js" type="text/javascript"></script> |
| 6 | 6 | ||
| @@ -188,7 +188,7 @@ | @@ -188,7 +188,7 @@ | ||
| 188 | function initMatrices(canvas) { | 188 | function initMatrices(canvas) { |
| 189 | modelViewMatrix = mat4.create(); | 189 | modelViewMatrix = mat4.create(); |
| 190 | mat4.translate( | 190 | mat4.translate( |
| 191 | - modelViewMatrix, modelViewMatrix, [0, 0, -8]); | 191 | + modelViewMatrix, modelViewMatrix, [0, 0, -4.6]); |
| 192 | 192 | ||
| 193 | // Create a project matrix with 45 degree field of view | 193 | // Create a project matrix with 45 degree field of view |
| 194 | projectionMatrix = mat4.create(); | 194 | projectionMatrix = mat4.create(); |
| @@ -354,10 +354,81 @@ | @@ -354,10 +354,81 @@ | ||
| 354 | gl_FragColor = texture2D(uSampler, vec2(vTexCoord.s, vTexCoord.t)); | 354 | gl_FragColor = texture2D(uSampler, vec2(vTexCoord.s, vTexCoord.t)); |
| 355 | } | 355 | } |
| 356 | </script> | 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 | </head> | 406 | </head> |
| 358 | 407 | ||
| 359 | <body onLoad="startGl()"> | 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 | </body> | 432 | </body> |
| 362 | </html> | 433 | </html> |
| 363 | <!-- vim: set ts=4 sw=4: --> | 434 | <!-- vim: set ts=4 sw=4: --> |
Please
register
or
login
to post a comment