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

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

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

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

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 #6: Lights. Jürgen P. Schulze, Ph.D. University of California, San Diego Fall 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

Today. Global illumination. Shading. Interactive applications. Rendering pipeline. Computergrafik. Shading Introduction Local shading models

Today. Global illumination. Shading. Interactive applications. Rendering pipeline. Computergrafik. Shading Introduction Local shading models

Shaders. Slide credit to Prof. Zwicker

CMSC427 Shading Intro. Credit: slides from Dr. Zwicker

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

Lecture 17: Shading in OpenGL. CITS3003 Graphics & Animation

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

CSE 167: Lecture #7: Color and Shading. Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2011

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

Pipeline Operations. CS 4620 Lecture 14

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

Surface shading: lights and rasterization. Computer Graphics CSE 167 Lecture 6

ECS 175 COMPUTER GRAPHICS. Ken Joy.! Winter 2014

Deferred Rendering Due: Wednesday November 15 at 10pm

Programming shaders & GPUs Christian Miller CS Fall 2011

CS 4600 Fall Utah School of Computing

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

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

Light Sources. Spotlight model

The Rasterization Pipeline

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

Shading and Illumination

Computer Graphics. Illumination and Shading

Pipeline Operations. CS 4620 Lecture 10

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

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

Methodology for Lecture. Importance of Lighting. Outline. Shading Models. Brief primer on Color. Foundations of Computer Graphics (Spring 2010)

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

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

Topic 9: Lighting & Reflection models 9/10/2016. Spot the differences. Terminology. Two Components of Illumination. Ambient Light Source

Illumination & Shading: Part 1

Lab 9 - Metal and Glass

Topic 9: Lighting & Reflection models. Lighting & reflection The Phong reflection model diffuse component ambient component specular component

Computer Graphics (CS 543) Lecture 7b: Intro to lighting, Shading and Materials + Phong Lighting Model

Overview. Shading. Shading. Why we need shading. Shading Light-material interactions Phong model Shading polygons Shading in OpenGL

INF3320 Computer Graphics and Discrete Geometry

CEng 477 Introduction to Computer Graphics Fall

Computer Graphics I Lecture 11

CSE 167: Lecture #17: Procedural Modeling. Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2011

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

Shading. Brian Curless CSE 457 Spring 2017

Computer Graphics (CS 4731) Lecture 16: Lighting, Shading and Materials (Part 1)

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

Shaders CSCI 4239/5239 Advanced Computer Graphics Spring 2014

CSE 167: Introduction to Computer Graphics. Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2013

Three-Dimensional Graphics V. Guoying Zhao 1 / 55

Exercise Max. Points Total 90

12.2 Programmable Graphics Hardware

Lessons Learned from HW4. Shading. Objectives. Why we need shading. Shading. Scattering

Illumination and Shading

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

Programmable Graphics Hardware

Computer Graphics. Illumination and Shading

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

Shading 1: basics Christian Miller CS Fall 2011

INF3320 Computer Graphics and Discrete Geometry

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

CS 381 Computer Graphics, Fall 2008 Midterm Exam Solutions. The Midterm Exam was given in class on Thursday, October 23, 2008.

Introduction to Computer Graphics 7. Shading

CHAPTER 1 Graphics Systems and Models 3

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

CPSC / Illumination and Shading

TSBK 07! Computer Graphics! Ingemar Ragnemalm, ISY

Complex Shading Algorithms

CS 130 Final. Fall 2015

Visualisatie BMT. Rendering. Arjan Kok

Comp 410/510 Computer Graphics. Spring Shading

Supplement to Lecture 22

CS5620 Intro to Computer Graphics

Shading I Computer Graphics I, Fall 2008

Computergrafik. Matthias Zwicker Universität Bern Herbst 2016

Introduction to Visualization and Computer Graphics

CS 4620 Program 3: Pipeline

Illumination Models & Shading

Sung-Eui Yoon ( 윤성의 )

C O M P U T E R G R A P H I C S. Computer Graphics. Three-Dimensional Graphics V. Guoying Zhao 1 / 65

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

Introduction Rasterization Z-buffering Shading. Graphics 2012/2013, 4th quarter. Lecture 09: graphics pipeline (rasterization and shading)

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

Shading. Brian Curless CSE 457 Spring 2015

Computer Graphics Coursework 1

CS452/552; EE465/505. Lighting & Shading

OPENGL RENDERING PIPELINE

