# CS4621/5621 Fall Basics of OpenGL/GLSL Textures Basics

Save this PDF as:

Size: px
Start display at page:

## Transcription

1 CS4621/5621 Fall 2015 Basics of OpenGL/GLSL Textures Basics Professor: Kavita Bala Instructor: Nicolas Savva with slides from Balazs Kovacs, Eston Schweickart, Daniel Schroeder, Jiang Huang and Pramook Khungurn over the years.

2 Announcements PPA1 GPURay due tonight Note on rasterization vs raytracing PPA2 Shaders and Textures (out soon) Final projects

14 Demo: PPA2 Textures and Shading

15 Height Fields A height field is a function y = f(x, z) y represents the height of a point for a location in the x-z plane. Heights fields are usually rendered as a rectangular mesh of triangles or rectangles sampled from a grid samples y_ij = f( x_i, z_j )

16 Displaying a Height Field First, generate a mesh data and use it to initialize data for a VBO: float dx = 1.0/N, dz = 1.0/N; for( int i = 0; i < N; ++i ) { float x = i*dx; for( int j = 0; j < N; ++j ) { float z = j*dz; float y = f( x, z ); vertex[index++] vertex[index++] vertex[index++] vertex[index++] = = = = vec3( x, y, vec3( x, y, vec3( x + dx, y, vec3( x + dx, y, } } Finally, display each quad using: for( int i = 0; i < NumVertices ; i += 4 ) gldrawarrays( GL_LINE_LOOP, 4*i, 4 ); z z z z ); + dz ); + dz ); );

17 Time Varying Vertex Shader in vec4 vposition; in vec4 vcolor; uniform float time; // in milliseconds uniform mat4 ModelViewProjectionMatrix; void main() { vec4 v = vposition; vec4 u = sin( time + 5*v ); v.y = 0.1 * u.x * u.z; gl_position = ModelViewProjectionMatrix * v; }

19 Adding Lighting Solid Mesh: create two triangles for each quad Display with: gldrawarrays( GL_TRIANGLES, 0, NumVertices ); For more interest looking results, we ll add lighting (and perhaps a texture) We ll do per-vertex lighting leverage the vertex shader since we ll also use it to vary the mesh in a time-varying way

20 Mesh Shader uniform float time, shininess; uniform vec4 vposition, lightposition, diffuselight, specularlight; uniform mat4 ModelViewMatrix, ModelViewProjectionMatrix, NormalMatrix; void main() { vec4 v = vposition; vec4 u = sin( time + 5*v ); v.y = 0.1 * u.x * u.z; gl_position = ModelViewProjectionMatrix * v; vec4 diffuse, specular; vec4 eyeposition = ModelViewMatrix * vposition; vec4 eyelightpos = lightposition;

21 Mesh Shader (continued) vec3 N = normalize(normalmatrix * Normal); vec3 L = normalize(vec3(eyelightpos eyeposition)); vec3 E = -normalize(eyeposition.xyz); vec3 H = normalize(l + E); float Kd = max(dot(l, N), 0.0); float Ks = pow(max(dot(n, H), 0.0), shininess); diffuse = Kd*diffuseLight; specular = Ks*specularLight; color } = diffuse + specular;

22 Mesh Display

23 Animated Texture Demo

24 Texturing in GLSL/Pipeline Application Geometry Textures (pixel information) Vertex Shader Vertex Assembly Rasterization Fragment Shader Texture Memory Per fragment operations Frame Buffer

25 Texture Mapping and the OpenGL Pipeline legacy Vertex Data Vertex Transform and Lighting Primitive Setup and Rasterization Pixel Data Fragment Coloring and Texturing Blending Texture Store modern Vertex Data Vertex Shader Tessellation Control Shader Pixel Data Texture Store Primitive Setup and Rasterization Tessellation Evaluation Shader Geometry Shader Fragment Shader Blending

26 Mapping a Texture Based on parametric texture coordinates coordinates needs to be specified at each vertex t Texture Space Object Space 1, 1 (0, 1) (s, t) = (0.2, 0.8) A a c (0.4, 0.2) b (0, 0) B (1, 0) s C (0.8, 0.4)

27 Applying Textures Basic steps to applying a texture: 1. specify the texture 2. read or generate image 3. assign to texture 4. enable texturing 5. assign texture coordinates to vertices 6. specify texture parameters 7. wrapping, filtering

