# C P S C 314 S H A D E R S, O P E N G L, & J S RENDERING PIPELINE. Mikhail Bessmeltsev

Size: px
Start display at page:

Download "C P S C 314 S H A D E R S, O P E N G L, & J S RENDERING PIPELINE. Mikhail Bessmeltsev"

Transcription

1 C P S C 314 S H A D E R S, O P E N G L, & J S RENDERING PIPELINE UGRAD.CS.UBC.C A/~CS314 Mikhail Bessmeltsev 1

2 WHAT IS RENDERING? Generating image from a 3D scene 2

3 WHAT IS RENDERING? Generating image from a 3D scene Let s think HOW. 3

4 SCENE A coordinate frame 3D objects Their materials Lights Cameras 4

5 RENDERING 5

6 RENDERING 6

7 FRAME BUFFER Portion of RAM on videocard (GPU) What we see on the screen Rendering destination 7

8 SCREEN Displays what s in frame buffer Terminology: Pixel: basic element on device Resolution: number of rows & columns in device Measured in Absolute values (1K x 1K) Density values (300 dots per inch) 8

9 Scene Coordinate Frame 3D objects Materials Lights Cameras? Framebuffer final image 9

10 SINGLE OBJECT How to describe a single piece of geometry? So far geometry has been constructed for you. 10

11 SHAPES: TRIANGLE MESHES Triangle = 3 vertices Mesh = {vertices, triangles} Example 11

12 SCENE How to describe a scene? 12

13 SCENE How to describe a scene? Local Transformations 13

14 Scene Coordinate Frame 3D objects Materials Lights Cameras? Framebuffer final image 14

15 SKETCH OF A RENDERING PIPELINE Scene Coordinate frame 3D models Coordinates Local transforms properties (color, material) Lights Camera 15

16 SKETCH OF A RENDERING PIPELINE Scene Camera View Image Coordinate frame 2D positions of shapes Shape pixels 3D models Depth of shapes Their color Coordinates Normals properties (color, material) Lights Camera Which pixel is visible 16

17 OPENGL/WEBGL Open Graphics Library One of the most popular libraries for 2D/3D rendering Asoftware interface to communicate with graphics hardware Cross-language API 17

18 OPENGL RENDERING PIPELINE 18

19 OPENGL RENDERING PIPELINE Scene Camera Coords Device Coords Image 19

21 VERTEX SHADER Vertices are stored in vertex buffer Each one is processed by vertex shader Outputs 2D position May compute per-vertex variables (normal, etc.) 21

22 O P E N G L R E N D E R I N G P I P E L I N E 22

23 O P E N G L R E N D E R I N G P I P E L I N E Javascript + Three.JS GLSL (automatic) (automatic) GLSL (automatic) 23

24 T H R E E. J S High-level library for Javascript Uses WebGL for rendering Has Scene, Mesh, Camera objects Scene is hierarchical Mesh has geometry and material properties Camera is used for rendering 24

25 G E O M E T R Y Triangle meshes Set ofvertices Triangle defines as {vertex_index1, vertex_index2, vertex_index3} 25

26 O P E N G L R E N D E R I N G P I P E L I N E Javascript + Three.JS GLSL (automatic) (automatic) GLSL (automatic) 26

27 GLS L OpenGL shading language Used for Fragment and Vertex shaders Lots of useful stuff: vec3, vec4, dvec4, mat4, sampler2d mat*vec, mat*mat Reflect, refract vec3 v( a.xy, 1) 27

28 V E R T E X S H A D E R VS is run for each vertex SEPARATELY By default doesn t know connectivity Input: vertex coordinates in Object Coordinate System Its main goal is to set gl_position Object coordinates -> WORLD coordinates -> VIEW coordinates 28

29 V E R T E X S H A D E R Except simple conversion to world coordinates You can do anything with vertices (or anything that s passed) e.g. deform vertices e.g. skinning! [courtesy NVIDIA] 29

30 var verticesofcube = [ -1,-1,-1, 1,-1,-1, 1, 1,-1, -1, 1,-1, -1,-1, 1, 1,-1, 1, 1, 1, 1, -1, 1, 1, ]; var indicesoffaces = [ 2,1,0, 0,3,2, 0,4,7, 7,3,0, 0,1,5, 5,4,0, 1,2,6, 6,5,1, 2,3,7, 7,6,2, 4,5,6, 6,7,4 ]; var geometry = new THREE.PolyhedronGeometry( verticesofcube, indicesoffaces, 6, 2 ); G E O M E T R Y ( JAVA S C R I P T/ T H R E. J S ) 30

31 Image Egon Rath 31

32 O P E N G L R E N D E R I N G P I P E L I N E Javascript + Three.JS GLSL (automatic) (automatic) GLSL (automatic) 32

33 33

34 C A M E R A VIEW 34

35 R A S T E R I Z A T I O N 35

36 R A S T E R I Z A T I O N 36

37 R A S T E R I Z A T I O N 37

38 R A S T E R I Z A T I O N - I N T E R P O L A T I O N 38

39 R A S T E R I Z A T I O N - I N T E R P O L A T I O N 39

