Chap7/textureSquare.html

<!DOCTYPE html>
<html>

<p> </p>
<div>
zNear .01<input id="zNearSlider" type="range"
 min=".01" max="3" step="0.01" value="0.3" />
 3
</div>
<div>
zFar 3<input id="zFarSlider" type="range"
 min="3" max="50" step="1.0" value="3" />
 50
</div>
<div>
fov 10<input id="fovSlider" type="range"
 min="10" max="170" step="5" value="45" />
 170
</div>
<div>
aspect 0.5<input id="aspectSlider" type="range"
 min="0.5" max="2" step="0.1" value="1" />
 2
</div>
<select id="Texture Style" size="4">
    <option value="0">Nearest</option>
    <option value="1">Linear</option>
    <option value="2">MipMap Nearest</option>
    <option value="3">MipMap Linear</option>
</select>


<script id="vertex-shader" type="x-shader/x-vertex">

attribute  vec4 vPosition;
attribute  vec4 vColor;
attribute  vec2 vTexCoord;

uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;

varying vec4 fColor;
varying vec2 fTexCoord;

uniform vec3 theta;

void main() 
{
    
    fColor = vColor;
    fTexCoord = vTexCoord;
    gl_Position = projectionMatrix*modelViewMatrix*vPosition;
} 
</script>

<script id="fragment-shader" type="x-shader/x-fragment">

precision mediump float;

varying vec4 fColor;
varying  vec2 fTexCoord;

uniform sampler2D texture;

void
main()
{
    gl_FragColor = fColor*texture2D( texture, fTexCoord );
}
</script>

<script type="text/javascript" src="../Common/webgl-utils.js"></script>
<script type="text/javascript" src="../Common/initShaders.js"></script>
<script type="text/javascript" src="../Common/MV.js"></script>
<script type="text/javascript" src="textureSquare.js"></script>


<body>
<canvas id="gl-canvas" width="1024" height="1024">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
</body>
</html>