Part I: Graphics Pipeline

Transcription

1 About Me Analytical Graphics, Inc. An Introduction to GPUs and WebGL n A few videos Patrick pjcozzi@siggraph.org Analytical Graphics, Inc. University of Pennsylvania See University of Pennsylvania Today n A few CIS 565 projects Hao Wu Ishaan Singh Yingting Xiao Xiaoyan Zhu Mikey Chen Vimanyu Jain n Graphics Pipeline n GPU design n WebGL Part I: Graphics Pipeline 1

2 Graphics Review: Rendering 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 Graphics Pipeline Walkthrough 7 Image from Images from Transforms in the Pipeline 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? Example: Textures can provide height maps for displacement mapping vertex P model modified vertex P clip P clip = (M model-view-projection )(P model ) Images from 2

3 Rasterization Determine what pixels a primitive overlaps 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) fragment How would you implement this? What about aliasing? fragment s color uniforms textures float diffuse = max(dot(n, L), 0.0); What happens to non-position vertex attributes during rasterization? What is the triangle-to-fragment ratio? 13 What exactly is the fragment input? What are examples of useful uniforms? Useful textures? Image from Another example: Texture Mapping Lighting and texture mapping Another example: Bump mapping 16 Image from 17 Image from

4 Depth Test Another example: Bump mapping Depth Test 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 Image from Depth Test Early 90s Pre GPU Part II: GPU design 22 Image from 24 Slide from 4

5 AMD Toyshop Demo AMD Leo Demo CPU and GPU Trends GPU Compute + Rendering Why GPUs? n NVIDIA GeForce 256 (1999) Exploit Parallelism CPU and GPU executing in parallel Data-parallel Pipeline n In hardware: Fixed-function vertex shading (T&L) Multi-texturing: bump maps, light maps, etc. 10 million polygons per second Direct3D 7 AGP bus parallel Hardware: texture filtering, rasterization, MAD, sqrt, etc. Hardware Chart from: Image from 5

6 NVIDIA GeForce 8 (2006) Why Unify Shader Processors? Evolution of the Programmable Graphics Pipeline Geometry Shader Ground-up GPU redesign Geometry Shaders Transform-feedback OpenGL 3 / Direct3D 10 Unified shader processors Support for GPU Compute Slide from 33 Slide from Mike Houston: WebGL Bring 3D to the Masses 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 n Put it in on a webpage Does not require a plugin or install n Make it run on most GPUs Desktop and mobile

7 WebGL n OpenGL ES 2.0 for JavaScript Seriously, JavaScript WebGL Performance 32x32 64x64 128x128 C ms 6.25 ms ms Chrome ms ms ms x slowdown CPU-intensive High-Profile WebGL Uses 37 Image from 32x32 64x64 128x128 C ms 9.43 ms ms Chrome ms ms ms x slowdown GPU-intensive (256 draws per frame) 38 Image from More Cesium WebGL Apps WebGL in Teaching Penn Student Work 7

8 WebGL Globe Ray Marching Distance Fields Procedural Infinite City Rohith Chandran Nop Jiarathanakul Alice Yang WebGL Hot-Air Balloons WebGL Deferred Shading WebGL Deferred Shading Yuanhui Chen Hao Wu and Guanyu He Sijie Tian and Yuqin Shao 8

9 WebGL Tools Web Apps WebGL Tools Web Apps WebGL Tools - Firefox WebGL Tools - Chrome 9