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

Save this PDF as:
 WORD  PNG  TXT  JPG

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

20 VERTEX SHADER 20

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

53 A T T A C H I N G S H A D E R S var remotematerial = new THREE.ShaderMaterial({ uniforms: { remoteposition: remoteposition, },}); //here goes loading shader files into shaders[] remotematerial.vertexshader = shaders['glsl/remote.vs.glsl']; remotematerial.fragmentshader = shaders['glsl/remote.fs']; var remotegeometry = new THREE.SphereGeometry(1, 32, 32); var remote = new THREE.Mesh(remoteGeometry, remotematerial); scene.add(remote); 53

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

96 REFLECTION/SHADOWS 96

OPENGL RENDERING PIPELINE

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

More information

Rendering Pipeline/ OpenGL

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

More information

Shaders. Slide credit to Prof. Zwicker

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)?

More information

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

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

More information

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

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

More information

Lecture 2. Shaders, GLSL and GPGPU

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

More information

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

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

More information

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

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

More information

WebGL and GLSL Basics. CS559 Fall 2016 Lecture 14 October

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

More information

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

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

More information

The Graphics Pipeline and OpenGL I: Transformations!

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

More information

Introduction to Shaders.

Introduction to Shaders. Introduction to Shaders Marco Benvegnù hiforce@gmx.it www.benve.org Summer 2005 Overview Rendering pipeline Shaders concepts Shading Languages Shading Tools Effects showcase Setup of a Shader in OpenGL

More information

Programming with OpenGL Shaders I. Adapted From: Ed Angel Professor of Emeritus of Computer Science University of New Mexico

Programming with OpenGL Shaders I. Adapted From: Ed Angel Professor of Emeritus of Computer Science University of New Mexico Programming with OpenGL Shaders I Adapted From: Ed Angel Professor of Emeritus of Computer Science University of New Mexico Objectives Shader Programming Basics Simple Shaders Vertex shader Fragment shaders

More information

Graphics Hardware. Instructor Stephen J. Guy

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!

More information

Rasterization Overview

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

More information

OpenGL shaders and programming models that provide object persistence

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

More information

Programming with OpenGL Shaders I. Adapted From: Ed Angel Professor of Emeritus of Computer Science University of New Mexico

Programming with OpenGL Shaders I. Adapted From: Ed Angel Professor of Emeritus of Computer Science University of New Mexico Programming with OpenGL Shaders I Adapted From: Ed Angel Professor of Emeritus of Computer Science University of New Mexico 0 Objectives Shader Basics Simple Shaders Vertex shader Fragment shaders 1 Vertex

More information

Spring 2009 Prof. Hyesoon Kim

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

More information

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

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:

More information

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

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

More information

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 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

More information

graphics pipeline computer graphics graphics pipeline 2009 fabio pellacini 1

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

More information

The Graphics Pipeline and OpenGL I: Transformations!

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:

More information

CS452/552; EE465/505. Review & Examples

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:

More information

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

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:

More information

lecture 16 Texture mapping Aliasing (and anti-aliasing)

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.

More information

The Traditional Graphics Pipeline

The Traditional Graphics Pipeline 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

More information

Three Main Themes of Computer Graphics

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

More information

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

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

More information

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 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

More information

The Rasterization Pipeline

The Rasterization Pipeline Lecture 5: The Rasterization Pipeline Computer Graphics and Imaging UC Berkeley What We ve Covered So Far z x y z x y (0, 0) (w, h) Position objects and the camera in the world Compute position of objects

More information

Evolution of GPUs Chris Seitz

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

More information

The Rasterization Pipeline

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

More information

Supplement to Lecture 22

Supplement to Lecture 22 Supplement to Lecture 22 Programmable GPUs Programmable Pipelines Introduce programmable pipelines - Vertex shaders - Fragment shaders Introduce shading languages - Needed to describe shaders - RenderMan

More information

Today. Rendering - III. Outline. Texturing: The 10,000m View. Texture Coordinates. Specifying Texture Coordinates in GL

