Programming Project #3 Texturing a Superquadric Surface

Programming Project #3
Texturing a Superquadric Surface
CS 442/542
Due 11:59 pm, November 4, 2013
Figure 1: Superellipsoid mesh (left), Gouraud shaded (center), and with a texture-map (right).
1 Introduction
For this project, you will create and render a superquadric mesh with a 2D texture map modulating a shaded
surface. Begin by creating a simple wireframe mesh using the parametric equations given in Section 2. The
examples in this document focus on superellipsoids, but feel free to construct one of the other related
superquadrics. Section 3 describes some of the mesh construction details, particularly how to generate
texture coordinates that minimize distortion. Note that you will need an added set of vertices in your mesh
where the surface wraps around upon itself since these require different texture coordinates. Before applying
the texture, generate the proper surface normals (Section 2) and shade the surface. Finally, add texture
coordinates and texture the surface using your creative powers. Your final version should either animate the
surface in some interesting way and/or allow the user to manipulate the view of your chosen shape. Section 4
suggests appropriate development steps to create your program and outlines the various GLSL shaders you
will need. Section 5 lists the usual artifacts and procedures for submitting your solution.
1

2 Superquadric Surfaces
The surface of superellipsoid can be described parametrically as
for
The parametric equations for a supertoroid are
for
x(u, v) = cos 2/m (v) cos 2/n (u), (1)
y(u, v) = cos 2/m (v) sin 2/n (u), (2)
z(u, v) = sin 2/m (v), (3)
−π/2 ≤ v ≤ π/2, (4)
−π ≤ u ≤ π. (5)
x(u, v) = (d + cos 2/m (v)) cos 2/n (u), (6)
y(u, v) = (d + cos 2/m (v)) sin 2/n (u), (7)
z(u, v) = sin 2/m (v), (8)
−π ≤ v < π (9)
−π ≤ u < π. (10)
The values m and n are called the “bulge factors;” when m = n = 2 the surfaces become their usual quadric
shapes. The surface normal N in both cases is
N x (u, v) = cos 2−2/m (v) cos 2−2/n (u), (11)
N y (u, v) = cos 2−2/m (v) sin 2−2/n (u), (12)
N z (u, v) = sin 2−2/m (v). (13)
It should be noted, that its not legitimate to raise a negative value to a fractional power so expressions like
cos 2/m (v) should be evaluated as cos(v) · | cos(v)| 2/m−1 .
3 Generating a mesh with texture coordinates
Creating a mesh for a parametrically defined surface is fairly straightforward. We simply create a 2D grid of
vertices by sampling the parameters (u, v) across the grid and evaluating the surface’s parametric functions.
Some special care is usually needed at the poles (e.g., for a superellipsoid) and where the surface wraps
around on itself. Here we describe how to create an appropriate mesh for the superellipsoid that we can map
a 2D texture onto.
3.1 Slicing and dicing the surface
We divide up the superellipsoid into N “slices” and M “dices” as illustrated in Figure 2 to create a mesh
with (N + 1) × (M + 1) vertices. We define the surface with N quadrilateral strips with M quadrilaterals
each (the strips run from left to right in the figure). Note the top and bottom strips degenerate into triangles
since the vertices at the poles are all the same point. We don’t use triangle fans at the poles since all the
replicated pole vertices will have different texture coordinates (and we avoid using a different primitive as
a special case). The far-left and far-right columns of vertices represent the same surface points (where the
surface “wraps around on itself”), but will have different texture coordinate s-values.
2

