Computer Graphics CSI4130 – Winter 2019
Jochen Lang
EECS, University of Ottawa Canada
This Lecture
• Meshes and 2D Texture Mapping – Textbook: Chapter 6.1, 6.2
– Indexed Meshes
– 2D texture mapping
– Sphere mapping
CSI4130 Computer Graphics
Triangular Mesh
• Meshes are collection of triangles which consist of – Faces (triangle)
– Edges (boundary of triangle)
– Vertices (corner points)
Edges and vertices are shared between faces CSI4130 Computer Graphics
Mesh Properties
• Manifold meshes
– Each edge is shared between at most two faces, or
• all vertices have a neighborhood that is homeomorphic to a topological sphere for inner vertices and to a topological half-sphere for surface vertices.
• Regular Vertices
– Vertex is shared between 6 faces
– Irregular vertices shared between less or more faces
• Open or Closed Meshes
– Closed meshes have no boundaries
– Open meshes may have holes or cover only a part of an object.
• Genus of Surface = Number of handles
– 0–nohandles,1–onehandle,e.g.,acup,andsoon
CSI4130 Computer Graphics
Triangular Meshes
• How many faces, edges and vertices?
– Euler’s formula V-E+F = 2 (manifold meshes; one connected
component, genus 1)
– Triangle has 3 edges
– Edge belongs to 2 triangles
→ 3/2 more edges than triangles (manifold meshes)
CSI4130 Computer Graphics
Indexed Meshes or Shared Vertex Data Structure
– Used as file format, e.g., wavefront obj, off, IndexedFaceSet in VRML etc.
• Do not repeat vertices but index a vertex list
– Example: obj
v 0.0 0.0 1.0
v 0.027 0.019 0.999 …
f615
f514
…
Vertex Array: Face Array:
CSI4130 Computer Graphics
Review: Use of Index Data Structure in OpenGL
•
Simplified definition from box_shape (laboratory 5)
this.vertex = new Float32Array([
-0.5, -0.5, -0.5, // 0
-0.5, -0.5, 0.5, // 1
-0.5, 0.5, -0.5, // 2
-0.5, 0.5, 0.5, // 3
0.5, -0.5, -0.5, // 4
0.5, -0.5, 0.5, // 5
0.5, 0.5, -0.5, // 6
0.5, 0.5, 0.5 // 7
]);
this.index = new Int8Array([
0,1,2,3,6,7,4,5,
255,
2,6,0,4,1,5,3,7]);
…
gl.drawElementsInstanced(gl.TRIANGLE_STRIP, n,
gl.UNSIGNED_BYTE, 0, N_BOXES);
CSI4130 Computer Graphics
Efficiency
– Memory
• Shared vertex data structure
– 4 bytes per pointer or float
– 3 vertices per triangle
– 3 coordinates per vertex
– n vertices and m=2n triangles
– Adjacencyqueries
• Shared vertex data stores no information→search:
– Neighbouring vertices
– Adjacent edges to a vertex
– Adjacent faces to a vertex, etc.
CSI4130 Computer Graphics
Appearance attributes
• Must be stored with the mesh
– E.g., extra lines in obj file
– Texture coordinates
– Vertex normal
– Vertex colour (not in obj)
– Face colour
– Face normal (may differ from triangle normal)
– Material properties (ambient, diffuse and specular components) and texture index
n 0.0 0.0 1.0
vt 0.027 0.019
…
f 6/2/5 1/3/1 5/6/2
CSI4130 Computer Graphics
Review: Vertex Attributes in OpenGL
• Example from laboratory 6: color and normals
// Color – error checking omitted
var colorBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer); gl.bufferData(gl.ARRAY_BUFFER, box.attrib.colors, gl.STATIC_DRAW); var a_color = gl.getAttribLocation(gl.program, ‘a_color’); gl.enableVertexAttribArray(a_color); gl.vertexAttribPointer(a_color, 3, gl.FLOAT, false, 0, 0);
// normal – error checking omitted
var normalBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer); gl.bufferData(gl.ARRAY_BUFFER, box.normal, gl.STATIC_DRAW); var a_normal = gl.getAttribLocation(gl.program, ‘a_normal’); gl.enableVertexAttribArray(a_normal); gl.vertexAttribPointer(a_normal, 3, gl.FLOAT, true, 0, 0);
CSI4130 Computer Graphics
Wedges and Corners
• Vertex may have different attributes depending on face
– Corners:
• (vertex,face) pair
– Wedges:
• Multiple corners with same vertex attributes
CSI4130 Computer Graphics
2D Texturing – A Simple Example
– Map region of photographs on the faces of a mesh
– Example: Google 3D Warehouse: Old Anhalter Goods Train Station
CSI4130 Computer Graphics
Texture Lookup
• In2D
– Get texel from pixel for screen pixel
– In general, pixel coordinates do not match texture coordinates
• textures with cont. coordinates
• But digital images: discrete pixels of size and
CSI4130 Computer Graphics
Texture Interpolation
– Nearestneighbour
– Bilinear interpolation (next slide)
– Cubic interpolation
– Sinc interpolation (ideal interpolant for band-limited signals) – Any other image interpolation technique
CSI4130 Computer Graphics
Bilinear Texture Interpolation
– Interpolate texture value from four neighbours
CSI4130 Computer Graphics
Texture Interpolation with Hermite Smoothing
– Liner interpolation is discontinuous at pixel boundary • visible mach bands
– Use higher order interpolation
CSI4130 Computer Graphics
More on 2D Texture Mapping
– Surface of a 3D solid is 2D
– Distortion-free parameterization of the 2D surface in the 2D plane is not possible, in general.
– Example map of the world (see also textbook)
Paul Rademacher, Ray Tracing: Graphics for the Masses, ACM Crossroads, 1997.
CSI4130 Computer Graphics
Sphere Mapping
– Need a mapping from Cartesian coordinates to spherical coordinates to a parameterization in the texture plane
– Assume we want to texture a sphere (or sphere-like object) which has vertex coordinates and the center of the sphere is at , we need to calculate a texture
coordinate
Object Coordinate System
CSI4130 Computer Graphics
Spherical Coordinates
– Calculate azimuth and elevation
CSI4130 Computer Graphics
Texture Coordinates
– Given azimuth and elevation find
CSI4130 Computer Graphics
Texture Mapping Triangular Meshes
– Specify a texel for each vertex
– Use barycentric interpolation for face (see lecture on triangles)
CSI4130 Computer Graphics
Texture Atlas
– Cut surface into pieces which can be parameterized in the plane (individual maps of atlas)
– Select cuts to reduce distortion
– Optimal packing of maps into atlas is NP hard
– Need to grow maps to avoid interpolation errors
– “Solves” parameterization
CSI4130 Computer Graphics
Perspective Distortion Example
• Z-coordinate does not scale linearly
– Linear interpolation (e.g. with barycentric coordinates)
– Perspective interpolation
More when we cover the z-buffer
CSI4130 Computer Graphics
Texturing in OpenGL
• Texture Objects
– Texture objects store texture information and make them
available
– A set of textures and their related texture data can be contained within a single texture object
• Major Steps in Texturing
– Creating a texture object by associating a target with a
texture unit
– Loading a texture into OpenGL
– Configuring texture filtering
– Supplying texture coordinates
– Accessing the texture with a sampler
CSI4130 Computer Graphics
Creating a Texture Object
• Generate new texture object
var texture = gl.createTexture();
• This function returns an unused name for a texture object
• Activate / use texture objects
void gl.bindTexture( gl.Texture2D, texture );
• Creates a new texture object and assign it a name when using texture name for the first time
• When binding to a previously created texture object, this function will cause that object to become active
CSI4130 – Computer Graphics
Loading a Texture into OpenGL
• In general:
gl.texImage2D(enum target, int level,
int internalformat, sizei width,
sizei height, int border, enum format,
enum type, intptr offset);
– This function defines a 2D texture.
– The target parameter specifies the target texture and this will
often be gl.TEXTURE_2D.
– If you are supplying multiple levels of details (resolution) for the texture map, you will specify the number of levels in the level parameter, otherwise this parameter should be set to 0.
CSI4130 – Computer Graphics
gl.TexImage2D
– The internal format describes the internal storage representation of the texture or the R,G,B, Alpha components, or luminance or intensity value that will describe the texels of an image. The value of internal format is an integer from 1 to 4 or one of thirty-eight symbolic constants. Often, we will set this parameter to GL_RGBA.
– Width and height describe the width and height of the texture image respectively. Border defines the width of the boarder which will be either 0 (no border) or 1.
– The format and type parameters describe the format and data type of the texture image data.
– And finally, pixels points to the texture-image data.
CSI4130 – Computer Graphics
Loading a Texture into OpenGL
• Loading a texture (image) for an object in the browser • Example:
// Create the image object
var image = new Image();
image.onload = function() {
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGB,
gl.RGB, gl.UNSIGNED_BYTE, image);
…
}
CSI4130 – Computer Graphics
Specifying Texture Coordinates
• As you draw a texture mapped scene you must specify both the coordinates of your objects as well as the coordinates of the texture map.
– The texture coordinates are normally specified and supplied in a buffer as a vertex attribute. Defines which texels are mapped to specific vertices of your object.
– A 2D texture is treated as a square whose coordinates range from in each dimension.
– Texture coordinates are interpolated during rasterization.
• Aside: In immediate mode the corresponding command is
glTexCoord(). This function sets the current texture coordinates.
CSI4130 – Computer Graphics
Specifying Texture Coordinates
•
Example: vertex and texture coordinates for a tetrahedra.
var vertices = new Float32Array([
-1.0, -1.0, 1.0, 0.0, 1.0, // 0
1.0, -1.0, 1.0, 0.0, 0.0, // 1
0.0, 1.0, 0.0, 0.5, 1.0, // 2
0.0, -1.0, -1.0, 0.5, 0.0, // 3
-1.0, -1.0, 1.0, 1.0, 1.0, // 0
1.0, -1.0, 1.0, 1.0, 0.0 // 1
]);
Make a VAO and the corresponding buffers and set the vertex attribute pointers (as usual)
•
var vertexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// Get the storage location of a_texCoord, assign buffer and enable var a_texCoord = gl.getAttribLocation(gl.program, ‘a_texCoord’);
// Texture coords start after 3 entries – the first x y z coordinate gl.vertexAttribPointer(a_texCoord, 2, gl.FLOAT, false, 5*fsize, 3*fsize); gl.enableVertexAttribArray(a_texCoord);
CSI4130 – Computer Graphics
Texture Shaders: Vertex Shader
• Texture coordinates in vertex shader #version 300 es
layout (location 0) in vec4 a_position; layout (location 1) in vec2 a_texCoord;
out vec2 texCoordFrag;
void main() {
gl_Position = a_position;
texCoordFrag = a_texCoord;
}
CSI4130 – Computer Graphics
Texture Shaders: Fragment Shader
• Texture lookup in fragment shader #version 300 es
#ifdef GL_ES
precision mediump float;
#endif
uniform sampler2D myTexImage;
in vec2 texCoordFrag;
void main() {
// color from texture
color = texture2D(myTexImage,texCoordFrag); }
CSI4130 – Computer Graphics
Samplers
• •
•
Samplers as uniforms
uniform sampler2D myTexImage;
Associate texture unit with a sampler
var locSam = gl.getUniformLocation( prog, myTexImage ); gl.uniform1i(locSam, texUnitName);
There are different sampler and different texture lookup functions.
CSI4130 Computer Graphics
Specifying Texture Filters and Parameters
• The glTexParameter() function can be used define magnification and minification methods
– gl.texParameteri (gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
– gl.texParameteri (gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
– The methods include NEAREST, or LINEAR
• NEAREST picks the nearest texel
• LINEAR interpolates between texels (smoother)
• NEAREST_MIPMAP_NEAREST uses a mipmap and does nearest map with nearest texel (see next slide)
• etc.
CSI4130 – Computer Graphics
Specifying a Texture: MipMapping
– Minification should use down-sampling otherwise it will introduce anti-aliasing
– Mipmapcontainsproperlydown-sampledimages – Example (color change is for illustration only):
Size of image
,
,
CSI4130 – Computer Graphics
Repeating and Clamping Textures
– We can assign coordinates outside the standard 0-1 texture coordinate range and specify whether or not those textures will clamp (i.e., maintain current texel values) or repeat (alternate texel patterns). This is accomplished using the gl.texParameteri() function as follows:
gl.texParameteri(gl.TEXTURE_2D,
gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri( gl.TEXTURE_2D,
gl.TEXTURE_WRAP_T, gl.CLAMP );
CSI4130 – Computer Graphics
Next lecture
• 3D Texturing Mapping
– Textbook:Chapter11.2 – 3D texture mapping
– Proceduraltextures
– Noise textures
CSI4130 Computer Graphics