CS770/870 Spring 2017 Open GL Shader Language GLSL

Similar documents
CS770/870 Spring 2017 Open GL Shader Language GLSL

CS770/870 Fall 2015 Advanced GLSL

Shaders. Slide credit to Prof. Zwicker

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

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

Supplement to Lecture 22

Rasterization Overview

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

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

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

Introduction to Shaders.

Lecture 2. Shaders, GLSL and GPGPU

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

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

OpenGL Programmable Shaders

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

Lecture 17: Shading in OpenGL. CITS3003 Graphics & Animation

Shaders CSCI 4239/5239 Advanced Computer Graphics Spring 2014

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

Real-Time Rendering (Echtzeitgraphik) Michael Wimmer

Shaders CSCI 4229/5229 Computer Graphics Fall 2017

CS 432 Interactive Computer Graphics

Rendering Objects. Need to transform all geometry then

12.2 Programmable Graphics Hardware

COMP371 COMPUTER GRAPHICS

Mobile Application Programing: Android. OpenGL Operation

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

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

E.Order of Operations

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

CS GPU and GPGPU Programming Lecture 2: Introduction; GPU Architecture 1. Markus Hadwiger, KAUST

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

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

The Graphics Pipeline

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

Programming shaders & GPUs Christian Miller CS Fall 2011

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

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

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

Graphics Hardware. Instructor Stephen J. Guy

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

Programmable Graphics Hardware

Mobile Application Programing: Android. OpenGL Operation

Pipeline Operations. CS 4620 Lecture 14

Ciril Bohak. - INTRODUCTION TO WEBGL

Objectives. Introduce the OpenGL shading Methods 1) Light and material functions on MV.js 2) per vertex vs per fragment shading 3) Where to carry out

Models and Architectures

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

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

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

CS475/CS675 - Computer Graphics. OpenGL Drawing

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

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

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

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

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

Real-Time Graphics Architecture

Sign up for crits! Announcments

CS 4600 Fall Utah School of Computing

Introduction to Computer Graphics with WebGL

CS452/552; EE465/505. Clipping & Scan Conversion

2.11 Particle Systems

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

OpenGL Essentials Training

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

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

Introduction to the OpenGL Shading Language

BCA611 Video Oyunları için 3B Grafik

Programming Guide. Aaftab Munshi Dan Ginsburg Dave Shreiner. TT r^addison-wesley

Mobile Application Programming: Android. OpenGL Operation

Computer graphics 2: Graduate seminar in computational aesthetics

GPU Memory Model. Adapted from:

Lighting and Shading II. Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015

Graphics Hardware. Computer Graphics COMP 770 (236) Spring Instructor: Brandon Lloyd 2/26/07 1

OPENGL RENDERING PIPELINE

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

Sung-Eui Yoon ( 윤성의 )

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

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

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

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

Recall: Indexing into Cube Map

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

Introduction to Computer Graphics. Hardware Acceleration Review

Drawing Fast The Graphics Pipeline

WebGL and GLSL Basics. CS559 Fall 2016 Lecture 14 October

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

Module 13C: Using The 3D Graphics APIs OpenGL ES

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

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

Dave Shreiner, ARM March 2009

Copyright Khronos Group, Page Graphic Remedy. All Rights Reserved

Introduction to Computer Graphics with WebGL

Geometry Shaders. And how to use them

Introduction to Programmable GPUs CPSC 314. Real Time Graphics

OpenGL refresher. Advanced Computer Graphics 2012

Drawing Fast The Graphics Pipeline

Lecture 13: OpenGL Shading Language (GLSL)

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

Advanced Rendering Techniques

Transcription:

CS770/870 Spring 2017 Open GL Shader Language GLSL Based on material from Angel and Shreiner, Interactive Computer Graphics, 6 th Edition, Addison-Wesley, 2011 Bailey and Cunningham, Graphics Shaders 2 nd Edition, CRC Press, 2012 web source too numerous to remember 01/24/17 CS770/870 Spring 2017 Bergeron 1 Preview Review traditional graphics pipeline CPU/GPU mixed pipeline issues Shaders GLSL graphics pipeline CS770/870 Spring 2017 Bergeron 2

