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