28 Using textures In order to use texture mapping in your application, you will need to do the following steps: Create a texture object and load texel data into it. Include texture coordinates with your vertices. Associate a texture sampler with each texture map you intend to use in your shader. Retrieve the texel values through the texture sampler from your shader.

29 Texture Targets

30 Texture Format

31 Textures in the CS4620 Framework Loading texture files as texture maps ( glteximage2d(...) ) Setting up the texture parameters ( gltexparameteri(...) ) Manages the texture units ( glbindtexture(...) ) Provides wrapper classes for working with 1D, 2D (and 2D MIP-Mapped textures) Simple interface for using textures with GLSL

32 Textures in OpenGL glenable(gl_texture_2d) turn on the 2D texture store glteximage2d(...) declares a texture s size, color components (RGBA, etc), data type (byte, float...), pixel data glbindtexture(...) bind the given texture to the active store - Programmable shaders can bind textures to uniforms

33 Textures in OpenGL GlTexParameteri(...) Used to set texture configuration: How are the texture values interpolated? GL_NEAREST vs GL_LINEAR : GL_NEAREST rounds to nearest texel to get the color GL_LINEAR linearly interpolates the colors of the texels Does the texture repeat itself? GL_REPEAT vs GL_CLAMP Say we have a texture coordinate of (-0.1,1.1) GL_CLAMP changes it to (0.0,1.0) GL_REPEAT changes it to (0.9,0.1) More options for Texture Parameters can be found here: Examples of use can be found in the Texture class in the framework

34 Texture Borders GL_CLAMP_TO_EDGE whenever outside the range 0.0 to 1.0, texels on the edge of the texture are used GL_CLAMP_TO_BORDER attempts to read outside the texture will result in the constant border color (GL_TEXTURE_BORDER_COLOR) for the texture being used GL_REPEAT the texture is wrapped and considered to repeat infinitely (fractional part of the uvcoord is used whereas integer part is discarded) GL_MIRRORED_REPEAT texture repeated in a mirrored fashion (even integer uvcoords part fractional part considered whereas coordinates with odd integer part have their fractional part subtracted from 1.0)

35 Texture Borders

36 GLSL Data Types Scalar types: float, int, bool Vector types: vec2, vec3, vec4 ivec2, ivec3, ivec4 bvec2, bvec3, bvec4 Matrix types: mat2, mat3, mat4 Texture sampling: sampler1d, sampler2d, sampler3d, samplercube

37 Texturing in GLSL Basic shader syntax: sampler2d - a new data type vec4 texture2d(sampler2d,vec2) a new built-in function

38 Texturing in GLSL (Vertex Shader) Figure out the coordinate that we want to sample from by using an attribute variable attribute vec2 in_texcoord; varying vec2 coord; void main() { gl_position =... } coord = vec2(in_texcoord);

39 Texturing in GLSL (Fragment Shader) Take the coordinate data from the vertex shader and sample the appropriate pixel from the desired texture varying vec2 coord; uniform sampler2d sampler; void main() { gl_fragcolor = texture2d(sampler, coord); }

40 Textures in CS 4620 Framework In onentry() method // Initialization step : // Load the 2D texture texture = new GLTexture(TextureTarget.Texture2D, true); try { texture.setimage2dresource("path/to/image.png", false); } catch (Exception e) { // No image found! System.out.println(e.getMessage()); System.exit(1); }

41 Textures in CS 4620 Framework Inside draw() method // Render step: program.use(); // Activate the shader // Activate the texture and bind the active texture unit to the sampler uniform texture.use(textureunit.texture0, program.getuniform("sampler")); gldrawelements(..); // Render your scene // clean up texture.unuse(); GLProgram.unuse();

42 Texture Object GLuint textures[1]; glgentextures( 1, textures ); //reserve names for texture objects glactivetexture( GL_TEXTURE0 ); //select active texture unit glbindtexture( GL_TEXTURE_2D, textures[0] ); //create texture object //create, activate bind and unbind texture //(use dimensionality of target) glteximage2d( GL_TEXTURE_2D, 0, GL_RGB, TextureSize, TextureSize, GL_RGB, GL_UNSIGNED_BYTE, image ); //mutable texture image storage gltexparameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT ); gltexparameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT ); gltexparameteri( GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST ); gltexparameteri( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST );

