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

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

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

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

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

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

2D graphics with WebGL

Supplement to Lecture 22

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

CS 432 Interactive Computer Graphics

Objectives. Open GL Shading Language (GLSL)

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

Computer Graphics (CS 4731) & 2D Graphics Systems

Shaders. Slide credit to Prof. Zwicker

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

12.2 Programmable Graphics Hardware

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

Programmable Graphics Hardware

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

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

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

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

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

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

Programming with OpenGL Part 5: More GLSL. Ed Angel Professor Emeritus of Computer Science University of New Mexico

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

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

Shaders CSCI 4229/5229 Computer Graphics Fall 2017

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 4239/5239 Advanced Computer Graphics Spring 2014

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

OPENGL RENDERING PIPELINE

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

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

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

The Graphics Pipeline

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

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

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

The Graphics Pipeline

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

COMP371 COMPUTER GRAPHICS

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

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)

Introduction to GLSL. Announcements. Agenda. Course Contents. Patrick Cozzi University of Pennsylvania CIS Fall 2012

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

Introduction to Shaders.

Lecture 9(B): GPUs & GPGPU

CS770/870 Spring 2017 Open GL Shader Language GLSL

CS770/870 Spring 2017 Open GL Shader Language GLSL

Lecture 2. Shaders, GLSL and GPGPU

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

Shading Language Update

CS4621/5621 Fall Basics of OpenGL/GLSL Textures Basics

The Projection Matrix

Shading Languages. Ari Silvennoinen Apri 12, 2004

Sign up for crits! Announcments

OpenGL Programmable Shaders

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

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

BCA611 Video Oyunları için 3B Grafik

CS475/CS675 - Computer Graphics. OpenGL Drawing

OUTLINE. Implementing Texturing What Can Go Wrong and How to Fix It Mipmapping Filtering Perspective Correction

Comp 410/510 Computer Graphics Spring Programming with OpenGL Part 4: Three Dimensions

The OpenGL Shading Language

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

Real - Time Rendering. Graphics pipeline. Michal Červeňanský Juraj Starinský

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

Mobile Application Programing: Android. OpenGL Operation

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

Introduction to Computer Graphics with WebGL

Objectives. Coupling GLSL to Applications Example applications

Computergraphics Exercise 15/ Shading & Texturing

CPSC 436D Video Game Programming

Introduction to Computer Graphics. Hardware Acceleration Review

Introduction to the OpenGL Shading Language (GLSL)

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

GPU Programming EE Final Examination

Introductory Seminar

Comp 410/510 Computer Graphics Spring Programming with OpenGL Part 2: First Program

Lecture 17: Shading in OpenGL. CITS3003 Graphics & Animation

0.Features of the OpenGL Shading Language

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

An Overview GLUT GLSL GLEW

0.Features of the OpenGL Shading Language

Programmable Graphics Hardware

WebGL and GLSL Basics. CS559 Fall 2016 Lecture 14 October

GLSL II. Objectives. Coupling GLSL to Applications Example applications

Mobile Application Programing: Android. OpenGL Operation

Cg 2.0. Mark Kilgard

Zeyang Li Carnegie Mellon University

Appendix A Cg Language Specification

We assume that you are familiar with the following:

The Projection Matrix

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

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

Programmable GPUs Outline

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

OPENGL AND GLSL. Computer Graphics

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

Transcription:

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 Shader Applications Computations for each vertex Moving vertices Morphing Procedural Deformation Skinning Lighting Calculations More realistic models Cartoon shaders 2

Fragment Shaders Per fragment computation Per fragment lighting calculations Blending, compositing per vertex lighting per fragment lighting 3

Fragment Shaders Texture mapping smooth shading environment mapping bump mapping 4

Writing Shaders First programmable shaders were programmed in an assembly-like manner OpenGL extensions added for vertex and fragment shaders Cg (C for graphics) C-like language for programming shaders Works with both OpenGL and DirectX OpenGL Shading Language (GLSL) 5

