WebGL Beginner's Guide - Code / 1727_07 / ch7_Texture_Filters.html

<html>

<head>
<title>WebGL Beginner's Guide - Chapter 7 - Texture Filters</title>
<meta http-equiv='content-type' content='text/html; charset=ISO-8859-1'>

<!-- CSS Styles //-->
<link href='css/styles.css'   type='text/css' rel='stylesheet'>
<link href='css/prettify_desert.css'  type='text/css' rel='stylesheet'/>
<link href='css/colorpicker.css'  type='text/css' rel='stylesheet'/>

<link href='css/smoothness/jquery-ui-1.8.13.custom.css' type='text/css' rel='stylesheet' />
<!-- GUI Libraries //-->
<script type='text/javascript' src='js/gui/jquery-1.5.1.min.js'></script>
<script type='text/javascript' src='js/gui/jquery-ui-1.8.13.custom.min.js'></script> 
<script type='text/javascript' src='js/gui/colorpicker.js'></script>
<script type='text/javascript' src='js/gui/prettify.js'></script>
<script type='text/javascript' src='js/gui/codeview.js'></script>
<!-- MATH Libraries //-->
<script type='text/javascript' src='js/math/gl-matrix-min.js'></script>
<!-- WEBGL Libraries //-->
<script type='text/javascript' src='js/webgl/Globals.js'></script>
<script type='text/javascript' src='js/webgl/Utils.js'></script>
<script type='text/javascript' src='js/webgl/Program.js'></script>
<script type='text/javascript' src='js/webgl/Scene.js'></script>
<script type='text/javascript' src='js/webgl/Axis.js'></script>
<script type='text/javascript' src='js/webgl/Floor.js'></script>
<script type='text/javascript' src='js/webgl/Camera.js'></script>
<script type='text/javascript' src='js/webgl/CameraInteractor.js'></script>
<script type='text/javascript' src='js/webgl/SceneTransforms.js'></script>
<script type='text/javascript' src='js/webgl/Texture.js'></script>
<script type='text/javascript' src='js/webgl/WebGLApp.js'></script>



<script id="shader-vs" type="x-shader/x-vertex">
//geometry
attribute vec3 aVertexPosition;
attribute vec2 aVertexTextureCoords;

//matrices
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
uniform mat4 uNMatrix;

//varyings
varying vec2 vTextureCoord;

void main(void) {
	//Final vertex position
	gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
	vTextureCoord = aVertexTextureCoords;
}	
</script>

<script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif

//sampler
uniform sampler2D uSampler;

//varying
varying vec2 vTextureCoord;

void main(void)
{	
	gl_FragColor = texture2D(uSampler, vTextureCoord);
}
</script>

<script id='code-js' type="text/javascript">

var camera = null;
var interactor = null;
var transforms = null;
var useVertexColors = false;
var texture = null;

function configure(){
    gl.clearColor(0.3,0.3,0.3, 1.0);
    gl.clearDepth(100.0);
    gl.enable(gl.DEPTH_TEST);
	gl.depthFunc(gl.LESS);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);

    //Creates and sets up the camera location
    camera = new Camera(CAMERA_ORBITING_TYPE);
    camera.goHome([0,0,0]);
    camera.dolly(-4);
    camera.setFocus([0.0,0.0,0.0]);
	camera.setAzimuth(45);
	camera.setElevation(-30);
    camera.hookRenderer = draw;
    
    //Creates and sets up the mouse and keyboard interactor
    interactor = new CameraInteractor(camera, document.getElementById('canvas-element-id'));
    
    //Scene Transforms
    transforms = new SceneTransforms(camera);
   
    //init transforms
    transforms.init();
	
	//Program
	attributeList = ["aVertexPosition",
					"aVertexNormal",
					"aVertexColor",
					"aVertexTextureCoords"];

	uniformList = [	"uPMatrix", 
					"uMVMatrix", 
					"uNMatrix",
					"uMaterialDiffuse",
					"uMaterialAmbient",
					"uLightAmbient",
					"uLightDiffuse",
					"uLightPosition",
					"uWireframe",
					"uAlpha",
					"uUseVertexColor",
					"uUseLambert",
					"uSampler"
					];
	
	
	Program.load(attributeList, uniformList);
	
	gl.uniform3fv(Program.uLightPosition,   [0,5,20]);
	gl.uniform3fv(Program.uLightAmbient,    [1.0,1.0,1.0,1.0]);
	gl.uniform4fv(Program.uLightDiffuse,    [1.0,1.0,1.0,1.0]);
	gl.uniform1f(Program.uAlpha, 1.0);
	gl.uniform1i(Program.uUseVertexColor, useVertexColors);
	gl.uniform1i(Program.uUseLambert, true);
	
	//Init texture
	texture = gl.createTexture();
	
	var image = new Image();
	image.onload = function(){
		gl.bindTexture(gl.TEXTURE_2D, texture);
		gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
	    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
	    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
		gl.generateMipmap(gl.TEXTURE_2D);
		gl.bindTexture(gl.TEXTURE_2D, null);
	}
	image.src = 'textures/webgl.png';
}