Today. Rendering - III. Outline. Texturing: The 10,000m View. Texture Coordinates. Specifying Texture Coordinates in GL Today Rendering - III CS148, Summer 2010 Graphics Pipeline and Programmable Shaders Artist Workflow Siddhartha Chaudhuri 1 2 Outline Texturing: The 10,000m View Intro to textures The fixed-function graphics

More information

CS4621/5621 Fall Basics of OpenGL/GLSL Textures Basics

CS4621/5621 Fall Basics of OpenGL/GLSL Textures Basics CS4621/5621 Fall 2015 Basics of OpenGL/GLSL Textures Basics Professor: Kavita Bala Instructor: Nicolas Savva with slides from Balazs Kovacs, Eston Schweickart, Daniel Schroeder, Jiang Huang and Pramook

More information

Rendering Pipeline/ OpenGL

Rendering Pipeline/ OpenGL Chapter 2 Basics of Computer Graphics: Course Info/Policies (boring stuff): Course Info/Policies (boring stuff): http:www.ugrad.cs.ubc.ca/~cs314 Page 1 1 Grading Programming Assignments: 40% Weekly Mini

More information

2D graphics with WebGL

2D graphics with WebGL 2D graphics with WebGL Some material contained here is adapted from the book s slides. September 7, 2015 (Dr. Mihail) 2D graphics September 7, 2015 1 / 22 Graphics Pipeline (Dr. Mihail) 2D graphics September

More information

Mobile Application Programing: Android. OpenGL Operation

Mobile Application Programing: Android. OpenGL Operation Mobile Application Programing: Android OpenGL Operation Activities Apps are composed of activities Activities are self-contained tasks made up of one screen-full of information Activities start one another

More information

CS452/552; EE465/505. Texture Mapping in WebGL

CS452/552; EE465/505. Texture Mapping in WebGL CS452/552; EE465/505 Texture Mapping in WebGL 2-26 15 Outline! Texture Mapping in WebGL Read: Angel, Chapter 7, 7.3-7.5 LearningWebGL lesson 5: http://learningwebgl.com/blog/?p=507 Lab3 due: Monday, 3/2

More information

Computer Graphics Shadow Algorithms

Computer Graphics Shadow Algorithms Computer Graphics Shadow Algorithms Computer Graphics Computer Science Department University of Freiburg WS 11 Outline introduction projection shadows shadow maps shadow volumes conclusion Motivation shadows

More information

GLSL Introduction. Fu-Chung Huang. Thanks for materials from many other people

GLSL Introduction. Fu-Chung Huang. Thanks for materials from many other people GLSL Introduction Fu-Chung Huang Thanks for materials from many other people Shader Languages Currently 3 major shader languages Cg (Nvidia) HLSL (Microsoft) Derived from Cg GLSL (OpenGL) Main influences

More information

- Rasterization. Geometry. Scan Conversion. Rasterization

- Rasterization. Geometry. Scan Conversion. Rasterization Computer Graphics - The graphics pipeline - Geometry Modelview Geometry Processing Lighting Perspective Clipping Scan Conversion Texturing Fragment Tests Blending Framebuffer Fragment Processing - So far,

More information

Scanline Rendering 2 1/42

Scanline Rendering 2 1/42 Scanline Rendering 2 1/42 Review 1. Set up a Camera the viewing frustum has near and far clipping planes 2. Create some Geometry made out of triangles 3. Place the geometry in the scene using Transforms

More information

Clipping. CSC 7443: Scientific Information Visualization

Clipping. CSC 7443: Scientific Information Visualization Clipping Clipping to See Inside Obscuring critical information contained in a volume data Contour displays show only exterior visible surfaces Isosurfaces can hide other isosurfaces Other displays can

More information

WebGL: Hands On. DevCon5 NYC Kenneth Russell Software Engineer, Google, Inc. Chair, WebGL Working Group

WebGL: Hands On. DevCon5 NYC Kenneth Russell Software Engineer, Google, Inc. Chair, WebGL Working Group WebGL: Hands On DevCon5 NYC 2011 Kenneth Russell Software Engineer, Google, Inc. Chair, WebGL Working Group Today's Agenda Introduce WebGL and its programming model. Show code for a complete example. Demonstrate

