Applying Textures - WebGL Game Development - page 124

<option value="REPEAT">REPEAT</option>
<option value="CLAMP_TO_EDGE">CLAMP_TO_EGDE</option>
<option value="MIRRORED_REPEAT">MIRRORED_REPEAT</option>
</select>
</div>
The event handlers
We use the jQuery library to help with programming the web page. Here are the on-
change event handlers for both select boxes:
<script type="text/javascript" src="js/jquery.js"></script>
function start() {
...
$("#sclamp").change(redrawWithClampingMode);
$("#tclamp").change(redrawWithClampingMode);
...
}
The redrawWithClampingMode function
We make the texture as the current/active texture by using the bindTexture
API call. We retrieve the selected value of the select boxes using jQuery API
selectors. Then, depending on the selected value, we set the value of the parameter
gl.TEXTURE_WRAP_S or gl.TEXTURE_WRAP_T using the texParameteri API call for
the different wrapping mode. Then, we invoke the drawScene function after clearing
the current texture buffer, as shown in the following code snippet:
function redrawWithClampingMode() {
gl.bindTexture(gl.TEXTURE_2D, texture);
var sValue=$("#sclamp option:selected").val();
var tValue=$("#tclamp option:selected").val();
switch(sValue) {
case"REPEAT":
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S,
gl.REPEAT);
break;
case"CLAMP_TO_EDGE":
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S,
gl.CLAMP_TO_EDGE);
break;
case"MIRRORED_REPEAT":
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S,
gl.MIRRORED_REPEAT);
break;
}