Shading. Slides by Ulf Assarsson and Tomas Akenine-Möller Department of Computer Engineering Chalmers University of Technology

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

Color and Light CSCI 4229/5229 Computer Graphics Fall 2016

Introduction to Computer Graphics. Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2011

CS452/552; EE465/505. Intro to Lighting

Recollection. Models Pixels. Model transformation Viewport transformation Clipping Rasterization Texturing + Lights & shadows

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

Shaders CSCI 4229/5229 Computer Graphics Fall 2017

Lecture 15: Shading-I. CITS3003 Graphics & Animation

-=Bui Tuong Phong's Lighting=- University of Utah, but with shaders. Anton Gerdelan Trinity College Dublin

1 of 5 9/10/ :11 PM

Transcription:

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: Oct 29 at 2:30pm This Friday: Late grading for project #3 Early grading for project #4 Midterm exam: Thursday, Oct 25, 2-3:20pm in classroom Midterm compatible index cards provided today and in instructor s office Reminder: Ted forums exist to discuss homework assignments and midterms 2

Review OpenGL s Shading Model 3

Complete Blinn-Phong Shading Model Blinn-Phong model with several light sources I All colors and reflection coefficients are vectors with 3 components for red, green, blue diffuse specular ambient 4

BRDFs Diffuse, Phong, Blinn models are instances of bidirectional reflectance distribution functions (BRDFs) For each pair of light directions L and viewing direction e, the BRDF returns the fraction of reflected light Shading with general BRDF f Many other forms of BRDFs exist in graphics, often named after inventors: Cook-Torrance, Ward, etc. 5

Lecture Overview OpenGL Light Sources Types of Geometry Shading Shading in OpenGL Fixed-Function Shading Programmable Shaders Vertex Programs Fragment Programs GLSL 6

Light Sources Real light sources can have complex properties Geometric area over which light is produced Anisotropy (directionally dependent) Reflective surfaces act as light sources (indirect light) OpenGL uses a drastically simplified model to allow real-time rendering 7

OpenGL Light Sources At each point on surfaces we need to know Direction of incoming light (the L vector) Intensity of incoming light (the c l values) Standard light sources in OpenGL Directional: from a specific direction Point light source: from a specific point Spotlight: from a specific point with intensity that depends on direction 8

Directional Light Light from a distant source Light rays are parallel Direction and intensity are the same everywhere As if the source were infinitely far away Good approximation of sunlight Specified by a unit length direction vector, and a color 9 Light source Receiving surface

Point Lights Similar to light bulbs Infinitely small point radiates light equally in all directions Light vector varies across receiving surface What is light intensity over distance proportional to? Intensity drops off proportionally to the inverse square of the distance from the light Reason for inverse square falloff: Surface area A of sphere: A = 4 π r 2 10

Point Lights in Theory p c src Light source At any point v on the surface: c l v c l Receiving surface v 11

Point Lights in OpenGL OpenGL model for distance attenuation: c l = Attenuation parameters: c src k c + k l p v + k q p v 2 k c = constant attenuation, default: 1 k l = linear attenuation, default: 0 k q = quadratic attenuation, default: 0 Default: no attenuation: c l =c src Change attenuation parameters with: GL_CONSTANT_ATTENUATION GL_LINEAR_ATTENUATION GL_QUADRATIC_ATTENUATION 12

Spotlights Like point source, but intensity depends on direction Parameters Position: location of the light source Spot direction: center axis of the light source Falloff parameters: Beam width (cone angle) The way the light tapers off at the edges of the beam (cosine exponent) 13

Spotlights Light source Receiving surface 14

Spotlights Photograph of real spotlight Spotlights in OpenGL 15

Lecture Overview OpenGL Light Sources Types of Geometry Shading Shading in OpenGL Fixed-Function Shading Programmable Shaders Vertex Programs Fragment Programs GLSL 16

Types of Geometry Shading Per-triangle Per-vertex Per-pixel 17

Per-Triangle Shading Known as flat shading Evaluate shading once per triangle Advantage Fast Disadvantage Faceted appearance 18

Per-Vertex Shading Known as Gouraud shading (Henri Gouraud, 1971) Interpolates vertex colors across triangles with Barycentric Interpolation Advantages Fast Smoother surface appearance than with flat shading Disadvantage Problems with small highlights 19

