Lecture 5 Vertex and Fragment Shaders-1. CITS3003 Graphics & Animation

Similar documents
Programming with OpenGL Part 3: Shaders. 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

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

2D graphics with WebGL

Supplement to Lecture 22

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

Computer Graphics (CS 543) Lecture 3b: Shader Setup & GLSL Introduction

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

Lecture 17: Shading in OpenGL. CITS3003 Graphics & Animation

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

Computer Graphics (CS 4731) & 2D Graphics Systems

Objectives. OpenGL - Shaders. GLSL A Quick Review

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

CS 432 Interactive Computer Graphics

Programmable Graphics Hardware

Shader Programming 1. Examples. Vertex displacement mapping. Daniel Wesslén 1. Post-processing, animated procedural textures

Mobile Application Programing: Android. OpenGL Operation

12.2 Programmable Graphics Hardware

Information Coding / Computer Graphics, ISY, LiTH GLSL. OpenGL Shading Language. Language with syntax similar to C

Shading Language Update

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

Mobile Application Programing: Android. OpenGL Operation

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

CS770/870 Spring 2017 Open GL Shader Language GLSL

CS770/870 Spring 2017 Open GL Shader Language GLSL

OPENGL RENDERING PIPELINE

Mobile graphics API Overview

Objectives. Open GL Shading Language (GLSL)

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

Shader Programming. Daniel Wesslén, Stefan Seipel, Examples

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

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

Mobile Application Programming: Android. OpenGL Operation

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

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

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

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

Lecture 09: Shaders (Part 1)

Lecture 9(B): GPUs & GPGPU

Introduction to Computer Graphics. Hardware Acceleration Review

Shading Languages. Ari Silvennoinen Apri 12, 2004

0.Features of the OpenGL Shading Language

Shaders. Slide credit to Prof. Zwicker

EDAF80 Introduction to Computer Graphics. Seminar 3. Shaders. Michael Doggett. Slides by Carl Johan Gribel,

0.Features of the OpenGL Shading Language

Introduction to Shaders.

Sign up for crits! Announcments

Lecture 12: Mid-term test solution & project. CITS 3003 Graphics & Animation

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

Some advantages come from the limited environment! No classes. Stranight ans simple code. Remarkably. Avoids most of the bad things with C/C++.

COMP371 COMPUTER GRAPHICS

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

CS559 Computer Graphics Fall 2015

Computer Graphics with OpenGL ES (J. Han) Chapter 6 Fragment shader

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

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

OPEN GL BACKGROUND. Objectives. Early History of APIs. SGI and GL. PHIGS and X. Modified from Angel 6e book slides

Introduction to the OpenGL Shading Language (GLSL)

Programming with OpenGL Complete Programs Objectives Build a complete first program

Shaders. Introduction. OpenGL Grows via Extensions. OpenGL Extensions. OpenGL 2.0 Added Shaders. Shaders Enable Many New Effects

The OpenGL Shading Language

Dave Shreiner, ARM March 2009

The Basic Computer Graphics Pipeline, OpenGL-style. Introduction to the OpenGL Shading Language (GLSL)

CS 418: Interactive Computer Graphics. Basic Shading in WebGL. Eric Shaffer

Lecture 19: OpenGL Texture Mapping. CITS3003 Graphics & Animation

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

Shaders (some slides taken from David M. course)

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

Shaders CSCI 4229/5229 Computer Graphics Fall 2017

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

BCA611 Video Oyunları için 3B Grafik

Programmable Graphics Hardware

Three Main Themes of Computer Graphics

Computer Graphics Coursework 1

Computer Graphics (CS 543) Lecture 8a: Per-Vertex lighting, Shading and Per-Fragment lighting

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

CPSC 436D Video Game Programming

WebGL and GLSL Basics. CS559 Fall 2016 Lecture 14 October

CS 380 Introduction to Computer Graphics. LAB (1) : OpenGL Tutorial Reference : Foundations of 3D Computer Graphics, Steven J.

The Graphics Pipeline

Lecture 11 Shaders and WebGL. October 8, 2015

OpenGL pipeline Evolution and OpenGL Shading Language (GLSL) Part 2/3 Vertex and Fragment Shaders

Shaders CSCI 4239/5239 Advanced Computer Graphics Spring 2014

Models and Architectures. Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015

Why modern versions of OpenGL should be used Some useful API commands and extensions