43 Vertex Shader in vec4 vposition; in vec4 vcolor; in vec2 vtexcoord; out vec4 color; out vec2 texcoord; void main() { color = vcolor; texcoord = vtexcoord; gl_position = vposition; }

44 Fragment Shader in vec4 color; in vec2 texcoord; out vec4 fcolor; uniform sampler texture; void main() { fcolor = color * texture( texture, texcoord ); }

45 Multitextures

46 Multitextures (client side)... // For the first texture, we will use texture unit 0 // Get the uniform location GLint tex1_uniform_loc = glgetuniformlocation(prog,"tex1"); // Set it to 0 gluniform1i(tex1_uniform_loc, 0); // Select texture unit 0 glactivetexture(gl_texture0); // Bind a texture to it glbindtexture(gl_texture_2d, tex1); // Repeat the above process for texture unit 1 GLint tex2_uniform_loc = glgetuniformlocation(prog, "tex2"); gluniform1i(tex2_uniform_loc, 1); glactivetexture(gl_texture1); glbindtexture(gl_texture_2d, tex2);...

47 Multitexture (Vertex Shader) #version 330 core layout (location = 0) in vec2 in_position; layout (location = 1) in vec2 in_tex_coord; out vec2 tex_coord0; out vec2 tex_coord1; uniform float time; void main(void) { const mat2 m = mat2(vec2(cos(time), sin(time)), vec2( sin(time), cos(time))); tex_coord0 = in_tex_coord * m; tex_coord1 = in_tex_coord * transpose(m); gl_position = vec4(in_position, 0.5, 1.0); }

48 Multitexture (Fragment Shader) #version 330 core in vec2 tex_coord0; in vec2 tex_coord1; layout (location = 0) out vec4 color; uniform sampler2d tex1; uniform sampler2d tex2; void main(void) { color = texture(tex1, tex_coord0) + texture(tex2, tex_coord1); }

49 Texture View and Texture Object State

50 OpenGL reference...

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

Texture Mapping CS 537 Interactive Computer Graphics Prof. David E. Breen Department of Computer Science 1 Objectives Introduce Mapping Methods - Texture Mapping - Environment Mapping - Bump Mapping Consider

### CS452/552; EE465/505. Texture Mapping in WebGL

CS452/552; EE465/505 Texture Mapping in WebGL 2-26 15 Outline! Texture Mapping in WebGL Read: Angel, Chapter 7, 7.3-7.5 LearningWebGL lesson 5: http://learningwebgl.com/blog/?p=507 Lab3 due: Monday, 3/2

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

CS4621/5621 Fall 2015 Computer Graphics Practicum Intro to OpenGL/GLSL Professor: Kavita Bala Instructor: Nicolas Savva with slides from Balazs Kovacs, Eston Schweickart, Daniel Schroeder, Jiang Huang

### Computergraphics Exercise 15/ Shading & Texturing

Computergraphics Exercise 15/16 3. Shading & Texturing Jakob Wagner for internal use only Shaders Vertex Specification define vertex format & data in model space Vertex Processing transform to clip space

### OPENGL RENDERING PIPELINE

CPSC 314 03 SHADERS, OPENGL, & JS UGRAD.CS.UBC.CA/~CS314 Textbook: Appendix A* (helpful, but different version of OpenGL) Alla Sheffer Sep 2016 OPENGL RENDERING PIPELINE 1 OPENGL RENDERING PIPELINE Javascript

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

CS452/552; EE465/505 Image Processing Frame Buffer Objects 3-12 15 Outline! Image Processing: Examples! Render to Texture Read: Angel, Chapter 7, 7.10-7.13 Lab3 new due date: Friday, Mar. 13 th Project#1

### Texture Mapping. Computer Graphics, 2015 Lecture 9. Johan Nysjö Centre for Image analysis Uppsala University

Texture Mapping Computer Graphics, 2015 Lecture 9 Johan Nysjö Centre for Image analysis Uppsala University What we have rendered so far: Looks OK, but how do we add more details (and colors)? Texture mapping

### -=Catmull's Texturing=1974. Part I of Texturing

-=Catmull's Texturing=1974 but with shaders Part I of Texturing Anton Gerdelan Textures Edwin Catmull's PhD thesis Computer display of curved surfaces, 1974 U.Utah Also invented the z-buffer / depth buffer

