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

Size: px
Start display at page:

Download "CS452/552; EE465/505. Texture Mapping in WebGL"

Transcription

1 CS452/552; EE465/505 Texture Mapping in WebGL

2 Outline! Texture Mapping in WebGL Read: Angel, Chapter 7, LearningWebGL lesson 5: Lab3 due: Monday, 3/2 Project#1 posted, due Tues, Mar. 10 th Midterm Exam Tuesday, March 10, Snell 213, 7:00 pm outline of topics is posted

3 Midterm Exam! Tuesday, March 10, 7:00 pm, Snell 213 closed book, open notes may refer to your own work (programs, etc.)! Topics are posted on the course webpage 3

4 Recap: Fragment Shaders! A shader that s executed for each potential pixel fragments still need to pass several tests before making it to the framebuffer! There are lots of effects we can do in fragment shaders Per-fragment lighting Bump Mapping Environment (Reflection) Maps

5 Recap: Per Fragment Lighting! Compute lighting using same model as for per vertex lighting but for each fragment! Normals and other attributes are sent to vertex shader and output to rasterizer! Rasterizer interpolates and provides inputs for fragment shader

6 Local Illumination

7 Global Illumination

8 Ray Tracing

9 Rasterization vs. Ray Tracing

10 Examples rotating cube with buttons cube with lighting texture mapped cube

11 Recap: Texture Mapping y z x geometry screen coordinates of the image are t s image s, t, r and q A texture map for a twodimensional geometric object in (x, y, z ) world coordinates maps a point in (s, t ) space to a corresponding point on the screen.

12 Recap: Applying Textures! Three steps to applying a texture 1. specify the texture read or generate image assign to texture enable texturing 2. assign texture coordinates to vertices 3. specify texture parameters wrapping, filtering

13 Texture and Image File! Textures can be any size (up to an implementation maximum size), and aspect ratio! Note: an image file is different from a texture!! OpenGL has no capabilities for reading or writing image files (need external library)! The only data that OpenGL/WebGL requires from an image file is the image s width, height, number of color components, and the pixel data

14 Texture Mapping and the WebGL Pipeline! Images and geometry flow through separate pipelines that join during fragment processing complex textures do not affect geometric complexity vertices geometry pipeline fragmentprocessor image pixel pipeline Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley

15 Specifying a Texture Image! Define a texture image from an array of texels (texture elements) in CPU memory! Use an image in a standard format such as JPEG Scanned image Generate by application code! WebGL supports only 2 dimensional texture maps no need to enable as in desktop OpenGL desktop OpenGL supports 1-4 dimensional texture maps Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015

16 Define Image as a Texture glteximage2d( target, level, components, w, h, border, format, type, texels ); target: type of texture, e.g. GL_TEXTURE_2D l e v e l : used for mipmapping (discussed later) c o m p o n e n t s : elements per texel w, h : width and height of texels in pixels b o r d e r : used for smoothing (discussed later) f o r m a t a n d t y p e : describe texels t e x e l s : pointer to texel array glteximage2d(gl_texture_2d, 0, 3, 512, 512, 0, GL_RGB, GL_UNSIGNED_BYTE, my_texels); Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015

