A texture file is an image file like a jpg, or png.
Textures can be used instead of colors to fill a shape in WebGL.
Each vertex in a shape is mapped to a color in the texture. A texture
coordinate is used to define where to sample the color in the texture.
Texture coodinates (x, y) are between 0 and 1 where the bottom left corner of
the texture is (0, 0) and the top right corner is (1, 1). Note, even if the
texture is being mapped onto a 3D surface, the texture coordinates are
always two dimensional as the texture is two dimensional.
Texture colors can be mapped to vertices of the shape with either:
coords - directly define the texture coordinates for each vertex
mapFrom, mapTo - automatically map texture coordinates to the (x, y)
draw space components of the shape's vertices. This is only useful for 2D
shapes (3D shapes should use coords).
To automatically map the texture to a shapes vertices, a rectangular window
in the texture (mapFrom) and a rectangular window in draw space (mapTo)
is defined. The texture is then offset and scaled such that its window
aligns with the draw space window.
Therefore, to make a 1000 x 500 image fill a 2 x 1 rectangle in draw space
centered at (0, 0) you would define:
Two ways of doing this are provided as sometimes it is more convenient to
think about the window on the image, and other times the window in draw
space.
If the shape has fill outside the texture boundaries then either the
texture can be repeated, or a pixel from the border (edge) of the image is
used (called clamping to edge).
WebGL only allows images that are square with a side length that is a
power of 2 (such as 16, 32, 64, 128 etc) to be repeated. All other images
can only be clamped to their edge.
To repeat all other image resolutions, a texture can be mapped to a rectangle
and then the rectangle repeated throughout the figure.
Texture definition object
A texture file is an image file like a jpg, or png.
Textures can be used instead of colors to fill a shape in WebGL.
Each vertex in a shape is mapped to a color in the texture. A texture coordinate is used to define where to sample the color in the texture. Texture coodinates (x, y) are between 0 and 1 where the bottom left corner of the texture is (0, 0) and the top right corner is (1, 1). Note, even if the texture is being mapped onto a 3D surface, the texture coordinates are always two dimensional as the texture is two dimensional.
Texture colors can be mapped to vertices of the shape with either:
coords- directly define the texture coordinates for each vertexmapFrom,mapTo- automatically map texture coordinates to the (x, y) draw space components of the shape's vertices. This is only useful for 2D shapes (3D shapes should usecoords).To automatically map the texture to a shapes vertices, a rectangular window in the texture (
mapFrom) and a rectangular window in draw space (mapTo) is defined. The texture is then offset and scaled such that its window aligns with the draw space window.Therefore, to make a 1000 x 500 image fill a 2 x 1 rectangle in draw space centered at (0, 0) you would define:
If instead you wanted to zoom the image in the same rectange by a factor of 2 you could either:
or
Two ways of doing this are provided as sometimes it is more convenient to think about the window on the image, and other times the window in draw space.
If the shape has fill outside the texture boundaries then either the texture can be repeated, or a pixel from the border (edge) of the image is used (called clamping to edge). WebGL only allows images that are square with a side length that is a power of 2 (such as 16, 32, 64, 128 etc) to be repeated. All other images can only be clamped to their edge.
To repeat all other image resolutions, a texture can be mapped to a rectangle and then the rectangle repeated throughout the figure.