Traditional Graphics Pipeline Original OpenGL based on traditional graphics pipeline Programmer specifies Geometry, viewing, and projection Object properties: vertices, normals Appearance properties: colors, textures, shading, light Traditional OpenGL processing was predefined and straightforward with 2 major connected operations: Vertex processing Create and transform polygons into screen coords, rasterize polys Pixel processing (now called fragment processing) Color pixels CS770/870 Spring 2017 Bergeron 3 Traditional Vertex Pipeline View of graphics pipeline based on processing of vertex information OpenGL provides a fixed set of functions to control each step Programmer specifies parameters to the functions Modeling functions Modeling transforms Viewing transforms Projection transform Viewport transform Model space Model coords World space World coords Eye space Eye coords Clip space Norm. proj. coord Screen space Pixel coords CS770/870 Spring 2017 Bergeron 4

Shaders 1984: Rob Cook (Pixar) invented shade trees Allow programmers to modify standard graphics pipeline with small shader scripts inserted in pipeline Greatly expanded flexibility of (software) pipelines Lots of others expanded nature and power of shaders Silicon Graphics GL was hardware-oriented and used fixed function pipeline OpenGL 1.0 (1993) generalized GL and made it opensource still fixed function OpenGL 2.0 (2004) added shader language, GLSL and support for GPU programming; cpu-driven, gpu adjunct OpenGL 3.0 (2008) far more emphasis on gnu OpenGL 4.0 (2012) all old functionality deprecated CS770/870 Spring 2017 Bergeron 5 Fragment Processing Pipeline pixel: rgbaz for a frame buffer location fragment: everything needed to compute pixel: rgbaz, texture coords, and more Vertex Processor Screen coords Vars to interpolate Rasterizer Pixel parameters Interpolated vars Fragment Processor RGBAZ pixels Texture Memory Pixel Processor Depth test, blending, scissors, stencil RGBAZ pixels Frame Buffer Depth Buffer CS770/870 Spring 2017 Bergeron 6

Expanded Graphics Pipeline Geometry definition Vertex shader Shaders can actually be inserted in more places in pipeline Vertex and fragment shaders are most important Primitive assembly Tessellation Control Shader Tessellation primitive assembly Tessellation Evaluation Shader Primitive assembly Boxes are part of fixed pipeline; ovals are userdefined shaders Geometry shader Primitive assembly Rasterizer Fragment shader CS770/870 Spring 2017 Bergeron 7 Rise of GPUs GPU processing has evolved incredibly rapidly Early goal was pixel per processor (data parallelism) Hardwire low level calculations Massively parallel computation meshes well with notion of user-written computations (shaders) for each pixel (fragment shaders) Architecture is also good for user-written computations for each vertex (vertex shaders) and for some geometric processing as well (tesselation shaders) CS770/870 Spring 2017 Bergeron 8

CPU/GPU Characteristics CPU strengths General computational power Access to large secondary storage Well-known powerful software tools Large commodity primary memory GPU strengths Much faster for image/graphics computations Massive parallelism Large specialized memory CS770/870 CS770/870 Spring Fall 2014 2017 Bergeron Bergeron 9 CPU/GPU Pipeline Distribution CPU best for Application data access Modeling User interface GPU best for Fragment processing Either can do vertex and tesselation processing How decide? Can depend on power of GPU Can depend on nature of application processing Let application programmer decide CS770/870 Spring 2017 Bergeron 10

CPU/GPU Pipeline Issues CPU/GPU normally have separate memories GPU memory must already be dual-ported: GPU/display CPU/GPU data transfer is major bottleneck Need to distribute work so data transfer is minimized Standard OpenGL uses direct drawing Every redraw event (30-60 time/sec during animation) must recreate entire image: glbegin; glvertex; glvertex glend; A lot of data transfer if vertices generated/stored on CPU. How can work distribution be defined by programmer? CS770/870 Spring 2017 Bergeron 11 Data Transfer Model Array based Buffers in GPU CPU code creates data Asks GPU for buffer space Uploads the data via arrays into buffer using buffer id Arrays can combine vertex, color and other info Can also define uniform variables: essentially global variables accessible to the shaders and to CPU code CS770/870 Spring 2017 Bergeron 12

Programming Framework CPU code creates models Specifies shader code to run on gpu Compiles and uploads shader code Can read and set uniform variables Can read and get array information GPU pipeline code Manages GPU pipeline and environment variables Includes variables allowing shaders to communicate Invokes user-written shader code For each vertex, the vertex shader For each fragment, the fragment shader For each patch, the tesselation shaders CS770/870 Spring 2017 Bergeron 13 GLSL Vertex Shaders GLSL provides access in vertex shaders to One vertex uniform variables (user/shader defined) in variables (position, normal, texture coords, color) passed to the shader from previous shader in pipeline out variables (position, etc): passed to next shader Vertex shaders are responsible for Vertex transformations Normal transformations Normal normalization (making unit length) Handling per-vertex lighting Handling texture coordinates at vertex CS770/870 Spring 2017 Bergeron 14

