an introduction to a few videos - drexel ccidavid/classes/cs430/lectures/intro-gpu… · fragment...

9
1 An Introduction to GPUs and WebGL Patrick Cozzi @pjcozzi [email protected] Analytical Graphics, Inc. University of Pennsylvania About Me See http://www.seas.upenn.edu/~pcozzi/ Analytical Graphics, Inc. A few videos University of Pennsylvania A few CIS 565 projects Hao Wu Mikey Chen Vimanyu Jain Ishaan Singh Yingting Xiao Xiaoyan Zhu Today Graphics Pipeline GPU design WebGL Part I: Graphics Pipeline

Upload: others

Post on 22-May-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: An Introduction to A few videos - Drexel CCIdavid/Classes/CS430/Lectures/Intro-GPU… · Fragment Shader Vertex Shader Primitive Assembly Fragment Shader Rasterizer Per-Fragment Tests

1

An Introduction to GPUs and WebGL

Patrick Cozzi @pjcozzi [email protected]

Analytical Graphics, Inc. University of Pennsylvania

About Me

See http://www.seas.upenn.edu/~pcozzi/

Analytical Graphics, Inc.

n A few videos

University of Pennsylvania

n A few CIS 565 projects

Hao Wu Mikey Chen Vimanyu Jain

Ishaan Singh Yingting Xiao Xiaoyan Zhu

Today

n Graphics Pipeline n GPU design n WebGL

Part I: Graphics Pipeline

Page 2: An Introduction to A few videos - Drexel CCIdavid/Classes/CS430/Lectures/Intro-GPU… · Fragment Shader Vertex Shader Primitive Assembly Fragment Shader Rasterizer Per-Fragment Tests

2

Graphics Review: Rendering

Image from http://www.cs.cmu.edu/afs/cs.cmu.edu/academic/class/15869-f11/www/lectures/01_intro.pdf 7

Graphics Review: Rendering

n Rendering ¨ Goal: Assign color to pixels

n Two Parts ¨ Visible surfaces

n  What is in front of what for a given view ¨ Shading

n  Simulate the interaction of material and light to produce a pixel color

8

Graphics Pipeline Walkthrough

Vertex Shader

Primitive Assembly

Fragment Shader

Rasterizer

Per-Fragment Tests

Blend

Vertex Assembly

Framebuffer

Images from http://www.cs.cmu.edu/afs/cs.cmu.edu/academic/class/15869-f11/www/lectures/01_intro.pdf 9

Vertex Shader

Vertex Shader

Primitive Assembly

Fragment Shader

Rasterizer

Per-Fragment Tests

Blend

Vertex Assembly

Framebuffer Pclip = (Mmodel-view-projection)(Pmodel)

•  Transform incoming vertex position from model to clip coordinates

•  Perform additional per-vertex computations; modify, add, or remove attributes passed down the pipeline

•  Formerly called the Transform and Lighting (T&L) stage. Why?

Vertex Shader

Pmodel

Pclip

Vertex Shader

vertex

modified vertex

10

Transforms in the Pipeline Vertex Shader

Vertex Shader

Primitive Assembly

Fragment Shader

Rasterizer

Per-Fragment Tests

Blend

Vertex Assembly

Framebuffer

•  Example: Textures can provide height maps for displacement mapping

Images from http://developer.nvidia.com/content/vertex-texture-fetch 12

Page 3: An Introduction to A few videos - Drexel CCIdavid/Classes/CS430/Lectures/Intro-GPU… · Fragment Shader Vertex Shader Primitive Assembly Fragment Shader Rasterizer Per-Fragment Tests

3

Rasterization

Vertex Shader

Primitive Assembly

Fragment Shader

Rasterizer

Per-Fragment Tests

Blend

Vertex Assembly

Framebuffer

•  Determine what pixels a primitive overlaps

•  How would you implement this?

•  What about aliasing?

•  What happens to non-position vertex attributes during rasterization?

•  What is the triangle-to-fragment ratio?

13

Fragment Shader

Vertex Shader

Primitive Assembly

Fragment Shader

Rasterizer

Per-Fragment Tests

Blend

Vertex Assembly

Framebuffer

•  Shades the fragment by simulating the interaction of light and material

•  Loosely, the combination of a fragment shader and its uniform inputs is a material

•  Also called a Pixel Shader (D3D)

•  What exactly is the fragment input? •  What are examples of useful uniforms? Useful

textures?

Fragment Shader

fragment

fragment’s color

uniforms

textures

14

Fragment Shader

Vertex Shader

Primitive Assembly

Per-Fragment Tests

Blend

Vertex Assembly

Framebuffer

Image from http://http.developer.nvidia.com/CgTutorial/cg_tutorial_chapter05.html

float diffuse = max(dot(N, L), 0.0);

Fragment Shader

Rasterizer

15

Fragment Shader

Vertex Shader

Primitive Assembly

Per-Fragment Tests

Blend

Vertex Assembly

Framebuffer

•  Another example: Texture Mapping

Image from http://www.realtimerendering.com/

Fragment Shader

Rasterizer

16

Fragment Shader

Vertex Shader

Primitive Assembly

Per-Fragment Tests

Blend

Vertex Assembly

Framebuffer

•  Lighting and texture mapping

Fragment Shader

Rasterizer

Image from http://www.virtualglobebook.com/ 17

Fragment Shader

Vertex Shader

Primitive Assembly

Per-Fragment Tests

Blend

Vertex Assembly

Framebuffer

•  Another example: Bump mapping

Fragment Shader

Rasterizer

18

Page 4: An Introduction to A few videos - Drexel CCIdavid/Classes/CS430/Lectures/Intro-GPU… · Fragment Shader Vertex Shader Primitive Assembly Fragment Shader Rasterizer Per-Fragment Tests