### CSE 167: Introduction to Computer Graphics Lecture #7: GLSL. Jürgen P. Schulze, Ph.D. University of California, San Diego Spring 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 Announcements Project 2 due Friday 4/22 at 2pm Midterm #1 on

Stored Texture Shaders 157 Preparing for Texture Access These steps are the same when using a shader as when using fixed functionality Make a specific texture unit active by calling glactivetexture Create

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

C P S C 314 S H A D E R S, O P E N G L, & J S RENDERING PIPELINE UGRAD.CS.UBC.C A/~CS314 Mikhail Bessmeltsev 1 WHAT IS RENDERING? Generating image from a 3D scene 2 WHAT IS RENDERING? Generating image

### 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: Introduction to Computer Graphics Lecture #8: Textures Jürgen P. Schulze, Ph.D. University of California, San Diego Spring Quarter 2016 Announcements Project 2 due this Friday Midterm next Tuesday

### Preparing for Texture Access. Stored Texture Shaders. Accessing Texture Maps. Vertex Shader Texture Access

Stored Texture Shaders Preparing for Texture Access These steps are the same when using a shader as when using fixed functionality Make a specific texture unit active by calling glactivetexture Create

### General Purpose computation on GPUs. Liangjun Zhang 2/23/2005

General Purpose computation on GPUs Liangjun Zhang 2/23/2005 Outline Interpretation of GPGPU GPU Programmable interfaces GPU programming sample: Hello, GPGPU More complex programming GPU essentials, opportunity

### Supplement to Lecture 22

Supplement to Lecture 22 Programmable GPUs Programmable Pipelines Introduce programmable pipelines - Vertex shaders - Fragment shaders Introduce shading languages - Needed to describe shaders - RenderMan

### OpenGL Texture Mapping. Objectives Introduce the OpenGL texture functions and options

OpenGL Texture Mapping Objectives Introduce the OpenGL texture functions and options 1 Basic Strategy Three steps to applying a texture 1. 2. 3. specify the texture read or generate image assign to texture

CSCI 420 Computer Graphics Lecture 4 Shaders Jernej Barbic University of Southern California Shading Languages GLSL Vertex Array Objects Vertex Shader Fragment Shader [Angel Ch. 1, 2, A] Introduction The

### Textures. Texture Mapping. Bitmap Textures. Basic Texture Techniques

Texture Mapping Textures The realism of an image is greatly enhanced by adding surface textures to the various faces of a mesh object. In part a) images have been pasted onto each face of a box. Part b)

### CS212. OpenGL Texture Mapping and Related

CS212 OpenGL Texture Mapping and Related Basic Strategy Three steps to applying a texture 1. specify the texture read or generate image assign to texture enable texturing 2. assign texture coordinates

### Graphics. Texture Mapping 고려대학교컴퓨터그래픽스연구실.

Graphics Texture Mapping 고려대학교컴퓨터그래픽스연구실 3D Rendering Pipeline 3D Primitives 3D Modeling Coordinates Model Transformation 3D World Coordinates Lighting 3D World Coordinates Viewing Transformation 3D Viewing

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

Copyright Khronos Group 2012 Page 1 Teaching GL Dave Shreiner Director, Graphics and GPU Computing, ARM 1 December 2012 Copyright Khronos Group 2012 Page 2 Agenda Overview of OpenGL family of APIs Comparison

### CS335 Graphics and Multimedia. Slides adopted from OpenGL Tutorial

CS335 Graphics and Multimedia Slides adopted from OpenGL Tutorial Texture Poly. Per Vertex Mapping CPU DL Texture Raster Frag FB Pixel Apply a 1D, 2D, or 3D image to geometric primitives Uses of Texturing

### 2D graphics with WebGL

2D graphics with WebGL Some material contained here is adapted from the book s slides. September 7, 2015 (Dr. Mihail) 2D graphics September 7, 2015 1 / 22 Graphics Pipeline (Dr. Mihail) 2D graphics September

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

GLSL Introduction Fu-Chung Huang Thanks for materials from many other people Programmable Shaders //per vertex inputs from main attribute aposition; attribute anormal; //outputs to frag. program varying

### 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 #13: GLSL Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2015 Announcements Project 6 due Friday Next Thursday: Midterm #2

