Tutorial 34: Using Textures

This tutorial shows you how to create and apply textures to 3D geometry data generated by the GL group. It will cover the creation of a named texture with jit.gl.render, assigning a named texture to a GL object, the use of colors in conjunction with textures, the conversion of image/video data to a texture, and various ways to wrap the geometry with a texture.

• Open the tutorial patch and click on the toggle object labeled Start Rendering.

You will see a white parallelogram, but it is actually a tetrahedron being drawn by the jit.gl.plato object. The jit.gl.plato object is capable of rendering several platonic solids including tetrahedrons, hexahedrons (also known as cubes), octahedrons, dodecahedrons, and icosahedrons. Since lighting is not turned on and there is no texture being applied to the tetrahedron, it is difficult to tell that it is actually a 3D shape.

• Use the mouse to rotate the tetrahedron with the jit.gl.handle object, as covered in Tutorial 32.

This should illustrate that it is actually a 3D shape, but by applying a texture to the jit.gl.plato object, this will become even more apparent.

What is a Texture?

A texture is essentially an image that is overlaid upon geometry. Just like other images in Jitter, textures have an alpha, red, green, and blue component. In order to make use use the alpha component, blending must be enabled. Blending is covered in detail in Tutorial 33.

In Jitter, a texture has a name and belongs to the jit.gl.render object. Other objects that are attached to the drawing context associated with a given jit.gl.render object may make use of any of the named textures owned by that jit.gl.render object.

For efficiency reasons, most OpenGL implementations require that the dimensions of texture data must be integer powers of two—16, 32, 64, and so on. However, Jitter permits arbitrarily sized textures. There is a minimum size of 1 by 1 and a maximum size dependent upon the OpenGL implementation, usually 1024 by 1024.

Creating a Texture

• Create a texture named grid by clicking the message box labeled texture grid 64 64 in the section of the patch labeled Textures. This message is being sent to the jit.gl.render object.

The first argument to the texture message is the texture name, and the two following arguments specify the width and height of the texture. This creates a 64 by 64 texture named grid, and fills it with the default pattern (a white and grey checkerboard). You will not see any of the results yet, because the texture has not yet been applied to the geometry.

• Apply the texture to the tetrahedron by clicking on the message box labeled texture grid in the section of the patch labeled Platonic Solid. This sets the jit.gl.plato object's texture attribute, and when drawing, it will use the texture named grid. You should now see a checkered tetrahedron.

Tetrahedron with a checkerboard texture applied to it.

The jit.gl.plato object uses a "gift-wrapping" strategy to apply the texture to the tetrahedron. In thejit.gl.plato help file, the texture_maps subpatch illustrates exactly how the different platonic solids are wrapped.

How texture maps are applied to different platonic solids.

Important Note: You will notice that both the jit.gl.render and jit.gl.plato objects use the texture message in different ways. The jit.gl.render object uses this message to create a texture, while the jit.gl.plato and other GL objects use this message to apply a texture. The jit.gl.render object also has a message to apply one of its named textures to raw geometry data passed as Jitter matrices. That message is usetexture. The jit.gl.render object's ability to render raw geometry data passed as Jitter matrices will be covered in Tutorial 37.

Textures and Color

When applying a texture to geometry, OpenGL also takes into account color and lighting information, so the current color and lighting values will be multiplied with the texture image when drawn. If the color is white and lighting is turned off, the texture colors will be unaltered.

• In the section of the patch labeled Platonic Solid, set the color of the tetrahedron to red by setting the number box labeled red to 1, the number box labeled green to 0, and the number box labeled blue to 0.

Manipulating the color of the rendered object.

• Set the color of the tetrahedron back to white (1. 1. 1.) for our next section.

Converting an Image or Video to a Texture

While it is illustrative, typically you will want to make use of textures other than the default grey and white checkerboard. This can be accomplished by loading an image or a movie into the jit.movie or jit.matrix objects and sending the message texture [texture-name] [matrix-name] to the jit.gl.render object. If the texture specified by [texture-name] already exists, the incoming matrix will be resampled to the current dimensions of the texture. If no texture with that name exists, a new texture will be created. Its dimensions will be the nearest power of two greater than or equal to the dimensions of the Jitter matrix.

• Click the message box containing texture picture 128 128 in the section of the patch labeled Textures. This creates a 128 by 128 texture named picture, and like before, fills it with the default white and grey checkerboard pattern.

• Click the message box containing read colorbars.png, bang to load the colorbars.pict image into the jit.movie object, and send it on its way to the texture named picture.

You still won't see any of the results yet, because the jit.gl.plato object is still using the texture named grid.