SIDE VIEW
slice 0
slice 1
slice 2
TOP VIEW
dice 1
dice 0
dice M-1
slice N-1
s=0 t=0
u = -π
(N+1)×(M+1) vertices
u = π
N
v = π/2
N-1
t=1
2
1
0
v = -π/2 t=0
0 1 2 M-1 M
Figure 2: The number of vertices in the ellipsoid mesh is specified by the number of “slices” N and “dices”
M used to divide the surface. We use N quadrilateral strips each with M quadrilaterals. The extra column
of vertices are needed where the surface wraps around since different texture coordinates are used on each
end. The top and bottom rows represent the sole vertices at the “poles.”
0 1 2 3 4
5 6 7 8 9
10 11 12 13 14
15 16 17 18 19
20 21 22 23 24
0, 5, 1, 6, 2, 7, 3, 8, 4, 9, 9, 9,
5, 5, 5, 10, 6, 11, 7, 12, 8, 13, 9, 14, 14, 14,
10, 10, 10, 15, 11, 16, 12, 17, 13, 18, 14, 19, 19, 19,
15, 15, 15, 20, 16, 21, 17, 22, 18, 23, 19, 24
Figure 3: These four example quadrilateral strips (defined by black indices) can be converted into a single
quad strip by connecting the strips with degenerate quadrilaterals using the added gray indices.
3

3.2 One big quadrilateral strip
If we are clever, we can represent all N quadrilateral strips with a single strip by adding the appropriate
degenerate quadrilaterals as described in Figure 3. The first and last strips contain 2(M + 1) + 2 vertex
indices whereas all of the middle, non-polar strips have 2(M + 1) + 4 vertex indices; The total number of
indices for the single, unified quadrilateral strip is N(2(M + 1) + 4) − 4.
Figure 4: Bulging mesh with non-uniform distances between vertices (left). Earth texture assuming uniform
spacing (middle) and non-uniform spacing (right).
3.3 Texture coordinates for non-uniformly spaced vertices
If the mesh vertices are distributed uniformly along “latitude” and “longitude” lines (e.g., when bulge factors
are m = n = 2) then we can generate texture coordinates as follows:
(s ij , t ij ) = (i/M, j/N), i = 0, . . . M, j = 0, . . . , M. (14)
The center image in Figure 4 shows the resulting distortion when the vertices are not spaced uniformly. We
avoid the distortion by spacing textures coordinates proportionally based on the Euclidean distance between
successive vertices. Let d i,j be the Euclidian distance between neighboring vertices on the ith line of latitude:
d ij = ‖P i,j − P i,j−1 ‖, j = 1, . . . , M. (15)
Then we space the s-values of our texture coordinates proportional to these distances:
∑ j
k=1
s ij =
d ik
∑ M
k=1 d , i = 1, . . . , N − 1, j = 1, . . . , M, (16)
ik
(s i0 = 0). The s-values at the poles are a special case since these distances are all zero; In these cases we
just copy the values from the adjacent lines of latitude s 0,j = s 1,j and s N,j = s N−1,j for j = 1, . . . , M. We
set the t-values along the lines of longitude in a similar fashion remembering to duplicate these values where
the mesh wraps around on itself: t i,M = t i,0 for i = 1, . . . , N. The right image in Figure 4 shows the proper,
non-distorted texture.
4 Iterative development steps
It is highly recommended that you create your program iteratively. Here I outline the steps I used to for my
program. Each stage will require different GLSL shaders.
4

4.1 Simple wireframe
Your first implementation should focus on creating a wireframe mesh. The only vertex attribute is the
position and the only transformation we need is specified by the ModelViewProjection matrix. Here I
“hard code” the vertex color with yellow in my vertex shader:
attribute vec4 vertexPosition;
uniform mat4 ModelViewProjection;
varying vec4 color;
void main() {
gl_Position = ModelViewProjection*vertexPosition;
color = vec4(1.0, 1.0, 0.0, 1.0);
}
The association fragment shader merely regurgitates the input color:
varying vec4 color;
void main() {
gl_FragColor = color;
}
You will only need VBO’s to store the vertex positions and the quadrilateral indices. Choose a variety of
values for the bulge factors m and n and mesh “slices” and “dices.” Do not proceed until you are confident
this first stage is working correctly. Those developing desktop applications can use glPolygonMode:
glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);
WebGL and OpenGL ES programmers will need to use one of the line primitives (e.g., GL_LINE_LOOP) for
the wireframe version.
4.2 Gouraud shading
Next generate surface normals and replace your vertex shader with one that computes the color at each
vertex via the Phong illumination model. The application will now have to supply the vertex shader with
more information:
attribute vec4 vertexPosition;
attribute vec3 vertexNormal;
uniform mat4 ModelViewProjection;
uniform mat4 ModelViewMatrix;
uniform mat3 NormalMatrix;
varying vec4 color;
5

