WebGL Textures & Vertices

Beginner's Guide

Page Fifteen

Initialize Texels

Initialize arrays for the cropped examples nearly identical to arrays prepared for the Lighthouse Texture Map. The only difference involves changing texel values. The vertex coordinates and index element array remain the same. The following listing demonstrates creating a vertex texel array with customized cropping coordinates.

var aVertices =  new Float32Array(
[
 // left top front
 // index 0.
 // X,Y,Z:
 -1.0, 1.0, 0.0, 
 // S,T:
 nXLeft,nYTop,
 // right top front
 // index 1.
 // X,Y,Z:
 1.0, 1.0, 0.0,
 // S,T:
 nXRight, nYTop,
 // right bottom front
 // index 2.
 // X,Y,Z;
 1.0, -1.0, 0.0, 
 // S,T:
 nXRight, nYBottom,
 // left bottom front
 // index 3.
 // X,Y,Z:
 -1.0, -1.0, 0.0, 
 // S,T:
 nXLeft, nYBottom,
 ]
);

Listing 10: Customized Cropping Coordinates

Crop a Texture Map Summary

This section demonstrated how to display a specific cropped section of an image, across a mesh. We illustrate how to convert from pixel crop coordinates to texel crop coordinates. We explain how to modify texel coordinates in the vertex texel array. The projects display either the cropped Butterfly fish graphic or the cropped lighthouse photograph. However the information in this section applies to any WebGL acceptable graphic. See the GLSquareCrop constructor.

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