More information

Converts geometric primitives into images Is split into several independent stages Those are usually executed concurrently

Converts geometric primitives into images Is split into several independent stages Those are usually executed concurrently Rendering Pipeline Rendering Pipeline Converts geometric primitives into images Is split into several independent stages Those are usually executed concurrently Pipeline 18.10.2013 Steiner- Wallner- Podaras

More information

Water Simulation on WebGL and Three.js

Water Simulation on WebGL and Three.js The University of Southern Mississippi The Aquila Digital Community Honors Theses Honors College 5-2013 Water Simulation on WebGL and Three.js Kerim J. Pereira Follow this and additional works at: http://aquila.usm.edu/honors_theses

More information

WebGL (Web Graphics Library) is the new standard for 3D graphics on the Web, designed for rendering 2D graphics and interactive 3D graphics.

WebGL (Web Graphics Library) is the new standard for 3D graphics on the Web, designed for rendering 2D graphics and interactive 3D graphics. About the Tutorial WebGL (Web Graphics Library) is the new standard for 3D graphics on the Web, designed for rendering 2D graphics and interactive 3D graphics. This tutorial starts with a basic introduction

More information

Lecture 11 Shaders and WebGL. October 8, 2015

Lecture 11 Shaders and WebGL. October 8, 2015 Lecture 11 Shaders and WebGL October 8, 2015 Review Graphics Pipeline (all the machinery) Program Vertex and Fragment Shaders WebGL to set things up Key Shader Concepts Fragment Processing and Vertex

More information

Texture Mapping. CS 537 Interactive Computer Graphics Prof. David E. Breen Department of Computer Science

Texture Mapping. CS 537 Interactive Computer Graphics Prof. David E. Breen Department of Computer Science Texture Mapping CS 537 Interactive Computer Graphics Prof. David E. Breen Department of Computer Science 1 Objectives Introduce Mapping Methods - Texture Mapping - Environment Mapping - Bump Mapping Consider

More information

CS450/550. Pipeline Architecture. Adapted From: Angel and Shreiner: Interactive Computer Graphics6E Addison-Wesley 2012

CS450/550. Pipeline Architecture. Adapted From: Angel and Shreiner: Interactive Computer Graphics6E Addison-Wesley 2012 CS450/550 Pipeline Architecture Adapted From: Angel and Shreiner: Interactive Computer Graphics6E Addison-Wesley 2012 0 Objectives Learn the basic components of a graphics system Introduce the OpenGL pipeline

More information

Computer Viewing. CS 537 Interactive Computer Graphics Prof. David E. Breen Department of Computer Science

Computer Viewing. CS 537 Interactive Computer Graphics Prof. David E. Breen Department of Computer Science Computer Viewing CS 537 Interactive Computer Graphics Prof. David E. Breen Department of Computer Science 1 Objectives Introduce the mathematics of projection Introduce OpenGL viewing functions Look at

More information

CS 4620 Midterm, March 21, 2017

CS 4620 Midterm, March 21, 2017 CS 460 Midterm, March 1, 017 This 90-minute exam has 4 questions worth a total of 100 points. Use the back of the pages if you need more space. Academic Integrity is expected of all students of Cornell

More information

Models and The Viewing Pipeline. Jian Huang CS456

Models and The Viewing Pipeline. Jian Huang CS456 Models and The Viewing Pipeline Jian Huang CS456 Vertex coordinates list, polygon table and (maybe) edge table Auxiliary: Per vertex normal Neighborhood information, arranged with regard to vertices and

More information

WebGL A quick introduction. J. Madeira V. 0.2 September 2017

WebGL A quick introduction. J. Madeira V. 0.2 September 2017 WebGL A quick introduction J. Madeira V. 0.2 September 2017 1 Interactive Computer Graphics Graphics library / package is intermediary between application and display hardware Application program maps

More information

Technical Game Development II. Reference: Rost, OpenGL Shading Language, 2nd Ed., AW, 2006 The Orange Book Also take CS 4731 Computer Graphics