uniform vars for lights & material properties...
...
void main() {
gl_Position = ModelViewProjection*vertexPosition;
// compute Phong illumination components
...
color = vec4(I_ambient + I_diffuse + I_specular, 1.0);
}
Again, make sure you are confident that your surface is properly shaded before proceeding to the next
version.
4.3 Texturing
Figure 5: The TextureMatrix is used to transform the texture coordinates. Scale 4 × 4 (left), scale 8 × 10
(middle), and rotate 45 ◦ and scale 4 × 6 (right).
Next, generate texture coordinates as prescribed in Section 3.3. You will need to load a texture map with
some image – I recommend using a map of the earth. Add another vertex attribute to your vertex shader
for the texture coordinates as well as a TextureMatrix to transform each texture coordinate:
...
attribute vec2 vertexTexCoord;
...
varying vec2 texCoord;
...
uniform mat4 TextureMatrix;
...
void main() {
gl_Position = ModelViewProjection*vertexPosition;
texCoord = (TextureMatrix*vec4(vertexTexCoord, 0.0, 1.0)).st;
...
color = vec4(I_ambient + I_diffuse + I_specular, 1.0);
}
The fragment shader now samples the texture map (stored in texture unit 0) and modulates the color.
6

uniform sampler2D texUnit;
varying vec4 color;
varying vec2 texCoord;
void main() {
vec4 texel = texture2D(texUnit, texCoord);
gl_FragColor = texel*color;
}
For your first implementation you may not want to modulate the color, but simply output the texel.
4.3.1 Using the TextureMatrix
Figure 5 illustrates how the TextureMatrix can be used to alter the texture coordinates. For example, the
image of the right was created using the a TextureMatrix set as follows:
matrixIdentity(TextureMatrix);
matrixScale(TextureMatrix, 4, 6, 1);
matrixRotate(TextureMatrix, 45, 0, 0, 1);
Typically we assign texture coordinates to the vertices so that the image covers the entire surface exactly
once; then the TextureMatrix can be used alter the position and size of the texture.
4.3.2 Texture parameters
I set up the texture unit so that the texture to repeats and bilinear interpolation is used for both minification
and magnification:
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
4.4 Animating
You may wish to animate changes to your superellipsoid – e.g., rotate and alter than bulge factors m and n
in some interesting way. GLUT allows you to install an idle event callback with the glutIdleFunc() function.
The callback will be invoked whenever other system events are not in the event queue. The callback usually
determines how much time has elapsed and updates the model accordingly:
void idle(void) {
GLfloat seconds = glutGet(GLUT_ELAPSED_TIME)/1000.0;
7

}
/* update object based on elapsed time */
glutPostRedisplay();
If you are constantly changing m and n then the vertices, normals, and texture coordinates are constantly
changing and need to be reloaded into their respective VBO’s. Use the GL_DYNAMIC_DRAW hint when buffering
the data to inform OpenGL that this data is “dynamically” changing and used for “drawing:”
glBindBuffer(GL_ARRAY_BUFFER, vertBuffer);
glBufferData(GL_ARRAY_BUFFER, sizeof(verts), verts, GL_DYNAMIC_DRAW);
5 What to submit
Archive all of your source code and supporting files necessary to build and run your application as described
on the course’s electronic submission web page. Include a README file in your archive that gives an overview
of your project, lists the names of all authors and includes your email address, describes how to build and
run your application from source, and lists all of the files in the archive.
8