/**
* Loads the scene
*/
function load(){
	Scene.loadObject('models/geometry/complexCube.json','cube2');
}

/**
* invoked on every rendering cycle
*/
function draw() {
    gl.viewport(0, 0, c_width, c_height);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    transforms.updatePerspective();

    try{
        for (var i = 0; i < Scene.objects.length; i++){
            
            var object = Scene.objects[i];
			
			if (object.hidden == true) continue;
			
			transforms.calculateModelView();           
            transforms.push();
            transforms.setMatrixUniforms();
            transforms.pop();
   
            //Setting uniforms
            gl.uniform4fv(Program.uMaterialDiffuse, object.diffuse);
            gl.uniform4fv(Program.uMaterialAmbient, object.ambient);
            gl.uniform1i(Program.uWireframe,object.wireframe);
			
            
            //Setting attributes
            gl.enableVertexAttribArray(Program.aVertexPosition);
            gl.disableVertexAttribArray(Program.aVertexNormal);
            gl.disableVertexAttribArray(Program.aVertexColor);
            
            gl.bindBuffer(gl.ARRAY_BUFFER, object.vbo);
            gl.vertexAttribPointer(Program.aVertexPosition, 3, gl.FLOAT, false, 0, 0);
            gl.enableVertexAttribArray(Program.aVertexPosition);
			
			gl.uniform1i(Program.uUseVertexColor, useVertexColors);
			
			if (object.scalars != null && useVertexColors){
			    gl.enableVertexAttribArray(Program.aVertexColor);
				gl.bindBuffer(gl.ARRAY_BUFFER, object.cbo);
				gl.vertexAttribPointer(Program.aVertexColor, 4, gl.FLOAT, false, 0, 0);
				
			}
			
			if (object.texture_coords){
				gl.enableVertexAttribArray(Program.aVertexTextureCoords);
				gl.bindBuffer(gl.ARRAY_BUFFER, object.tbo);
				gl.vertexAttribPointer(Program.aVertexTextureCoords, 2, gl.FLOAT, false, 0, 0);
				gl.activeTexture(gl.TEXTURE0);
				gl.bindTexture(gl.TEXTURE_2D, texture);
				gl.uniform1i(Program.uSampler, 0);
			}
			
            
			if(!object.wireframe){
				gl.bindBuffer(gl.ARRAY_BUFFER, object.nbo);
				gl.vertexAttribPointer(Program.aVertexNormal, 3, gl.FLOAT, false, 0, 0);
				gl.enableVertexAttribArray(Program.aVertexNormal);
            }
			gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, object.ibo);
			
			if (object.wireframe){
                gl.drawElements(gl.LINES, object.indices.length, gl.UNSIGNED_SHORT,0);
            }
            else{
                gl.drawElements(gl.TRIANGLES, object.indices.length, gl.UNSIGNED_SHORT,0);
            }
			
            gl.bindBuffer(gl.ARRAY_BUFFER, null);
            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
            
        }
    }
    catch(err){
        alert(err);
        console.error(err.description);
    }
}

/**
* Entry point. This function is invoked when the page is loaded
*/
var app = null;
function runWebGLApp() {
    app = new WebGLApp("canvas-element-id")
    app.configureGLHook = configure;
    app.loadSceneHook   = load;
    app.drawSceneHook   = draw;
    app.run();
}
</script>
</head>