Per-Pixel Shading Also known as Phong Interpolation (not to be confused with Phong Illumination Model) Rasterizer interpolates normals (instead of colors) across triangles Illumination model is evaluated at each pixel Simulates shading with normals of a curved surface Advantage Higher quality than Gouraud shading Disadvantage Slow 20 Source: Penny Rheingans, UMBC

Gouraud vs. Per-Pixel Shading Gouraud has problems with highlights More triangles would improve result, but reduce frame rate Gouraud Per-Pixel 21

Lecture Overview OpenGL Light Sources Types of Geometry Shading Shading in OpenGL Fixed-Function Shading Programmable Shaders Vertex Programs Fragment Programs GLSL 22

Shading with Fixed-Function Pipeline Fixed-function pipeline only allows Gouraud (pervertex) shading We need to provide a normal vector for each vertex Shading is performed in camera space Position and direction of light sources are transformed by GL_MODELVIEW matrix If light sources should be in object space: Set GL_MODELVIEW to desired object-to-camera transformation Use object space coordinates for light positions More information: http://glprogramming.com/red/chapter05.html http://www.falloutsoftware.com/tutorials/gl/gl8.htm 23

Tips for Transforming Normals If you need to (manually) transform geometry by a transformation matrix M, which includes shearing or scaling: Transforming the normals with M will not work: transformed normals are no longer perpendicular to surfaces Solution: transform the normals differently: Either transform the end points of the normal vectors separately Or transform normals with Find derivation on-line at: http://www.oocities.com/vmelkon/transformingnormals.html OpenGL does this automatically if the following command is used: glenable(gl_normalize) 24

Lecture Overview OpenGL Light Sources Types of Geometry Shading Shading in OpenGL Fixed-Function Shading Programmable Shaders Vertex Programs Fragment Programs GLSL 25

Programmable Shaders in OpenGL Initially, OpenGL only had a fixed-function pipeline for shading Programmers wanted more flexibility, similar to programmable shaders in raytracing software (term shader first introduced by Pixar in 1988) First shading languages came out in 2002: Cg (C for Graphics, created by Nvidia) HLSL (High Level Shader Language, created by Microsoft) They supported: Fragment shaders: allowed per-pixel shading Vertex shaders: allowed modification of geometry OpenGL 2.0 supported the OpenGL Shading Language (GLSL) in 2003 Geometry shaders were added in OpenGL 3.2 Tessellation shaders were added in OpenGL 4.0 Programmable shaders allow real-time: Shadows, environment mapping, per-pixel lighting, bump mapping, parallax bump mapping, HDR, etc., etc. 26

Demo NVIDIA Froggy http://www.nvidia.com/coolstuff/demos#!/froggy Features Bump mapping shader for Froggy s skin Physically-based lighting model simulating sub-surface scattering Supersampling for scene anti-aliasing Raytracing shader for irises to simulate refraction for wet and shiny eyes Dynamically-generated lights and shadows 27

Shader Programs Programmable shaders consist of shader programs Written in a shading language Syntax similar to C language Each shader is a separate piece of code in a separate ASCII text file Shader types: Vertex shader Tessellation shader Geometry shader Fragment shader (a.k.a. pixel shader) The programmer can provide any number of shader types to work together to achieve a certain effect If a shader type is not provided, OpenGL s fixed-function pipeline is used 28

Programmable Pipeline Scene Modeling and viewing transformation Shading Executed once per vertex: Vertex Shader Tessellation Shader Geometry Shader Projection Rasterization Fragment processing Frame-buffer access (z-buffering) Executed once per fragment: Fragment Shader 29 Image

Vertex Shader Executed once per vertex Cannot create or remove vertices Does not know the primitive it belongs to Replaces functionality for Model-view, projection transformation Per-vertex shading If you use a vertex program, you need to implement behavior for the above functionality in the program! Typically used for: Character animation Particle systems 30

Tessellation Shader Executed once per primitive Generates new primitives by subdividing each line, triangle or quad primitive Typically used for: Adapting visual quality to the required level of detail For instance, for automatic tessellation of Bezier curves and surfaces Geometry compression: 3D models stored at coarser level of resolution, expanded at runtime Allows detailed displacement maps for less detailed geometry 31

Geometry Shader Executed once per primitive (triangle, quad, etc.) Can create new graphics primitives from output of tessellation shader (e.g., points, lines, triangles) Or can remove the primitive Typically used for: Per-face normal computation Easy wireframe rendering Point sprite generation Shadow volume extrusion Single pass rendering to a cube map Automatic mesh complexity modification (depending on resolution requirements) 32