### Computer Graphics. Bing-Yu Chen National Taiwan University

Computer Graphics Bing-Yu Chen National Taiwan University Introduction to OpenGL General OpenGL Introduction An Example OpenGL Program Drawing with OpenGL Transformations Animation and Depth Buffering

### The Graphics Pipeline

The Graphics Pipeline Lecture 2 Robb T. Koether Hampden-Sydney College Fri, Aug 28, 2015 Robb T. Koether (Hampden-Sydney College) The Graphics Pipeline Fri, Aug 28, 2015 1 / 19 Outline 1 Vertices 2 The

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

SHADER PROGRAMMING Based on Jian Huang s lecture on Shader Programming What OpenGL 15 years ago could do http://www.neilturner.me.uk/shots/opengl-big.jpg What OpenGL can do now What s Changed? 15 years

### Texture Mapping. Texture Mapping. Map textures to surfaces. Trompe L Oeil ( Deceive the Eye ) The texture. Texture map

CSCI 42 Computer Graphic Lecture 2 Texture Mapping A way of adding urface detail Texture Mapping Jernej Barbic Univerity of Southern California Texture Mapping + Shading Filtering and Mipmap Non-color

### CSC Graphics Programming. Budditha Hettige Department of Statistics and Computer Science

CSC 307 1.0 Graphics Programming Department of Statistics and Computer Science Graphics Programming Texture Mapping 2 Texture Poly. Per Vertex Mapping CPU DL Pixel Texture Raster Frag FB Apply a 1D, 2D,

### Mobile Application Programing: Android. OpenGL Operation

Mobile Application Programing: Android OpenGL Operation Activities Apps are composed of activities Activities are self-contained tasks made up of one screen-full of information Activities start one another

### Tutorial 3: Texture Mapping

Tutorial 3: Texture Mapping Summary In this tutorial, you are going to learn about texture mapping, by performing some texture mapping operations on the triangle you ve been using in the previous tutorials.

Objectives Shading in OpenGL Introduce the OpenGL shading methods - per vertex shading vs per fragment shading - Where to carry out Discuss polygonal shading - Flat - Smooth - Gouraud CITS3003 Graphics

### Lecture 07: Buffers and Textures

Lecture 07: Buffers and Textures CSE 40166 Computer Graphics Peter Bui University of Notre Dame, IN, USA October 26, 2010 OpenGL Pipeline Today s Focus Pixel Buffers: read and write image data to and from

### Shaders. Slide credit to Prof. Zwicker

Shaders Slide credit to Prof. Zwicker 2 Today Shader programming 3 Complete model Blinn model with several light sources i diffuse specular ambient How is this implemented on the graphics processor (GPU)?

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

WebGL and GLSL Basics CS559 Fall 2015 Lecture 10 October 6, 2015 Last time Hardware Rasterization For each point: Compute barycentric coords Decide if in or out.7,.7, -.4 1.1, 0, -.1.9,.05,.05.33,.33,.33

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

! The Graphics Pipeline and OpenGL III: OpenGL Shading Language (GLSL 1.10)! Gordon Wetzstein! Stanford University! EE 267 Virtual Reality! Lecture 4! stanford.edu/class/ee267/! Updates! for 24h lab access:

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

GLSL 1: Basics J.Tumblin-Modified SLIDES from: Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts Director, Arts Technology Center University of New Mexico and

### Introduction to OpenGL. CS 4620 Balazs Kovacs, 2014 Daniel Schroeder, 2013 Pramook Khungurn, 2012

Introduction to OpenGL CS 4620 Balazs Kovacs, 2014 Daniel Schroeder, 2013 Pramook Khungurn, 2012 Introduction Show how to produce graphics using OpenGL Introduce our framework for OpenGL programming OpenGL

Today s Agenda Shaders fundamentals Programming with shader-based OpenGL Shaders Like a function call data are passed in, processed, and passed back out -- Shreiner et al, OpenGL Programming Guide GLSL

### GLSL Applications: 2 of 2

Administrivia GLSL Applications: 2 of 2 Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011 Assignment 2 due today 11:59pm on Blackboard Assignment 3 handed out today Due Wednesday, 02/09 at

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

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:

### WebGL and GLSL Basics. CS559 Fall 2016 Lecture 14 October

