WebGL Textures & Vertices

Beginner's Guide

Page Six

Sample Web Page

Start with the Web Page

To display an image full size across a square plane, include Javascript files GLControl.js, GLEntity.js, and GLSquare.js. Place the files between script tags in the header section of a Web page. Add a body onload event listener. The listener creates a new reference of the GLSquare class, as follows.

new GLSquare(
 'assets/lighthouse.jpg'
)

Each example Web page includes a 512 x 512 square HTML5 canvas element with id of cv. Add two buttons, with id of animStart and animStop.

The following listing includes a simplified Web page to display the Lighthouse Texture Map project. To display the book's other sample projects, substitute the last script in the list named GLSquare.js, for the book's other JavaScript files such as GLSquareCrop.js, GLSquareRepeat.js, GLSquareTile.js and GLTexProcedure.js. Substitute the body's onload event listener with new GLSquareCrop(file name), new GLSquareRepeat(file name), new GLSquareTile(file name), or new GLTexProcedure().

<!doctype HTML>

<html>

<head> 
 
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />

 <title>WebGL Texture</title>
 
 <meta 
  name="description"  
  content="WebGL Texture."
 />

 <script type="text/javascript" 
  src="../GLEntity.js"
 >
 </script>
 
 <script type="text/javascript" 
  src="../GLControl.js"
 >
 </script>

 <script type="text/javascript" 
  src="GLSquare.js"
 >
 </script> 

</head>

<body onload="new GLSquare
(
 'assets/lighthouse.jpg'
)"
>

<div>
 <div id="eDebug">
 </div>
          
 <button id="animStop">
  Stop
 </button> 

 <button id="animStart">
  Rotate
 </button>
        
 <canvas id="cv" 
  width="512" 
  height="512"
 >
  Your browser doesn't support canvas.
 </canvas>   
</div>

</body>
</html>

Listing 1: Sample Web Page

GLSquare.js prepares two arrays with vertices, texels, and indices. The following graphic illustrates texel S,T coordinates associated with vertex X, Y, and Z coordinates. The values in square brackets represent texels. The values in parenthesis represent vertices. For each vertex assign the correct texel. For example texel [0.0,1.0] maps to vertex (-1.0,+1.0,0.0). Texel [1.0,0.0] maps to vertex (+1.0,-1.0,0.0).

Responsive Web Design with WebGL

This book displays a 512 x 512 pixel canvas for each project. However consider style sheets or JavaScript to resize the canvas for mobile devices, rotations, scrolling, and browser resize events. The newest e-book WebGL Beginner's Guide: For Designers and Developers discusses and demonstrates responsive Web design with WebGL. The e-book also provides simpler WebGL initialization along with 3D elements which rotate when the user swipes the canvas.

WebGL Beginner's Guide Introduction WebGL Beginner's Guide
Copyright © 2015 Seven Thunder Software. All Rights Reserved.