Applying Textures - WebGL Game Development - page 149

<option value =
"NEAREST_MIPMAP_NEAREST">NEAREST_MIPMAP_NEAREST</option>
<option value =
"LINEAR_MIPMAP_NEAREST">LINEAR_MIPMAP_NEAREST</option>
<option value =
"NEAREST_MIPMAP_LINEAR">NEAREST_MIPMAP_LINEAR</option>
<option value =
"LINEAR_MIPMAP_LINEAR">LINEAR_MIPMAP_LINEAR</option>
</select>
<label>Maginification Filter</label>
<select id="magnificationFilter">
<option value="NEAREST">NEAREST</option>
<option value="LINEAR">LINEAR</option>
</select>
</div>
<div>
<label>Select Distance</label>
<select id="distanceList">
<option value="-1">1</option>
...
<option value="-12">12</option>
</select>
</div>
We have added the change function to handle change events in the start function
using jQuery selectors, as shown in the following code snippets:
function start() {
...
$("#minificationFilter").change(changeValues);
$("#magnificationFilter").change(changeValues);
$("#distanceList").change(changeValues);
...
}
We have added a function, changeValues , to set the texture parameters' filtering
modes and to set the value of the global variable, distance . We retrieve the values
of the drop-down using jQuery selectors. The texture buffer is made the current
buffer using the API call, bindTexture , for subsequent gl.texParameteri calls.
The switch case statement sets the gl.TEXTURE_MIN_FILTER and gl.TEXTURE_MAG_
FILTER parameters for the current texture. Then, we invoke the drawScene function
to see the effect of these parameters, as shown in the following code snippet:
function changeValues() {
gl.bindTexture(gl.TEXTURE_2D, texture);
var minification=$("#minificationFilter option:selected").val();