WebGL and GLSL Basics CS559 Fall 2016 Lecture 14 October 24 2016 Review Hardware Rasterization For each point: Compute barycentric coords Decide if in or out.7,.7, -.4 1.1, 0, -.1.9,.05,.05.33,.33,.33

### Mobile Application Programing: Android. OpenGL Operation

Mobile Application Programing: Android OpenGL Operation Activities Apps are composed of activities Activities are self-contained tasks made up of one screen-full of information Activities start one another

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

Best practices for effective OpenGL programming Dan Omachi OpenGL Development Engineer 2 What Is OpenGL? 3 OpenGL is a software interface to graphics hardware - OpenGL Specification 4 GPU accelerates rendering

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

Today Rendering - III CS148, Summer 2010 Graphics Pipeline and Programmable Shaders Artist Workflow Siddhartha Chaudhuri 1 2 Outline Texturing: The 10,000m View Intro to textures The fixed-function graphics

### OpenGL: What s Coming Down the Graphics Pipeline. Dave Shreiner ARM

OpenGL: What s Coming Down the Graphics Pipeline Dave Shreiner ARM shreiner@siggraph.org 1 Syllabus Introduction Rendering Fundamentals Shader Overview Fundamental Techniques Applications [Shreiner] [Shreiner]

### Cap. 3 Textures. Mestrado em Engenharia Informática (6931) 1º ano, 1º semestre

Cap. 3 Textures Mestrado em Engenharia Informática (6931) 1º ano, 1º semestre Overview Objectives Notion of texture Motivation Texture mapping, texture patterns, and texels Mapping textures to polygons,

### The Projection Matrix

The Projection Matrix Lecture 8 Robb T. Koether Hampden-Sydney College Fri, Sep 11, 2015 Robb T. Koether (Hampden-Sydney College) The Projection Matrix Fri, Sep 11, 2015 1 / 43 Outline 1 Coordinate Systems

### Mobile Application Programming: Android. OpenGL Operation

Mobile Application Programming: Android OpenGL Operation OpenGL ES C-Based Performance-Oriented Graphics Library Wrapper libraries provided for Java, C#, etc. Produces 2D images from 2D or 3D geometric

### Texturas. Objectives. ! Introduce Mapping Methods. ! Consider two basic strategies. Computação Gráfica

Texturas Computação Gráfica Objectives! Introduce Mapping Methods! Texture Mapping! Environmental Mapping! Bump Mapping! Light Mapping! Consider two basic strategies! Manual coordinate specification! Two-stage

### CS193P - Lecture 19. iphone Application Development. OpenGL ES

CS193P - Lecture 19 iphone Application Development OpenGL ES 1 Announcements Final projects due in 7 days Tuesday, March 16th 11:59 pm Submit: Code Power-point/Keynote slides ReadMe file Final project

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

Comp 410/510 Computer Graphics Spring 2018 Programming with OpenGL Part 3: Shaders Objectives Basic shaders - Vertex shader - Fragment shader Programming shaders with GLSL Finish first program void init(void)

### CS452/552; EE465/505. Lighting & Shading

CS452/552; EE465/505 Lighting & Shading 2-17 15 Outline! More on Lighting and Shading Read: Angel Chapter 6 Lab2: due tonight use ASDW to move a 2D shape around; 1 to center Local Illumination! Approximate

Lessons Learned from HW Shading CS Interactive Computer Graphics Prof. David E. Breen Department of Computer Science Only have an idle() function if something is animated Set idle function to NULL, when

### MXwendler Fragment Shader Development Reference Version 1.0

MXwendler Fragment Shader Development Reference Version 1.0 This document describes the MXwendler fragmentshader interface. You will learn how to write shaders using the GLSL language standards and the

### OpenGL shaders and programming models that provide object persistence

OpenGL shaders and programming models that provide object persistence COSC342 Lecture 22 19 May 2016 OpenGL shaders We discussed forms of local illumination in the ray tracing lectures. We also saw that

### Overview. Goals. MipMapping. P5 MipMap Texturing. What are MipMaps. MipMapping in OpenGL. Generating MipMaps Filtering.

Overview What are MipMaps MipMapping in OpenGL P5 MipMap Texturing Generating MipMaps Filtering Alexandra Junghans junghana@student.ethz.ch Advanced Filters You can explain why it is a good idea to use

### Computer Graphics Texture Mapping

