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

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

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

Transcription

1 Rendering Pipeline

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

3 The real pipeline Steiner- Wallner- Podaras 3

4 OpenGL Pipeline Vertex Processing Primitive Assembly Polygon Clipping Homogenization Viewport Transformation Rasterization Fragment Processing Depth Test Steiner- Wallner- Podaras 4

5 Let s draw a triangle Step One: Transform vertices Call vertex shader for each vertex Vertex Processing Primitive Assembly Polygon Clipping Homogenization Viewport Transform. Rasterization Fragment Processing Depth Test Steiner- Wallner- Podaras 5

6 Let s draw a triangle Step Two: Primitive Assembly Collect vertices to build a primitive Vertex Processing Primitive Assembly Polygon Clipping Homogenization Viewport Transform. Rasterization Fragment Processing Depth Test Steiner- Wallner- Podaras 6

7 Let s draw a triangle Step Three: Polygon Clipping Remove all parts outside of the screen Interpolate new points Vertex Processing Primitive Assembly Polygon Clipping Homogenization Viewport Transform. Rasterization Fragment Processing Depth Test Steiner- Wallner- Podaras 7

8 Let s draw a triangle Step Four: Homogenization Apply perspective division Vertex Processing Primitive Assembly Polygon Clipping Homogenization Viewport Transform. Rasterization Fragment Processing Depth Test Steiner- Wallner- Podaras 8

9 Let s draw a triangle Step Five: Viewport Transform Convert screen coordinates to pixel positions Vertex Processing Primitive Assembly Polygon Clipping Homogenization Viewport Transform. Rasterization Fragment Processing Depth Test Steiner- Wallner- Podaras 9

10 Let s draw a triangle Step Five: Viewport Transform Convert screen coordinates to pixel positions Vertex Processing Primitive Assembly Polygon Clipping Homogenization Viewport Transform. Rasterization Fragment Processing Depth Test Steiner- Wallner- Podaras 10

11 Let s draw a triangle Step Six: Rasterization Find pixels inside primitive Call fragment shader for each pixel Set pixel color to fragment shader result Vertex Processing Primitive Assembly Polygon Clipping Homogenization Viewport Transform. Rasterization Fragment Processing Depth Test Steiner- Wallner- Podaras 11

12 Let s draw a triangle Step Seven: Z-Test Compare depth before storing pixel color Vertex Processing Primitive Assembly Polygon Clipping Homogenization Viewport Transform. Rasterization Fragment Processing Depth Test Steiner- Wallner- Podaras 12

13 Depth Buffering Draw result depend on order of render calls Blue - > Red - > Green Green - > Red - > Blue Steiner- Wallner- Podaras 13

14 Depth Buffering Draw result depend on order of render calls Blue - > Red - > Green Green - > Red - > Blue BeKer: Order polygons by their depth Steiner- Wallner- Podaras 14

15 Depth Buffer AddiPonal Screen- Buffer that stores depth values Write pixel only when new depth is smaller than stored depth Need to enable and clear depth buffer too gl.enable(gl.depth_test); gl.clear(gl.color_buffer_bit gl.depth_buffer_bit); Steiner- Wallner- Podaras 15

16 Shader Small C- like programs executed on the graphics- hardware Replace fixed funcpon (OpenGL < 3.0) pipeline with shaders Shader- Types Vertex Shader Fragment Shader Geometry Shader, TessellaPon Shader, Compute Shader Used e.g. for transformapons and lighpng Steiner- Wallner- Podaras 16

17 Shader Vertex Processing Vertex Shader Primitive Assembly Polygon Clipping Homogenization varyings Viewport Transformation Rasterization Fragment Processing Fragment Shader Depth Test Steiner- Wallner- Podaras 17

18 Shader Vertex Processing Primitive Assembly Vertex Shader Geometry Shader Polygon Clipping Homogenization Viewport Transformation Rasterization Fragment Processing Fragment Shader Depth Test Steiner- Wallner- Podaras 18

19 Shader Vertex Shader Called once for each vertex Fragment Shader Called once for each pixel inside a surface Steiner- Wallner- Podaras 19

20 AKributes/Varyings Draw Call Vertex Shader attribute vec3 position attribute vec2 uv varying vec2 fragmentuv gl_position Fragment Shader gl_fragcolor Draw Buffer Steiner- Wallner- Podaras 20

