## WebGL Textures & Vertices

## Beginner's Guide

### Page Fourteen

# Translate Pixels to Texels

The following illustration demonstrates how to convert a cropped section of an image from pixel coordinates to texel coordinates. The black text on white background represent values from the original image. The white text on translucent blue background represent values for the cropped image. The values between parenthesis represent pixels. The values between square brackets represent texels.

### Diagram 8: Convert Crop Pixels to Texels

## Convert Pixel Crop Coordinates to Texel Values

Begin with the original dimensions of an image in pixels, and a rectangle to crop. Declare the rectangle with pixel coordinates which display the upper left and lower right corners.

To convert crop coordinates from
pixels to texels, load the graphic
into an image editing program.
We loaded each image into Photoshop
then selected a square area of the
graphic to crop.
Display the info

window
and select the eye dropper tool.
Place the eye dropper over the upper
left corner of the crop area, and save the X and Y coordinates.
The lighthouse example's top left cropped
coordinates
equal `(51,51)`

.
Place the eye dropper over the bottom
right corner of the crop area, and save the X and Y coordinates.
The lighthouse example's bottom
right cropped coordinates
equal `(307,307)`

.

### Top Left Crop Texels

The lighthouse photograph's dimensions
are 512 x 512 pixels. Divide the
cropping coordinate by the pixel dimension.
The quotient represents the texel offset from
texel values of `[0.0]`

.
The lighthouse example's top left crop coordinates
equal `(51,51)`

. `51/512 ≈ 0.1`

.
The lighthouse example's top left quotient equals
approximately `0.1`

.
The top left S texel for the *full image* equals `0.0`

.
Add the quotient `0.1`

to the original
S texel coordinate `0.0`

, to find the
*cropped* S texel coordinate for the top left corner.
`0.0 + 0.1 = 0.1`

. The top left
corner's *cropped* S texel coordinate equals `0.1`

.

To find the top right *cropped* T texel coordinate
subtract the crop quotient from `1.0`

.
The top left T texel for the *full image* equals `1.0`

.
The top left corner's *cropped* T texel coordinate equals `0.9`

,
because
`1.0 - 0.1 = 0.9`

.
The top left cropping texels equal `[0.1,0.9]`

.

### Bottom Right Crop Texels

The lighthouse photograph's dimensions
are 512 x 512 pixels. Divide the
cropping coordinate by the pixel dimension.
The quotient represents the texel offset from
texel values of `[0.0]`

.
The lighthouse example's bottom right crop coordinates
equal `(307,307)`

. `307/512 ≈ 0.6`

.
The lighthouse example's bottom right *cropped*
quotient equals
approximately `0.6`

.
The bottom right T texel for a *full image* equals `0.0`

.
Therefore the bottom right
corner's T texel coordinate equals `0.6`

.

To find the bottom right S texel coordinate
subtract the crop quotient from `1.0`

.
A *full image's* bottom right S texel equals `1.0`

.
The bottom right corner's S *cropped* texel
coordinate equals `0.4`

,
because
`1.0 - 0.6 = 0.4`

.
The bottom right cropping texels equal `[0.6,0.4]`

.

The following listing demonstrates assigning the
texel cropping coordinates to variables for
use within our vertex texel array.
The coordinates apply to the cropped
lighthouse photograph.
Follow the same process for the cropped Butterfly
fish except the top left texels equal `[0.5,0.25]`

and the bottom right texels equal `[1.0,0.75]`

.

nXLeft = Number(0.1); nYTop = Number(0.9); nXRight = Number(0.6); nYBottom = Number(0.4);