Computer Graphics
COMP3421/9415 2021 Term 3 Lecture 4
What did we cover last lecture?
Starting to look at 2D Rendering
¡ñ The OpenGL Pipeline
¡ñ How pixels are coloured in a polygon ¡ñ Textures
What are we covering today
Making games in 2D (not quite, but close!)
¡ñ Textures and some subtleties
¡ñ Transformation Matrices
¡ñ A breakdown of a Sprite based game
Textures
Textures Recap
What we’ve seen about Textures
¡ñ Use of image files in polygon rendering
¡ñ Using Vertex attributes to “map” vertices to coordinates in the image
¡ñ Using Fragment shaders to pick up colours from the image
¡ð and interpolate them across the shape
Images credit: id Software
Why are Textures useful?
Textures vs Coloured Vertices
¡ñ If we colour verts . . .
¡ð We’d need a lot of verts to do detailed colour patterns
¡ð Simple, flat surfaces like walls, carpet etc would need a LOT of verts to represent things
like weave patterns or wallpaper
¡ð All these extra verts will take a lot of time for our GPU to process and a lot more memory
to store
¡ñ If we use a texture . . .
¡ð We can use simple geometry and allow the texture to carry the details
¡ð Minimal amount of verts
¡ð Minimal amount of extra work in the vert and frag shaders
Simple Geometry, Complex Colours
Image credit: Gearbox Software
Texturing in the OpenGL Pipeline
We’re starting with using 2D Textures
¡ñ We load our image into OpenGL (code details in your tutorials)
¡ñ We sample from textures using a coordinate system from 0 to 1 (floats)
¡ñ We can add texture coordinates to our verts
¡ñ This allows the fragment shader to sample from
the colours in the texture
Image credit: learnopengl.com
Texture Wrapping
How do textures deal with sampling outside 0-1
¡ñ We can sample past 0 and 1 if we want
¡ñ Sampling behaviour changes depending on how we want to deal with this
¡ñ Default just repeats the texture again
¡ñ But other options have their uses . . .
Image credit: learnopengl.com
Texture Wrapping Options
Why might we go outside the 0-1 range for texture sampling?
¡ñ Repeat: Wallpaper, wire mesh or other constructed surface
¡ñ Mirrored Repeat: Grass, dirt or other natural surface (google seamless
grass texture)
¡ñ Clamp to Edge: hmm . . . you are only going outside a little and don’t want
things to reappear?
¡ñ Clamp to Border: Posters, stickers, decals? Treat the texture as a one off
that never repeats
Texture Filtering
It’s not a one to one match between fragments and Texture Pixels
¡ñ We call the Texture Pixels Texels (they’re definitely not pixels!!!)
¡ñ When a fragment samples, it’s not guaranteed to land in the middle of a
texel
¡ñ OpenGL has different options for this:
¡ð GL Nearest – take the texel that you’re the closest to the centre of
¡ð GL Linear – Take a linear interpolation of the colours in all the texels you’re near
Image credit: learnopengl.com
Mipmaps
Do both of those filtering options look bad?
¡ñ The ideal is 1 fragment samples 1 texel
¡ñ Textures need to be sized based on the object?
¡ñ This is awkward if we can move around and
objects change size based on our distance to
them!
¡ñ Mipmaps are sets of textures that all represent
the same texture at different sizes
Image credit: learnopengl.com
Mipmaps
¡ñ Sampling without mipmapping can lead to some strange patterns
¡ñ Mipmapping allows textures to degrade gracefully into the distance
Matrix Transforms
Transforming Objects
Our vertices have been set in stone up to this point
¡ñ Wouldn’t it be interesting if they were more than meets the eye?
¡ñ We should roll out a new technique to change the position of vertices
¡ñ Option 1: We do this manually
¡ð Write new vertex positions and rebuild the VBO 60 times a second
¡ð While technically possible, this is very cumbersome
¡ñ Option 2: We use the Matrix of leadership
¡ð Linear Algebra gives us some easy tools for transforming vectors
¡ð 2D or 3D vertices happen to be very similar to maths vectors
Image credit: Hasbro
Vectors and Matrices
How well do you remember your Linear Algebra?
¡ñ We’re not going to go over it in lectures
¡ñ But you might need to refresh:
¡ð Vector arithmetic, especially dot product, cross product and normalisation
¡ð Matrix arithmetic, especially multiplying matrices and multiplying matrices and vectors
¡ñ Vectors are directions measured by coordinates
¡ñ Vertices can be thought of as vectors starting at (0,0) and ending where
the vert is
Vector Math in a visual sense
If we’re going to use vectors in a visual system . . .
¡ñ Adding vectors is like following them on a journey, each vector one after another
¡ñ Subtracting vectors tells you how far apart they are
¡ñ Dot product gives us an idea of whether two vectors are aiming in similar
directions (great for lighting and reflections)
¡ñ Cross product takes two vectors and gives us another that’s perpendicular
(90 degrees) to the other two (great for building up coordinate axes)
Visual Vector Arithmetic
Adding Subtracting Cross Product
Images credit: learnopengl.com
Applying Matrices to Vertices (by multiplying)
We can multiply a vector by a matrix
¡ñ Which means we can apply a matrix to a vertex
¡ñ The output of multiplying a matrix with a vector is a vector
¡ñ So what it will do is possibly change the values in the vertex, which
changes its position
¡ñ Even more interesting is applying the same matrix to all the verts in a
shape or object
¡ñ We have some pre-made transform matrices that we’ll use a LOT in
graphics . . .
Vectors in OpenGL
x,y,z,w
¡ñ There’s always one more coordinate than the number of dimensions
¡ñ We call this ‘w’
¡ñ For the moment it’s just going to be 1
¡ñ It won’t make a difference now, but definitely will in the future
¡ñ So a 2D vector (or a vertex being transformed) is: {x,y,w}
¡ñ and 3D is: {x,y,z,w}
Scale
Changing the size of an object
¡ñ This matrix can change how far vertices are from the origin by a multiplicative amount
¡ñ If applied to multiple verts in an object, they will change the size of the object
Scale x
0
0
0
Scale y
0
0
0
1
Translate
Moving an object
¡ñ This matrix can move points by a fixed amount
¡ñ Applying this to all the vertices in an object will
move the object to a new location without changing the object
1
0
Tx
0
1
Ty
0
0
1
Rotate
Spinning an object
¡ñ This matrix will rotate a vertex around (0,0)
¡ñ If applied to the verts in an object, it will rotate
the entire object around (0,0) without changing the object
cos¦È
-sin¦È
0
sin¦È
cos¦È
0
0
0
1
Combining Transforms
Matrices can be multiplied with each other
¡ñ This combines the effects of the two transforms
¡ñ Remember that this is NOT commutative
¡ñ A.B ¡ B.A
¡ñ The order you use transforms is important!
¡ñ There is no limit to the number of transforms that can be combined into a single matrix
Image credit: Hasbro
Two different orders
Translate then Rotate Rotate then Translate
Transforms in OpenGL
Now that we’ve reviewed all that maths
¡ñ We’re now going to delegate the work to a library
¡ñ GLM applies the matrices for us
¡ñ We only rarely will have to manually enter values into a matrix or
memorise Scale/Rotate/Translate
A small Case Study
With Textures and Transforms . . .
Is it possible to replicate Mario?
Image credit: Nintendo (but totally an artwork by )
Sprites (Textures)
We could use this image as a texture for Mario
¡ñ Change texture coordinates based on what actions we take
¡ñ Or what state Mario is in (mushroom or flower)
¡ñ This means Mario is just a rectangle with some code handling texture coords
Sprites of credit: Nintendo
Transforms for do controls affect the character?
¡ñ Directional input:
¡ð Translate the character somewhere
¡ð Change the sprite to a running sequence?
¡ð Jumps might need special code
¡ð Wait, do we translate Mario or do we translate the whole world?
¡ñ Change of state:
¡ð Picking up a mushroom makes us scale Mario vertically to match the larger sprite
¡ð Do we scale the verts before or after we translate to the current position?
Environment
Sprites/Textures for the Environment
¡ñ Repeated textures for the ground
¡ð What kind of texture coordinates might we use for the ground under Mario?
¡ð What wrapping system would we use?
¡ñ How are we building the background?
¡ð Flat colour per level?
¡ð Individual objects with things like clouds or mountain textures on them?
¡ð Or one big sliding texture on a big rectangle?
What did we learn today?
Textures and Transforms
¡ñ Details on Texturing
¡ñ Using Linear Algebra to transform vertices
¡ñ A quick look at making 2D games