Technical Game Development II. Reference: Rost, OpenGL Shading Language, 2nd Ed., AW, 2006 The Orange Book Also take CS 4731 Computer Graphics Shader Programming Technical Game Development II Professor Charles Rich Computer Science Department rich@wpi.edu Reference: Rost, OpenGL Shading Language, 2nd Ed., AW, 2006 The Orange Book Also take CS

More information

Shadow Algorithms. CSE 781 Winter Han-Wei Shen

Shadow Algorithms. CSE 781 Winter Han-Wei Shen Shadow Algorithms CSE 781 Winter 2010 Han-Wei Shen Why Shadows? Makes 3D Graphics more believable Provides additional cues for the shapes and relative positions of objects in 3D What is shadow? Shadow:

More information

Ulf Assarsson Department of Computer Engineering Chalmers University of Technology

Ulf Assarsson Department of Computer Engineering Chalmers University of Technology Ulf Assarsson Department of Computer Engineering Chalmers University of Technology Tracing Photons One way to form an image is to follow rays of light from a point source finding which rays enter the lens

More information

Data Visualization. What is the goal? A generalized environment for manipulation and visualization of multidimensional data

Data Visualization. What is the goal? A generalized environment for manipulation and visualization of multidimensional data Data Visualization NIH-NSF NSF BBSI: Simulation and Computer Visualization of Biological Systems at Multiple Scales June 2-4, 2 2004 Joel R. Stiles, MD, PhD What is the goal? A generalized environment

More information

CS452/552; EE465/505. Image Formation

CS452/552; EE465/505. Image Formation CS452/552; EE465/505 Image Formation 1-15-15 Outline! Image Formation! Introduction to WebGL, continued Draw a colored triangle using WebGL Read: Angel, Chapters 2 & 3 Homework #1 will be available on

More information

CS770/870 Spring 2017 Open GL Shader Language GLSL

CS770/870 Spring 2017 Open GL Shader Language GLSL Preview CS770/870 Spring 2017 Open GL Shader Language GLSL Review traditional graphics pipeline CPU/GPU mixed pipeline issues Shaders GLSL graphics pipeline Based on material from Angel and Shreiner, Interactive

More information

GLSL 1: Basics. J.Tumblin-Modified SLIDES from:

GLSL 1: Basics. J.Tumblin-Modified SLIDES from: GLSL 1: Basics J.Tumblin-Modified SLIDES from: Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts Director, Arts Technology Center University of New Mexico and

More information

CS130 : Computer Graphics Lecture 2: Graphics Pipeline. Tamar Shinar Computer Science & Engineering UC Riverside

CS130 : Computer Graphics Lecture 2: Graphics Pipeline. Tamar Shinar Computer Science & Engineering UC Riverside CS130 : Computer Graphics Lecture 2: Graphics Pipeline Tamar Shinar Computer Science & Engineering UC Riverside Raster Devices and Images Raster Devices - raster displays show images as a rectangular array

More information

Understanding M3G 2.0 and its Effect on Producing Exceptional 3D Java-Based Graphics. Sean Ellis Consultant Graphics Engineer ARM, Maidenhead

Understanding M3G 2.0 and its Effect on Producing Exceptional 3D Java-Based Graphics. Sean Ellis Consultant Graphics Engineer ARM, Maidenhead Understanding M3G 2.0 and its Effect on Producing Exceptional 3D Java-Based Graphics Sean Ellis Consultant Graphics Engineer ARM, Maidenhead Introduction M3G 1.x Recap ARM M3G Integration M3G 2.0 Update

More information

Mobile Application Programming: Android. OpenGL Operation

Mobile Application Programming: Android. OpenGL Operation Mobile Application Programming: Android OpenGL Operation OpenGL ES C-Based Performance-Oriented Graphics Library Wrapper libraries provided for Java, C#, etc. Produces 2D images from 2D or 3D geometric

More information

Mobile Application Programing: Android. OpenGL Operation

Mobile Application Programing: Android. OpenGL Operation Mobile Application Programing: Android OpenGL Operation Activities Apps are composed of activities Activities are self-contained tasks made up of one screen-full of information Activities start one another