40 O P E N G L R E N D E R I N G P I P E L I N E Javascript + Three.JS GLSL (automatic) (automatic) GLSL (automatic) 40

41 F R A G M E N T S H A D E R Fragment = data for drawing a pixel Has gl_fragcoord 2D window coords May set color! 41

42 F R A G M E N T S H A D E R Common Tasks: texture mapping per-pixel lighting and shading Synonymous with Pixel Shader 42

43 MINIMAL V E R T E X S H A D E R void main() { } // Transforming The Vertex gl_position = modelviewmatrix * position; MINIMAL F R A G M E N T S H A D E R void main() { } // Setting Each Pixel To Red gl_fragcolor = vec4(1.0, 0.0, 0.0, 1.0); 43

44 MINIMAL V E R T E X S H A D E R void main() { } // Transforming The Vertex gl_position = modelviewmatrix * position; defined by Three.JS MINIMAL F R A G M E N T S H A D E R void main() { } // Setting Each Pixel To Red gl_fragcolor = vec4(1.0, 0.0, 0.0, 1.0); 44

45 MINIMAL V E R T E X S H A D E R void main() { } // Transforming The Vertex gl_position = modelviewmatrix * position; defined by Three.JS x y z 1.0 MINIMAL F R A G M E N T S H A D E R void main() { } // Setting Each Pixel To Red gl_fragcolor = vec4(1.0, 0.0, 0.0, 1.0); 45

46 MINIMAL V E R T E X S H A D E R void main() { } // Transforming The Vertex gl_position = modelviewmatrix * position; view coordinate system defined by Three.JS x y z 1.0 MINIMAL F R A G M E N T S H A D E R void main() { } // Setting Each Pixel To Red gl_fragcolor = vec4(1.0, 0.0, 0.0, 1.0); 46

47 MINIMAL V E R T E X S H A D E R void main() { } // Transforming The Vertex gl_position = modelviewmatrix * position; view coordinate system defined by Three.JS x y z 1.0 MINIMAL F R A G M E N T S H A D E R void main() { } // Setting Each Pixel To Red gl_fragcolor = vec4(1.0, 0.0, 0.0, 1.0); Red Green Blue Alpha 47

48 V E R T E X S H A D E R E X A M P L E 2 uniform float uvertexscale; attribute vec3 vcolor; varying vec3 fcolor; void main() { gl_position = vec4(position.x fcolor = vcolor; * uvertexscale, position.y, 0.0,1.0); } 48

49 C O N C E P T S uniform same for all vertices varying computed per vertex, automatically interpolated for fragments attribute some values per vertex available only in Vertex Shader 49

50 C O N C E P T S uniform same for all vertices varying Vertex Shader Fragment Shader computed per vertex, automatically interpolated for fragments attribute JS + Three.JS Vertex Shader FragmentShader JS + Three.JS VertexShader some values per vertex available only in Vertex Shader 50

51 V E R T E X S H A D E R 51

52 F R A G M E N T S H A D E R 52

54 PIPELINE: MORE DETAILS 54

55 O P E N G L R E N D E R I N G P I P E L I N E 55

56 PIPELINE: MORE DETAILS 56

57 MODELING AND VIEWING TRANSFORMATIONS Placing objects - Modeling transformations Map points from object coordinate system to world coordinate system Looking from the camera - Viewing transformation Map points from world coordinate system to camera (or eye) coordinate system 57

58 58

59 MODELING TRANSFORMATIONS: OBJECT PLACEMENT 59

60 VIEWING TRANSFORMATION: LOOKING FROMA CAMERA 60

61 MODELING & VIEWING TRANSFORMATIONS 61

62 MODELING & VIEWING TRANSFORMATIONS Other transformations (not handled by rendering pipeline): Freeform deformation 62

63 MODELING & VIEWING TRANSFORMATION Linear transformations Rotations, scaling, shearing Can be expressed as 3x3 matrix E.g. scaling (non uniform): x' 2 0 y' 0 3 z' x 0 y 1 z 63

64 MODELING & VIEWING TRANSFORMATION Affine transformations Linear transformations + translations Can be expressed as 3x3 matrix + 3 vector E.g. scale+ translation: x' x t x y' y t 0 1 z y z' 0 t z Another representation: 4x4 homogeneous matrix 64

65 MATRICES Object coordinates -> World coordinates Model Matrix One per object World coordinates -> Camera coordinates View Matrix One per camera 65

66 PIPELINE: MORE DETAILS 66

67 PERSPECTIVE TRANSFORMATION Purpose: Project 3D geometry to 2D image plane Simulates a camera Camera model: Pinhole camera (single view point) More complex camera models exist, but are less common in CG 67

68 PERSPECTIVE PROJECTION 68

69 PERSPECTIVE TRANSFORMATION In computer graphics: Image plane conceptually in front of center of projection Perspective transformation is one of projective transformations Linear & affine transformations also belong to this class All projective transformations can be expressed as 4x4 matrix operations 69

70 PIPELINE: MORE DETAILS 70

