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

Similar documents
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: Lecture #8: GLSL. Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2012

CS475/CS675 - Computer Graphics. OpenGL Drawing

Computação Gráfica. Computer Graphics Engenharia Informática (11569) 3º ano, 2º semestre. Chap. 4 Windows and Viewports

COMP371 COMPUTER GRAPHICS

Shaders. Slide credit to Prof. Zwicker

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

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

CS 432 Interactive Computer Graphics

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

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

CPSC 436D Video Game Programming

CSE 167. Discussion 03 ft. Glynn 10/16/2017

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

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

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

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

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

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

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

Programmable Graphics Hardware

12.2 Programmable Graphics Hardware

Rendering Objects. Need to transform all geometry then

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

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

3d Programming I. Dr Anton Gerdelan

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

CSE 167: Introduction to Computer Graphics Lecture #5: Visibility, OpenGL

CS4621/5621 Fall Basics of OpenGL/GLSL Textures Basics

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

Introductory Seminar

Geometry Shaders. And how to use them

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

Lecture 09: Shaders (Part 1)

CS452/552; EE465/505. Image Processing Frame Buffer Objects

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

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

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

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 and OpenGL III: OpenGL Shading Language (GLSL 1.10)!

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

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

Starting out with OpenGL ES 3.0. Jon Kirkham, Senior Software Engineer, ARM

Information Coding / Computer Graphics, ISY, LiTH. OpenGL! ! where it fits!! what it contains!! how you work with it 11(40)

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

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

Sign up for crits! Announcments

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

Tutorial 04. Harshavardhan Kode. September 14, 2015

Tutorial 1: Your First Triangle!

WebGL: Hands On. DevCon5 NYC Kenneth Russell Software Engineer, Google, Inc. Chair, WebGL Working Group

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

An Overview GLUT GLSL GLEW

Announcement. Homework 1 has been posted in dropbox and course website. Due: 1:15 pm, Monday, September 12

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

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

OPENGL RENDERING PIPELINE

Computer Graphics Coursework 1

EECS 487: Interactive Computer Graphics

CS 450: COMPUTER GRAPHICS REVIEW: STATE, ATTRIBUTES, AND OBJECTS SPRING 2015 DR. MICHAEL J. REALE

Lecture 2. Shaders, GLSL and GPGPU

Supplement to Lecture 22

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

2D graphics with WebGL

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

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

Programming Graphics Hardware

Mobile Application Programing: Android. OpenGL Operation

Shaders CSCI 4239/5239 Advanced Computer Graphics Spring 2014

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

Introduction to Computer Graphics. Hardware Acceleration Review

Computer graphics Labs: OpenGL (2/2) Vertex Shaders and Fragment Shader

CSE 167: Introduction to Computer Graphics Lecture #19: Wrapping Up. Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2017

CS452/552; EE465/505. Image Formation

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

WebGL. Creating Interactive Content with WebGL. Media #WWDC14. Session 509 Dean Jackson and Brady Eidson WebKit Engineers

gvirtualxray Tutorial 01: Creating a Window and an OpenGL Context Using GLUT

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

Programmable Graphics Hardware

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

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

Introduction to Computer Graphics with WebGL

The Projection Matrix

INTRODUCTION TO OPENGL PIPELINE

Computer Graphics CS 543 Lecture 4 (Part 2) Building 3D Models (Part 2)

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

The Graphics Pipeline

CS 432 Interactive Computer Graphics

CS380: Computer Graphics Screen Space & World Space. Sung-Eui Yoon ( 윤성의 ) Course URL:

Computer Graphics (CS 4731) & 2D Graphics Systems

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

Shaders (some slides taken from David M. course)

Discussion 3. PPM loading Texture rendering in OpenGL

The Graphics Pipeline

Modern OpenGL Guide. Alexander Overvoorde. May Introduction 3 Credits... 3 Prerequisites... 4

Programming shaders & GPUs Christian Miller CS Fall 2011

The Graphics Pipeline

Computer Graphics Seminar

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

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

Transcription:

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 Tuesday, April 26 2

GLSL in Practice Real Time 3D Demo C++/OpenGL/GLSL Engine http://www.youtube.com/watch?v=9n-kgcqy2xs 3