More information

Introduction to the OpenGL Shading Language

Introduction to the OpenGL Shading Language Introduction to the OpenGL Shading Language Randi Rost Director of Developer Relations, 3Dlabs 08-Dec-2005 1 Why use graphics programmability? Graphics hardware has changed radically Fixed functionality

More information

GLSL Introduction. Fu-Chung Huang. Thanks for materials from many other people

GLSL Introduction. Fu-Chung Huang. Thanks for materials from many other people GLSL Introduction Fu-Chung Huang Thanks for materials from many other people Programmable Shaders //per vertex inputs from main attribute aposition; attribute anormal; //outputs to frag. program varying

More information

The Graphics Pipeline

The Graphics Pipeline The Graphics Pipeline Lecture 2 Robb T. Koether Hampden-Sydney College Fri, Aug 28, 2015 Robb T. Koether (Hampden-Sydney College) The Graphics Pipeline Fri, Aug 28, 2015 1 / 19 Outline 1 Vertices 2 The

More information

Shaders CSCI 4239/5239 Advanced Computer Graphics Spring 2014

Shaders CSCI 4239/5239 Advanced Computer Graphics Spring 2014 Shaders CSCI 4239/5239 Advanced Computer Graphics Spring 2014 What is a Shader? Wikipedia: A shader is a computer program used in 3D computer graphics to determine the final surface properties of an object

More information

The Rendering Pipeline (1)

The Rendering Pipeline (1) The Rendering Pipeline (1) Alessandro Martinelli alessandro.martinelli@unipv.it 30 settembre 2014 The Rendering Pipeline (1) Rendering Architecture First Rendering Pipeline Second Pipeline: Illumination

More information

Computer Science 175. Introduction to Computer Graphics lib175 time: m/w 2:30-4:00 pm place:md g125 section times: tba

Computer Science 175. Introduction to Computer Graphics  lib175 time: m/w 2:30-4:00 pm place:md g125 section times: tba Computer Science 175 Introduction to Computer Graphics www.fas.harvard.edu/ lib175 time: m/w 2:30-4:00 pm place:md g125 section times: tba Instructor: Steven shlomo Gortler www.cs.harvard.edu/ sjg sjg@cs.harvard.edu

More information

Models and Architectures. Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts University of New Mexico

Models and Architectures. Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts University of New Mexico Models and Architectures Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts University of New Mexico 1 Objectives Learn the basic design of a graphics system Introduce

More information

OpenGL: Open Graphics Library. Introduction to OpenGL Part II. How do I render a geometric primitive? What is OpenGL