GLSL Basics Part of OpenGL 2.0 and up High level C-like language New data types Matrices Vectors Samplers As of OpenGL 3.1, application must provide shaders (vertex and fragment) 6

Simple Vertex Shader (pass through) in vec4 vposition; void main(void) { } gl_position = vposition; 7

Execution Model Vertex data Shader Program GPU! Application! Program! Vertex! Shader! Primitive! Assembly! gldrawarrays Vertex 8

Simple Fragment Shader out vec4 fragcolor; void main(void) { } fragcolor = vec4(1.0, 0.0, 0.0, 1.0); 9

Built-In Variables The OpenGL Shading Language defines a number of special variables for the various shader stages. These predefined variables (or built- in variables) have special proper?es. They are usually for communica?ng with certain fixed- func?onality. By conven?on, all predefined variables start with "gl_"; no user- defined variables may start with this. hhp://www.opengl.org/wiki/built- in_variable_%28glsl%29 10

Execution Model Application! Shader Program Rasterizer! Fragment! Shader! Frame Buffer! Fragment Fragment Color 1 1

Data Types C types: float, double, int, uint, bool Vectors: float, double, int, uint bool [2, 3, 4] vec2, dvec2, ivec2, uvec2, bvec2 Matrices: float and double only [2x2 up to 4x4] mat2x2, dmat2x2 Stored by columns Standard referencing m[row][column] C++ style constructors vec3 a =vec3(1.0, 2.0, 3.0) vec2 b = vec2(a) 1 2

Storage Qualifiers const: read-only as in C in : input to a shader stage from a previous stage from the application as vertex attributes out: outputs from a shader stage e.g. final fragment color from fragment shader uniform: value will be specified by application before shader executes AND does not change across the primitive shared between all stages must be declared as globals e.g. color for an entire primitive such as a triangle 1 3

IN Qualified User defined (in application program) Use in qualifier to get to shader in float temperature in vec3 velocity 1 4

Uniform Qualified Variables that are constant for an entire primitive Can be changed in application and sent to shaders Cannot be changed in shader Used to pass information to a shader e.g. primitive bounding box e.g. constant colors without interpolation 1 5

Uniform Qualified Example Gluint facecolorparam; facecolorparam = glgetuniformlocation(myprogobj, facecolor"); variable /* facecolor defined in shader */ GLFLoat facecolor[3]; /* facecolor set in application */ facecolor[0]= 1.0 facecolor[1] = facecolor[2] = 0.0; /* set value of the variable in shader*/ gluniform3fv(facecolorparam, facecolor); /* 1D float*/ 1 6

Interpolating Variables Variables that are passed from vertex shader to fragment shader OUT variables in Vertex Shader IN variables in Fragment Shader Automatically interpolated by the rasterizer http://www.geometrian.com/programming/tutorials/ graphicspipeline/opengl_4_rasterization.php! 1 7

Example: Vertex Shader with hardcoded color in vec4 vposition; out vec4 color; const vec4 red = vec4(1.0, 0.0, 0.0, 1.0); void main(void) { gl_position = vposition; color = red; } 1 8

Example: Passthrough Fragment Shader out vec4 fragcolor; in vec4 color; void main() { fragcolor = color; } 1 9

Passing values Can have multiple functions in a shader Call by value-return IN OUT INOUT for function parameters copied into a function values copied out undefined upon entrance value copied into and out of the function E. An 2 0

Operators and Functions Standard C functions Trigonometric Arithmetic Normalize, reflect, length Overloading of vector and matrix types mat4 a; vec4 b, c, d; c = b*a; // a column vector stored as a 1d array d = a*b; // a row vector stored as a 1d array 2 1

Swizzling and Selection Can refer to array elements by element using [] or selection (.) operator with x, y, z, w r, g, b, a s, t, p, q a[2], a.b, a.z, a.p are the same Swizzling operator lets us manipulate components vec4 a; a.yz = vec2(1.0, 2.0); hhp://en.wikipedia.org/wiki/pointer_swizzling 2 2

And more Condi?onal Flow control Loops Structs...etc. 23