71 CLIPPING Removing invisible geometry Geometry outside viewing frustum Plus too far or too near one Optimization 71

72 PIPELINE: MORE DETAILS 72

73 SCAN CONVERSION/RASTERIZATION Convert continuous 2D geometry to discrete Raster display discrete grid ofelements Terminology Screen Space: Discrete 2D Cartesian coordinate system of the screen pixels 73

74 SCAN CONVERSION 74

75 SCAN CONVERSION 75

76 SCAN CONVERSION Problem: Line is infinitely thin, but image has finite resolution Results in steps rather than a smooth line Jaggies Aliasing One of the fundamental problems in computer graphics 76

77 SCAN CONVERSION 77

78 COLOR INTERPOLATION Linearly interpolate per-pixel color from vertex color values Treat every channel of RGB color separately color t s 78

79 COLOR INTERPOLATION Example: red green blue t t t s s s 79

80 PIPELINE: MORE DETAILS 80

81 TEXTURING (s 0,t 0 ) (s 2,t 2 ) t (s 1,t 1 ) s 81

82 TEXTURING (s 0,t 0 ) (s 2,t 2 ) t (s 1,t 1 ) s 82

83 TEXTURE MAPPING 83

84 DISPLACEMENT MAPPING 84

85 TEXTURING Issues: Computing 3D/2D map (low distortion) How to map pixel from texture (texels) to screen pixels Texture can appear widely distorted inrendering Magnification / minification of textures Filtering of textures Preventing aliasing (anti-aliasing) 85

86 PIPELINE: MORE DETAILS 86

87 LIGHTING 87

88 COMPLEX LIGHTING AND SHADING 88

89 PIPELINE: MORE DETAILS 89

90 WITHOUT HIDDEN LINE REMOVAL 90

91 HIDDEN LINE REMOVAL 91

92 HIDDEN SURFACE REMOVAL 92

93 DEPTH TEST /HIDDEN SURFACE REMOVAL Remove invisible geometry Parts that are hidden behind other geometry Possible Implementations: Pixel level decision Depth buffer Object space decision E.g. intersection order for ray tracing 93

94 PIPELINE: MORE DETAILS 94

95 BLENDING Blending: Fragments -> Pixels Draw from farthest to nearest No blending replace previous color Blending: combine new & old values with some arithmetic operations Frame Buffer : video memory on graphics board that holds resulting image & used to displayit 95

### OPENGL RENDERING PIPELINE

CPSC 314 03 SHADERS, OPENGL, & JS UGRAD.CS.UBC.CA/~CS314 Textbook: Appendix A* (helpful, but different version of OpenGL) Alla Sheffer Sep 2016 OPENGL RENDERING PIPELINE 1 OPENGL RENDERING PIPELINE Javascript

### CPSC 436D Video Game Programming

CPSC 436D Video Game Programming OpenGL/Shaders Opengl RENDERING PIPELINE Copyright: Alla Sheffer 1 Opengl RENDERING PIPELINE C/C++ OpenGL GLSL (automatic) (automatic) GLSL (automatic) opengl Low-level

### Programmable GPUs. Real Time Graphics 11/13/2013. Nalu 2004 (NVIDIA Corporation) GeForce 6. Virtua Fighter 1995 (SEGA Corporation) NV1

Programmable GPUs Real Time Graphics Virtua Fighter 1995 (SEGA Corporation) NV1 Dead or Alive 3 2001 (Tecmo Corporation) Xbox (NV2A) Nalu 2004 (NVIDIA Corporation) GeForce 6 Human Head 2006 (NVIDIA Corporation)

### Rendering Pipeline/ OpenGL

Chapter 2 Basics of Computer Graphics: Your tasks for the weekend Piazza Discussion Group: Register Post review questions by Mon noon Use private option, rev1 tag Start Assignment 1 Test programming environment

### Pipeline Operations. CS 4620 Lecture Steve Marschner. Cornell CS4620 Spring 2018 Lecture 11

Pipeline Operations CS 4620 Lecture 11 1 Pipeline you are here APPLICATION COMMAND STREAM 3D transformations; shading VERTEX PROCESSING TRANSFORMED GEOMETRY conversion of primitives to pixels RASTERIZATION

### Shaders. Slide credit to Prof. Zwicker

Shaders Slide credit to Prof. Zwicker 2 Today Shader programming 3 Complete model Blinn model with several light sources i diffuse specular ambient How is this implemented on the graphics processor (GPU)?

### Pipeline Operations. CS 4620 Lecture 14

Pipeline Operations CS 4620 Lecture 14 2014 Steve Marschner 1 Pipeline you are here APPLICATION COMMAND STREAM 3D transformations; shading VERTEX PROCESSING TRANSFORMED GEOMETRY conversion of primitives

### CS4621/5621 Fall Computer Graphics Practicum Intro to OpenGL/GLSL

CS4621/5621 Fall 2015 Computer Graphics Practicum Intro to OpenGL/GLSL Professor: Kavita Bala Instructor: Nicolas Savva with slides from Balazs Kovacs, Eston Schweickart, Daniel Schroeder, Jiang Huang