GLSL Fragment Shader For each fragment, maps fragment information (and uniform variables) to pixel information Rasterizer interpolates colors, normals, depths, texture coordinates, user variables defined for vertex: all are fragment shader variables Fragment shaders are responsible for Color computation Texturing Per-pixel lighting Fog Discarding pixel fragments CS770/870 Spring 2017 Bergeron 15 GLSL Language Overview Simplified C++ (or extended C) with some Javalike features classes are based on struct, so no inheritance Predefined vector and matrix objects No pointers Arrays are first class objects No new; dynamic allocation via function entry/exit Function parameters passed by value-return Variable qualifiers: in, out, uniform and more Predefined variable names for each shader Shared namespace between shaders CS770/870 Spring 2017 Bergeron 16

Vectors and Matrices GLSL has builtin vector and matrix objects: vec2, vec3, vec4 mat2, mat3, mat4 Predefined arithmetic operators: vec op vec : +,-,*,/ corresponding elements mat * vec : matrix * vector yields vector mat * mat : matrix * matrix yields matrix Multiple valid vec field names (name sets) vec.x, vec.y, vec.z, vec.w for point variables vec.r, vec.g, vec.b, vec.a for color variables vec.s, vec.t, vec.p, vec.q for texture variables CS770/870 Spring 2017 Bergeron 17 Shared Namespace Each shader occurs in a pipeline compute variables for shaders later in the piple How do shaders in a shader program communicate? shared namespace for variables created in gpu memory attribute namespace attributes are values associated with a vertex defined in application program using a call such as glvertexattribpointer( index,size,, GLvoid* ) where index is an identifier same array can contain position, normal, color and more uniform variables created by applic as read-only shader-defined variables CS770/870 Spring 2017 Bergeron 18

General Storage Qualifiers Storage qualifiers describe where storage comes from global variable qualifiers: <none> : scope is shader stage, so 2 vertex shaders with same named global variable, reference the same variable. const: compile time constant; value can never be changed in: input variable set by previous stages; cannot be changed out: output variables that are passed to next stage, must be set in/out variables cannot be structs; can be arrays uniform: parameters passed to shader from user; do not change value during a single rendering call local variable qualifiers <none> for local variable that can be changed by the shader const: compile time constant; value can never be changed CS770/870 Spring 2017 Bergeron 19 Shader code uniform vec4 ambientproduct; uniform vec4 diffuseproduct; uniform mat4 ModelView; uniform vec4 LightPosition; uniform float Shininess; Uniform Variables CPU application vec4 ambproduct = lightambient * materialambient; GLuint ambloc // identifier for gpu location = glgetuniformlocation(program, "ambientproduct ); gluniformv( ambloc, 1, ambproduct ); // set value vec4 diffproduct = lightdiffuse * materialdiffuse; Gluint diffloc =...... CS770/870 Spring 2017 Bergeron 20

Interpolation Qualifiers A fragment shader in parameter can also have an interpolation qualifier: flat: no interpolation is done; desired value (such as for color) is taken from first vertex (by default, but changeable) noperspective: linear interpolation is done in window space (seldom desirable) smooth: interpolation is correct for perspective distortion Other variable qualifiers can affect the interpolation centroid and sample have effect in pixel multisampling mode CS770/870 Spring 2017 Bergeron 21 Interface Blocks uniform, in, and out storage specification can use interface blocks to group variables It s a struct-like notation, but they are not structs. uniform Transformations { mat4 modelview; mat4 projection; } name; can refer to components as name.modelview, etc. name is optional name can use array notation, such as many[3] CS770/870 Spring 2017 Bergeron 22

GLSL Status GLSL has evolved rapidly and unevenly Windows, Linux, Mac OS X have been at significantly different stages until very recently; the gaps are closing Hard to write portable code Debugging tools are pretty primitive CS770/870 Spring 2017 Bergeron 23 Key Features Data buffers See basic GLSL demo: glgenvertexarrays, glgenbuffers, glbufferdata Projection/viewing GLSL: no predefined matrix stacks nor viewing functions Implement your own viewing/projection in shader program CS770/870 Spring 2017 Bergeron 24