About Me Analytical Graphics, Inc. n A few videos An Introduction to GPUs and WebGL Patrick Cozzi @pjcozzi [email protected] Analytical Graphics, Inc. University of Pennsylvania See http://www.seas.upenn.edu/~pcozzi/ University of Pennsylvania Today n A few CIS 565 projects n Graphics Pipeline n GPU design Part I: Graphics n WebGL Pipeline Hao Wu Ishaan Singh Mikey Chen Yingting Xiao Vimanyu Jain Xiaoyan Zhu 1 Graphics Review: Rendering Graphics Review: Rendering Graphics Pipeline Walkthrough Vertex Assembly n Rendering Vertex Shader ¨ Goal: Assign color to pixels n Two Parts Primitive Assembly ¨ Visible surfaces Rasterizer n What is in front of what for a given view Fragment Shader ¨ Shading n Simulate the interaction of material and light to Per-Fragment Tests produce a pixel color Blend Framebuffer 7 8 9 Image from http://www.cs.cmu.edu/afs/cs.cmu.edu/academic/class/15869-f11/www/lectures/01_intro.pdf Images from http://www.cs.cmu.edu/afs/cs.cmu.edu/academic/class/15869-f11/www/lectures/01_intro.pdf Vertex Shader Transforms in the Pipeline Vertex Shader Vertex Assembly • Transform incoming vertex position from model to clip Vertex Assembly • Example: Textures can provide height maps for coordinates displacement mapping Vertex Shader • Perform additional per-vertex computations; modify, Vertex Shader add, or remove attributes passed down the pipeline • Formerly called the Transform and Lighting (T&L) Primitive Assembly stage. Why? Primitive Assembly Rasterizer Rasterizer vertex Pmodel Fragment Shader Fragment Shader Vertex Shader Vertex Shader Per-Fragment Tests Per-Fragment Tests modified vertex Pclip Blend Blend P = (M )(P ) Framebuffer clip model-view-projection model Framebuffer 10 12 Images from http://developer.nvidia.com/content/vertex-texture-fetch 2 Rasterization Fragment Shader Fragment Shader Vertex Assembly • Determine what pixels a primitive overlaps Vertex Assembly • Shades the fragment by simulating the interaction of Vertex Assembly light and material Vertex Shader Vertex Shader • Loosely, the combination of a fragment shader and its Vertex Shader uniform inputs is a material • Also called a Pixel Shader (D3D) Primitive Assembly Primitive Assembly Primitive Assembly Rasterizer Rasterizer fragment Rasterizer uniforms Fragment Shader Fragment Shader Fragment Shader Fragment Shader • How would you implement this? textures float diffuse = Per-Fragment Tests Per-Fragment Tests fragment’s color Per-Fragment Tests • What about aliasing? max(dot(N, L), 0.0); Blend • What happens to non-position vertex attributes during Blend • What exactly is the fragment input? Blend rasterization? • What are examples of useful uniforms? Useful Framebuffer Framebuffer textures? Framebuffer • What is the triangle-to-fragment ratio? 13 14 15 Image from http://http.developer.nvidia.com/CgTutorial/cg_tutorial_chapter05.html Fragment Shader Fragment Shader Fragment Shader Vertex Assembly • Another example: Texture Mapping Vertex Assembly • Lighting and texture mapping Vertex Assembly • Another example: Bump mapping Vertex Shader Vertex Shader Vertex Shader Primitive Assembly Primitive Assembly Primitive Assembly Rasterizer Rasterizer Rasterizer Fragment Shader Fragment Shader Fragment Shader Per-Fragment Tests Per-Fragment Tests Per-Fragment Tests Blend Blend Blend Framebuffer Framebuffer Framebuffer 16 17 18 Image from http://www.realtimerendering.com/ Image from http://www.virtualglobebook.com/ 3 Fragment Shader Depth Test Depth Test Vertex Assembly • Another example: Bump mapping Vertex Assembly • Finds visible surfaces • Once called “ridiculously expensive” Vertex Shader Vertex Shader • Also called the z-test • Does it need to be after fragment shading? Primitive Assembly Primitive Assembly Rasterizer Rasterizer Fragment Shader Fragment Shader Scissor Test Per-Fragment Tests Per-Fragment Tests Stencil Test Blend Blend Depth Test Framebuffer Framebuffer 19 20 21 Image from http://www.virtualglobebook.com/ Depth Test Early 90s – Pre GPU Part II: GPU design 22 24 Image from http://www.virtualglobebook.com/ Slide from http://s09.idav.ucdavis.edu/talks/01-BPS-SIGGRAPH09-mhouston.pdf 4 AMD Toyshop Demo AMD Leo Demo GPU Compute + Rendering http://www.youtube.com/watch?v=LtxvpS5AYHQ http://www.youtube.com/watch?v=zYweEn6DFcU http://www.nvidia.com/object/GTX_400_games_demos.html CPU and GPU Trends Why GPUs? NVIDIA GeForce 256 (1999) Vertex Assembly In hardware: n Exploit Parallelism • Fixed-function vertex shading (T&L) Vertex Shader • Multi-texturing: bump maps, light maps, etc. ¨ CPU and GPU executing in parallel • 10 million polygons per second Primitive Assembly • Direct3D 7 ¨ Data-parallel • AGP bus ¨ Pipeline parallel Rasterizer Hardware n Hardware: texture filtering, rasterization, Fragment Shader MAD, sqrt, etc. Per-Fragment Tests Blend Framebuffer 29 30 Chart from: http://proteneer.com/blog/?p=263 Image from http://en.wikipedia.org/wiki/File:VisionTek_GeForce_256.jpg 5 Evolution of the Programmable NVIDIA GeForce 8 (2006) Why Unify Shader Processors? Graphics Pipeline Vertex Assembly • Ground-up GPU redesign Vertex Shader • Geometry Shaders • Transform-feedback Geometry Shader • OpenGL 3 / Direct3D 10 • Unified shader processors Primitive Assembly • Support for GPU Compute Rasterizer Fragment Shader Per-Fragment Tests Blend 31 32 33 Framebuffer Slide from http://s08.idav.ucdavis.edu/luebke-nvidia-gpu-architecture.pdf Slide from Mike Houston: http://s09.idav.ucdavis.edu/talks/01-BPS-SIGGRAPH09-mhouston.pdf WebGL Bring 3D to the Masses n The web has text, images, and video n Put it in on a webpage ¨ What is the next media-type? ¨ Does not require a plugin or install n We want to support n Make it run on most GPUs Part III: WebGL ¨ Windows, Linux, Mac ¨ Desktop and mobile 35 36 6 WebGL WebGL Performance High-Profile WebGL Uses 32x32 64x64 128x128 n OpenGL ES 2.0 for JavaScript C++ 1.9 ms 6.25 ms 58.82 ms ¨ Seriously, JavaScript Chrome 18 27.77 ms 111.11 ms 454.54 ms x slowdown 14.62 17.78 7.73 CPU-intensive 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 GPU-intensive (256 draws per frame) 37 38 Image from Image from http://openglinsights.com/ http://www.khronos.org/assets/uploads/developers/library/2011-siggraph-mobile/Khronos-and-the-Mobile-Ecosystem_Aug-11.pdf More Cesium WebGL Apps WebGL in Teaching Penn Student Work 7 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 WebGL Tools – Web Apps WebGL Tools – Web Apps WebGL Tools - Firefox WebGL Tools - Chrome 9 .