Sign up for crits! Announcments Reading for Next Week FvD 16.1-16.3 local lighting models GL 5 lighting GL 9 (skim) texture mapping Modern Game Techniques CS248 Lecture Nov 13 Andrew Adams Overview The

### Computer graphics 2: Graduate seminar in computational aesthetics

Computer graphics 2: Graduate seminar in computational aesthetics Angus Forbes evl.uic.edu/creativecoding/cs526 Homework 2 RJ ongoing... - Follow the suggestions in the Research Journal handout and find

### CS451Real-time Rendering Pipeline

1 CS451Real-time Rendering Pipeline JYH-MING LIEN DEPARTMENT OF COMPUTER SCIENCE GEORGE MASON UNIVERSITY Based on Tomas Akenine-Möller s lecture note You say that you render a 3D 2 scene, but what does

### CS559 Computer Graphics Fall 2015

CS559 Computer Graphics Fall 2015 Practice Midterm Exam Time: 2 hrs 1. [XX Y Y % = ZZ%] MULTIPLE CHOICE SECTION. Circle or underline the correct answer (or answers). You do not need to provide a justification

### CHAPTER 1 Graphics Systems and Models 3

?????? 1 CHAPTER 1 Graphics Systems and Models 3 1.1 Applications of Computer Graphics 4 1.1.1 Display of Information............. 4 1.1.2 Design.................... 5 1.1.3 Simulation and Animation...........

### CS4620/5620: Lecture 14 Pipeline

CS4620/5620: Lecture 14 Pipeline 1 Rasterizing triangles Summary 1! evaluation of linear functions on pixel grid 2! functions defined by parameter values at vertices 3! using extra parameters to determine

### WebGL and GLSL Basics. CS559 Fall 2015 Lecture 10 October 6, 2015

WebGL and GLSL Basics CS559 Fall 2015 Lecture 10 October 6, 2015 Last time Hardware Rasterization For each point: Compute barycentric coords Decide if in or out.7,.7, -.4 1.1, 0, -.1.9,.05,.05.33,.33,.33

### The Graphics Pipeline and OpenGL III: OpenGL Shading Language (GLSL 1.10)!

! The Graphics Pipeline and OpenGL III: OpenGL Shading Language (GLSL 1.10)! Gordon Wetzstein! Stanford University! EE 267 Virtual Reality! Lecture 4! stanford.edu/class/ee267/! Lecture Overview! Review

### Rendering. Converting a 3D scene to a 2D image. Camera. Light. Rendering. View Plane

Rendering Pipeline Rendering Converting a 3D scene to a 2D image Rendering Light Camera 3D Model View Plane Rendering Converting a 3D scene to a 2D image Basic rendering tasks: Modeling: creating the world

### We assume that you are familiar with the following:

We will use WebGL 1.0. WebGL 2.0 is now being supported by most browsers but requires a better GPU so may not run on older computers or on most cell phones and tablets. See http://webglstats.com/. We will

### Computergrafik. Matthias Zwicker Universität Bern Herbst 2016

Computergrafik Matthias Zwicker Universität Bern Herbst 2016 2 Today Basic shader for texture mapping Texture coordinate assignment Antialiasing Fancy textures 3 Texture mapping Glue textures (images)

### Graphics Programming. Computer Graphics, VT 2016 Lecture 2, Chapter 2. Fredrik Nysjö Centre for Image analysis Uppsala University

Graphics Programming Computer Graphics, VT 2016 Lecture 2, Chapter 2 Fredrik Nysjö Centre for Image analysis Uppsala University Graphics programming Typically deals with How to define a 3D scene with a

### Lecture 2. Shaders, GLSL and GPGPU

Lecture 2 Shaders, GLSL and GPGPU Is it interesting to do GPU computing with graphics APIs today? Lecture overview Why care about shaders for computing? Shaders for graphics GLSL Computing with shaders

### SHADER PROGRAMMING. Based on Jian Huang s lecture on Shader Programming

SHADER PROGRAMMING Based on Jian Huang s lecture on Shader Programming What OpenGL 15 years ago could do http://www.neilturner.me.uk/shots/opengl-big.jpg What OpenGL can do now What s Changed? 15 years

### Models and Architectures

Models and Architectures Objectives Learn the basic design of a graphics system Introduce graphics pipeline architecture Examine software components for an interactive graphics system 1 Image Formation

### Orthogonal Projection Matrices. Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015

Orthogonal Projection Matrices 1 Objectives Derive the projection matrices used for standard orthogonal projections Introduce oblique projections Introduce projection normalization 2 Normalization Rather

### Introduction to Computer Graphics with WebGL

Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science Laboratory University of New Mexico Models and Architectures

### Lets assume each object has a defined colour. Hence our illumination model is looks unrealistic.

Shading Models There are two main types of rendering that we cover, polygon rendering ray tracing Polygon rendering is used to apply illumination models to polygons, whereas ray tracing applies to arbitrary

### Shadows. Prof. George Wolberg Dept. of Computer Science City College of New York

Shadows Prof. George Wolberg Dept. of Computer Science City College of New York Objectives Introduce Shadow Algorithms Expand to projective textures 2 Flashlight in the Eye Graphics When do we not see