Computer Graphics 2012 13. Texture Mapping Hongxin Zhang State Key Lab of CAD&CG, Zhejiang University 2012-10-31 有关实验 - 备用 ftp 地址 - 10.214.0.111 - 帐号 :cg2012 - 密码 :2012 - 请按照规定上传到指定目录, 便于管理和检查 - 今日实验签到

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

Shader Programming Technical Game Development II Professor Charles Rich Computer Science Department rich@wpi.edu Reference: Rost, OpenGL Shading Language, 2nd Ed., AW, 2006 The Orange Book Also take CS

### Shaders (some slides taken from David M. course)

Shaders (some slides taken from David M. course) Doron Nussbaum Doron Nussbaum COMP 3501 - Shaders 1 Traditional Rendering Pipeline Traditional pipeline (older graphics cards) restricts developer to texture

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

CSE 167: Introduction to Computer Graphics Lecture #9: Textures Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2013 Announcements Added Tuesday office hours for Krishna: 11am-12

### Texture Mapping 1/34

Texture Mapping 1/34 Texture Mapping Offsets the modeling assumption that the BRDF doesn t change in u and v coordinates along the object s surface Store a reflectance as an image called a texture Map

### CS770/870 Spring 2017 Open GL Shader Language GLSL

Preview CS770/870 Spring 2017 Open GL Shader Language GLSL Review traditional graphics pipeline CPU/GPU mixed pipeline issues Shaders GLSL graphics pipeline Based on material from Angel and Shreiner, Interactive

### An Overview GLUT GLSL GLEW

OpenGL, GLUT, GLEW, GLSL An Overview GLUT GLEW GLSL Objectives Give you an overview of the software that you will be using this semester OpenGL, GLUT, GLEW, GLSL What are they? How do you use them? What

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

Comp 410/510 Computer Graphics Spring 2017 Programming with OpenGL Part 2: First Program Objectives Refine the first program Introduce a standard program structure - Initialization Program Structure Most

### E.Order of Operations

Appendix E E.Order of Operations This book describes all the performed between initial specification of vertices and final writing of fragments into the framebuffer. The chapters of this book are arranged

### Three Main Themes of Computer Graphics

Three Main Themes of Computer Graphics Modeling How do we represent (or model) 3-D objects? How do we construct models for specific objects? Animation How do we represent the motion of objects? How do

### OpenGL. Jimmy Johansson Norrköping Visualization and Interaction Studio Linköping University

OpenGL Jimmy Johansson Norrköping Visualization and Interaction Studio Linköping University Background Software interface to graphics hardware 250+ commands Objects (models) are built from geometric primitives

### Understanding M3G 2.0 and its Effect on Producing Exceptional 3D Java-Based Graphics. Sean Ellis Consultant Graphics Engineer ARM, Maidenhead

Understanding M3G 2.0 and its Effect on Producing Exceptional 3D Java-Based Graphics Sean Ellis Consultant Graphics Engineer ARM, Maidenhead Introduction M3G 1.x Recap ARM M3G Integration M3G 2.0 Update

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

WebGL A quick introduction J. Madeira V. 0.2 September 2017 1 Interactive Computer Graphics Graphics library / package is intermediary between application and display hardware Application program maps

### Lecture 11 Shaders and WebGL. October 8, 2015

Lecture 11 Shaders and WebGL October 8, 2015 Review Graphics Pipeline (all the machinery) Program Vertex and Fragment Shaders WebGL to set things up Key Shader Concepts Fragment Processing and Vertex

### OpenGL Performances and Flexibility. Visual Computing Laboratory ISTI CNR, Italy

OpenGL Performances and Flexibility Visual Computing Laboratory ISTI CNR, Italy The Abstract Graphics Pipeline Application 1. The application specifies vertices & connectivity. Vertex Processing 2. The

### The Projection Matrix

The Projection Matrix Lecture 5 Robb T. Koether Hampden-Sydney College Wed, Aug 30, 2017 Robb T. Koether (Hampden-Sydney College) The Projection Matrix Wed, Aug 30, 2017 1 / 21 Outline 1 The World Coordinate

### CMPS160 Shader-based OpenGL Programming. All slides originally from Prabath Gunawardane, et al. unless noted otherwise