Lecture Overview Programmable Shaders Vertex Programs Fragment Programs GLSL 4

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: Vertex shaders: allowed modification of geometry Fragment shaders: allowed per-pixel shading 5

Programmable Shaders in OpenGL OpenGL 2.0 supported the OpenGL Shading Language (GLSL) in 2003 OpenGL 3.0 (2011) deprecates fixed rendering pipeline and immediate mode Geometry shaders were added in OpenGL 3.2 Tessellation shaders were added in OpenGL 4.0 Compute shaders were added in OpenGL 4.2 Programmable shaders allow real-time: Shadows, environment mapping, per-pixel lighting, bump mapping, parallax bump mapping, HDR, etc. 6

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 7

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 8 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 9

Tessellation Shader Executed once per primitive (triangle, quad, etc.) Generates new primitives by subdividing each line, triangle or quad primitive Typically used for adapting visual quality to the required level of detail recursive subdivision For instance, for automatic tessellation of Bezier curves and surfaces 10

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 it can remove the primitive Typically used for: Per-face normal computation Easy wireframe rendering Point sprite generation: turn OpenGL points into geometry Shadow volume extrusion Single pass rendering to a cubic shadow map Marching cubes for iso-surfaces Automatic mesh complexity modification 11

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 12

Compute Shader Not part of the graphics pipeline Have no user-defined inputs and no outputs Results written to an image or shader storage block More info: https://www.opengl.org/wiki/compute_shader 13

GLSL Data Types float vec2, vec3, vec4: floating point vector in 2D, 3D, 4D mat2, mat3, mat4: 2x2, 3x3, 4x4 floating point matrix int ivec2, ivec3, ivec4: integer vector bool bvec2, bvec3, bvec4: boolean vector sampler: represent textures 14 sampler1d, sampler2d, sampler3d: 1D, 2D and 3D texture samplercube: Cube Map texture sampler1dshadow, sampler2dshadow: 1D and 2D depthcomponent texture

Lecture Overview Programmable Shaders Vertex Programs Fragment Programs GLSL 15

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

Vertex Attributes Declared using the attribute storage classifier Different for each execution of the vertex program Can be modified by the vertex program Example: attribute float myattrib; 17

Uniform Parameters Declared by uniform storage classifier Normally the same for all vertices Read-only 18

Uniform Parameters 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 = ; // handle of shader program GLint i = glgetuniformlocation(p, a ); // returns location of a gluniform1f(i, 1.0f); // set value of a to 1 19

Vertex Programs: Output Variables Required output: homogeneous vertex coordinates vec4 gl_position out output variables Mechanism to send data to the fragment shader Will be interpolated during rasterization Fragment shader gets interpolated data Example: out vec4 vertex_color; 20

Lecture Overview Programmable Shaders Vertex Programs Fragment Programs GLSL 21

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

Fragment Data Changes for each execution of the fragment program Fragment data includes interpolated variables from vertex shader Allows data to be passed from vertex to fragment shader Specified with in parameter 23

Uniform Parameters Same as in vertex programs 24

Output Variables Pre-defined output variables: vec4 gl_fragcolor float gl_fragdepth OpenGL writes these to the frame buffer 25

Built-In GLSL Functions dot: dot product cross: cross product texture2d: used to sample a texture normalize: normalize a vector clamp: clamping a vector to a minimum and a maximum 26

Simple GLSL Shader Vertex Shader: vertex.glsl in vec3 vposition; void main() { gl_position = vec4(vposition,1.0); } Fragment Shader: fragment.glsl out vec4 color; void main() { color = vec4(1.0,1.0,1.0,1.0); } Source: http://www.codeincodeblock.com/2013/05/introduction-to-modern-opengl-3x-with.html 27

Loading Shaders in OpenGL 28 Gabriel Zachmann, Clausthal University

Loading a Shader GLuint loadshader(char *shaderfile, GLenum type) { std::ifstream in(shaderfile); std::string src= ""; std::string line=""; while(std::getline(in,line)) src += line + "\n"; std::cout << src; GLuint shader; GLint compiled; shader = glcreateshader(type); } const char* source = src.c_str(); glshadersource(shader,1,&source,null); glcompileshader(shader); if(!shader) { std::cerr << "Could not compile the shader"; return 0; } return shader; 29