CS4621/5621 Fall Basics of OpenGL/GLSL Textures Basics

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

The Graphics Pipeline

Content. Building Geometry Appearance Lights Model Loaders

CS452/552; EE465/505. Review & Examples

OpenGL Programmable Shaders

Programmable Shading. University of Texas at Austin CS354 - Computer Graphics

We assume that you are familiar with the following:

CS452/552; EE465/505. Image Formation

INFOGR Computer Graphics

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

Introduction to Computer Graphics with WebGL

CMSC427 Fall 2017 OpenGL Notes A: Starting with JOGL and OpenGL Objectives of notes Readings Computer Graphics Programming in OpenGL with Java

Programming shaders & GPUs Christian Miller CS Fall 2011

Transcription:

Lecture 5 Vertex and Fragment Shaders-1 CITS3003 Graphics & Animation E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012

Objectives The rendering pipeline and the shaders Data types, qualifiers, built-in variables, and functions in shaders Applications that can be done on Vertex shader Fragment shader Vertex and fragment shaders examples How the application program and vertex shader work together 2

GLSL A Quick Review OpenGL Shading Language Part of OpenGL 2.0 and up High level C-like language New data types are provided, e.g. o Matrices o Vectors As of OpenGL 3.1, application programs must provide shaders (as no default shaders are available) 3

The Rendering Pipeline and the shaders Where the vertex and fragment shaders are on the rendering pipeline: application program display (Vertex shader) (Fragment shader) The goal of the vertex shader is to provide the final transformation of mesh vertices to the rendering pipeline. The goal of the fragment shader is to provide the colour to each pixel in the frame buffer. 4

Data Types in Shaders C types: int, float, bool Vectors: Each element is a float vec2, vec3, vec4; Also int (ivec) and boolean (bvec) Matrices: mat2, mat3, mat4 Stored by columns Standard referencing m[row][column] C++ style constructors vec2 a = vec2(3.0, 2.0); vec3 b = vec3(a, 1.0); 5

Pointers There are no pointers in GLSL We can use C structs which can be copied back from functions Because matrices and vectors are basic types, they can be passed into and output from GLSL functions, e.g. mat3 func(mat3 a); 6

GLSL Qualifiers GLSL has many of the same qualifiers such as const as C/C++ In GLSL, we need other qualifiers due to the nature of the rendering pipeline Qualifiers that can be used in shader programs (GLSL code) include: attribute, uniform, varying (these are storage qualifiers) highp, medium, lowp, precision (these are precision qualifiers) in, out (these are parameter qualifiers) We consider variables that can change o Once per primitive o Once per vertex o Once per fragment o At any time in the application Reminder: vertex attributes are interpolated by the rasterizer into fragment attributes 7

Storage Qualifiers

Qualifier Constant The qualifier const is used the same as in Java. It specifies that the value assigned to a variable is constant and cannot be changed. The variable is read only. Here are a legal and illegal statement. // a vector assigned a value const vec4 point = vec4(1.0, 2.0, 3.0, 1.0); // illegal statement because the variable must be assigned a value const float time; The qualifier const is used for variables that are compile-time constants or for function parameters that are read-only. 9

The Qualifier attribute The qualifier attribute is used to declare variables that are shared between a vertex shader and the application program; typically, vertex coordinates passed to the vertex shader, e.g., application program attribute vec4 vposition; Attribute display (Vertex shader) (Fragment shader) Vertex attributes are used to specify per vertex data. They typically provide data such as the object space position, the normal direction and the texture coordinates of a vertex. Variables declared using the attribute qualifier are not changeable in the vertex shader, i.e., they are read only Variables declared using this qualifier must be initialized in the application program. 10

The Qualifier uniform The qualifier uniform is used to declare variables that are shared between a shader and the application program. application program Uniform display (Vertex shader) (Fragment shader) Variables declared using this qualifier can appear in the vertex shader and the fragment shader and they must have a global scope. Since both shaders share the same name space, if a uniform variable is used in both shaders, its declaration must be identical in both. 11

The Qualifier uniform (cont.) uniform variables are used to describe global properties that affect the scene to be rendered, e.g. projection matrix, light source position, etc. They can be used to describe properties (e.g., colour, materials) of the object. E.g., uniform mat4 projection; uniform float temperature; Similar to the qualifier attribute, variables declared as uniform are not changeable within the vertex shader or the fragment shader. However, their values can change in the application program. For each frame to be rendered, their new values are passed to the shader(s). 12