### Today. Texture mapping in OpenGL. Texture mapping. Basic shaders for texturing. Today. Computergrafik

Computergrafik Today Basic shader for texture mapping Texture coordinate assignment Antialiasing Fancy textures Matthias Zwicker Universität Bern Herbst 2009 Texture mapping Glue textures (images) onto

### CS452/552; EE465/505. Intro to Lighting

CS452/552; EE465/505 Intro to Lighting 2-10 15 Outline! Projection Normalization! Introduction to Lighting (and Shading) Read: Angel Chapter 5., sections 5.4-5.7 Parallel Projections Chapter 6, sections

### WebGL and GLSL Basics. CS559 Fall 2016 Lecture 14 October

WebGL and GLSL Basics CS559 Fall 2016 Lecture 14 October 24 2016 Review Hardware Rasterization For each point: Compute barycentric coords Decide if in or out.7,.7, -.4 1.1, 0, -.1.9,.05,.05.33,.33,.33

### Rasterization Overview

Rendering Overview The process of generating an image given a virtual camera objects light sources Various techniques rasterization (topic of this course) raytracing (topic of the course Advanced Computer

### Game Graphics & Real-time Rendering

Game Graphics & Real-time Rendering CMPM 163, W2018 Prof. Angus Forbes (instructor) angus@ucsc.edu Lucas Ferreira (TA) lferreira@ucsc.edu creativecoding.soe.ucsc.edu/courses/cmpm163 github.com/creativecodinglab

### The Graphics Pipeline and OpenGL I: Transformations!

! The Graphics Pipeline and OpenGL I: Transformations! Gordon Wetzstein! Stanford University! EE 267 Virtual Reality! Lecture 2! stanford.edu/class/ee267/!! Albrecht Dürer, Underweysung der Messung mit

### Graphics Hardware. Instructor Stephen J. Guy

Instructor Stephen J. Guy Overview What is a GPU Evolution of GPU GPU Design Modern Features Programmability! Programming Examples Overview What is a GPU Evolution of GPU GPU Design Modern Features Programmability!

### Pipeline Operations. CS 4620 Lecture 10

Pipeline Operations CS 4620 Lecture 10 2008 Steve Marschner 1 Hidden surface elimination Goal is to figure out which color to make the pixels based on what s in front of what. Hidden surface elimination

### Spring 2009 Prof. Hyesoon Kim

Spring 2009 Prof. Hyesoon Kim Application Geometry Rasterizer CPU Each stage cane be also pipelined The slowest of the pipeline stage determines the rendering speed. Frames per second (fps) Executes on

### Today s Agenda. Basic design of a graphics system. Introduction to OpenGL

Today s Agenda Basic design of a graphics system Introduction to OpenGL Image Compositing Compositing one image over another is most common choice can think of each image drawn on a transparent plastic

### OpenGL shaders and programming models that provide object persistence

OpenGL shaders and programming models that provide object persistence COSC342 Lecture 22 19 May 2016 OpenGL shaders We discussed forms of local illumination in the ray tracing lectures. We also saw that

### X. GPU Programming. Jacobs University Visualization and Computer Graphics Lab : Advanced Graphics - Chapter X 1

X. GPU Programming 320491: Advanced Graphics - Chapter X 1 X.1 GPU Architecture 320491: Advanced Graphics - Chapter X 2 GPU Graphics Processing Unit Parallelized SIMD Architecture 112 processing cores

### graphics pipeline computer graphics graphics pipeline 2009 fabio pellacini 1

graphics pipeline computer graphics graphics pipeline 2009 fabio pellacini 1 graphics pipeline sequence of operations to generate an image using object-order processing primitives processed one-at-a-time

### graphics pipeline computer graphics graphics pipeline 2009 fabio pellacini 1

graphics pipeline computer graphics graphics pipeline 2009 fabio pellacini 1 graphics pipeline sequence of operations to generate an image using object-order processing primitives processed one-at-a-time

### CS 464 Review. Review of Computer Graphics for Final Exam

CS 464 Review Review of Computer Graphics for Final Exam Goal: Draw 3D Scenes on Display Device 3D Scene Abstract Model Framebuffer Matrix of Screen Pixels In Computer Graphics: If it looks right then

### CMSC427 Transformations II: Viewing. Credit: some slides from Dr. Zwicker

CMSC427 Transformations II: Viewing Credit: some slides from Dr. Zwicker What next? GIVEN THE TOOLS OF The standard rigid and affine transformations Their representation with matrices and homogeneous coordinates

### Texture Mapping. Texture (images) lecture 16. Texture mapping Aliasing (and anti-aliasing) Adding texture improves realism.

lecture 16 Texture mapping Aliasing (and anti-aliasing) Texture (images) Texture Mapping Q: Why do we need texture mapping? A: Because objects look fake and boring without it. Adding texture improves realism.

### COMP371 COMPUTER GRAPHICS

COMP371 COMPUTER GRAPHICS SESSION 12 PROGRAMMABLE SHADERS Announcement Programming Assignment #2 deadline next week: Session #7 Review of project proposals 2 Lecture Overview GPU programming 3 GPU Pipeline

### Graphics Hardware, Graphics APIs, and Computation on GPUs. Mark Segal

Graphics Hardware, Graphics APIs, and Computation on GPUs Mark Segal Overview Graphics Pipeline Graphics Hardware Graphics APIs ATI s low-level interface for computation on GPUs 2 Graphics Hardware High

### TSBK03 Screen-Space Ambient Occlusion

TSBK03 Screen-Space Ambient Occlusion Joakim Gebart, Jimmy Liikala December 15, 2013 Contents 1 Abstract 1 2 History 2 2.1 Crysis method..................................... 2 3 Chosen method 2 3.1 Algorithm

### The Graphics Pipeline and OpenGL III: OpenGL Shading Language (GLSL 1.10)!

! The Graphics Pipeline and OpenGL III: OpenGL Shading Language (GLSL 1.10)! Gordon Wetzstein! Stanford University! EE 267 Virtual Reality! Lecture 4! stanford.edu/class/ee267/! Updates! for 24h lab access:

### Module Contact: Dr Stephen Laycock, CMP Copyright of the University of East Anglia Version 1

UNIVERSITY OF EAST ANGLIA School of Computing Sciences Main Series PG Examination 2013-14 COMPUTER GAMES DEVELOPMENT CMPSME27 Time allowed: 2 hours Answer any THREE questions. (40 marks each) Notes are

### Copyright Khronos Group 2012 Page 1. Teaching GL. Dave Shreiner Director, Graphics and GPU Computing, ARM 1 December 2012

Copyright Khronos Group 2012 Page 1 Teaching GL Dave Shreiner Director, Graphics and GPU Computing, ARM 1 December 2012 Copyright Khronos Group 2012 Page 2 Agenda Overview of OpenGL family of APIs Comparison

### The Rasterization Pipeline

Lecture 5: The Rasterization Pipeline (and its implementation on GPUs) Computer Graphics CMU 15-462/15-662, Fall 2015 What you know how to do (at this point in the course) y y z x (w, h) z x Position objects

### Drawing Fast The Graphics Pipeline

Drawing Fast The Graphics Pipeline CS559 Fall 2015 Lecture 9 October 1, 2015 What I was going to say last time How are the ideas we ve learned about implemented in hardware so they are fast. Important:

### CS452/552; EE465/505. Review & Examples

CS452/552; EE465/505 Review & Examples 2-05 15 Outline Review and Examples:! Shaders, Buffers & Binding! Example: Draw 3 Triangles Vertex lists; gl.drawarrays( ) Edge lists: gl.drawelements( )! Example:

### We will use WebGL 1.0. WebGL 2.0 is now being supported by most browsers but requires a better GPU so may not run on older computers or on most cell

We will use WebGL 1.0. WebGL 2.0 is now being supported by most browsers but requires a better GPU so may not run on older computers or on most cell phones and tablets. See http://webglstats.com/. We will

### Computergrafik. Matthias Zwicker. Herbst 2010

Computergrafik Matthias Zwicker Universität Bern Herbst 2010 Today Bump mapping Shadows Shadow mapping Shadow mapping in OpenGL Bump mapping Surface detail is often the result of small perturbations in

### Blis: Better Language for Image Stuff Project Proposal Programming Languages and Translators, Spring 2017

Blis: Better Language for Image Stuff Project Proposal Programming Languages and Translators, Spring 2017 Abbott, Connor (cwa2112) Pan, Wendy (wp2213) Qinami, Klint (kq2129) Vaccaro, Jason (jhv2111) [System

### The Graphics Pipeline and OpenGL I: Transformations!

! The Graphics Pipeline and OpenGL I: Transformations! Gordon Wetzstein! Stanford University! EE 267 Virtual Reality! Lecture 2! stanford.edu/class/ee267/!! Logistics Update! all homework submissions:

### Programming with OpenGL Part 3: Shaders. Ed Angel Professor of Emeritus of Computer Science University of New Mexico

Programming with OpenGL Part 3: Shaders Ed Angel Professor of Emeritus of Computer Science University of New Mexico 1 Objectives Simple Shaders - Vertex shader - Fragment shaders Programming shaders with

Last Time? The Traditional Graphics Pipeline Participating Media Measuring BRDFs 3D Digitizing & Scattering BSSRDFs Monte Carlo Simulation Dipole Approximation Today Ray Casting / Tracing Advantages? Ray

### CS 498 VR. Lecture 18-4/4/18. go.illinois.edu/vrlect18

CS 498 VR Lecture 18-4/4/18 go.illinois.edu/vrlect18 Review and Supplement for last lecture 1. What is aliasing? What is Screen Door Effect? 2. How image-order rendering works? 3. If there are several

### CS230 : Computer Graphics Lecture 4. Tamar Shinar Computer Science & Engineering UC Riverside

CS230 : Computer Graphics Lecture 4 Tamar Shinar Computer Science & Engineering UC Riverside Shadows Shadows for each pixel do compute viewing ray if ( ray hits an object with t in [0, inf] ) then compute

### 2: Introducing image synthesis. Some orientation how did we get here? Graphics system architecture Overview of OpenGL / GLU / GLUT

COMP27112 Computer Graphics and Image Processing 2: Introducing image synthesis Toby.Howard@manchester.ac.uk 1 Introduction In these notes we ll cover: Some orientation how did we get here? Graphics system

### Today. Rendering algorithms. Rendering algorithms. Images. Images. Rendering Algorithms. Course overview Organization Introduction to ray tracing

Today Rendering Algorithms Course overview Organization Introduction to ray tracing Spring 2009 Matthias Zwicker Universität Bern Rendering algorithms Problem statement Given computer representation of

### lecture 16 Texture mapping Aliasing (and anti-aliasing)

lecture 16 Texture mapping Aliasing (and anti-aliasing) Texture (images) Texture Mapping Q: Why do we need texture mapping? A: Because objects look fake and boring without it. Adding texture improves realism.

### CSE 167: Lecture #8: GLSL. Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2012

CSE 167: Introduction to Computer Graphics Lecture #8: GLSL Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2012 Announcements Homework project #4 due Friday, November 2 nd Introduction:

### CS 381 Computer Graphics, Fall 2012 Midterm Exam Solutions. The Midterm Exam was given in class on Tuesday, October 16, 2012.

CS 381 Computer Graphics, Fall 2012 Midterm Exam Solutions The Midterm Exam was given in class on Tuesday, October 16, 2012. 1. [7 pts] Synthetic-Camera Model. Describe the Synthetic-Camera Model : how

### Real-Time Rendering (Echtzeitgraphik) Michael Wimmer

Real-Time Rendering (Echtzeitgraphik) Michael Wimmer wimmer@cg.tuwien.ac.at Walking down the graphics pipeline Application Geometry Rasterizer What for? Understanding the rendering pipeline is the key

### Programming shaders & GPUs Christian Miller CS Fall 2011

Programming shaders & GPUs Christian Miller CS 354 - Fall 2011 Fixed-function vs. programmable Up until 2001, graphics cards implemented the whole pipeline for you Fixed functionality but configurable

Last Time? The Traditional Graphics Pipeline Reading for Today A Practical Model for Subsurface Light Transport, Jensen, Marschner, Levoy, & Hanrahan, SIGGRAPH 2001 Participating Media Measuring BRDFs

### Three Main Themes of Computer Graphics

Three Main Themes of Computer Graphics Modeling How do we represent (or model) 3-D objects? How do we construct models for specific objects? Animation How do we represent the motion of objects? How do

### Shader Programs. Lecture 30 Subsections 2.8.2, Robb T. Koether. Hampden-Sydney College. Wed, Nov 16, 2011

Shader Programs Lecture 30 Subsections 2.8.2, 2.8.3 Robb T. Koether Hampden-Sydney College Wed, Nov 16, 2011 Robb T. Koether (Hampden-Sydney College) Shader Programs Wed, Nov 16, 2011 1 / 43 Outline 1

### Evolution of GPUs Chris Seitz

Evolution of GPUs Chris Seitz Overview Concepts: Real-time rendering Hardware graphics pipeline Evolution of the PC hardware graphics pipeline: 1995-1998: Texture mapping and z-buffer 1998: Multitexturing

### CS452/552; EE465/505. Image Processing Frame Buffer Objects

CS452/552; EE465/505 Image Processing Frame Buffer Objects 3-12 15 Outline! Image Processing: Examples! Render to Texture Read: Angel, Chapter 7, 7.10-7.13 Lab3 new due date: Friday, Mar. 13 th Project#1

### Tutorial on GPU Programming #2. Joong-Youn Lee Supercomputing Center, KISTI

Tutorial on GPU Programming #2 Joong-Youn Lee Supercomputing Center, KISTI Contents Graphics Pipeline Vertex Programming Fragment Programming Introduction to Cg Language Graphics Pipeline The process to

### Dave Shreiner, ARM March 2009

4 th Annual Dave Shreiner, ARM March 2009 Copyright Khronos Group, 2009 - Page 1 Motivation - What s OpenGL ES, and what can it do for me? Overview - Lingo decoder - Overview of the OpenGL ES Pipeline

### CS 4620 Program 3: Pipeline

CS 4620 Program 3: Pipeline out: Wednesday 14 October 2009 due: Friday 30 October 2009 1 Introduction In this assignment, you will implement several types of shading in a simple software graphics pipeline.

### CMSC427 Advanced shading getting global illumination by local methods. Credit: slides Prof. Zwicker

CMSC427 Advanced shading getting global illumination by local methods Credit: slides Prof. Zwicker Topics Shadows Environment maps Reflection mapping Irradiance environment maps Ambient occlusion Reflection

### Reading. 18. Projections and Z-buffers. Required: Watt, Section , 6.3, 6.6 (esp. intro and subsections 1, 4, and 8 10), Further reading:

Reading Required: Watt, Section 5.2.2 5.2.4, 6.3, 6.6 (esp. intro and subsections 1, 4, and 8 10), Further reading: 18. Projections and Z-buffers Foley, et al, Chapter 5.6 and Chapter 6 David F. Rogers

### 2D rendering takes a photo of the 2D scene with a virtual camera that selects an axis aligned rectangle from the scene. The photograph is placed into

2D rendering takes a photo of the 2D scene with a virtual camera that selects an axis aligned rectangle from the scene. The photograph is placed into the viewport of the current application window. A pixel

### PROFESSIONAL. WebGL Programming DEVELOPING 3D GRAPHICS FOR THE WEB. Andreas Anyuru WILEY. John Wiley & Sons, Ltd.

PROFESSIONAL WebGL Programming DEVELOPING 3D GRAPHICS FOR THE WEB Andreas Anyuru WILEY John Wiley & Sons, Ltd. INTRODUCTION xxl CHAPTER 1: INTRODUCING WEBGL 1 The Basics of WebGL 1 So Why Is WebGL So Great?

### Today. Rendering pipeline. Rendering pipeline. Object vs. Image order. Rendering engine Rendering engine (jtrt) Computergrafik. Rendering pipeline

Computergrafik Today Rendering pipeline s View volumes, clipping Viewport Matthias Zwicker Universität Bern Herbst 2008 Rendering pipeline Rendering pipeline Hardware & software that draws 3D scenes on

### OUTLINE. Learn the basic design of a graphics system Introduce pipeline architecture Examine software components for a graphics system

GRAPHICS PIPELINE 1 OUTLINE Learn the basic design of a graphics system Introduce pipeline architecture Examine software components for a graphics system 2 IMAGE FORMATION REVISITED Can we mimic the synthetic

### Rendering Objects. Need to transform all geometry then

Intro to OpenGL Rendering Objects Object has internal geometry (Model) Object relative to other objects (World) Object relative to camera (View) Object relative to screen (Projection) Need to transform

### The Application Stage. The Game Loop, Resource Management and Renderer Design

1 The Application Stage The Game Loop, Resource Management and Renderer Design Application Stage Responsibilities 2 Set up the rendering pipeline Resource Management 3D meshes Textures etc. Prepare data

### The Rasterization Pipeline

Lecture 5: The Rasterization Pipeline Computer Graphics and Imaging UC Berkeley CS184/284A, Spring 2016 What We ve Covered So Far z x y z x y (0, 0) (w, h) Position objects and the camera in the world

### CS 130 Final. Fall 2015

CS 130 Final Fall 2015 Name Student ID Signature You may not ask any questions during the test. If you believe that there is something wrong with a question, write down what you think the question is trying

Final Projects Proposals due Thursday 4/8 Proposed project summary At least 3 related papers (read & summarized) Description of series of test cases Timeline & initial task assignment The Traditional Graphics

### Buffers. Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015

Buffers 1 Objectives Introduce additional WebGL buffers Reading and writing buffers Buffers and Images 2 Buffer Define a buffer by its spatial resolution (n x m) and its depth (or precision) k, the number

### Interactive Computer Graphics A TOP-DOWN APPROACH WITH SHADER-BASED OPENGL

International Edition Interactive Computer Graphics A TOP-DOWN APPROACH WITH SHADER-BASED OPENGL Sixth Edition Edward Angel Dave Shreiner Interactive Computer Graphics: A Top-Down Approach with Shader-Based

### Computer Graphics (CS 543) Lecture 10: Soft Shadows (Maps and Volumes), Normal and Bump Mapping

Computer Graphics (CS 543) Lecture 10: Soft Shadows (Maps and Volumes), Normal and Bump Mapping Prof Emmanuel Agu Computer Science Dept. Worcester Polytechnic Institute (WPI) Shadow Buffer Theory Observation:

### 3D Rasterization II COS 426

3D Rasterization II COS 426 3D Rendering Pipeline (for direct illumination) 3D Primitives Modeling Transformation Lighting Viewing Transformation Projection Transformation Clipping Viewport Transformation

### Programming Graphics Hardware

Tutorial 5 Programming Graphics Hardware Randy Fernando, Mark Harris, Matthias Wloka, Cyril Zeller Overview of the Tutorial: Morning 8:30 9:30 10:15 10:45 Introduction to the Hardware Graphics Pipeline

### Computer Viewing. Prof. George Wolberg Dept. of Computer Science City College of New York

Computer Viewing Prof. George Wolberg Dept. of Computer Science City College of New York Objectives Introduce the mathematics of projection Introduce OpenGL viewing functions Look at alternate viewing

### Line Drawing. Introduction to Computer Graphics Torsten Möller / Mike Phillips. Machiraju/Zhang/Möller

Line Drawing Introduction to Computer Graphics Torsten Möller / Mike Phillips Rendering Pipeline Hardware Modelling Transform Visibility Illumination + Shading Perception, Color Interaction Texture/ Realism

### BCA611 Video Oyunları için 3B Grafik

BCA611 Video Oyunları için 3B Grafik WebGL - Shader Programming Zümra Kavafoğlu Canvas element The HTML element is used to draw graphics on a web page. Create canvas with id, width and height