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.

How to Crop the Lighthouse

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);

Listing 9: Lighthouse Cropping Texels

WebGL Beginner's Guide Introduction WebGL Beginner's Guide Page Fifteen
Copyright © 2015 Seven Thunder Software. All Rights Reserved.