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

Similar documents
Objectives. Programming with OpenGL Part 5: More GLSL. Program Object. Reading a Shader. Shader Reader. Linking Shaders with Application

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

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

Lecture 3. Programming with OpenGL GLUT + GLEW. CS 354 Computer Graphics Sunday, January 20, 13

GLSL II. Objectives. Coupling GLSL to Applications Example applications

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

Objectives. Open GL Shading Language (GLSL)

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

Computer Graphics (CS 4731) & 2D Graphics Systems

Objectives. Coupling GLSL to Applications Example applications

3D Game Programming Programmable Pipelines. Ming-Te Chi Department of Computer Science, National Chengchi University

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

Supplement to Lecture 22

CS 432 Interactive Computer Graphics

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

CSE Real Time Rendering Week 3 & 4

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

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

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

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

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

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

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

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

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

Tutorial 04. Harshavardhan Kode. September 14, 2015

Objectives. OpenGL - Shaders. GLSL A Quick Review

2/3/16. Interaction. Triangles (Clarification) Choice of Programming Language. Buffer Objects. The CPU-GPU bus. CSCI 420 Computer Graphics Lecture 3

COMP371 COMPUTER GRAPHICS

Interaction. CSCI 420 Computer Graphics Lecture 3

CPSC 436D Video Game Programming

1. Write a shader program that animates the morphing of Figure 'A' to Figure 'B' and back.

Programming with OpenGL Complete Programs Objectives Build a complete first program

Shaders. Slide credit to Prof. Zwicker

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

- Surface Rendering -

Computer Graphics (CS 543) Lecture 4a: Linear Algebra for Graphics (Points, Scalars, Vectors)

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

Philip Calderon CSE 520 Lab 3 Color Shader

CS475/CS675 - Computer Graphics. OpenGL Drawing

2a. The triangles scale increases (expands) when the 'e' key is pressed and decreases (contracts) when the 'c' key is pressed.

Erik Anchondo cse 520 lab 4

Mobile Application Programing: Android. OpenGL Operation

CS452/552; EE465/505. Review & Examples

Geometry Shaders. And how to use them

Shadows & Programmable Shaders. Dr. Alexander G. Gee. Texture Mapping. Buffers Texture Mapping OpenGL Texture Mapping Compositing and Blending

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

Fog example. Fog is atmospheric effect. Better realism, helps determine distances

CSE 4431/ M Advanced Topics in 3D Computer Graphics. TA: Margarita Vinnikov

Introduction to Computer Graphics with WebGL

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

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

EECS 487: Interactive Computer Graphics

Lecture 19: OpenGL Texture Mapping. CITS3003 Graphics & Animation

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

Mobile Application Programming: Android. OpenGL Operation

Lecture 11 Shaders and WebGL. October 8, 2015

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

Mobile Application Programing: Android. OpenGL Operation

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

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

Introduction to Computer Graphics. Hardware Acceleration Review

Texture Mapping. CS 537 Interactive Computer Graphics Prof. David E. Breen Department of Computer Science

Animation Essentially a question of flipping between many still images, fast enough

Computer Graphics (CS 4731) Lecture 11: Implementing Transformations. Prof Emmanuel Agu. Computer Science Dept. Worcester Polytechnic Institute (WPI)

Computer Graphics (CS 4731) Lecture 11: Implementing Transformations. Prof Emmanuel Agu. Computer Science Dept. Worcester Polytechnic Institute (WPI)

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

The Projection Matrix

OPENGL RENDERING PIPELINE

Programmable shader. Hanyang University

The Projection Matrix

CS452/552; EE465/505. Image Formation

OPENGL AND GLSL. Computer Graphics

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

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

CS 543 Lecture 1 (Part 3) Prof Emmanuel Agu. Computer Science Dept. Worcester Polytechnic Institute (WPI)

BCA611 Video Oyunları için 3B Grafik

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

Developing a Comprehensive Software Toolkit for Creating Digital Mosaic Artwork

An Introduction to 3D Computer Graphics, Stereoscopic Image, and Animation in OpenGL and C/C++ Fore June

The GLSL API. Mike Bailey. Oregon State University. Geometry Shader. Program. The GLSL Shader-creation Process. create. compile. Vertex.

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

Programming with WebGL Part 1: Background. CS 432 Interactive Computer Graphics Prof. David E. Breen Department of Computer Science

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

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

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

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

Programming shaders & GPUs Christian Miller CS Fall 2011

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

CS 432 Interactive Computer Graphics

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

Project Sketchpad. Ivan Sutherland (MIT 1963) established the basic interactive paradigm that characterizes interactive computer graphics:

Yazhuo Liu Homework 3

INTRODUCTION TO OPENGL PIPELINE

Zeyang Li Carnegie Mellon University

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

Introduction to OpenGL/GLSL and WebGL GLSL

GLSL Overview: Creating a Program

Tutorial 1: Your First Triangle!

2D graphics with WebGL

Transcription:

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

Objectives Coupling shaders to applications - Reading - Compiling - Linking Vertex Attributes Setting up uniform variables Example applications 2

Linking Shaders with Application Read shaders Compile shaders Create a program object Link everything together Link variables in application with variables in shaders - Vertex attributes - Uniform variables 3

Program Object Container for shaders - Can contain multiple shaders - Other GLSL functions GLuint myprogobj; myprogobj = glcreateprogram(); /* define shader objects here */ gluseprogram(myprogobj); gllinkprogram(myprogobj); 4

