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.
srcstring — The url or location of the image
mapFromRect — image space window (new Rect(0, 0, 1, 1))
mapToRect — draw space window (new TypeParsableRect(-1, -1, 2, 2))
mapToAttributestring — attribute name of the vertex
definitions to map the texture to (a_vertex)
coordsnumber[] — texture coordinates to map to each vertex
in shape. If empty, then the texture coorindates will be automatically
generated using mapTo and mapFrom. ([])
loadColorTypeColor — color to display while texture is loading.
Use an alpha of 0 if no color is desired. ([0, 0, 1, 0.5])
repeatboolean — true will tile the image. Only works with
images that are square whose number of side pixels is a power of 2 (false)
onLoad() => void — textures are loaded asynchronously, so this
callback can be used to execute code after the texture is loaded. At a
minimum, any custom function here should include a call to animate the next
frame (figure.animateNextFrame)
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.
srcstring— The url or location of the imagemapFromRect — image space window (new Rect(0, 0, 1, 1))mapToRect — draw space window (new TypeParsableRect(-1, -1, 2, 2))mapToAttributestring— attribute name of the vertex definitions to map the texture to (a_vertex)coordsnumber[] — texture coordinates to map to each vertex in shape. If empty, then the texture coorindates will be automatically generated usingmapToandmapFrom. ([])loadColorTypeColor — color to display while texture is loading. Use an alpha of 0 if no color is desired. ([0, 0, 1, 0.5])repeatboolean—truewill tile the image. Only works with images that are square whose number of side pixels is a power of 2 (false)onLoad() => void— textures are loaded asynchronously, so this callback can be used to execute code after the texture is loaded. At a minimum, any custom function here should include a call to animate the next frame (figure.animateNextFrame)