Chapter 1: Hello, Game Graphics
Chapter 4: Translucency and Depth
Chapter 6: Cameras and Coordinates
Chapter 7: Your First 3D Project
Chapter 9: Your First Lighting Model
Chapter 11: Cubemaps And Skyboxes
Chapter 14: Optimizing Shaders
Chapter 16: Writing Shaders in Unity
Chapter 17: Writing Shaders in UE4
Chapter 18: Writing Shaders in Godot
Chapter 1: Hello, Game Graphics
What Is Rendering?
What Is a Mesh?
Meshes are one of the methods we have for describing shapes in a way that will makesense to a computer.To define a shape, a mesh needsto store information about three things: vertices, edges, and faces
Verticesare points in 3D space.
Edgesare the lines that connect the vertices
Facesare 2D shapes formed by threeor more edges. You can think of faces as the space in between the edges of a mesh
Only a mesh’s vertices are stored in memory, and the edgesand faces of a mesh are defined implicitly by the order the vertices are in
Which side of a face is the front is important because many games won’t render the“back” side of mesh faces. This is an optimization known as backface culling, and is acommon optimization used in games
Vectors 101
Defining a Colorl in Computer Graphics
The Rendering Pipeline
What Is a Shader?
Summary
Chapter 2: Your First Shaders
Setting Things Up on Windows
Setting Up Our Project
Creating Your First Triangle
Your First Vertex Shader
The #version Preprocessor Directive
GLSL's in Keyword
GLSL's vec Data Types
Writing to gl_Position
Normalized Device Coordinates
Your First Fragment Shader
GLSL's out Keyword
Using Shaders in Our Project
Adding Color with Vertex Attributes
Introducing Fragment Interpolation
Summary
Chapter 3: Using Textures
Making a Quad
Introducing UV Coordinates
Using Textures in Shaders
Scrolling UV Coordinates
Adjusting Brightness with a Uniform
Basic Color Math
Mixing Textures with the "Mix" Instruction
Summary
Chapter 4: Translucency and Depth
Example Project Setup
Drawing Our Little Green Man
Alpha Testing with Discard
Building a Scene with Depth Testing
Creating Clouds with Alpha Blending
GLSL's min() and max() Functions
How Alpha Blending Works
Adding Some Sun with Additive Blending
Animating with Sprite Sheets
Summary
Chapter 5: Making Things Move
Making Our Character Walk Forward
Scaling Our Cloud in Shader Code
Rotating Objects with a Vertex Shader
Introducing Transformation Matrices
Animating a Transformation Matrix
The Identity Matrix
Summary
Chapter 6: Cameras and Coordinates
Using a View Matrix
Transform Matrices and Coordinate Spaces
Camera Frustums and Projections
Summary
Chapter 7: Your First 3D Project
Loading a Mesh
Making a Perspective Camera
Summary
Chapter 8: Diffuse Lighting
Smooth vs. Flat Shading with Normals
World Space Normals and Swizzling
The Normal Matrix
Why Lighting Calculations Need Normals
Normals are essential to lighting calculations because they allow us to figure out the relationshipbetween the direction of light that’s hitting our mesh’s surface and the orientation of thatsurface itself. We can think of every fragment on a mesh as being a tiny, completely flatpoint, regardless of the overall shape of the mesh. Using this mental model, light hitting afragment can be thought about like Figure 8-6.
What's a Dot Product?
Shading with Dot Products
Your First Directional Light
Creating a Rim Light Effect
Summary
Chapter 9: Your First Lighting Model
Specular Lighting
Your First Specular Shader
Combining Diffuse and Specular Light
Ambient Lighting
The Phong Lighting Model
Blinn-Phong Lighting
Using Textures to Control Lighting
Summary
Chapter 10: Normal Mapping
Notice that the very center metal portion of our shield mesh consists of very fewvertices. What would happen if we wanted that area to be covered with small scratches,or bumps, like you might expect from a shield made of unpolished metal? The centralsquare of the shield is made up of only four vertices total, which means that withoutadding more vertices to our mesh, we’re incapable of adding these sorts of small detailsin actual mesh geometry. We could add more vertices to let us model more detail, butthe more vertices a mesh has, the more vertex shader calculations need to be performedto render the mesh and the more memory the mesh takes up. Most games can’t afford toadd thousands of vertices to every object just for bumps and scratches.
To get around this problem, games use a special kind of texture map, called anormal map, to store normal vectors in the same way that our spec map texture storesinformation about our surface’s shininess. Since there are many more pixels in ournormal map texture than there are vertices in our mesh, this gives us a way to store manymore normal vectors than we can with just our geometry.
What Is a Normal Map?
A normal map is a texture that stores normalized vectorsinstead of colors in each pixel. This means that the RGB value of each pixel in a normalmap texture is really the XYZ value of a normal vector that we can use in our lightingcalculations
However, textures have no way to represent values less than 0, since there’s no suchthing as a negative color. This would normally mean that we would only be able to storevectors with positive components, but this would make normal maps almost useless forstoring normal vectors, since it would severely limit the directions that could be stored. Towork around this, normal maps treat the value 0.5 as 0.0. This means that a pixel with thecolor (0, 0.5, 1) represents the vector (-1, 0, 1). The side effect of this is that we have to dosome additional shader math after sampling a normal map, to convert the color value tothe desired vector direction.
You may have seen normal maps before; they usually have a blueish tint to them.For instance, the normal map we’re going to use on our shield is shown in Figure 10-3.This blue tint is because the blue channel of every pixel in a normal map correspondsto the Z value of the vectors being stored in the texture. Normal mapping uses a specialcoordinate space called tangent space, which is defined relative to the surface of ourmesh. For any given point, the Z axis in tangent space points in the direction of the meshgeometry’s normal vector. Since the normal that we provide in a normal map will alsopoint away from the surface of the mesh, this means that every normal vector we storewill have a positive Z value, resulting in every pixel having a blue value greater than 0.5.
Figure 10-3 shows the kinds of surface details that normal mapping is commonlyused to provide. If you look closely, you can see the bumpy surface of the metal areas ofour mesh, and the grain of the wood. These kinds of small details would take thousandsof triangles to render convincingly, but are handled easily by normal mapping.
Introducing Tangent Space
Tangent space is one of the weirder coordinate spaces out there, because it’s a perfragment coordinate space. Rather than being based on the orientation of the cameraor the position of an object, it’s defined relative to the surface of the mesh that eachfragment is from.
We already know that the Z axis in tangent space always points in the direction of thenormal vector that we get from our mesh’s geometry, so all that’s left is for us to figure outwhat the other two axes are. The X axis of tangent space comes from our mesh’s tangent
vectors. Tangent vectors are stored on each vertex of our mesh, just like vertex colors ornormal vectors, and store the direction of the U axis of our mesh’s UV coordinates. The Yaxis of tangent space is known as the bitangent, which is a vector that is perpendicular to
both the tangent and normal vectors. The bitangent is usually calculated in shader code,rather than stored in mesh memory. Put together, these three vectors create the axes ofa coordinate space that is oriented to the current fragment being processed.
From the diagram, it may look as though we could use any set of perpendicularvectors for the tangent and bitangent directions, but it’s important that they are alignedwith our UV coordinate directions so that our normal mapping calculations match upwith the texture samples for a given fragment.
You might be wondering why we’re storing our normal vectors in this weirdcoordinate space at all, rather than just storing the vectors in a normal map in objectspace. Some games do choose to work with object space normal maps, rather than themore typical tangent space ones that we’ve seen so far. However, object space normalmaps have several limitations, like not supporting mesh animations, and not allowingartists to reuse UV coordinates for different parts of a mesh. These limitations have ledmost games to opt for tangent space normal maps despite the increased complexity, sothat normal mapping can be applied to the widest range of meshes possible.
Working with Tangent Vectors
Introducing Cross Products
How Normal Mapping Works
Writing a Water Shader
There's More to Normal Mapping
Summary
Chapter 11: Cubemaps And Skyboxes
What Is a Cubemap?
Acubemap is a special kind of texture, and what makes it special is that it’s made upof a combination of six individual textures stored in memory in a way that lets us treatthem as though they’re a single object. Cubemaps get their name because each of thesesix textures is treated as though they are one of the faces of a cube
Loading a Cubemap in openFrameworks
Rendering a Cubemap on a Cube
Introducing Skyboxes
A skybox is a large cube that is always positioned in the same place that the camerais. This means that the camera will always be located inside of the cube, and the cubewill not appear to move if the camera is translated. A cubemap is applied to the facesof the cube that face inward, so that wherever the camera looks, rather than seeing abackground color, it will see a cubemap texture instead.
The Perspective Divide
Skyboxes and the Perspective Divide
Finishing Our Skybox
Creating Cubemap Reflections
There's More to Cubemaps
Summary
Chapter 12: Lighting in Depth
Directional Lights
Point Lights
Spot Lights
Multiple Light Sources
A More Flexible Multi-light Setup
Taking Things Farther
Summary
Chapter 13: Profiling Shaders
How to Measure Performance
CPU Time vs. GPU Time
Working Arround VSync
Working Around Your Computer
Practical Profiling
Introducing Nsight Graphics
Are We CPU or GPU bound?
A Handy Shortcut
Tracking Down A Problem Shader
Summary
Chapter 14: Optimizing Shaders
Move Calculations to Vertex Shaders
Avoid Dynamic Branching
Get MAD
Prefer GLSL Functions over Your Own
Use Write Masks
Avoid Unnecessary Overdraw
Final Thoughts
Summary
Chapter 15: Precision
What Is Floating-Point Precision
Case Study: Animation over Time
Working with Lower Precision Variables
Case Study: Point Light Problem
Summary
Chapter 16: Writing Shaders in Unity
Shaders and Materials in Unity
Introducing ShaderLab
A Solid Color Shader
Porting Our Blinn-Phong Shader
Translucent Shaders in Unity
Handing Multiple Lights
Passing Data from C# to Shader Code
Next Steps, ShaderGraph, and the Future
Summary
Chapter 17: Writing Shaders in UE4
Shaders, Materials, and Instances (Oh My!)
Making Things Red
UE4 Material Node Graph Fundamentals
Making a Rim Light Material
The Default Lit Material Inputs
Vertex Shader or Fragment Shader?
Working with Different Shading Models
Blend Modes and Texture Sample Nodes
Passing Data from Code to Materials
How Does All This Relate to Shader Code?
Summary
Chapter 18: Writing Shaders in Godot
Shaders and Materials
The Godot Shading Language
Fragment Shader Output Variables
Making a Custom Rim Light Shader
Custom Vertex Shaders
UV Animation
Translucent Shaders and Blend Modes
Passing Data from Code to Shaders
The Future: Visual Shader Editing?
Summary