Reading a Shader Shaders are added to the program object and compiled Usual method of passing a shader is as a null-terminated string using the function glshadersource If the shader is in a file, we can write a reader to convert the file to a string 5

Shader Reader #include <stdio.h> static char* readshadersource(const char* shaderfile) { FILE* fp = fopen(shaderfile, "r"); if ( fp == NULL ) { return NULL; } fseek(fp, 0L, SEEK_END); long size = ftell(fp); 6

Shader Reader (cont) fseek(fp, 0L, SEEK_SET); char* buf = new char[size + 1]; fread(buf, 1, size, fp); buf[size] = '\0'; fclose(fp); } return buf; 7

Adding a Vertex Shader GLuint vshader; GLunit myvertexobj; GLchar vshaderfile[] = my_vertex_shader ; GLchar* vsource = readshadersource(vshaderfile); glshadersource(myvertexobj, 1, &vertexshaderfile, NULL); myvertexobj = glcreateshader(gl_vertex_shader); glcompileshader(myvertexobj); glattachobject(myprogobj, myvertexobj); 8

Vertex Attributes Vertex attributes are named in the shaders Linker forms a table Application can get index from table and tie it to an application variable Similar process for uniform variables 9

Vertex Attribute Example #define BUFFER_OFFSET( offset ) ((GLvoid*) (offset)) GLuint loc = glgetattriblocation( program, "vposition" ); glenablevertexattribarray( loc ); glvertexattribpointer( loc, 2, GL_FLOAT, GL_FALSE, 0, BUFFER_OFFSET(0) ); 10

Uniform Variable Example GLint angleparam; angleparam = glgetuniformlocation(myprogobj, "angle"); /* angle defined in shader */ /* my_angle set in application */ GLfloat my_angle; my_angle = 5.0 /* or some other value */ gluniform1f(angleparam, my_angle); 11

Double Buffering Updating the value of a uniform variable opens the door to animating an application - Execute gluniform in display callback - Force a redraw through glutpostredisplay() Need to prevent a partially redrawn frame buffer from being displayed Draw into back buffer Display front buffer Swap buffers after updating finished 12

Adding Double Buffering Request a double buffer - glutinitdisplaymode(glut_double) Swap buffers void mydisplay() { glclear( ); gldrawarrays(); glutswapbuffers(); } 13

Idle Callback Idle callback specifies function to be executed when no other actions pending - glutidlefunc(myidle); void myidle() { // recompute display glutpostredisplay(); } 14

Attribute and Varying Qualifiers Starting with GLSL 1.5 attribute and varying qualifiers have been replaced by in and out qualifiers No changes needed in application Vertex shader example: #version 1.4 attribute vec3 vposition; varying vec3 color; #version 1.5 in vec3 vposition; out vec3 color; 15

Adding Color If we set a color in the application, we can send it to the shaders as a vertex attribute or as a uniform variable depending on how often it changes Let s associate a color with each vertex Set up an array of same size as positions Send to GPU as a vertex buffer object 16

Setting Colors typedef vec3 color3; color3 base_colors[4] = {color3(1.0, 0.0. 0.0),. color3 colors[numvertices]; vec3 points[numvertices]; //in loop setting positions colors[i] = basecolors[color_index] position[i] =. 17

Setting Up Buffer Object //need larger buffer glbufferdata(gl_array_buffer, sizeof(points) + sizeof(colors), NULL, GL_STATIC_DRAW); //load data separately glbuffersubdata(gl_array_buffer, 0, sizeof(points), points); glbuffersubdata(gl_array_buffer, sizeof(points), sizeof(colors), colors); 18

Second Vertex Array // vposition and vcolor identifiers in vertex shader loc = glgetattriblocation(program, vposition ); glenablevertexattribarray(loc); glvertexattribpointer(loc, 3, GL_FLOAT, GL_FALSE, 0, BUFFER_OFFSET(0)); loc2 = glgetattriblocation(program, vcolor ); glenablevertexattribarray(loc2); glvertexattribpointer(loc2, 3, GL_FLOAT, GL_FALSE, 0, BUFFER_OFFSET(sizeofpoints)); 19

Vertex Shader Applications Moving vertices - Morphing - Wave motion - Fractals Lighting - More realistic models - Cartoon shaders 20

Wave Motion Vertex Shader in vec4 vposition; uniform float xs, zs, // frequencies uniform float h; // height scale void main() { vec4 t = vposition; t.y = vposition.y + h*sin(time + xs*vposition.x) + h*sin(time + zs*vposition.z); gl_position = t; } 21

Particle System in vec3 vposition; uniform mat4 ModelViewProjectionMatrix; uniform vec3 init_vel; uniform float g, m, t; void main() { vec3 object_pos; object_pos.x = vposition.x + vel.x*t; object_pos.y = vposition.y + vel.y*t + g/(2.0*m)*t*t; object_pos.z = vposition.z + vel.z*t; gl_position = ModelViewProjectionMatrix*vec4(object_pos,1); } 22

Pass Through Fragment Shader /* pass-through fragment shader */ in vec4 color; void main(void) { gl_fragcolor = color; } 23

Vertex vs Fragment Lighting per vertex lighting per fragment lighting 24

Fragment Shader Applications Texture mapping smooth shading environment mapping bump mapping 25