OpenGL: Open Graphics Library. Introduction to OpenGL Part II. How do I render a geometric primitive? What is OpenGL OpenGL: Open Graphics Library Introduction to OpenGL Part II CS 351-50 Graphics API ( Application Programming Interface) Software library Layer between programmer and graphics hardware (and other software

More information

Rasterization-based pipeline

Rasterization-based pipeline Rasterization-based pipeline Interactive Graphics: Color and Images 10/2/2014 Pagina 1 Rasterization-based rendering Input: set of vertices and its associated attributes Algorithm goes through several

More information

The Transition from RenderMan to the OpenGL Shading Language (GLSL)

The Transition from RenderMan to the OpenGL Shading Language (GLSL) 1 The Transition from RenderMan to the OpenGL Shading Language (GLSL) Mike Bailey mjb@cs.oregonstate.edu This work is licensed under a Creative Commons Attribution-NonCommercial- NoDerivatives 4.0 International

More information

OpenGL refresher. Advanced Computer Graphics 2012

OpenGL refresher. Advanced Computer Graphics 2012 Advanced Computer Graphics 2012 What you will see today Outline General OpenGL introduction Setting up: GLUT and GLEW Elementary rendering Transformations in OpenGL Texture mapping Programmable shading

More information

I expect to interact in class with the students, so I expect students to be engaged. (no laptops, smartphones,...) (fig)

I expect to interact in class with the students, so I expect students to be engaged. (no laptops, smartphones,...) (fig) Computer Science 175 Introduction to Computer Graphics www.fas.harvard.edu/ lib175 time: m/w 2:30-4:00 pm place:md g125 section times: tba Instructor: Steven shlomo Gortler www.cs.harvard.edu/ sjg sjg@cs.harvard.edu

More information

Surface Graphics. 200 polys 1,000 polys 15,000 polys. an empty foot. - a mesh of spline patches:

Surface Graphics. 200 polys 1,000 polys 15,000 polys. an empty foot. - a mesh of spline patches: Surface Graphics Objects are explicitely defined by a surface or boundary representation (explicit inside vs outside) This boundary representation can be given by: - a mesh of polygons: 200 polys 1,000

More information

Direct Rendering of Trimmed NURBS Surfaces

Direct Rendering of Trimmed NURBS Surfaces Direct Rendering of Trimmed NURBS Surfaces Hardware Graphics Pipeline 2/ 81 Hardware Graphics Pipeline GPU Video Memory CPU Vertex Processor Raster Unit Fragment Processor Render Target Screen Extended

More information

CSE 167: Introduction to Computer Graphics Lecture #7: GLSL. Jürgen P. Schulze, Ph.D. University of California, San Diego Spring Quarter 2016

CSE 167: Introduction to Computer Graphics Lecture #7: GLSL. Jürgen P. Schulze, Ph.D. University of California, San Diego Spring Quarter 2016 CSE 167: Introduction to Computer Graphics Lecture #7: GLSL Jürgen P. Schulze, Ph.D. University of California, San Diego Spring Quarter 2016 Announcements Project 2 due Friday 4/22 at 2pm Midterm #1 on

More information

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

CSE 167: Lecture #5: Rasterization. Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2012 CSE 167: Introduction to Computer Graphics Lecture #5: Rasterization Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2012 Announcements Homework project #2 due this Friday, October

More information

Advanced Lighting Techniques Due: Monday November 2 at 10pm

Advanced Lighting Techniques Due: Monday November 2 at 10pm CMSC 23700 Autumn 2015 Introduction to Computer Graphics Project 3 October 20, 2015 Advanced Lighting Techniques Due: Monday November 2 at 10pm 1 Introduction This assignment is the third and final part

More information

Shaders (some slides taken from David M. course)

Shaders (some slides taken from David M. course) Shaders (some slides taken from David M. course) Doron Nussbaum Doron Nussbaum COMP 3501 - Shaders 1 Traditional Rendering Pipeline Traditional pipeline (older graphics cards) restricts developer to texture

More information

CS Exam 1 Review Problems Fall 2017

CS Exam 1 Review Problems Fall 2017 CS 45500 Exam 1 Review Problems Fall 2017 1. What is a FrameBuffer data structure? What does it contain? What does it represent? How is it used in a graphics rendering pipeline? 2. What is a Scene data

More information

Levy: Constraint Texture Mapping, SIGGRAPH, CS 148, Summer 2012 Introduction to Computer Graphics and Imaging Justin Solomon

Levy: Constraint Texture Mapping, SIGGRAPH, CS 148, Summer 2012 Introduction to Computer Graphics and Imaging Justin Solomon Levy: Constraint Texture Mapping, SIGGRAPH, 2001 CS 148, Summer 2012 Introduction to Computer Graphics and Imaging Justin Solomon Instructor: Justin Solomon Email: justin.solomon@stanford.edu Office: Clark

More information

E.Order of Operations

E.Order of Operations Appendix E E.Order of Operations This book describes all the performed between initial specification of vertices and final writing of fragments into the framebuffer. The chapters of this book are arranged

More information

Software Engineering. ò Look up Design Patterns. ò Code Refactoring. ò Code Documentation? ò One of the lessons to learn for good design:

Software Engineering. ò Look up Design Patterns. ò Code Refactoring. ò Code Documentation? ò One of the lessons to learn for good design: Software Engineering ò Look up Design Patterns ò Code Refactoring ò Code Documentation? ò One of the lessons to learn for good design: ò Coupling: the amount of interconnectedness between classes ò Cohesion:

More information

Objectives Shading in OpenGL. Front and Back Faces. OpenGL shading. Introduce the OpenGL shading methods. Discuss polygonal shading

Objectives Shading in OpenGL. Front and Back Faces. OpenGL shading. Introduce the OpenGL shading methods. Discuss polygonal shading Objectives Shading in OpenGL Introduce the OpenGL shading methods - per vertex shading vs per fragment shading - Where to carry out Discuss polygonal shading - Flat - Smooth - Gouraud CITS3003 Graphics

More information

3D Viewing. CS 4620 Lecture 8

3D Viewing. CS 4620 Lecture 8 3D Viewing CS 46 Lecture 8 13 Steve Marschner 1 Viewing, backward and forward So far have used the backward approach to viewing start from pixel ask what part of scene projects to pixel explicitly construct

More information

CS GPU and GPGPU Programming Lecture 7: Shading and Compute APIs 1. Markus Hadwiger, KAUST

CS GPU and GPGPU Programming Lecture 7: Shading and Compute APIs 1. Markus Hadwiger, KAUST CS 380 - GPU and GPGPU Programming Lecture 7: Shading and Compute APIs 1 Markus Hadwiger, KAUST Reading Assignment #4 (until Feb. 23) Read (required): Programming Massively Parallel Processors book, Chapter

More information

Computergraphics Exercise 15/ Shading & Texturing

Computergraphics Exercise 15/ Shading & Texturing Computergraphics Exercise 15/16 3. Shading & Texturing Jakob Wagner for internal use only Shaders Vertex Specification define vertex format & data in model space Vertex Processing transform to clip space

More information

Projection and viewing. Computer Graphics CSE 167 Lecture 4

Projection and viewing. Computer Graphics CSE 167 Lecture 4 Projection and viewing Computer Graphics CSE 167 Lecture 4 CSE 167: Computer Graphics Review: transformation from the object (or model) coordinate frame to the camera (or eye) coordinate frame Projection

More information

Scan line algorithm. Jacobs University Visualization and Computer Graphics Lab : Graphics and Visualization 272

Scan line algorithm. Jacobs University Visualization and Computer Graphics Lab : Graphics and Visualization 272 Scan line algorithm The scan line algorithm is an alternative to the seed fill algorithm. It does not require scan conversion of the edges before filling the polygons It can be applied simultaneously to

More information

Graphics Processing Unit Architecture (GPU Arch)

Graphics Processing Unit Architecture (GPU Arch) Graphics Processing Unit Architecture (GPU Arch) With a focus on NVIDIA GeForce 6800 GPU 1 What is a GPU From Wikipedia : A specialized processor efficient at manipulating and displaying computer graphics

More information

Computer Graphics and Visualization. Graphics Systems and Models

Computer Graphics and Visualization. Graphics Systems and Models UNIT -1 Graphics Systems and Models 1.1 Applications of computer graphics: Display Of Information Design Simulation & Animation User Interfaces 1.2 Graphics systems A Graphics system has 5 main elements:

More information

Drawing Fast The Graphics Pipeline

Drawing Fast The Graphics Pipeline Drawing Fast The Graphics Pipeline CS559 Fall 2016 Lectures 10 & 11 October 10th & 12th, 2016 1. Put a 3D primitive in the World Modeling 2. Figure out what color it should be 3. Position relative to the

More information

CS452/552; EE465/505. Models & Viewing

CS452/552; EE465/505. Models & Viewing CS452/552; EE465/505 Models & Viewing 2-03 15 Outline! Building Polygonal Models Vertex lists; gl.drawarrays( ) Edge lists: gl.drawelements( )! Viewing Classical Viewing Read: Viewing in Web3D Angel, Section

More information

3D graphics, raster and colors CS312 Fall 2010

3D graphics, raster and colors CS312 Fall 2010 Computer Graphics 3D graphics, raster and colors CS312 Fall 2010 Shift in CG Application Markets 1989-2000 2000 1989 3D Graphics Object description 3D graphics model Visualization 2D projection that simulates

More information