CMPS160 Shader-based OpenGL Programming All slides originally from Prabath Gunawardane, et al. unless noted otherwise Shader gallery I Above: Demo of Microsoft s XNA game platform Right: Product demos

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

Mali & OpenGL ES 3.0 Dave Shreiner Jon Kirkham ARM Game Developers Conference 27 March 2013 1 Agenda Some foundational work Instanced geometry rendering Transform feedback Occlusion Queries 2 What s New

### GLSL Programming. Nicolas Holzschuch

GLSL Programming Nicolas Holzschuch GLSL programming C-like language structure: int i, j; i = 2; j = 0; j += i; Functions, loops, branches... Reading your first GSL shader is easy Differences with C New

### Magnification and Minification

Magnification and Minification Lecture 30 Robb T. Koether Hampden-Sydney College Fri, Nov 6, 2015 Robb T. Koether (Hampden-Sydney College) Magnification and Minification Fri, Nov 6, 2015 1 / 17 Outline

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

CS 380 - GPU and GPGPU Programming Lecture 7: Shading and Compute APIs 1 Markus Hadwiger, KAUST Reading Assignment #4 (until Feb. 23) Read (required): Programming Massively Parallel Processors book, Chapter

### MULTI-PASS VS SINGLE-PASS CUBEMAP

Sogang University Computer Graphics Lab. MULTI-PASS VS SINGLE-PASS CUBEMAP 2008.4 1 Contents Purpose Multi-Pass Cubemap Single-Pass Cubemap Reflection Mapping Test Result Conclusion 2 Purpose Implement

### Lecture 2. Shaders, GLSL and GPGPU

Lecture 2 Shaders, GLSL and GPGPU Is it interesting to do GPU computing with graphics APIs today? Lecture overview Why care about shaders for computing? Shaders for graphics GLSL Computing with shaders

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

Shading Models There are two main types of rendering that we cover, polygon rendering ray tracing Polygon rendering is used to apply illumination models to polygons, whereas ray tracing applies to arbitrary

### Imaging and Raster Primitives

Realtime 3D Computer Graphics & Virtual Reality Bitmaps and Textures Imaging and Raster Primitives Vicki Shreiner Imaging and Raster Primitives Describe OpenGL s raster primitives: bitmaps and image rectangles

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

About the Tutorial WebGL (Web Graphics Library) is the new standard for 3D graphics on the Web, designed for rendering 2D graphics and interactive 3D graphics. This tutorial starts with a basic introduction

### Lecture 09: Shaders (Part 1)

Lecture 09: Shaders (Part 1) CSE 40166 Computer Graphics Peter Bui University of Notre Dame, IN, USA November 9, 2010 OpenGL Rendering Pipeline OpenGL Rendering Pipeline (Pseudo-Code) 1 f o r gl_vertex

### Evolution of GPUs Chris Seitz

Evolution of GPUs Chris Seitz Overview Concepts: Real-time rendering Hardware graphics pipeline Evolution of the PC hardware graphics pipeline: 1995-1998: Texture mapping and z-buffer 1998: Multitexturing

### CS452/552; EE465/505. Image Formation

CS452/552; EE465/505 Image Formation 1-15-15 Outline! Image Formation! Introduction to WebGL, continued Draw a colored triangle using WebGL Read: Angel, Chapters 2 & 3 Homework #1 will be available on

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

CS 380 Introduction to Computer Graphics LAB (1) : OpenGL Tutorial 2018. 03. 05 Reference : Foundations of 3D Computer Graphics, Steven J. Gortler Goals Understand OpenGL pipeline Practice basic OpenGL

### GLSL Overview: Creating a Program

1. Create the OpenGL application GLSL Overview: Creating a Program Primarily concerned with drawing Preferred approach uses buffer objects All drawing done in terms of vertex arrays Programming style differs

### Graphics Hardware. Instructor Stephen J. Guy

Instructor Stephen J. Guy Overview What is a GPU Evolution of GPU GPU Design Modern Features Programmability! Programming Examples Overview What is a GPU Evolution of GPU GPU Design Modern Features Programmability!

### Sung-Eui Yoon ( 윤성의 )

Introduction to Computer Graphics and OpenGL Graphics Hardware Sung-Eui Yoon ( 윤성의 ) Course URL: http://sglab.kaist.ac.kr/~sungeui/etri_cg/ Class Objectives Understand how GPUs have been evolved Understand