• Click the message box containing texture picture in the section of the patch labeled Platonic Solid.

Now you should see the colorbars image wrapped around the tetrahedron.

In many instances you will only need to use still images as textures, but Jitter also supports the use of moving video as textures by repeatedly copying the output of the jit.movie object into the named texture.

• Click the message box containing read dishes.mov to load dishes.mov into the jit.movie object.

• Click on the toggle object connected to the metro object to start copying the video to the texture named picture.

Interpolation and Texture size

By default, texture interpolation is turned on, so screen pixels which are between texture pixels will use an interpolated value of its neighbors within the texture image. This has the effect of blurring or smoothing out the texture. To apply textures without interpolation, the interpolation may be turned off using the jit.gl.render object's interp message. This message only affects the jit.gl.render object's current texture, so prior to sending the interp message, you can send the message usetexture [texture-name] to make the current texture the one specified by [texture-name] argument.

• Click the toggle object connected to the message box containing usetexture picture, interp $1 to have thejit.gl.render object use the texture named picture and then to turn interpolation on and off for the texture named picture.

Once a texture has been created, the texture size can be changed, by sending the message texture [texture-name] [width] [height] where [width] and [height] specify the new dimensions.

• Set the number box labeled Resize texture to 16. This will send the jit.gl.render object the message texture picture 16 16, resizing the texture picture to be a 16 by 16 image.

Textures may be deleted in order to free up memory by sending jit.gl.render the message deletetexture [texture-name].

Mapping Modes

• Open the texture_mapping subpatch.

So far we have only addressed the implicit texture mapping that the jit.gl.plato object provides. OpenGL also provides a few other explicit texture mappings for applying textures to geometry data. These are the object linear, eye linear, and sphere map mapping modes.

The object linear mode applies the texture in a fixed manner relative to the object's coordinate system. As the object is rotated and positioned in the 3D scene, the texture mapping remains the same. In contrast, the eye linear mode applies the texture in a fixed manner relative to the eye's coordinate system. As the object is rotated and positioned in the 3D scene, the application of the texture to the object will change. Lastly, the sphere map mapping mode will produce the effect commonly called "environment mapping"; the object is rendered as though it is reflecting the surrounding environment, and assumes that the texture contains a sphere mapped image of the surrounding environment. As the object is rotated and positioned in the 3D scene, the application of the texture to the object will change.

These explicit mapping modes may be used by setting the GL group tex_map attribute. A tex_map value of 0 is the default and will use the GL object's implicit texture coordinates. A tex_map value of <m>1</m> will use OpenGL's object linear mode. A tex_map value of 2 will use OpenGL's sphere map mode. A tex_map value of 3 will use OpenGL's eye linear mode.

• Try changing the number box connected to the message box containing tex_map $1. Position and rotate the tetrahedron with your mouse, and see how the various modes affect the texture mapping.

Using different implicit mapping modes: object linear (left), sphere map (right), eye linear (lower).

OpenGL's object linear and eye linear mapping modes have additional parameters that affect the way in which they apply the texture. These are set with the GL group tex_plane_s and tex_plane_t attributes. These attributes are each vectors in 4 dimensional homogenous coordinates. The scalar product of tex_plane_s and a given point in 4 dimensional homogenous coordinates determines the horizontal position of the texture image to apply. The scalar product of tex_plane_t and a given point in 4 dimensional homogenous coordinates determines the vertical position of the texture image to apply. By default, tex_plane_s is equal to (1. 0. 0. 0.) and tex_plane_t is equal to (0. 1. 0. 0.).

A more detailed description of how the tex_plane_s and tex_plane_t attributes affect the texture mapping are out of the scope of this tutorial, but that doesn't mean you can't play with it anyway to generate interesting effects. For the curious, please consult the OpenGL Red Book or Blue Book.

• Experiment with the number box objects under the texture plane s and texture plane t labels (tex_map should be set to 1 or 3 in order to have any effect).

Experimenting with additional parameters.

Summary

We have established how to create textures and various ways to apply them to the geometry created by the GL group. The jit.gl.render object's texture message may be used to create, size, and copy image or video data to named textures. The GL group texture attribute specifies which named texture to use, and the GL group tex_map attribute selects either the implicit texture mapping mode or one of the three explicit OpenGL texture mapping modes: object linear, eye linear, or sphere map.

Name	Description
Working with Video in Jitter	Working with Video in Jitter
Working with OpenGL	Working with OpenGL
jit.gl.handle	Use mouse movement to control position/rotation
jit.gl.plato	Generate platonic solids
jit.gl.render	Render Jitter OpenGL objects
jit.matrix	The Jitter Matrix!
jit.movie	Play a QuickTime movie