an introduction to gpus and webgl - drexel cci · an introduction to gpus and webgl patrick cozzi...
TRANSCRIPT
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
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
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
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
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
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
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
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
WebGL Tools – Web Apps
WebGL Tools – Web Apps
WebGL Tools - Firefox
WebGL Tools - Chrome