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.
Computer Graphics Texture Mapping Eriq Muhammad Adams
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
ECSE-4750 Computer Graphics Fall 2004 Prof. Michael Wozny TA. Abhishek Gattani TA. Stephen
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.
1 Angel and Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 Introduction to Computer Graphics Ed Angel Professor Emeritus of Computer.
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.
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 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.
Texture Mapping. For Further Reading Angel 7 th Ed: ­Chapter 7: 7.3 ~ 7.9 Beginning WebGL: ­Chapter 3 2.
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
Introduction to Computer Graphics with WebGL
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
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 (manually) ­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 (general definition) gl.texImage2D( target, level, components, w, h, border, format, type, texels ); target: type of texture, e.g. GL_TEXTURE_2D level: used for mipmapping (discussed later) – usually set to 0 components: elements per texel w, h: width and height of texels in pixels border: used for smoothing (discussed later) – 0 or 1 format and type: describe texels texels: texel array Ex.: gl.texImage2D(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 The image size is not included in the array

10 Define Image as a Texture (usual definition) gl.texImage2D(target, level, internalformat, format, type, imagedata); target: type of texture, e.g. GL_TEXTURE_2D level: used for mipmapping (discussed later) – usually set to 0 internal format: data format of the texture format: data format of the image type: describe texels imagedata: formated image Ex.: gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image); Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 The image size is included in the data structure

A Checkerboard Image (texel array) 11 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

Loading an image (gif, jpg or png images) 12 // 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 // like // and use the following var image = document.getElementById("texImage”) window.onload = configureTexture( image ); Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 The loading process is initiated by this statement. (a thread is launched…) This function is executed after the image has been loaded.

Important notes about texture images 13 1) Image dimensions (horizontally and vertically) must be a power of 2 (Ex.: 64, 128, 256, 512, …). You may need to change texture image dimensions using softwares such as “Microsoft Paint”. 2) For security reasons, images can only be loaded if they are located on the same server (domain) as the javascript code. Therefore, you need to install a local Web server to visualize an object using texture images (recent updates of popular Web browsers do not allow to load texture images when double-clicking an html file on your computer). Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

14 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 Now, how do we map a Texture Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

15 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

16 Interpolation WebGL uses interpolation to find proper texels from specified texture coordinates (There 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