1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.

Slides:



Advertisements
Similar presentations
CSC345: Advanced Graphics & Virtual Environments
Advertisements

OpenGL Texture Mapping
OpenGL Texture Mapping Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts University of New Mexico.
1 Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Models and Architectures Ed Angel Professor of Computer Science, Electrical and Computer.
OpenGL Texture Mapping April 16, Angel: Interactive Computer Graphics 3E © Addison-Wesley 2002 Basic Stragegy Three steps to applying a texture.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
Programming with OpenGL Part 2: Complete Programs Ed Angel Professor of Emeritus of Computer Science University of New Mexico.
Fundamentals of Computer Graphics Part 9 Discrete Techniques prof.ing.Václav Skala, CSc. University of West Bohemia Plzeň, Czech Republic ©2002 Prepared.
Texture Mapping. Scope Buffers Buffers Various of graphics image Various of graphics image Texture mapping Texture mapping.
Texture Mapping Course: Computer Graphics Presented by Fan Chen
Computer Graphics Ben-Gurion University of the Negev Fall 2012.
Mapping method Texture Mapping Environmental mapping (sphere mapping) (cube mapping)
An Interactive Introduction to OpenGL Programming Ed Angel
Imaging and Raster Primitives Vicki Shreiner. 2 Jobs Andrew Giles Andrew Giles Chuck Fultz Chuck Fultz SIGGraph - SIGGraph.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
Texture Mapping. 2 Motivation A typical modern graphics card can handle 10s of millions of polygons a second. How many individual blades of grass are.
OpenGL Texture Mapping. 2 Objectives Introduce the OpenGL texture functions and options.
Texture Mapping Angel Angel: Interactive Computer Graphics5E © Addison-Wesley
CS 480/680 Computer Graphics OpenGL Texture Mapping Dr. Frederick C Harris, Jr. Fall 2011.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
CG Summary: OpenGL Shading andTextures Angel, Chapters 5, 7; “Red Book” slides from AW, red book, etc. CSCI 6360/4360.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
1 Building Models Ed Angel Professor Emeritus of Computer Science University of New Mexico Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
OpenGL Graphics Textures. Quiz You didn't see that coming!
Computing & Information Sciences Kansas State University Lecture 12 of 42CIS 636/736: (Introduction to) Computer Graphics CIS 636/736 Computer Graphics.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
1 Graphics CSCI 343, Fall 2015 Lecture 25 Texture Mapping.
Programming with OpenGL Part 2: Complete Programs Ed Angel Professor of Emeritus of Computer Science University of New Mexico.
Programming with OpenGL Part 2: Complete Programs Ed Angel Professor of Emeritus of Computer Science University of New Mexico.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
Texture Mapping. For Further Reading Angel 7 th Ed: ­Chapter 7: 7.3 ~ 7.9 Beginning WebGL: ­Chapter 3 2.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
Viewing and Texture Mapping In OPENGL. VIEWING 1.One or more objects 2.A viewer with a projection surface 3.Projectors that go from the object(s) to.
CS425 © 2003 Ray S. Babcock Pixels and Bitmaps ● OpenGL allows us to work directly with bits and groups of bits, or pixels, which flow down a parallel.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
Texture Mapping CEng 477 Introduction to Computer Graphics.
Introduction to Computer Graphics with WebGL
Madhulika (18010), Assistant Professor, LPU.
OpenGL Texture Mapping
Angel: Interactive Computer Graphics5E © Addison-Wesley 2009
OpenGL Texture Mapping
Introduction to Computer Graphics with WebGL
Introduction to Computer Graphics with WebGL
Introduction to Computer Graphics with WebGL
Introduction to Computer Graphics with WebGL
Introduction to Computer Graphics with WebGL
Introduction to Computer Graphics with WebGL
Building Models Ed Angel Professor Emeritus of Computer Science
Introduction to Computer Graphics with WebGL
3D Game Programming Texture Mapping
Introduction to Computer Graphics with WebGL
OpenGL Texture Mapping
OpenGL Texture Mapping
Texture Mapping Ed Angel Professor Emeritus of Computer Science
3D Game Programming Texture Mapping
OpenGL Texture Mapping
Presentation transcript:

1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science Laboratory University of New Mexico Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

WebGL Texture Mapping I Ed Angel Professor Emeritus of Computer Science University of New Mexico 2 Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

3 Objectives Introduce WebGL texture mapping ­two-dimensional texture maps ­assigning texture coordinates ­forming texture images Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

4 Basic Stragegy 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 Proper mapping function is left to application 3.specify texture parameters wrapping, filtering Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

5 Texture Mapping s t x y z image geometry display Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

6 Texture Example The texture (below) is a 256 x 256 image that has been mapped to a rectangular polygon which is viewed in perspective Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

7 Texture Mapping and the WebGL Pipeline geometry pipeline vertices texel pipeline image fragment processor Images and geometry flow through separate pipelines that join during fragment processing ­“complex” textures do not affect geometric complexity Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

8 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 Specifying a Texture Image Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

9 Define Image as a Texture glTexImage2D( target, level, components, w, h, border, format, type, texels ); target: type of texture, e.g. GL_TEXTURE_2D level: used for mipmapping (discussed later) components: elements per texel w, h: width and height of texels in pixels border: used for smoothing (discussed later) format and type: describe texels texels: 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

A Checkerboard Image 10 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

Using a GIF image 11 // 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 tag // var image = document.getElementById("texImage”) window.onload = configureTexture( image ); Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

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

13 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

14 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