4

Fragment Shader

Vertex Shader

Primitive Assembly

Per-Fragment Tests

Blend

Vertex Assembly

Framebuffer

•  Another example: Bump mapping

Fragment Shader

Rasterizer

19

Depth Test

Vertex Shader

Primitive Assembly

Fragment Shader

Rasterizer

Per-Fragment Tests

Blend

Vertex Assembly

Framebuffer

•  Finds visible surfaces •  Once called “ridiculously expensive” •  Also called the z-test

•  Does it need to be after fragment shading?

Scissor Test

Stencil Test

Depth Test

20

Depth Test

Image from http://www.virtualglobebook.com/ 21

Depth Test

Image from http://www.virtualglobebook.com/ 22

Part II: GPU design

Early 90s – Pre GPU

Slide from http://s09.idav.ucdavis.edu/talks/01-BPS-SIGGRAPH09-mhouston.pdf 24

Page 5: An Introduction to A few videos - Drexel CCIdavid/Classes/CS430/Lectures/Intro-GPU… · Fragment Shader Vertex Shader Primitive Assembly Fragment Shader Rasterizer Per-Fragment Tests

5

AMD Toyshop Demo

http://www.youtube.com/watch?v=LtxvpS5AYHQ

AMD Leo Demo

http://www.youtube.com/watch?v=zYweEn6DFcU

GPU Compute + Rendering

http://www.nvidia.com/object/GTX_400_games_demos.html

CPU and GPU Trends

Chart from: http://proteneer.com/blog/?p=263

Why GPUs?

n Exploit Parallelism ¨ CPU and GPU executing in parallel ¨ Data-parallel ¨ Pipeline parallel

n Hardware: texture filtering, rasterization, MAD, sqrt, etc.

29

NVIDIA GeForce 256 (1999)

Vertex Shader

Primitive Assembly

Fragment Shader

Rasterizer

Per-Fragment Tests

Blend

Vertex Assembly

Framebuffer

Hardware

Image from http://en.wikipedia.org/wiki/File:VisionTek_GeForce_256.jpg

In hardware: •  Fixed-function vertex shading (T&L) •  Multi-texturing: bump maps, light maps, etc. •  10 million polygons per second •  Direct3D 7 •  AGP bus

30

Page 6: An Introduction to A few videos - Drexel CCIdavid/Classes/CS430/Lectures/Intro-GPU… · Fragment Shader Vertex Shader Primitive Assembly Fragment Shader Rasterizer Per-Fragment Tests

6

NVIDIA GeForce 8 (2006)

Vertex Shader

Primitive Assembly

Fragment Shader

Rasterizer

Per-Fragment Tests

Blend

Vertex Assembly

Framebuffer

•  Ground-up GPU redesign •  Geometry Shaders •  Transform-feedback •  OpenGL 3 / Direct3D 10 •  Unified shader processors •  Support for GPU Compute

Geometry Shader

31

Why Unify Shader Processors?

Slide from http://s08.idav.ucdavis.edu/luebke-nvidia-gpu-architecture.pdf

32

Evolution of the Programmable Graphics Pipeline

Slide from Mike Houston: http://s09.idav.ucdavis.edu/talks/01-BPS-SIGGRAPH09-mhouston.pdf 33

Part III: WebGL n The web has text, images, and video

¨ What is the next media-type? n We want to support

¨ Windows, Linux, Mac ¨ Desktop and mobile

WebGL

35

Bring 3D to the Masses

n Put it in on a webpage ¨ Does not require a plugin or install

n Make it run on most GPUs

36

Page 7: An Introduction to A few videos - Drexel CCIdavid/Classes/CS430/Lectures/Intro-GPU… · Fragment Shader Vertex Shader Primitive Assembly Fragment Shader Rasterizer Per-Fragment Tests

7

WebGL

Image from http://www.khronos.org/assets/uploads/developers/library/2011-siggraph-mobile/Khronos-and-the-Mobile-Ecosystem_Aug-11.pdf

n OpenGL ES 2.0 for JavaScript ¨ Seriously, JavaScript

37

WebGL Performance

Image from http://openglinsights.com/

32x32 64x64 128x128 C++ 1.9 ms 6.25 ms 58.82 ms Chrome 18 27.77 ms 111.11 ms 454.54 ms x slowdown 14.62 17.78 7.73

32x32 64x64 128x128 C++ 3.33 ms 9.43 ms 37.03 ms Chrome 18 12.82 ms 22.72 ms 41.66 ms x slowdown 3.85 2.41 1.13

CPU-intensive

GPU-intensive (256 draws per frame) 38

High-Profile WebGL Uses

More Cesium WebGL Apps WebGL in Teaching

Penn Student Work

Page 8: An Introduction to A few videos - Drexel CCIdavid/Classes/CS430/Lectures/Intro-GPU… · Fragment Shader Vertex Shader Primitive Assembly Fragment Shader Rasterizer Per-Fragment Tests

8

WebGL Globe

Rohith Chandran

Ray Marching Distance Fields

Nop Jiarathanakul

Procedural Infinite City

Alice Yang

WebGL Hot-Air Balloons

Yuanhui Chen

WebGL Deferred Shading

Hao Wu and Guanyu He

WebGL Deferred Shading

Sijie Tian and Yuqin Shao

Page 9: An Introduction to A few videos - Drexel CCIdavid/Classes/CS430/Lectures/Intro-GPU… · Fragment Shader Vertex Shader Primitive Assembly Fragment Shader Rasterizer Per-Fragment Tests

9

WebGL Tools – Web Apps WebGL Tools – Web Apps WebGL Tools - Firefox

WebGL Tools - Chrome