Vertex and Fragment Shaders for Game Developers This book is intended to be the gentlest introduction possible to the theory and practice of writing shaders for video games.
Practical Shader Development: Vertex and Fragment Shaders for Game Developers Kyle Halladay Bristol, UK ISBN-13(pbk:978-1-4842-44562 ISBN-13(electronic): 978-1-4842-4457-9 htps:/ doi. org/10.1007/978-1-4842-4457-9 Copyright o 2019 by Kyle Halladay This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein Managing Director, Apress Media LLC: Welmoed Spahr Acquisitions Editor: Jonathan Gennick Development Editor: Laura Berenson Coordinating Editor: Jill Balzano CoverimagedesignedbyFreepik(www.freepik.com) Distributed to the book trade worldwide by Springer Science+ Business Media New York, 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax(201)348-4505, e-mail orders-ny@springer sbm.com,orvisitwww.springeronline.comApressMedia,LlcisaCaliforniaLlcandthesolemember (owner )is Springer Science Business Media Finance Inc(SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation Forinformationontranslationspleasee-mailrights@apress.com,orvisitwww.apress.com/ rights-permissions Apress titles may be purchased in bulk for academic, corporate, or promotional use eBook versions and licenses are also available for most titles. For more information reference our print and eBook bulk sales webpageatwww.apress.com/bulk-sales Any source code or other supplementary material referenced by the author in this book is available to readersonGithubviathebooksproductpage,locatedatwww.apress.com/9781484244562.Formore detailedinformationpleasevisitwww.apress.com/source-code Printed on acid-free paper To my wife, Sarah Table of contents About the author About the technical reviewer ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■口■■■■■■■■■■■■■■■■■■■■■■■口■■■■■■■■■■■■■■■■■■■■■■■ Acknowledgments mmmmmmmmm BRBR RR RR RR ERRI EaEI E XVii Introduction Chapter 1: Hello, Game Graphics a What Is Rendering What is a mesh? 2 Vectors 101 4 Detining a Color in Computer Graphics...memenmemnnmnmnmmnm 10 The Rendering Pipeline 12 What is a shader? 14 Summary 15 Chapter 2: Your First Shaders mmm 17 Setting Things Up on Windows 18 Setting Up our project....……18 Creating Your First Triangle Your first vertex shader……22 The #version Preprocessor Directive 23 GLSL'S in Keyword 23 GLSL's vec Data Types 24 Writing to gl_ position…,,…, 24 Normalized device TABLE OF CONTENTS Your First Fragment shader 27 GLSL's out Keyword 27 Using Shaders in Our Project.…,… 28 Adding Color with Vertex Attributes. Introducing Fragment Interpolation…… .33 Introducing Uniform Variables. Summary…… 36 Chapter 3: Using Textures. aaaaaaasaaseassaamaataaaaaaaaaaamaaammammaaaaa mattaaaaaaaaasaasaasnannan. 37 Making a Quad… 38 Introducing UV Coordinates....................................40 Using Textures in Shaders 45 Scrolling UV coordinates 48 Adjusting Brightness with a Uniform... 52 Basic color math… 56 Mixing Textures with the"Mix" Instruction…… …60 Summary 63 Chapter 4: Translucency and Depth ■■■■■■■■■■■■■■■■■■■■■■■■■■■口■■■■■■■■■■■■■■■■■■■■■口■■口 a65 EXample Project Setup…,,,,,…66 Drawing Our Little Green Man……,,… 66 Alpha Testing with Discard. Building a Scene with Depth Testing 70 Creating Clouds with Alpha blending…,,,,,…………72 GLSLs min( and max( Functions 75 How Alpha Blending Works 76 Adding Some Sun with Additive Blending….…………78 Animating with Sprite Sheets 83 Summary.aname.a.. 87 TABLE OF CONTENTS Chapter 5: Making Things Move a RRRsRaaIImaa IREassnaaamaIIRaaIIniaa 89 Making Our Character Walk Forward ,90 Scaling our cloud in shader code .mmmmmmmmmmmmmmmmmmmmmmmmmmmm. 93 Rotating Objects with a Vertex Shader 97 Introducing Transformation Matricesmmmmmmmmmman..n..mn.. 100 Animating a transformation Matrix ..mmmmm..mmmmmmmmmm.. 105 The Identity Matrix…… 109 Summary.,,,,,,,,,,,,, …111 Chapter6: Cameras and coordinates,,…,,…,…,,,,mm,m,m,m,m113 Using a view Matrix 114 Transform Matrices and coordinate spaces ..mmmmmmmmmmnmmm..118 Camera Frustums and projections.eeee nuns. 124 Summary…,,, 128 Chapter 7: Your First 3D Project ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■国■■国a■口■■ 129 Loading a mesh 129 Making a Perspective camera mmnememmnmmnmnamamannananmn 132 Summary Chapter 8: Diffuse Lighting ng137 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■口■■口■■■■■■ Smooth vs. Flat Shading with Normals.,,.,.,,,,,………140 World Space Normals and Swizzling 142 The normal matrix mmm 144 Why lighting Calculations Need Normals .....m........m.......146 What's Shading with Dot Products 148 Your First Directional light 151 Creating a Rim Light Effect 154 Summary… ,160 TABLE OF CONTENTS Chapter 9: Your First Lighting Model mmmmmmmmmmmma 161 Specular Lighting 161 Your First Specular Shader ..................................................163 Combining diffuse and specular light. 167 Ambient Lighting. The Phong lighting Model . ..m.....mmmmm. 169 Binn- Phong Lighting… 172 Using Textures to Control Lighting 175 Summary ,179 Chapter 10: Normal Mapping. ummmanamn Imaan 181 What Is a normal map? ..mmmmmmmmmmmmmmmmmmmmmmmmmmmmm.m 182 Introducing Tangent Space Working with Tangent vectors ,185 Introducing Cross Products.mm. …186 How Normal Mapping Works.,,,,,,,,,,,,,,…,…,……,188 Writing a Water shader∴ 191 There's More to Normal Mapping.m... nn.n.....n.. 199 Summary.…200 Chapter 11: Cubemaps And skyboxes.aa. ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■口■■■■■■■■口■■■■■■■■口■■■■■■口 201 What is a cubemap? Loading a cubemap in open Frameworks 203 Rendering a cubemap on a cube. ................m.m.. 203 Introducing Skyboxes.eaea.a. 207 The Perspective Divide. Skyboxes and the Perspective Divide. Finishing Our Skybox. Creating Cubemap Reflections 212 There's more to Cubemaps 215 Summary 215 TABLE OF CONTENTS Chapter 12: Lighting in Depth mmamammnmmmmmnmman 217 Directional Lights 217 Point Lights 219 Spot lights 226 Multiple Light Sources. A More Flexible Multi-light Setup.mmammmmnnnnnnnnnnnaaaaaammmnn 240 Taking Things Farther….,,,…, 246 Summary... …247 Chapter 13: Profiling Shaders amama mmammammaamna 249 How to Measure performance 249 CPU Time vs, GPU Time mmm. 250 Working Around VSync 251 Working around Your Computer 255 Practical Profiling 255 Introducing Nsight Graphics 259 Are We CPu or gPu bound? 262 A Handy Shortcut 265 Tracking down a Problem Shader 266 Summary 270 Chapter 14: Optimizing Shaders 271 Move calculations to Vertex shaders Avoid Dynamic Branching Get mad 277 Prefer glsl Functions over your own 278 Use Write masks 279 Avoid Unnecessary Overdraw 280 Final Thoughts 281 Summary..,,…,282 TABLE OF CONTENTS Chapter15: Precis0m,,,,,围围283 What Is Floating-Point Precision 283 Case Study: Animation over Time Working with Lower Precision Variables. Case Study: Point Light problem 294 Summary.........298 Chapter 16: Writing Shaders in Unity mmmm ammmmmmamamammaamaaammmamamnmamnn 299 Shaders and Materials in Unity…..,……,299 Introducing ShaderLab 300 A Solid color shader ,303 Porting Our Blinn-Phong Shader…..,.,,,,,,,,,,……,309 Translucent Shaders in Unity. Handling Multiple Lights 319 Passing Data from C# to Shader Code 323 Next Steps, ShaderGraph, and the Future Summary 325 Chapter 17: Writing Shaders in UE4 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■口■■■■■■■■■■■■■■■■口a口■■ 327 Shaders, Materials, and Instances( Making Things Red. UE4 Material Node Graph Fundamentals 334 Making a Rim Light Material.m..m.. 337 The Default Lit Material Inputs 340 rtex shader or Fragment Shader? 342 Working with Different Shading Models m. mmmnnaammnonnatmmennn. an 346 Blend Modes and Texture Sample Nodes. mmmmmnmammnemnmnmnmamnmnmnmnmnmmmmnmn 347 Passing Data from Code to Materials 348 How Does all this relate to shader code? 348 Summary.....,..349