Scribd
Upload
15 views

Chapter 8 - TextureMapping

This document discusses texture mapping in computer graphics and WebGL. It explains that texture mapping maps an image to the surface of an object by assigning texture coordinates to each vertex. It provides pseudocode for the basic steps of texture mapping implementation including defining shaders, loading the texture image, and drawing the textured object.

Uploaded by

ingxing23
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

Chapter 8 - TextureMapping

This document discusses texture mapping in computer graphics and WebGL. It explains that texture mapping maps an image to the surface of an object by assigning texture coordinates to each vertex. It provides pseudocode for the basic steps of texture mapping implementation including defining shaders, loading the texture image, and drawing the textured object.

Uploaded by

ingxing23
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

BCM2053

COMPUTER GRAPHICS
Texture mapping
Texture coordinates

Map the image (texture) to the object

Object coordinates
Texture coordinates

We need:
- Texture coordinates
- Object Coordinate

Object coordinates
Texture coordinates

x,y,z coordinate for box

positionsBox = [ textureCoordinates = [
// Front face // Front face
-1.0, -1.0, 1.0, 0.0, 0.0,
1.0, -1.0, 1.0, 1.0, 0.0,
1.0, 1.0, 1.0, 1.0, 1.0,
-1.0, 1.0, 1.0, 0.0, 1.0,

]; ];

coordinate for the texture image

Object coordinates
Texture coordinates

positionsBox = [ textureCoordinates = [
// Front face // Front face
-1.0, -1.0, 1.0, 0.0, 0.0,
1.0, -1.0, 1.0, 1.0, 0.0,
1.0, 1.0, 1.0, 1.0, 1.0,
-1.0, 1.0, 1.0, 0.0, 1.0,

]; ];

Object coordinates
Object coordinates Texture coordinates

(-1, 1) 4 3 (1, 1) (0, 1) 4 3 (1, 1)

(-1, -1) 1 2 (1, -1) (0, 0) 1 2 (1, 0)


positionsBox = [ textureCoordinates = [
// Front face // Front face
-1.0, -1.0, 1.0, 0.0, 0.0,
1.0, -1.0, 1.0, 1.0, 0.0,
1.0, 1.0, 1.0, 1.0, 1.0,
-1.0, 1.0, 1.0, 0.0, 1.0,

]; ];
Complex object
Pseudo-code for texture mapping
Begin
Define vertex shader
Declare texture coordinates and model view matrix
Define fragment shader
Declare fragment color for the textured object
Call function for vertex shader and fragment shader
Define program information to pass to the shader function
Create model view matrix for the texture object
Translate matrix and coordinate
Call function to load 2D image file
Set coordinate for the object surface
Call buffer function
Call function to draw the textured object by passing values of model view
matrix,object location and buffer
End
How to implement texture mapping in webgl

- Need to run the code in localhost


- Make your computer as localhost
- Why? à webGL is run in web, so the texture image is not in the
web, so need to make sure the code and the image are in the same
host
- There are many ways, one of it:
- Install xampp as localhost à run Apache à copy and paste texture
mapping code in folder xamppàhtdocs
- Open internet browser à type localhost à select the code folder à
run the html
Code Demo

You might also like