The Qualifier varying The qualifier varying is used to declare variables that are shared between the vertex shader and the fragment shader. application program Varying display (Vertex shader) (Fragment shader) varying variables are used to store data calculated in the vertex shader and to pass down to the fragment shader. Again, because of the sharing of name space of the two shaders, varying variables must be declared identically in both shaders. 13

The Qualifier varying (cont.) The varying qualifier can only be used with floating point scalar, floating point vectors and (floating point) matrices as well as arrays containing these types. Example: the vertex shader can compute the colour of the incoming vertex and then pass the value to the fragment shader for interpolation. In both shaders: varying vec4 colour; 14

Precision Qualifiers

The Qualifiers highp, mediump, lowp, and precision The highp, mediump, and lowp qualifiers are used to specify the highest, medium, and lowest precision available for a variable. All these qualifiers can appear in the vertex and fragment shaders. In the fragment shader, the precision qualifier must precede the three qualifiers above. e.g. uniform mediump vec4 lightpos; precision lowp vec3 indices; In the vertex shader the use of a precision qualifier is optional. If no qualifier is given all variables are of highest precision. In the fragment shader a precision qualifier has to be used when declaring a variable unless a default precision has been defined for the specific type. 16

The Qualifiers highp, mediump, lowp, and precision The default precision for int, float, and vectors of these types is highp. The actual range corresponding to a precision qualifier is dependent on the specific application. Using a lower precision might have a positive effect on performance (frame rates) and power efficiency but might also cause a loss in rendering quality. The appropriate trade-off can only be determined by testing different precision configurations. 17

Parameter Qualifiers

The Qualifiers in, out & inout The qualifier in is used to mark a parameter as read-only when a function is declared. The qualifier out is used to mark a parameter as write-only when a function is declared. The qualifier inout is used to mark a parameter as read-write when a function is declared. int newfunction(in bvec4 abvec4, // read-only out vec3 avec3, // write-only inout int aint); // read-write The above function declaration shows the three possible parameter qualifiers. The usage of the read-only qualifier is not necessary since this is the default if no qualifier is specified. 19

The Qualifiers in and out The in and out qualifiers supersede the attribute and varying qualifiers in GLSL version 4.20 onward: attribute is replaced by in in the vertex shader varying in the vertex shader is replaced by out varying in the fragment shader is replace by in 20

Built-in variables in shaders gl_position o Its value must be defined in the vertex shader in vec4 vposition; void main() { gl_position = vposition; } The input vertex s location is given by the four-dimensional vector vposition whose specification includes the keyword in to signify that its value is input to the shader when the shader is initiated. There is one special state variable in our shader: gl_position, which is the position that will be passed to the rasterizer and must be output by every vertex shader. Because gl_position is known to OpenGL, we need not declare it in the shader. 21

Built-in variables in shaders gl_fragcolor o o (Vertex shader) Used only on the Mac (in Lab2.03) Its value must be defined in the fragment shader Each invocation of the vertex shader outputs a vertex Each fragment invokes an execution of the fragment shader. each execution of the fragment shader must output a color for the fragment void main() { gl_fragcolor = vec4(1.0, 0.0, 0.0, 1.0); } (R, G, B, Opacity) (Fragment shader) 22

Operators and Functions Standard C functions o Trigonometric o Arithmetic o Normalize, reflect, length Overloading of vector and matrix types mat4 A; vec4 b, c, d; c = b*a; // not implemented in Angel.h d = A*b; // a column vector stored as a 1d array 23

Swizzling and Selection Can refer to array elements by their indices using [] or by selection operator (.) with x, y, z, w r, g, b, a s, t, p, q vec4 m; m[2], m.b, m.z, and m.p are the same Swizzling operator lets us manipulate components easily, e.g., vec4 a; a.yz = vec2(1.0, 2.0); vec4 newcolour = v.bgra; // swap red and blue 24

References Interactive Computer Graphics A Top-Down Approach with Shader-Based OpenGL by Edward Angel and Dave Shreiner, 6 th Ed, 2012 Sec2. 2.8.2-2.8.5 The Vertex Shader The InitShader Function A good reference on OpenGL shaders: http://antongerdelan.net/opengl/shaders.html