17 A Checkerboard Image var image1 = new Uint8Array(4*texSize*texSize); for ( var i = 0; i < texsize; i++ ) { for ( var j = 0; j <texsize; j++ ) { var patchx = Math.floor(i/(texSize/numChecks)); var patchy = Math.floor(j/(texSize/numChecks)); if(patchx%2 ^ patchy%2) c = 255; else c = 0; //c = 255*(((i & 0x8) == 0) ^ ((j & 0x8) == 0)) image1[4*i*texsize+4*j] = c; image1[4*i*texsize+4*j+1] = c; image1[4*i*texsize+4*j+2] = c; image1[4*i*texsize+4*j+3] = 255; } } Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015

18 Using a GIF image // specify image in JS file var image = new Image(); image.onload = function() { configuretexture( image ); } image.src = "SA2011_black.gif // or specify image in HTML file with <img> tag // <img id = "teximage" src = "SA2011_black.gif"></img> var image = document.getelementbyid("teximage ) window.onload = configuretexture( image ); Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015

19 Mapping a Texture! Based on parametric texture coordinates! Specify as a 2D vertex attribute t 0, 1 Texture Space a 1, 1 Object Space (s, t) = (0.2, 0.8) A b 0, 0 1, 0 c s (0.4, 0.2) B C (0.8, 0.4) Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015

20 Cube Example var texcoord = [ vec2(0, 0), vec2(0, 1), vec2(1, 1), vec2(1, 0) ]; function quad(a, b, c, d) { pointsarray.push(vertices[a]); colorsarray.push(vertexcolors[a]); texcoordsarray.push(texcoord[0]); pointsarray.push(vertices[b]); colorsarray.push(vertexcolors[a]); texcoordsarray.push(texcoord[1]); // etc Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015

21 Interpolation! WebGL uses interpolation to find proper texels from specified texture coordinates Can be distortions good selection of tex coordinates poor selection of tex coordinates texture stretched over trapezoid showing effects of bilinear interpolation Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015

22 Using Texture Objects 1. specify textures in texture objects 2. set texture filter 3. set texture function 4. set texture wrap mode 5. set optional perspective correction hint 6. bind texture object 7. enable texturing 8. supply texture coordinates for vertex coordinates can also be generated Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015

23 Texture Parameters! WebGL has a variety of parameters that determine how texture is applied Wrapping parameters determine what happens if s and t are outside the (0,1) range Filter modes allow us to use area averaging instead of point samples Mipmapping allows us to use textures at multiple resolutions Environment parameters determine how texture mapping interacts with shading Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015

24 Wrapping Mode! Clamping: if s,t > 1 use 1, if s,t <0 use 0! Wrapping: use s,t modulo 1 gl.texparameteri(gl.texture_2d, gl.texture_wrap_s, gl.clamp ) gl.texparameteri( gl.texture_2d, gl.texture_wrap_t, gl.repeat ) t texture s gl.repeat wrapping gl.clamp wrapping Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015

25 Filtering

26 Magnification and Minification More than one texel can cover a pixel (minification) or more than one pixel can cover a texel (magnification) Can use point sampling (nearest texel) or linear filtering ( 2 x 2 filter) to obtain texture values Texture Magnification Polygon Texture Minification Polygon Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015

27 Texture Mapping, revisited

28 Texture Interpolation

29 Filter Modes Modes determined by gl.texparameteri( target, type, mode ) gl.texparameteri(gl.texture_2d, gl.texure_mag_filter, gl.nearest); gl.texparameteri(gl.texture_2d, gl.texure_min_filter, gl.linear); Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015

30 Mipmapped Textures! Mipmapping allows for prefiltered texture maps of decreasing resolutions! Lessens interpolation errors for smaller textured objects! Declare mipmap level during texture definition gl.teximage2d(gl.texture_*d, level, ) Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015

31 Mipmapping

32 Mipmapping

33 Example point sampling linear filtering mipmapped point sampling mipmapped linear filtering Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015

34 Applying Textures! Texture can be applied in many ways texture fully determines color modulated with a computed color blended with and environmental color! Fixed function pipeline has a function gltexenv to set mode deprecated can get all desired functionality via fragment shader! Can also use multiple texture units Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015

35 Fragment Shader & Samplers! Textures are applied during fragments shading by a sampler! Samplers return a texture color from a texture object varying vec4 color; //color from rasterizer varying vec2 texcoord; //texture coordinate from rasterizer uniform sampler2d texture; //texture object from application void main() { gl_fragcolor = color * texture2d( texture, texcoord ); } Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015

36 Vertex Shader! Usually vertex shader will output texture coordinates to be rasterized! Must do all other standard tasks too Compute vertex position Compute vertex color if needed attribute vec4 vposition; //vertex position in object coordinates attribute vec4 vcolor; //vertex color from application attribute vec2 vtexcoord; //texture coordinate from application varying vec4 color; //output color to be interpolated varying vec2 texcoord; //output tex coordinate to be interpolated Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015

37 Example: rotating cube! Angel, Chapter 4! source files: cubev.html cubev.js! COMMON webgl-utils.js initshaders.js MV.js! mouse controls the axis of rotation; left-x, middle-y, right-z! now want to add a texture!

38 Examples: Angel, Chapter 7 texturecube1 texturecubev2 texture map of a gif image map a checkerboard texture

39 Examples: Angel, Chapter 7 texturecubev3 texturecubev4 texture map onto cube using two texture images multiplied together in fragment shader texture map with two texture units: first applies a checkerboard, second a sinusoid

40 Examples: Angel, Chapter 7 texturesquare demo of aliasing with different texture parameters

41 Applying Textures II specify textures in texture objects set texture filter set texture function set texture wrap mode set optional perspective correction hint bind texture object enable texturing supply texture coordinates for vertex coordinates can also be generated

42 Applying the Texture to the Shader // Declare the sampler uniform sampler2d diffuse_mat; // Apply the material color vec3 diffuse = intensity * texture(diffuse_mat, coord).rgb;

43 Applying Texture to Cube // add texture cordinate attribute to quad function quad( int a, int b, int c, int d ) { quad_colors[index] = vertex_colors[a]; points[index] = vertex_positions[a]; tex_coords[index] = vec2( 0.0, 0.0 ); Index++; // rest of vertices }

44 Creating a Texture Image // Create a checkerboard pattern for ( int i = 0; i < 64; i++ ) { for ( int j = 0; j < 64; j++ ) { GLubyte c; c = (((i & 0x8) == 0)^((j & 0x8) == 0))* 255; } image[i][j][0] = c; image[i][j][1] = c; image[i][j][2] = c; image2[i][j][0] = c; image2[i][j][1] = 0; image2[i][j][2] = c; }

45 Texture Units! A piece of hardware that has access to a texture image! Select that unit with gl.activetexture(gl.texture0);! For multiple layers/effects, could activate gl.texture1, gl.texture2, Jeff Chastine

46 Texture Object (texturecube1.js) function configuretexture( image ) { var texture = gl.createtexture(); gl.bindtexture( gl.texture_2d, texture ); gl.pixelstorei(gl.unpack_flip_y_webgl, true); gl.teximage2d( gl.texture_2d, 0, gl.rgb, gl.rgb, gl.unsigned_byte, image ); gl.generatemipmap( gl.texture_2d ); gl.texparameteri( gl.texture_2d, gl.texture_min_filter, gl.nearest_mipmap_linear ); gl.texparameteri( gl.texture_2d, gl.texture_mag_filter, gl.nearest ); gl.activetexture(gl.texture0); gl.uniform1i(gl.getuniformlocation(program, "texture"), 0); } Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015

47 Texture Object create a texture object function configuretexture( image ) { var texture = gl.createtexture(); gl.bindtexture( gl.texture_2d, texture ); gl.pixelstorei(gl.unpack_flip_y_webgl, true); gl.teximage2d( gl.texture_2d, 0, gl.rgb, gl.rgb, gl.unsigned_byte, image ); gl.generatemipmap( gl.texture_2d ); gl.texparameteri( gl.texture_2d, gl.texture_min_filter, gl.nearest_mipmap_linear ); gl.texparameteri( gl.texture_2d, gl.texture_mag_filter, gl.nearest ); gl.activetexture(gl.texture0); gl.uniform1i(gl.getuniformlocation(program, "texture"), 0); } Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015

48 Texture Object bind the texture object function configuretexture( image ) { to the target var texture = gl.createtexture(); gl.bindtexture( gl.texture_2d, texture ); gl.pixelstorei(gl.unpack_flip_y_webgl, true); gl.teximage2d( gl.texture_2d, 0, gl.rgb, gl.rgb, gl.unsigned_byte, image ); gl.generatemipmap( gl.texture_2d ); gl.texparameteri( gl.texture_2d, gl.texture_min_filter, gl.nearest_mipmap_linear ); gl.texparameteri( gl.texture_2d, gl.texture_mag_filter, gl.nearest ); gl.activetexture(gl.texture0); gl.uniform1i(gl.getuniformlocation(program, "texture"), 0); } Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015

49 Texture Object flip the image s y-axis function configuretexture( image ) { (why?) var texture = gl.createtexture(); gl.bindtexture( gl.texture_2d, texture ); gl.pixelstorei(gl.unpack_flip_y_webgl, true); gl.teximage2d( gl.texture_2d, 0, gl.rgb, gl.rgb, gl.unsigned_byte, image ); gl.generatemipmap( gl.texture_2d ); gl.texparameteri( gl.texture_2d, gl.texture_min_filter, gl.nearest_mipmap_linear ); gl.texparameteri( gl.texture_2d, gl.texture_mag_filter, gl.nearest ); gl.activetexture(gl.texture0); gl.uniform1i(gl.getuniformlocation(program, "texture"), 0); } Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015

50 Texture Object function configuretexture( image ) { var texture = gl.createtexture(); set the texture image gl.bindtexture( gl.texture_2d, texture ); gl.pixelstorei(gl.unpack_flip_y_webgl, true); gl.teximage2d( gl.texture_2d, 0, gl.rgb, gl.rgb, gl.unsigned_byte, image ); gl.generatemipmap( gl.texture_2d ); gl.texparameteri( gl.texture_2d, gl.texture_min_filter, gl.nearest_mipmap_linear ); gl.texparameteri( gl.texture_2d, gl.texture_mag_filter, gl.nearest ); gl.activetexture(gl.texture0); gl.uniform1i(gl.getuniformlocation(program, "texture"), 0); } Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015

51 Texture Object function configuretexture( image ) { var texture = gl.createtexture(); generate the mipmaps gl.bindtexture( gl.texture_2d, texture ); gl.pixelstorei(gl.unpack_flip_y_webgl, true); gl.teximage2d( gl.texture_2d, 0, gl.rgb, gl.rgb, gl.unsigned_byte, image ); gl.generatemipmap( gl.texture_2d ); gl.texparameteri( gl.texture_2d, gl.texture_min_filter, gl.nearest_mipmap_linear ); gl.texparameteri( gl.texture_2d, gl.texture_mag_filter, gl.nearest ); gl.activetexture(gl.texture0); gl.uniform1i(gl.getuniformlocation(program, "texture"), 0); } Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015

52 Texture Object function configuretexture( image ) { set the texture parameters var texture = gl.createtexture(); gl.bindtexture( gl.texture_2d, texture ); gl.pixelstorei(gl.unpack_flip_y_webgl, true); gl.teximage2d( gl.texture_2d, 0, gl.rgb, gl.rgb, gl.unsigned_byte, image ); gl.generatemipmap( gl.texture_2d ); gl.texparameteri( gl.texture_2d, gl.texture_min_filter, gl.nearest_mipmap_linear ); gl.texparameteri( gl.texture_2d, gl.texture_mag_filter, gl.nearest ); gl.activetexture(gl.texture0); gl.uniform1i(gl.getuniformlocation(program, "texture"), 0); } Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015

53 Texture Object function configuretexture( image ) { var texture = gl.createtexture(); gl.bindtexture( gl.texture_2d, texture ); gl.pixelstorei(gl.unpack_flip_y_webgl, true); gl.teximage2d( gl.texture_2d, 0, gl.rgb, gl.rgb, gl.unsigned_byte, image ); gl.generatemipmap( gl.texture_2d ); gl.texparameteri( gl.texture_2d, gl.texture_min_filter, gl.nearest_mipmap_linear ); gl.texparameteri( gl.texture_2d, gl.texture_mag_filter, gl.nearest ); gl.activetexture(gl.texture0); enable texture unit 0 gl.uniform1i(gl.getuniformlocation(program, "texture"), 0); } Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015

54 Texture Object function configuretexture( image ) { var texture = gl.createtexture(); gl.bindtexture( gl.texture_2d, texture ); gl.pixelstorei(gl.unpack_flip_y_webgl, true); gl.teximage2d( gl.texture_2d, 0, gl.rgb, gl.rgb, gl.unsigned_byte, image ); gl.generatemipmap( gl.texture_2d ); gl.texparameteri( gl.texture_2d, gl.texture_min_filter, gl.nearest_mipmap_linear ); gl.texparameteri( gl.texture_2d, gl.texture_mag_filter, gl.nearest ); gl.activetexture(gl.texture0); gl.uniform1i(gl.getuniformlocation(program, "texture"), 0); } set the texture unit 0 to the sampler Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015

55 Linking with Shaders var vtexcoord = gl.getattriblocation( program, "vtexcoord" ); gl.enablevertexattribarray( vtexcoord ); gl.vertexattribpointer( vtexcoord, 2, gl.float, false, 0, 0); // Set the value of the fragment shader texture sampler variable // ("texture") to the the appropriate texture unit. In this case, // zero for GL_TEXTURE0 which was previously set by calling // gl.activetexture(). gl.uniform1i( glgetuniformlocation(program, "texture"), 0 ); Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015

56 Textures do not have to represent color! Specularity (patches of shininess)! Transparency (patches of clearness)! Normal vector changes (bump maps)! Reflected light (environment maps)! Shadows! Change in surface height (displacement maps)

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

Buffers. Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015 Buffers 1 Objectives Introduce additional WebGL buffers Reading and writing buffers Buffers and Images 2 Buffer Define a buffer by its spatial resolution (n x m) and its depth (or precision) k, the number

More information

CISC 3620 Lecture 7 Lighting and shading. Topics: Exam results Buffers Texture mapping intro Texture mapping basics WebGL texture mapping

CISC 3620 Lecture 7 Lighting and shading. Topics: Exam results Buffers Texture mapping intro Texture mapping basics WebGL texture mapping CISC 3620 Lecture 7 Lighting and shading Topics: Exam results Buffers Texture mapping intro Texture mapping basics WebGL texture mapping Exam results Grade distribution 12 Min: 26 10 Mean: 74 8 Median:

More information

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

More information

Lecture 19: OpenGL Texture Mapping. CITS3003 Graphics & Animation

Lecture 19: OpenGL Texture Mapping. CITS3003 Graphics & Animation Lecture 19: OpenGL Texture Mapping CITS3003 Graphics & Animation E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012 Objectives Introduce the OpenGL texture functions and options

More information

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

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

More information

CS212. OpenGL Texture Mapping and Related

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

More information

CS 432 Interactive Computer Graphics

CS 432 Interactive Computer Graphics CS 432 Interactive Computer Graphics Lecture 7 Part 2 Texture Mapping in OpenGL Matt Burlick - Drexel University - CS 432 1 Topics Texture Mapping in OpenGL Matt Burlick - Drexel University - CS 432 2

More information

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

Fog example. Fog is atmospheric effect. Better realism, helps determine distances Fog example Fog is atmospheric effect Better realism, helps determine distances Fog Fog was part of OpenGL fixed function pipeline Programming fixed function fog Parameters: Choose fog color, fog model

More information

Introduction to Computer Graphics with WebGL

Introduction to Computer Graphics with WebGL 1 Introduction to Computer Graphics with WebGL Ed Angel Lighting in WebGL WebGL lighting Application must specify - Normals - Material properties - Lights State-based shading functions have been deprecated

More information

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

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

More information

INF3320 Computer Graphics and Discrete Geometry

INF3320 Computer Graphics and Discrete Geometry INF3320 Computer Graphics and Discrete Geometry Texturing Christopher Dyken Martin Reimers 06.10.2010 Page 1 Texturing Linear interpolation Real Time Rendering: Chapter 5: Visual Appearance Chapter 6:

More information

CS4621/5621 Fall Basics of OpenGL/GLSL Textures Basics

CS4621/5621 Fall Basics of OpenGL/GLSL Textures Basics 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

More information

Objectives. Texture Mapping and NURBS Week 7. The Limits of Geometric Modeling. Modeling an Orange. Three Types of Mapping. Modeling an Orange (2)

Objectives. Texture Mapping and NURBS Week 7. The Limits of Geometric Modeling. Modeling an Orange. Three Types of Mapping. Modeling an Orange (2) CS 480/680 INTERACTIVE COMPUTER GRAPHICS Texture Mapping and NURBS Week 7 David Breen Department of Computer Science Drexel University Objectives Introduce Mapping Methods Texture Mapping Environmental

More information

Introduction to Computer Graphics with WebGL

Introduction to Computer Graphics with WebGL Introduction to Computer Graphics with WebGL Ed Angel The Mandelbrot Set Fractals Fractal (fractional geometry) objects generate some of the most complex and beautiful graphics - The mathematics describing

More information

Steiner- Wallner- Podaras

Steiner- Wallner- Podaras Texturing 2 3 Some words on textures Texturing = mapping 2D image to a model (*You will hear more on other texturing- methods in the course.) Not a trivial task! 4 Texturing how it works 5 UV coordinates

More information

Lecture 22 Sections 8.8, 8.9, Wed, Oct 28, 2009

Lecture 22 Sections 8.8, 8.9, Wed, Oct 28, 2009 s The s Lecture 22 Sections 8.8, 8.9, 8.10 Hampden-Sydney College Wed, Oct 28, 2009 Outline s The 1 2 3 4 5 The 6 7 8 Outline s The 1 2 3 4 5 The 6 7 8 Creating Images s The To create a texture image internally,

More information

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

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

More information

CS335 Graphics and Multimedia. Slides adopted from OpenGL Tutorial

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

More information

CT5510: Computer Graphics. Texture Mapping

CT5510: Computer Graphics. Texture Mapping CT5510: Computer Graphics Texture Mapping BOCHANG MOON Texture Mapping Simulate spatially varying surface properties Phong illumination model is coupled with a material (e.g., color) Add small polygons

More information

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

More information

Computer Graphics. Three-Dimensional Graphics VI. Guoying Zhao 1 / 73

Computer Graphics. Three-Dimensional Graphics VI. Guoying Zhao 1 / 73 Computer Graphics Three-Dimensional Graphics VI Guoying Zhao 1 / 73 Texture mapping Guoying Zhao 2 / 73 Objectives Introduce Mapping Methods Texture Mapping Environment Mapping Bump Mapping Consider basic

More information

GRAFIKA KOMPUTER. ~ M. Ali Fauzi

GRAFIKA KOMPUTER. ~ M. Ali Fauzi GRAFIKA KOMPUTER ~ M. Ali Fauzi Texture Mapping WHY TEXTURE? Imagine a Chess Floor Or a Brick Wall How to Draw? If you want to draw a chess floor, each tile must be drawn as a separate quad. A large flat

More information

INF3320 Computer Graphics and Discrete Geometry

INF3320 Computer Graphics and Discrete Geometry INF3320 Computer Graphics and Discrete Geometry Texturing Christopher Dyken Martin Reimers 06.10.2010 Page 1 Texturing Linear interpolation Real Time Rendering: Chapter 5: Visual Appearance Chapter 6:

More information

TSBK 07! Computer Graphics! Ingemar Ragnemalm, ISY

TSBK 07! Computer Graphics! Ingemar Ragnemalm, ISY 1(61) Information Coding / Computer Graphics, ISY, LiTH TSBK 07 Computer Graphics Ingemar Ragnemalm, ISY 1(61) Lecture 6 Texture mapping Skyboxes Environment mapping Bump mapping 2(61)2(61) Texture mapping

More information

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

CSE 167: Introduction to Computer Graphics Lecture #7: Textures. Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2018 CSE 167: Introduction to Computer Graphics Lecture #7: Textures Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2018 Announcements Project 2 due this Friday at 2pm Grading in

More information

Texturing. Slides done bytomas Akenine-Möller and Ulf Assarsson Department of Computer Engineering Chalmers University of Technology

Texturing. Slides done bytomas Akenine-Möller and Ulf Assarsson Department of Computer Engineering Chalmers University of Technology Texturing Slides done bytomas Akenine-Möller and Ulf Assarsson Department of Computer Engineering Chalmers University of Technology 1 Texturing: Glue n-dimensional images onto geometrical objects l Purpose:

More information

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

More information

Texture Mapping. Mike Bailey.

Texture Mapping. Mike Bailey. Texture Mapping 1 Mike Bailey mjb@cs.oregonstate.edu This work is licensed under a Creative Commons Attribution-NonCommercial- NoDerivatives 4.0 International License TextureMapping.pptx The Basic Idea

More information

Discussion 3. PPM loading Texture rendering in OpenGL

Discussion 3. PPM loading Texture rendering in OpenGL Discussion 3 PPM loading Texture rendering in OpenGL PPM Loading - Portable PixMap format 1. 2. Code for loadppm(): http://ivl.calit2.net/wiki/images/0/09/loadppm.txt ppm file format: Header: 1. P6: byte

More information

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 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,

More information

Lecture 07: Buffers and Textures

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

More information

Today. Texture mapping in OpenGL. Texture mapping. Basic shaders for texturing. Today. Computergrafik

Today. Texture mapping in OpenGL. Texture mapping. Basic shaders for texturing. Today. Computergrafik Computergrafik Today Basic shader for texture mapping Texture coordinate assignment Antialiasing Fancy textures Matthias Zwicker Universität Bern Herbst 2009 Texture mapping Glue textures (images) onto

More information

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

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

More information

SUMMARY. CS380: Introduction to Computer Graphics Texture Mapping Chapter 15. Min H. Kim KAIST School of Computing 18/05/03.

SUMMARY. CS380: Introduction to Computer Graphics Texture Mapping Chapter 15. Min H. Kim KAIST School of Computing 18/05/03. CS380: Introduction to Computer Graphics Texture Mapping Chapter 15 Min H. Kim KAIST School of Computing Materials SUMMARY 2 1 Light blob from PVC plastic Recall: Given any vector w (not necessarily of

More information

Computer Graphics Texture Mapping

Computer Graphics Texture Mapping ! Computer Graphics 2013! 13. Texture Mapping Hongxin Zhang State Key Lab of CAD&CG, Zhejiang University 2013-10-28 About the final examination - Next Friday (Nov. 8th) Night, - 7:30PM - 9:00PM (one and

More information

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

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,

More information

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

CSE 167: Introduction to Computer Graphics Lecture #8: Textures. Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2017 CSE 167: Introduction to Computer Graphics Lecture #8: Textures Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2017 Announcements Project 2 is due this Friday at 2pm Next Tuesday

More information

Computer Graphics. Bing-Yu Chen National Taiwan University

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

More information

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

-=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

More information

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

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

More information

Magnification and Minification

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

More information

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

More information

Computergrafik. Matthias Zwicker Universität Bern Herbst 2016

Computergrafik. Matthias Zwicker Universität Bern Herbst 2016 Computergrafik Matthias Zwicker Universität Bern Herbst 2016 2 Today Basic shader for texture mapping Texture coordinate assignment Antialiasing Fancy textures 3 Texture mapping Glue textures (images)

More information

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: Introduction to Computer Graphics Lecture #6: Lights. Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2014 CSE 167: Introduction to Computer Graphics Lecture #6: Lights Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2014 Announcements Project 2 due Friday, Oct. 24 th Midterm Exam

More information

三維繪圖程式設計 3D Graphics Programming Design 第七章基礎材質張貼技術嘉大資工系盧天麒

三維繪圖程式設計 3D Graphics Programming Design 第七章基礎材質張貼技術嘉大資工系盧天麒 三維繪圖程式設計 3D Graphics Programming Design 第七章基礎材質張貼技術嘉大資工系盧天麒 1 In this chapter, you will learn The basics of texture mapping Texture coordinates Texture objects and texture binding Texture specification

More information

We assume that you are familiar with the following:

We assume that you are familiar with the following: We will use WebGL 1.0. WebGL 2.0 is now being supported by most browsers but requires a better GPU so may not run on older computers or on most cell phones and tablets. See http://webglstats.com/. We will

More information

Texture Mapping CSCI 4229/5229 Computer Graphics Fall 2016

Texture Mapping CSCI 4229/5229 Computer Graphics Fall 2016 Texture Mapping CSCI 4229/5229 Computer Graphics Fall 2016 What are texture maps? Bitmap images used to assign fine texture to displayed surfaces Used to make surfaces appear more realistic Must move with

More information

Stored Texture Shaders

Stored Texture Shaders 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

More information

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

Texturing. Slides done by Tomas Akenine-Möller and Ulf Assarsson Department of Computer Engineering Chalmers University of Technology Texturing Slides done by Tomas Akenine-Möller and Ulf Assarsson Department of Computer Engineering Chalmers University of Technology 1 Texturing: Glue n-dimensional images onto geometrical objects l Purpose:

More information

Computergraphics Exercise 15/ Shading & Texturing

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

More information

Textures. Texture Mapping. Bitmap Textures. Basic Texture Techniques

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)

More information

CS179: GPU Programming

CS179: GPU Programming CS179: GPU Programming Lecture 4: Textures Original Slides by Luke Durant, Russel McClellan, Tamas Szalay Today Recap Textures What are textures? Traditional uses Alternative uses Recap Our data so far:

More information

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

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

More information

Imaging and Raster Primitives

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

More information

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

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

More information

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. 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

More information

Applying Textures. Lecture 27. Robb T. Koether. Hampden-Sydney College. Fri, Nov 3, 2017

Applying Textures. Lecture 27. Robb T. Koether. Hampden-Sydney College. Fri, Nov 3, 2017 Applying Textures Lecture 27 Robb T. Koether Hampden-Sydney College Fri, Nov 3, 2017 Robb T. Koether (Hampden-Sydney College) Applying Textures Fri, Nov 3, 2017 1 / 24 Outline 1 Applying Textures 2 Photographs

More information

Grafica Computazionale

Grafica Computazionale Grafica Computazionale lezione36 Informatica e Automazione, "Roma Tre" June 3, 2010 Grafica Computazionale: Lezione 33 Textures Introduction Steps in Texture Mapping A Sample Program Texturing algorithms

More information

Lighting and Texturing

Lighting and Texturing Lighting and Texturing Michael Tao Michael Tao Lighting and Texturing 1 / 1 Fixed Function OpenGL Lighting Need to enable lighting Need to configure lights Need to configure triangle material properties

More information

Most device that are used to produce images are. dots (pixels) to display the image. This includes CRT monitors, LCDs, laser and dot-matrix

Most device that are used to produce images are. dots (pixels) to display the image. This includes CRT monitors, LCDs, laser and dot-matrix Scan Conversion of Lines Raster devices Most device that are used to produce images are raster devices, that is, use rectangular arrays of dots (pixels) to display the image. This includes CRT monitors,

More information

Texture Mapping and Sampling

Texture Mapping and Sampling Texture Mapping and Sampling CPSC 314 Wolfgang Heidrich The Rendering Pipeline Geometry Processing Geometry Database Model/View Transform. Lighting Perspective Transform. Clipping Scan Conversion Depth

More information

OUTLINE. Implementing Texturing What Can Go Wrong and How to Fix It Mipmapping Filtering Perspective Correction

OUTLINE. Implementing Texturing What Can Go Wrong and How to Fix It Mipmapping Filtering Perspective Correction TEXTURE MAPPING 1 OUTLINE Implementing Texturing What Can Go Wrong and How to Fix It Mipmapping Filtering Perspective Correction 2 BASIC STRAGEGY Three steps to applying a texture 1. specify the texture

More information

Computer Graphics Texture Mapping

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 - 请按照规定上传到指定目录, 便于管理和检查 - 今日实验签到

More information

We will use WebGL 1.0. WebGL 2.0 is now being supported by most browsers but requires a better GPU so may not run on older computers or on most cell

We will use WebGL 1.0. WebGL 2.0 is now being supported by most browsers but requires a better GPU so may not run on older computers or on most cell We will use WebGL 1.0. WebGL 2.0 is now being supported by most browsers but requires a better GPU so may not run on older computers or on most cell phones and tablets. See http://webglstats.com/. We will

More information

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

CS452/552; EE465/505. Clipping & Scan Conversion CS452/552; EE465/505 Clipping & Scan Conversion 3-31 15 Outline! From Geometry to Pixels: Overview Clipping (continued) Scan conversion Read: Angel, Chapter 8, 8.1-8.9 Project#1 due: this week Lab4 due:

More information

Department of Computer Sciences Graphics Spring 2013 (Lecture 19) Bump Maps

Department of Computer Sciences Graphics Spring 2013 (Lecture 19) Bump Maps Bump Maps The technique of bump mapping varies the apparent shape of the surface by perturbing the normal vectors as the surface is rendered; the colors that are generated by shading then show a variation

More information

Shading/Texturing. Dr. Scott Schaefer

Shading/Texturing. Dr. Scott Schaefer Shading/Texturing Dr. Scott Schaefer Problem / Problem / Problem 4/ Problem / Problem / Shading Algorithms Flat Shading Gouraud Shading Phong Shading / Flat Shading Apply same color across entire polygon

More information

Texture mapping. Computer Graphics CSE 167 Lecture 9

Texture mapping. Computer Graphics CSE 167 Lecture 9 Texture mapping Computer Graphics CSE 167 Lecture 9 CSE 167: Computer Graphics Texture Mapping Overview Interpolation Wrapping Texture coordinates Anti aliasing Mipmaps Other mappings Including bump mapping

More information

CS452/552; EE465/505. Image Formation

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

More information

Lecture 5 3D graphics part 3

Lecture 5 3D graphics part 3 Lecture 5 3D graphics part 3 Shading; applying lighting Surface detail: Mappings Texture mapping Light mapping Bump mapping Surface detail Shading: takes away the surface detail of the polygons Texture

More information

Practical Texturing (WebGL) CS559 Fall 2016 Lecture 20 November 7th 2016

Practical Texturing (WebGL) CS559 Fall 2016 Lecture 20 November 7th 2016 Practical Texturing (WebGL) CS559 Fall 2016 Lecture 20 November 7th 2016 In brief Starting with a simple model In brief Caveat : Issues with sampling & aliasing associate texture coordinates with primitives

More information

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

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

More information

CS 130 Final. Fall 2015

CS 130 Final. Fall 2015 CS 130 Final Fall 2015 Name Student ID Signature You may not ask any questions during the test. If you believe that there is something wrong with a question, write down what you think the question is trying

More information

CS452/552; EE465/505. Shadow Mapping in WebGL

CS452/552; EE465/505. Shadow Mapping in WebGL CS452/552; EE465/505 Shadow Mapping in WebGL 4-09 15 Outline! Shadow Mapping in WebGL Switching Shaders Framebuffer Objects (FBO) Read: Angel, Chapter 7: 7.12 Framebuffer Objects WebGL Programming Guide:

More information

CSE 167: Lecture 11: Textures 2. Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2011

CSE 167: Lecture 11: Textures 2. Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2011 CSE 167: Introduction to Computer Graphics Lecture 11: Textures 2 Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2011 Announcements Homework assignment #5 due Friday, Nov 4,

More information

CS452/552; EE465/505. Intro to Lighting

CS452/552; EE465/505. Intro to Lighting CS452/552; EE465/505 Intro to Lighting 2-10 15 Outline! Projection Normalization! Introduction to Lighting (and Shading) Read: Angel Chapter 5., sections 5.4-5.7 Parallel Projections Chapter 6, sections

More information

Mipmaps. Lecture 23 Subsection Fri, Oct 30, Hampden-Sydney College. Mipmaps. Robb T. Koether. Discrete Sampling.

Mipmaps. Lecture 23 Subsection Fri, Oct 30, Hampden-Sydney College. Mipmaps. Robb T. Koether. Discrete Sampling. Lecture 23 Subsection 8.8.2 Hampden-Sydney College Fri, Oct 30, 2009 Outline 1 2 3 4 5 dumay.info Outline 1 2 3 4 5 dumay.info Suppose we are drawing a 2-dimensional black-and-white checkerboard pattern.

More information

Overview. By end of the week:

Overview. By end of the week: Overview By end of the week: - Know the basics of git - Make sure we can all compile and run a C++/ OpenGL program - Understand the OpenGL rendering pipeline - Understand how matrices are used for geometric

More information

ก ก ก.

ก ก ก. 418382 ก ก ก ก 5 pramook@gmail.com TEXTURE MAPPING Textures Texture Object An OpenGL data type that keeps textures resident in memory and provides identifiers

More information

CS GPU and GPGPU Programming Lecture 11: GPU Texturing 1. Markus Hadwiger, KAUST

CS GPU and GPGPU Programming Lecture 11: GPU Texturing 1. Markus Hadwiger, KAUST CS 380 - GPU and GPGPU Programming Lecture 11: GPU Texturing 1 Markus Hadwiger, KAUST Reading Assignment #6 (until Mar. 9) Read (required): Programming Massively Parallel Processors book, Chapter 4 (CUDA

More information

Computer Graphics (CS 543) Lecture 8c: Environment Mapping (Reflections and Refractions)

Computer Graphics (CS 543) Lecture 8c: Environment Mapping (Reflections and Refractions) Computer Graphics (CS 543) Lecture 8c: Environment Mapping (Reflections and Refractions) Prof Emmanuel Agu (Adapted from slides by Ed Angel) Computer Science Dept. Worcester Polytechnic Institute (WPI)

More information

Texture and other Mappings

Texture and other Mappings Texture and other Mappings Texture Mapping Bump Mapping Displacement Mapping Environment Mapping Example: Checkerboard Particularly severe problems in regular textures 1 The Beginnings of a Solution: Mipmapping

More information

CS452/552; EE465/505. Lighting & Shading

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

More information

CS452/552; EE465/505. Review & Examples

CS452/552; EE465/505. Review & Examples CS452/552; EE465/505 Review & Examples 2-05 15 Outline Review and Examples:! Shaders, Buffers & Binding! Example: Draw 3 Triangles Vertex lists; gl.drawarrays( ) Edge lists: gl.drawelements( )! Example:

More information

Methodology for Lecture

Methodology for Lecture Basic Geometry Setup Methodology for Lecture Make mytest1 more ambitious Sequence of steps Demo Review of Last Demo Changed floor to all white, added global for teapot and teapotloc, moved geometry to

More information

CS GPU and GPGPU Programming Lecture 12: GPU Texturing 1. Markus Hadwiger, KAUST

CS GPU and GPGPU Programming Lecture 12: GPU Texturing 1. Markus Hadwiger, KAUST CS 380 - GPU and GPGPU Programming Lecture 12: GPU Texturing 1 Markus Hadwiger, KAUST Reading Assignment #6 (until Mar. 17) Read (required): Programming Massively Parallel Processors book, Chapter 4 (CUDA

More information

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

More information

Announcements. Written Assignment 2 is out see the web page. Computer Graphics

Announcements. Written Assignment 2 is out see the web page. Computer Graphics Announcements Written Assignment 2 is out see the web page 1 Texture and other Mappings Shadows Texture Mapping Bump Mapping Displacement Mapping Environment Mapping Watt Chapter 8 COMPUTER GRAPHICS 15-462

More information

Lecture 5. Scan Conversion Textures hw2

Lecture 5. Scan Conversion Textures hw2 Lecture 5 Scan Conversion Textures hw2 Announcements Homework deadlines Mini Project Proposals due June 26th E.T. 06 Vector Graphics Algebraic equations describe shapes. Can render type and large areas

More information

Shading. Flat shading Gouraud shading Phong shading

Shading. Flat shading Gouraud shading Phong shading Shading Flat shading Gouraud shading Phong shading Flat Shading and Perception Lateral inhibition: exaggerates perceived intensity Mach bands: perceived stripes along edges Icosahedron with Sphere Normals

More information

Programming with OpenGL Complete Programs Objectives Build a complete first program

Programming with OpenGL Complete Programs Objectives Build a complete first program Programming with OpenGL Complete Programs Objectives Build a complete first program Introduce shaders Introduce a standard program structure Simple viewing Two-dimensional viewing as a special case of

More information

Texturing Theory. Overview. All it takes is for the rendered image to look right. -Jim Blinn 11/10/2018

Texturing Theory. Overview. All it takes is for the rendered image to look right. -Jim Blinn 11/10/2018 References: Real-Time Rendering 3 rd Edition Chapter 6 Texturing Theory All it takes is for the rendered image to look right. -Jim Blinn Overview Introduction The Texturing Pipeline Example The Projector

More information

CMSC 425: Lecture 12 Texture Mapping Thursday, Mar 14, 2013

CMSC 425: Lecture 12 Texture Mapping Thursday, Mar 14, 2013 CMSC 425: Lecture 12 Texture Mapping Thursday, Mar 14, 2013 Surface Detail: We have discussed the use of lighting as a method of producing more realistic images. This is fine for smooth surfaces of uniform

More information

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

Models and Architectures. Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015 Models and Architectures 1 Objectives Learn the basic design of a graphics system Introduce pipeline architecture Examine software components for an interactive graphics system 2 Image Formation Revisited

More information

Texture Mapping and Special Effects

Texture Mapping and Special Effects Texture Mapping and Special Effects February 23 rd 26 th 2007 MAE 410-574, Virtual Reality Applications and Research Instructor: Govindarajan Srimathveeravalli HW#5 Due March 2 nd Implement the complete

More information

+ = Texturing: Glue n-dimensional images onto geometrical objects. Texturing. Texture magnification. Texture coordinates. Bilinear interpolation

+ = Texturing: Glue n-dimensional images onto geometrical objects. Texturing. Texture magnification. Texture coordinates. Bilinear interpolation Texturing Slides done bytomas Akenine-Möller and Ulf Assarsson Chalmers University of Technology Texturing: Glue n-dimensional images onto geometrical objects Purpose: more realism, and this is a cheap

More information

Shaders. Slide credit to Prof. Zwicker

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)?

More information

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

CS230 : Computer Graphics Lecture 4. Tamar Shinar Computer Science & Engineering UC Riverside CS230 : Computer Graphics Lecture 4 Tamar Shinar Computer Science & Engineering UC Riverside Shadows Shadows for each pixel do compute viewing ray if ( ray hits an object with t in [0, inf] ) then compute

More information

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

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

More information

CS 354R: Computer Game Technology

CS 354R: Computer Game Technology CS 354R: Computer Game Technology Texture and Environment Maps Fall 2018 Texture Mapping Problem: colors, normals, etc. are only specified at vertices How do we add detail between vertices without incurring

More information