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