Department of Computer Science [email protected]...
Transcript of Department of Computer Science [email protected]...
![Page 1: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/1.jpg)
RenderingCPSC 591/691: Fall 2016
GPU-Programming
Allan [email protected]
Department of Computer ScienceUniversity of Calgary
October 19th, 2016
![Page 2: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/2.jpg)
Outline
● History of 3D Graphics● GPU vs CPU● OpenGL● GLSL
○ Storing data○ Shader communication○ Variables and data types
● Examples
![Page 3: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/3.jpg)
History of 3D Graphics
● Battlezone (1980)[Image from Creative Commons]
![Page 4: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/4.jpg)
History of 3D Graphics
● Battlezone (1980)● 3D Monster Maze (1981) [Image from Creative Commons]
![Page 5: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/5.jpg)
History of 3D Graphics
● Battlezone (1980)● 3D Monster Maze (1981)● Wolfenstein 3D (1992)
[Image from Wolfenstein 3D's Steam store page]
![Page 6: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/6.jpg)
History of 3D Graphics
● Battlezone (1980)● 3D Monster Maze (1981)● Wolfenstein 3D (1992)● Super Mario Kart (1992)
[Image from Creative Commons]
![Page 7: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/7.jpg)
History of 3D Graphics
● Battlezone (1980)● 3D Monster Maze (1981)● Wolfenstein 3D (1992)● Super Mario Kart (1992)● Doom (1993)
[Image from Doom's Steam store page]
![Page 8: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/8.jpg)
History of 3D Graphics
● Battlezone (1980)● 3D Monster Maze (1981)● Wolfenstein 3D (1992)● Super Mario Kart (1992)● Doom (1993)● Quake (1996)
[Image from Quake's Steam store page]
![Page 9: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/9.jpg)
History of 3D Graphics
● Battlezone (1980)● 3D Monster Maze (1981)● Wolfenstein 3D (1992)● Super Mario Kart (1992)● Doom (1993)● Quake (1996)● …● Assassin's Creed (2013)
![Page 10: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/10.jpg)
History of 3D Graphics [Image from Assassin's Creed® Rogue by Ubisoft]
![Page 11: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/11.jpg)
Outline
● History of 3D Graphics● GPU vs CPU● OpenGL● GLSL
○ Storing data○ Shader communication○ Variables and data types
● Examples
![Page 12: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/12.jpg)
GPU vs CPU[http://www.tomshardware.com/forum/356253-33-tasks]
![Page 13: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/13.jpg)
GPU vs CPU
[Image from Creative Commons]
![Page 14: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/14.jpg)
Streaming Multiprocessor (SM)
Memory Hierarchy
[Images from Nvidia]
Each SM has its own: Control units, registers, execution pipelines, cachesCUDA Core = SP (Streaming processor)
![Page 15: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/15.jpg)
GPU architecture [Images from Nvidia]
![Page 16: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/16.jpg)
Outline
● History of 3D Graphics● GPU vs CPU● OpenGL● GLSL
○ Storing data○ Shader communication○ Variables and data types
● Examples
![Page 17: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/17.jpg)
An Evolving Standard
● The standard has seen over 20 years of evolution
Over time, some extensionsbecome part of the standard.
![Page 18: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/18.jpg)
Fixed Function Pipeline
[Image from Flipcode archives]
![Page 19: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/19.jpg)
Fixed Function Pipeline: OpenGL 1
[Image from 3DGEP]
![Page 20: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/20.jpg)
Programmable Pipeline: OpenGL 2
[Image from 3DGEP]
![Page 21: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/21.jpg)
Programmable Pipeline: OpenGL 3
[Image from 3DGEP]
![Page 22: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/22.jpg)
Programmable Pipeline: OpenGL 3
[Image from 3DGEP]
![Page 23: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/23.jpg)
Programmable Pipeline: OpenGL 4
[Image from 3DGEP]
![Page 24: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/24.jpg)
Opengl 4
● Vertex Shader ○ Processing of each individual vertex
● Tessellation Control○ The amount of tessellation
● Tessellation Evaluation ○ Compute interpolations
● Geometry Shader○ Emit different primitives
● Fragment Shader○ Operations per pixel
[Superbible OpenGL]
![Page 25: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/25.jpg)
Shading Languages
● Assembly● Cg● HLSL● GLSL● OpenCL● CUDA● Vulkan
![Page 26: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/26.jpg)
Outline
● History of 3D Graphics● GPU vs CPU● OpenGL● GLSL
○ Storing data○ Shader communication○ Variables and data types
● Examples
![Page 27: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/27.jpg)
Opengl Shader Language (GLSL)
● Basic concepts
○ C-like language
○ Execution is inherently parallel
○ No pointers
○ Vector operators
○ Built-in support for many mathematical functions
○ For efficiency, avoid branches and loops
![Page 28: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/28.jpg)
GLSL - Storing data
● Attributes
○ Vertex Array Object (VAO) and Vertex Buffer Object (VBO)
○ Data that changes per vertex
■ Position, normals, texture coordinates, etc.
○ 4-tuples: (x, y, z, w)
○ Think homogeneous coordinates
● Uniforms
○ Data that stays the same for all vertices
○ Can be scalar, vector or matrix types
![Page 29: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/29.jpg)
GLSL - Storing data
● Texture data
○ Data to be applied as a texture
■ not necessarily - Texture Buffer Objects
○ Support for 2D and 3D floating point textures
![Page 30: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/30.jpg)
GLSL - Shader communication
● Outs
○ Output from the shaders, used to pass data from one stage to the next
○ Client does not have access
○ Variables IN and OUT
![Page 31: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/31.jpg)
Opengl Shader Language (GLSL)● Variable and data types
![Page 32: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/32.jpg)
Opengl Shader Language (GLSL)● Variable and data types
![Page 33: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/33.jpg)
Per pixel lighting
[Image from cgchannel]
![Page 34: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/34.jpg)
Vertex Shader
![Page 35: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/35.jpg)
Fragment Shader
![Page 36: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/36.jpg)
Texture Mapping
[Image from Blender documentation]
![Page 37: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/37.jpg)
Normal Mapping
[Image from Independent Developer]
![Page 38: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/38.jpg)
Framebuffer
● Support to several attachments ○ Color attachment ○ Depth attachment
![Page 39: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/39.jpg)
Framebuffer
● Support to several attachments ○ Color attachment ○ Depth attachment
render target
![Page 40: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/40.jpg)
Framebuffer● Render to texture
First pass Second pass
![Page 41: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/41.jpg)
Render to texture
● Create framebuffer● Create the attachments ● Bind ● Unbind
![Page 42: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/42.jpg)
Render to texture
● Create framebuffer● Create the attachments ● Bind ● Unbind
Applications
![Page 43: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/43.jpg)
Render to texture
● Create framebuffer● Create the attachments ● Bind ● Unbind
Applications
● Deferred Shading● Ambient Occlusion● Shadow Mapping
![Page 44: Department of Computer Science acarocha@ucalgary.ca ...pages.cpsc.ucalgary.ca/~acarocha/CPSC591/files/TUT10/slides.pdf · Department of Computer Science University of Calgary October](https://reader030.fdocuments.in/reader030/viewer/2022041006/5eab390ad382a81efb032e8a/html5/thumbnails/44.jpg)
Render to texture
● Create framebuffer● Create the attachments ● Bind ● Unbind
Applications
● Deferred Shading● Ambient Occlusion● Shadow Mapping
Let's run this example!