Create Shader Program GLuint createshaderprogram() { GLuint vertexshader,fragmentshader; GLint linked; vertexshader = loadshader("vertex.glsl",gl_vertex_shader); fragmentshader = loadshader("fragment.glsl",gl_fragment_shader); if(!vertexshader!fragmentshader) return 0; programid=glcreateprogram(); if(!programid) { std::cerr << "could not create the shader program"; return 0; } glattachshader(programid,vertexshader); glattachshader(programid,fragmentshader); glbindattriblocation(programid,0,"vposition"); gllinkprogram(programid); glgetprogramiv(programid,gl_link_status,&linked); if(!linked) { std::cerr << "could not link the shader"; return 0; } gluseprogram(programid); return programid; } 30

Load a Triangle static void LoadTriangle() { // make and bind the VAO glgenvertexarrays(1, &gvao); glbindvertexarray(gvao); // make and bind the VBO glgenbuffers(1, &gvbo); glbindbuffer(gl_array_buffer, gvbo); // Put the three triangle verticies into the VBO GLfloat vertexdata[] = { // X Y Z 0.0f, 0.8f, 0.0f, -0.8f,-0.8f, 0.0f, 0.8f,-0.8f, 0.0f, }; glbufferdata(gl_array_buffer, sizeof(vertexdata), vertexdata, GL_STATIC_DRAW); glenablevertexattribarray(0); glvertexattribpointer(0, 3, GL_FLOAT, GL_FALSE, 0, NULL); } // unbind the VBO and VAO glbindbuffer(gl_array_buffer, 0); glbindvertexarray(0); 31

Render // draws a single frame static void Render(GLFWwindow* MainWindow) { // clear everything glclearcolor(0, 0, 0, 1); // black glclear(gl_color_buffer_bit); // bind the VAO (the triangle) glbindvertexarray(gvao); // draw the VAO gldrawarrays(gl_triangles, 0, 3); // unbind the VAO glbindvertexarray(0); // swap the display buffers glfwswapbuffers(mainwindow); } 32

Initialize OpenGL Window // initialize GLFW if(!glfwinit()) {cerr << "glfwinit failed" << endl; exit();} // open a window with GLFW glfwwindowhint(glfw_opengl_forward_compat, GL_TRUE); glfwwindowhint(glfw_opengl_profile, GLFW_OPENGL_CORE_PROFILE); glfwwindowhint(glfw_context_version_major, 4); glfwwindowhint(glfw_context_version_minor, 2); glfwwindowhint(glfw_resizable, GL_TRUE); MainWindow = glfwcreatewindow((int)screen_size.x, (int)screen_size.y, "Intro OpenGL with Shader",NULL,NULL); if(!mainwindow) {cerr << "glfwopenwindow failed << endl; exit();} // GLFW settings glfwmakecontextcurrent(mainwindow); // initialize GLEW if(glewinit()!= GLEW_OK) {cerr << glewinit failed << endl; exit(); } // make sure OpenGL version 3.2 API is available if(!glew_version_4_2) {cerr << OpenGL 4.2 API is not available. << endl; exit();} 33

Load Shaders and Render // load vertex and fragment shaders into opengl LoadShaders(); if(!createshaderprogram()) { cerr << "Could not create the shaders"; } // create buffer and fill it with the points of the triangle LoadTriangle(); // run while the window is open while(glfwgetwindowattrib(window,glfw_focused)) { while(!glfwwindowshouldclose(mainwindow)) { // process pending events glfwpollevents(); // draw one frame Render(MainWindow); } } // clean up and exit glfwterminate(); 34

Lighting with GLSL Tutorial for diffuse lighting with a point light http://www.tomdalling.com/blog/modern-opengl/06-diffusepoint-lighting/ 35

Tutorials and Documentation OpenGL Tutorials http://www.lighthouse3d.com/tutorials/ http://www.tomdalling.com/blog/category/modern-opengl/ http://www.swiftless.com/opengl4tuts.html OpenGL and GLSL Specifications https://www.opengl.org/registry/ OpenGL 3.2 API Reference Card http://www.opengl.org/sdk/docs/reference_card/opengl32-quickreference-card.pdf 36