<body onLoad='runWebGLApp()'>
<div id='top'>
<h1>WebGL Beginner's Guide - Chapter 7</h1>
<h2>Texture Filters</h2>
<div id='logo-packt'><img src='packt.gif'/></div>
<p></p>
</div>

<div id='contents'>
<div id='canvasContainer'>
<canvas id='canvas-element-id' width='480' height='400'>
Your browser does not support the HTML5 canvas element.
</canvas>
</div>
</div>

<div id='bottom'>
<table style='padding=0px'>
<tr>
	<td>
	<table>
		<tr>
			<td>Distance:</td><td id='slider-z-value' width='30px'>0.0</td><td width='150px'><div id='slider-z'/></td>
		</tr>
	</table>
	</td>
</tr>
<tr>
    <td> 
    <table cellspacing=4px style='vertical-align:top'>
        <tr>
			<td>Mag Filter:</td>
            <td>
            <div id='opt-mag-filter' align='center'>
                    <input type='radio' id='mag-nearest' name='mag-filter' checked='checked'/><label for='mag-nearest'>NEAREST</label>
                    <input type='radio' id='mag-linear' name='mag-filter' /><label for='mag-linear'>LINEAR</label>
            </div>
            </td>
        </tr>
    </table>
    </td>
</tr>
<tr>
    <td> 
    <table cellspacing=4px style='vertical-align:top'>
        <tr>
			<td>Min Filter:</td>
            <td>
            <div id='opt-min-filter' align='center'>
                    <input type='radio' id='min-nearest' name='min-filter' checked='checked'/><label for='min-nearest'>NEAREST</label>
                    <input type='radio' id='min-linear' name='min-filter' /><label for='min-linear'>LINEAR</label>
					<input type='radio' id='min-nearest-mipmap-nearest' name='min-filter'/><label for='min-nearest-mipmap-nearest'>NEAREST_MIPMAP_NEAREST</label>
					<input type='radio' id='min-linear-mipmap-nearest' name='min-filter'/><label for='min-linear-mipmap-nearest'>LINEAR_MIPMAP_NEAREST</label>
					<input type='radio' id='min-nearest-mipmap-linear' name='min-filter'/><label for='min-nearest-mipmap-linear'>NEAREST_MIPMAP_LINEAR</label>
					<input type='radio' id='min-linear-mipmap-linear' name='min-filter'/><label for='min-linear-mipmap-linear'>LINEAR_MIPMAP_LINEAR</label>
            </div>
            </td>
        </tr>
    </table>
    </td>
</tr>
</table>
</div>
<script> 

function updateCameraPosition() {
    var z = $('#slider-z').slider("value");
    
    $('#slider-z-value').html(z);
    
    camera.dolly(-z);
	camera.update();
    
	draw();
}


$('#slider-z').slider({value:4.0, min:1, max:12, step:0.1, slide:function(){updateCameraPosition()}, change:function(){updateCameraPosition()}});

$('#opt-mag-filter').buttonset();
$('#opt-min-filter').buttonset();

$('#mag-nearest').click(function(){
	gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
	gl.bindTexture(gl.TEXTURE_2D, null);
});

$('#mag-linear').click(function(){
	gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
	gl.bindTexture(gl.TEXTURE_2D, null);
});


$('#min-nearest').click(function(){
	gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
	gl.bindTexture(gl.TEXTURE_2D, null);
});

$('#min-linear').click(function(){
	gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
	gl.bindTexture(gl.TEXTURE_2D, null);
});

$('#min-nearest-mipmap-nearest').click(function(){
	gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST_MIPMAP_NEAREST);
	gl.bindTexture(gl.TEXTURE_2D, null);
});

$('#min-linear-mipmap-nearest').click(function(){
	gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
	gl.bindTexture(gl.TEXTURE_2D, null);
});

$('#min-nearest-mipmap-linear').click(function(){
	gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST_MIPMAP_LINEAR);
	gl.bindTexture(gl.TEXTURE_2D, null);
});

$('#min-linear-mipmap-linear').click(function(){
	gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
	gl.bindTexture(gl.TEXTURE_2D, null);
});


</script>
<script>cview.run(cview.MODE_VIEW,false,470);</script>
</body>
</html>
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.