21 AKributes/Varyings Pass data from one shader/pipeline stage to the next A>ribute: from Draw Call to Vertex Shader Varying: from Vertex Shader to Fragment Shader from Fragment Shader to Draw Buffer Global variables with varying/attribute qualifier Correct interpoladon between stages Steiner- Wallner- Podaras 21

22 Parameter interpolapon // vertex shader varying vec2 fragmentuv; //... InterpolaDon // fragment shader varying vec2 fragmentuv; // Steiner- Wallner- Podaras 22

23 Our first shader Vertex Shader Takes akributes from draw call Should set gl_position attribute vec4 position; void main() { gl_position = position; } Steiner- Wallner- Podaras 23

24 Our first shader Fragment Shader Takes interpolated varyings Should write to gl_fragcolor precision mediump float; void main() { gl_fragcolor = vec4(0.6, 0.85, 0.95, 1.0); } Steiner- Wallner- Podaras 24

25 Shader execupon model Shader- Source- Code OpenGL- API ApplicaDon OpenGL- Driver Compiler Shader- Object compiled code Linker Program- Object Graphics- Hardware executable code Steiner- Wallner- Podaras 25

26 Lets start with some code Send HTTP GET Request to load shader file request.open('get', path); request.onreadystatechange = function() { if (request.readystate === this.done) { if (request.status === 200) { callback(request.responsetext); } else { //Error Handling } } }; request.send(); Steiner- Wallner- Podaras 26

27 Shader Loading Generate shader object var shader = gl.createshader(type); Type can be gl.vertex_shader or gl.fragment_shader Upload code to shader object gl.shadersource(shader, src); Steiner- Wallner- Podaras 27

28 Shader Compiling Compile shader gl.compileshader(shader); And test for errors if (!gl.getshaderparameter(shader, gl.compile_status)) { //Handle errors } Steiner- Wallner- Podaras 28

29 Shader Program CombinaPon of Vertex and Fragment Shader Object program = gl.createprogram(); AKach Shader Objects gl.attachshader(program, vertexshader); gl.attachshader(program, fragmentshader); Steiner- Wallner- Podaras 29

30 Shader Linking Link shader program aher akaching shaders gl.linkprogram(program); And check for errors if (!gl.getprogramparameter(program, gl.link_status)) { var infolog = gl.getprograminfolog(program); } Steiner- Wallner- Podaras 30

31 Webserver HTTP Request can only be handled by Server Accessing Textures etc. not possible on local machine due to security reasons. Python provides you with an simple HTTP Server $ python - m SimpleHTTPServer [PORT] Steiner- Wallner- Podaras 31

32 Webserver Access Server A>enDon: Webserver could cache files! Steiner- Wallner- Podaras 32

33 Big DEMO Time! Steiner- Wallner- Podaras 33

34 Big DEMO Time! Don t try this at home

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

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

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

C P S C 314 S H A D E R S, O P E N G L, & J S RENDERING PIPELINE. Mikhail Bessmeltsev 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 WHAT IS RENDERING? Generating image from a 3D scene 2 WHAT IS RENDERING? Generating image

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

Introduction to OpenGL/GLSL and WebGL GLSL

Introduction to OpenGL/GLSL and WebGL GLSL Introduction to OpenGL/GLSL and WebGL GLSL Objectives! Give you an overview of the software that you will be using this semester! OpenGL, WebGL, and GLSL! What are they?! How do you use them?! What does

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

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

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

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

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

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

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

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

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

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

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

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

- 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

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

Graphics Pipeline & APIs

Graphics Pipeline & APIs Graphics Pipeline & APIs CPU Vertex Processing Rasterization Fragment Processing glclear (GL_COLOR_BUFFER_BIT GL_DEPTH_BUFFER_BIT); glpushmatrix (); gltranslatef (-0.15, -0.15, solidz); glmaterialfv(gl_front,

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

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

CSE 167: Introduction to Computer Graphics Lecture #13: GLSL. Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2015 CSE 167: Introduction to Computer Graphics Lecture #13: GLSL Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2015 Announcements Project 6 due Friday Next Thursday: Midterm #2

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

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

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

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

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

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

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

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

CS Computer Graphics: Hidden Surface Removal

CS Computer Graphics: Hidden Surface Removal CS 543 - Computer Graphics: Hidden Surface Removal by Robert W. Lindeman gogo@wpi.edu (with help from Emmanuel Agu ;-) Hidden Surface Removal Drawing polygonal faces on screen consumes CPU cycles We cannot

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

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

Lecture 09: Shaders (Part 1)

Lecture 09: Shaders (Part 1) Lecture 09: Shaders (Part 1) CSE 40166 Computer Graphics Peter Bui University of Notre Dame, IN, USA November 9, 2010 OpenGL Rendering Pipeline OpenGL Rendering Pipeline (Pseudo-Code) 1 f o r gl_vertex

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

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

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

Intro to OpenGL III. Don Fussell Computer Science Department The University of Texas at Austin

Intro to OpenGL III. Don Fussell Computer Science Department The University of Texas at Austin Intro to OpenGL III Don Fussell Computer Science Department The University of Texas at Austin University of Texas at Austin CS354 - Computer Graphics Don Fussell Where are we? Continuing the OpenGL basic

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

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

Teaching a Modern Graphics Pipeline Using a Shader-based Software Renderer

Teaching a Modern Graphics Pipeline Using a Shader-based Software Renderer Teaching a Modern Graphics Pipeline Using a Shader-based Software Renderer Heinrich Fink 1 Thomas Weber 1 Michael Wimmer 1 1 Institute of Computer Graphics and Algorithms, Vienna University of Technology

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

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

Today s Agenda. Shaders fundamentals. Programming with shader-based OpenGL

Today s Agenda. Shaders fundamentals. Programming with shader-based OpenGL Today s Agenda Shaders fundamentals Programming with shader-based OpenGL Shaders Like a function call data are passed in, processed, and passed back out -- Shreiner et al, OpenGL Programming Guide GLSL

More information

Lecture 25: Board Notes: Threads and GPUs

Lecture 25: Board Notes: Threads and GPUs Lecture 25: Board Notes: Threads and GPUs Announcements: - Reminder: HW 7 due today - Reminder: Submit project idea via (plain text) email by 11/24 Recap: - Slide 4: Lecture 23: Introduction to Parallel

More information

CS 428: Fall Introduction to. OpenGL primer. Andrew Nealen, Rutgers, /13/2010 1

CS 428: Fall Introduction to. OpenGL primer. Andrew Nealen, Rutgers, /13/2010 1 CS 428: Fall 2010 Introduction to Computer Graphics OpenGL primer Andrew Nealen, Rutgers, 2010 9/13/2010 1 Graphics hardware Programmable {vertex, geometry, pixel} shaders Powerful GeForce 285 GTX GeForce480

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

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

Computer Graphics (CS 543) Lecture 9 (Part 2): Clipping. Prof Emmanuel Agu. Computer Science Dept. Worcester Polytechnic Institute (WPI)

Computer Graphics (CS 543) Lecture 9 (Part 2): Clipping. Prof Emmanuel Agu. Computer Science Dept. Worcester Polytechnic Institute (WPI) Computer Graphics (CS 543) Lecture 9 (Part 2): Clipping Prof Emmanuel Agu Computer Science Dept. Worcester Polytechnic Institute (WPI) OpenGL Stages After projection, several stages before objects drawn

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

Intro to OpenGL III. Don Fussell Computer Science Department The University of Texas at Austin

Intro to OpenGL III. Don Fussell Computer Science Department The University of Texas at Austin Intro to OpenGL III Don Fussell Computer Science Department The University of Texas at Austin University of Texas at Austin CS354 - Computer Graphics Don Fussell Where are we? Continuing the OpenGL basic

More information

Mining the Rendering Power in Web Browsers. Jianxia Xue Jan. 28, 2014

Mining the Rendering Power in Web Browsers. Jianxia Xue Jan. 28, 2014 Mining the Rendering Power in Web Browsers Jianxia Xue Jan. 28, 2014 Outline Web application as software deployment platform WebGL: Graphics API inside browsers Explore browser rendering capability through

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

MXwendler Fragment Shader Development Reference Version 1.0

MXwendler Fragment Shader Development Reference Version 1.0 MXwendler Fragment Shader Development Reference Version 1.0 This document describes the MXwendler fragmentshader interface. You will learn how to write shaders using the GLSL language standards and the

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

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

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

CS 591B Lecture 9: The OpenGL Rendering Pipeline

CS 591B Lecture 9: The OpenGL Rendering Pipeline CS 591B Lecture 9: The OpenGL Rendering Pipeline 3D Polygon Rendering Many applications use rendering of 3D polygons with direct illumination Spring 2007 Rui Wang 3D Polygon Rendering Many applications

More information

Advanced Graphics. The Shader knows. Alex Benton, University of Cambridge Supported in part by Google UK, Ltd

Advanced Graphics. The Shader knows. Alex Benton, University of Cambridge Supported in part by Google UK, Ltd Advanced Graphics The Shader knows Alex Benton, University of Cambridge A.Benton@damtp.cam.ac.uk Supported in part by Google UK, Ltd What is the shader? Local space World space Viewing space Local space

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

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

Could you make the XNA functions yourself?

Could you make the XNA functions yourself? 1 Could you make the XNA functions yourself? For the second and especially the third assignment, you need to globally understand what s going on inside the graphics hardware. You will write shaders, which

More information

GPU Programming EE Final Examination

GPU Programming EE Final Examination Name Solution GPU Programming EE 4702-1 Final Examination Friday, 11 December 2015 15:00 17:00 CST Alias Methane? Problem 1 Problem 2 Problem 3 Problem 4 Problem 5 Problem 6 Exam Total (20 pts) (15 pts)

More information

OpenGL Performances and Flexibility. Visual Computing Laboratory ISTI CNR, Italy

OpenGL Performances and Flexibility. Visual Computing Laboratory ISTI CNR, Italy OpenGL Performances and Flexibility Visual Computing Laboratory ISTI CNR, Italy The Abstract Graphics Pipeline Application 1. The application specifies vertices & connectivity. Vertex Processing 2. The

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

Graphics Hardware and OpenGL

Graphics Hardware and OpenGL Graphics Hardware and OpenGL Ubi Soft, Prince of Persia: The Sands of Time What does graphics hardware have to do fast? Camera Views Different views of an object in the world 1 Camera Views Lines from

More information

An Overview GLUT GLSL GLEW

An Overview GLUT GLSL GLEW OpenGL, GLUT, GLEW, GLSL An Overview GLUT GLEW GLSL Objectives Give you an overview of the software that you will be using this semester OpenGL, GLUT, GLEW, GLSL What are they? How do you use them? What

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

ARM. Mali GPU. OpenGL ES Application Optimization Guide. Version: 2.0. Copyright 2011, 2013 ARM. All rights reserved. ARM DUI 0555B (ID051413)

ARM. Mali GPU. OpenGL ES Application Optimization Guide. Version: 2.0. Copyright 2011, 2013 ARM. All rights reserved. ARM DUI 0555B (ID051413) ARM Mali GPU Version: 2.0 OpenGL ES Application Optimization Guide Copyright 2011, 2013 ARM. All rights reserved. ARM DUI 0555B () ARM Mali GPU OpenGL ES Application Optimization Guide Copyright 2011,

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

Comp 410/510 Computer Graphics Spring Programming with OpenGL Part 3: Shaders

Comp 410/510 Computer Graphics Spring Programming with OpenGL Part 3: Shaders Comp 410/510 Computer Graphics Spring 2018 Programming with OpenGL Part 3: Shaders Objectives Basic shaders - Vertex shader - Fragment shader Programming shaders with GLSL Finish first program void init(void)

More information

Rendering Subdivision Surfaces Efficiently on the GPU

Rendering Subdivision Surfaces Efficiently on the GPU Rendering Subdivision Surfaces Efficiently on the GPU Gy. Antal, L. Szirmay-Kalos and L. A. Jeni Department of Algorithms and their Applications, Faculty of Informatics, Eötvös Loránd Science University,

More information

COMP3421. Particle Systems, Rasterisation

COMP3421. Particle Systems, Rasterisation COMP3421 Particle Systems, Rasterisation Particle systems Some visual phenomena are best modelled as collections of small particles. Examples: rain, snow, fire, smoke, dust Particle systems Particles are

More information

Advanced Graphics. OpenGL and Shaders I. Alex Benton, University of Cambridge Supported in part by Google UK, Ltd

Advanced Graphics. OpenGL and Shaders I. Alex Benton, University of Cambridge Supported in part by Google UK, Ltd Advanced Graphics OpenGL and Shaders I 1 Alex Benton, University of Cambridge A.Benton@damtp.cam.ac.uk Supported in part by Google UK, Ltd 3D technologies today Java OpenGL Common, re-usable language;

More information

OpenGL SUPERBIBLE. Fifth Edition. Comprehensive Tutorial and Reference. Richard S. Wright, Jr. Nicholas Haemel Graham Sellers Benjamin Lipchak

OpenGL SUPERBIBLE. Fifth Edition. Comprehensive Tutorial and Reference. Richard S. Wright, Jr. Nicholas Haemel Graham Sellers Benjamin Lipchak OpenGL SUPERBIBLE Fifth Edition Comprehensive Tutorial and Reference Richard S. Wright, Jr. Nicholas Haemel Graham Sellers Benjamin Lipchak AAddison-Wesley Upper Saddle River, NJ Boston Indianapolis San

More information

ARM. Mali GPU. OpenGL ES Application Optimization Guide. Version: 3.0. Copyright 2011, 2013 ARM. All rights reserved. ARM DUI 0555C (ID102813)

ARM. Mali GPU. OpenGL ES Application Optimization Guide. Version: 3.0. Copyright 2011, 2013 ARM. All rights reserved. ARM DUI 0555C (ID102813) ARM Mali GPU Version: 3.0 OpenGL ES Application Optimization Guide Copyright 2011, 2013 ARM. All rights reserved. ARM DUI 0555C () ARM Mali GPU OpenGL ES Application Optimization Guide Copyright 2011,

More information

Shading Languages. Ari Silvennoinen Apri 12, 2004

Shading Languages. Ari Silvennoinen Apri 12, 2004 Shading Languages Ari Silvennoinen Apri 12, 2004 Introduction The recent trend in graphics hardware has been to replace fixed functionality in vertex and fragment processing with programmability [1], [2],

More information

3-D Accelerator on Chip

3-D Accelerator on Chip 3-D Accelerator on Chip Third Prize 3-D Accelerator on Chip Institution: Participants: Instructor: Donga & Pusan University Young-Hee Won, Jin-Sung Park, Woo-Sung Moon Sam-Hak Jin Design Introduction Recently,

More information

This Lecture. Why OpenGL? Introduction to OpenGL. Programmer s View

This Lecture. Why OpenGL? Introduction to OpenGL. Programmer s View Foundations of Computer Graphics Overview and Motivation This Lecture Introduction to OpenGL and simple demo code mytest1.cpp ; you compiled mytest3.cpp for HW 0 I am going to show (and write) actual code

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

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 v1.20. Scott MacHaffie Schrödinger, Inc.

GLSL v1.20. Scott MacHaffie Schrödinger, Inc. 1 GLSL v1.20 Scott MacHaffie Schrödinger, Inc. http://www.schrodinger.com Table of Contents Introduction...2 Example 01: Trivial shader...2 Syntax...3 Types of variables...3 Example 02: Materials vertex

More information

WebGL Game Development

WebGL Game Development WebGL Game Development Sumeet Arora Chapter No. 1 "Getting Started with WebGL Game Development" In this package, you will find: A Biography of the author of the book A preview chapter from the book, Chapter

More information

COURSE 17: STATE-OF-THE-ART IN SHADING HARDWARE1 CHAPTER 6: THE OPENGL SHADING LANGUAGE 2. Randi J. Rost 3Dlabs, Inc.

COURSE 17: STATE-OF-THE-ART IN SHADING HARDWARE1 CHAPTER 6: THE OPENGL SHADING LANGUAGE 2. Randi J. Rost 3Dlabs, Inc. COURSE 17: STATE-OF-THE-ART IN SHADING HARDWARE1 CHAPTER 6: THE OPENGL SHADING LANGUAGE 2 Randi J. Rost 3Dlabs, Inc. SIGGRAPH 2002 Course Notes 05-August-2002 SIGGRAPH 2002 6-1 State of the Art in Shading

More information

CMPS160 Shader-based OpenGL Programming. All slides originally from Prabath Gunawardane, et al. unless noted otherwise

CMPS160 Shader-based OpenGL Programming. All slides originally from Prabath Gunawardane, et al. unless noted otherwise CMPS160 Shader-based OpenGL Programming All slides originally from Prabath Gunawardane, et al. unless noted otherwise Shader gallery I Above: Demo of Microsoft s XNA game platform Right: Product demos

More information

Real-Time Graphics Architecture

Real-Time Graphics Architecture Real-Time Graphics Architecture Kurt Akeley Pat Hanrahan http://www.graphics.stanford.edu/courses/cs448a-01-fall Geometry Outline Vertex and primitive operations System examples emphasis on clipping Primitive

More information

Beginning Direct3D Game Programming: 1. The History of Direct3D Graphics

Beginning Direct3D Game Programming: 1. The History of Direct3D Graphics Beginning Direct3D Game Programming: 1. The History of Direct3D Graphics jintaeks@gmail.com Division of Digital Contents, DongSeo University. April 2016 Long time ago Before Windows, DOS was the most popular

More information

A SIMD-efficient 14 Instruction Shader Program for High-Throughput Microtriangle Rasterization

A SIMD-efficient 14 Instruction Shader Program for High-Throughput Microtriangle Rasterization A SIMD-efficient 14 Instruction Shader Program for High-Throughput Microtriangle Rasterization Jordi Roca Victor Moya Carlos Gonzalez Vicente Escandell Albert Murciego Agustin Fernandez, Computer Architecture

More information

Triangle Rasterization

Triangle Rasterization Triangle Rasterization Computer Graphics COMP 770 (236) Spring 2007 Instructor: Brandon Lloyd 2/07/07 1 From last time Lines and planes Culling View frustum culling Back-face culling Occlusion culling

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

3D Graphics Pipeline II Clipping. Instructor Stephen J. Guy

3D Graphics Pipeline II Clipping. Instructor Stephen J. Guy 3D Graphics Pipeline II Clipping Instructor Stephen J. Guy 3D Rendering Pipeline (for direct illumination) 3D Geometric Primitives 3D Model Primitives Modeling Transformation 3D World Coordinates Lighting

More information

Best practices for effective OpenGL programming. Dan Omachi OpenGL Development Engineer

Best practices for effective OpenGL programming. Dan Omachi OpenGL Development Engineer Best practices for effective OpenGL programming Dan Omachi OpenGL Development Engineer 2 What Is OpenGL? 3 OpenGL is a software interface to graphics hardware - OpenGL Specification 4 GPU accelerates rendering

More information

3D Rendering Pipeline (for direct illumination)

3D Rendering Pipeline (for direct illumination) Clipping 3D Rendering Pipeline (for direct illumination) 3D Primitives 3D Modeling Coordinates Modeling Transformation Lighting 3D Camera Coordinates Projection Transformation Clipping 2D Screen Coordinates

More information

Clipping and Scan Conversion

Clipping and Scan Conversion 15-462 Computer Graphics I Lecture 14 Clipping and Scan Conversion Line Clipping Polygon Clipping Clipping in Three Dimensions Scan Conversion (Rasterization) [Angel 7.3-7.6, 7.8-7.9] March 19, 2002 Frank

More information

PowerVR Hardware. Architecture Overview for Developers

PowerVR Hardware. Architecture Overview for Developers Public Imagination Technologies PowerVR Hardware Public. This publication contains proprietary information which is subject to change without notice and is supplied 'as is' without warranty of any kind.

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

Introduction to OpenGL ES 3.0

Introduction to OpenGL ES 3.0 Introduction to OpenGL ES 3.0 Eisaku Ohbuchi Digital Media Professionals Inc. 2012 Digital Media Professionals Inc. All rights reserved. 12/Sep/2012 Page 1 Agenda DMP overview (quick!) OpenGL ES 3.0 update

More information

Bringing AAA graphics to mobile platforms. Niklas Smedberg Senior Engine Programmer, Epic Games

Bringing AAA graphics to mobile platforms. Niklas Smedberg Senior Engine Programmer, Epic Games Bringing AAA graphics to mobile platforms Niklas Smedberg Senior Engine Programmer, Epic Games Who Am I A.k.a. Smedis Platform team at Epic Games Unreal Engine 15 years in the industry 30 years of programming

More information

Mali & OpenGL ES 3.0. Dave Shreiner Jon Kirkham ARM. Game Developers Conference 27 March 2013

Mali & OpenGL ES 3.0. Dave Shreiner Jon Kirkham ARM. Game Developers Conference 27 March 2013 Mali & OpenGL ES 3.0 Dave Shreiner Jon Kirkham ARM Game Developers Conference 27 March 2013 1 Agenda Some foundational work Instanced geometry rendering Transform feedback Occlusion Queries 2 What s New

More information

From Vertices to Fragments: Rasterization. Reading Assignment: Chapter 7. Special memory where pixel colors are stored.

From Vertices to Fragments: Rasterization. Reading Assignment: Chapter 7. Special memory where pixel colors are stored. From Vertices to Fragments: Rasterization Reading Assignment: Chapter 7 Frame Buffer Special memory where pixel colors are stored. System Bus CPU Main Memory Graphics Card -- Graphics Processing Unit (GPU)

More information