Fragment Shader A.k.a. Pixel Shader Executed once per fragment Cannot access other pixels or vertices Makes execution highly parallelizable Computes color, opacity, z-value, texture coordinates Typically used for: Per-pixel shading (e.g., Phong shading) Advanced texturing Bump mapping Shadows 33

Lecture Overview OpenGL Light Sources Types of Geometry Shading Shading in OpenGL Fixed-Function Shading Programmable Shaders Vertex Programs Fragment Programs GLSL 34

Vertex Programs Vertex Attributes From Application Uniform Parameters Vertex program To Rasterizer Output Variables 35

Vertex Attributes Declared using the attribute storage classifier Different for each execution of the vertex program Can be modified by the vertex program Two types: Pre-defined OpenGL attributes. Examples: attribute vec4 gl_vertex; attribute vec3 gl_normal; attribute vec4 gl_color; User-defined attributes. Example: attribute float myattrib; 36

Uniform Parameters Declared by uniform storage classifier Normally the same for all vertices Read-only Two types: Pre-defined OpenGL state variables User-defined parameters 37

Uniform Parameters: Pre-Defined Provide access to the OpenGL state Examples for pre-defined variables: uniform mat4 gl_modelviewmatrix; uniform mat4 gl_modelviewprojectionmatrix; uniform mat4 gl_projectionmatrix; uniform gl_lightsourceparameters gl_lightsource[gl_maxlights]; 38

Uniform Parameters: User-Defined Parameters that are set by the application Should not be changed frequently Especially not on a per-vertex basis! To access, use glgetuniformlocation, gluniform* in application Example: In shader declare uniform float a; Set value of a in application: GLuint p; int I = glgetuniformlocation(p, a ); gluniform1f(i, 1.0f); 39

Vertex Programs: Output Variables Required output: homogeneous vertex coordinates vec4 gl_position varying output variables Mechanism to send data to the fragment shader Will be interpolated during rasterization Fragment shader gets interpolated data Pre-defined varying output variables, for example: varying vec4 gl_frontcolor; varying vec4 gl_texcoord[]; Any pre-defined output variable that you do not overwrite will have the value of the OpenGL state. User-defined varying output variables, e.g.: varying vec4 vertex_color; 40

Lecture Overview OpenGL Light Sources Types of Geometry Shading Shading in OpenGL Fixed-Function Shading Programmable Shaders Vertex Programs Fragment Programs GLSL 41

Fragment Programs Fragment Data From Rasterizer Uniform Parameters Fragment program To Frame Buffer Output Variables 42

Fragment Data Changes for each execution of the fragment program Fragment data includes: Interpolated standard OpenGL variables for fragment shader, as generated by vertex shader, for example: varying vec4 gl_color; varying vec4 gl_texcoord[]; Interpolated varying variables from vertex shader Allows data to be passed from vertex to fragment shader 43

Uniform Parameters Same as in vertex programs 44

Output Variables Pre-defined output variables: gl_fragcolor gl_fragdepth OpenGL writes these to the frame buffer Result is undefined if you do not set these variables! 45

Lecture Overview OpenGL Light Sources Types of Geometry Shading Shading in OpenGL Fixed-Function Shading Programmable Shaders Vertex Programs Fragment Programs GLSL 46

GLSL Main Features Similar to C language attribute, uniform, varying storage classifiers Set of predefined variables Access to per-vertex, per-fragment data Access OpenGL state Built-in vector data types, vector operations No pointers No direct access to data or variables in your C++ code 47

Example: Treat normals as colors // Vertex Shader varying vec4 color; void main() { // Treat the normal (x, y, z) values as (r, g, b) color components. color = vec4(clamp(abs((gl_normal + 1.0) * 0.5), 0.0, 1.0), 1.0); } gl_position = ftransform(); // Fragment Shader varying vec4 color; void main() { gl_fragcolor = color; } 48

Creating Shaders in OpenGL 49 Source: Gabriel Zachmann, Clausthal University

Tutorials and Documentation OpenGL and GLSL specifications http://www.opengl.org/documentation/specs/ GLSL tutorials http://www.lighthouse3d.com/opengl/glsl/ http://www.clockworkcoders.com/oglsl/tutorials.html OpenGL Programming Guide (Red Book) OpenGL Shading Language (Orange Book) OpenGL API Reference Card http://www.khronos.org/files/opengl43-quick-referencecard.pdf 50