Tutorial 6 : Texture Filters & Events

•  Tutorial

In the previous tutorial, we have seen how to creates and use textures.
This tutorial is the second part of textures for controlling how texture are rendered on the screen.
 

•  Texture filters

Texture filters are used to control how the texture is rendered to the screen.

Textures are created from a picture which have a fix size, ie fix pixel dimension (for example 64 pixel x 64 pixel).
In general, when a texture is rendered on a shape, the texture should be either shrinked or enlarged compared to the original picture dimension. For this operation, at each pixel of the screen where the textured shape is rendered, a texture read is performed for finding the pixel's color depending on its texture coordinate.

In the following, we will see how the texture is scaled.
 

•  Finding texture coordinate color

Suppose a picture of size 3 pixels x 3 pixels, which a zoom result to this :

Zoom on the 3x3 picture

Texture 'pixels' are called texels. A texel is associated with a color and correspond to a region on the UV system (texture coordinate system). Texels are represented in the following pictures.
The texture associated of this picture can be represented by the picture shown below.

Texture texels

In most cases, the uv coordinate read on the texture does not correspond to a texel center. It is generaly between two texels.
To determine the uv color, there are different ways :

• Pick up the the closest texel, and use its color (GL_NEAREST). This is equivalent to zooming on the picture.

• Linear interpolation of the color between the two closest texels (GL_LINEAR)

GL_NEAREST & GL_LINEAR

Here is the result of these two methods :

Zoom on the original picture (4x4 pixels)

GL_NEAREST vs GL_LINEAR

•  Texture filters

Filters control how the texture is enlarged and shrinked. They are defined with :
    gl.glTexParameteri(target, property, value)
target is GL_TEXTURE_2D
property can be GL_TEXTURE_MAG_FILTER (texture magnified, enlarged) or GL_TEXTURE_MIN_FILTER (texture minimized, shrinked).
value can be one of those constants :

Here is the result for 3 differents magnification/minification filter associations :

GL_NEAREST	GL_LINEAR	GL_LINEAR
GL_NEAREST	GL_LINEAR	GL_LINEAR_MIPMAP_NEAREST

GL_TEXTURE_MAG_FILTER
GL_TEXTURE_MIN_FILTER

Discussions :

• The first filter (nearest) is the basic and fastest for rendering filter.
  Close up view on the shape results to a 'pixelized' rendering. For pixels seen at wide angle, we sees some kind of 'aliased' lines.

• The second filter (bi-linear) has a better rendering than the first, especially for close-up view. It is also a little slower, due to the interpolation.
  The 'pixelized' rendering disappear due to the linear interpolation. 'Aliased' lines are also less present.

• The last filter (tri-linear) is the slowest for rendering.
  The result of this filter is similar to a 'blur' effect. No pixelization and no 'aliased' lines are present here.

•  Want to know more ?

Visit this page, written by Raphael 'Kafou' Lerbour, for more screenshots/details.
There are some interesting stuff not detailed here.
 

•  Mouse events

Instead of applying a constant rotation on the cube, we use events to get the mouse deplacemement.
With the mouse displacement, we apply either a rotation or a translation depending on mouse button used :
 Left button        x/y rotation
 Right button       z translation (z zooming)
 Left+Right button  x/y translation
 

•  Download Section

Remember to download the GraphicEngine-1.1.2 to run this tutorial !

•  Tutorial 6 src (125 ko)    //Port to Jogl JSR-231 initially done by Magarrett Dias

•  Tutorial 6 jar (123 ko)

If you've got any remarks on this tutorial, please let me know to improve it.
Thanks for your feedback.