WebGL Colors and Textures

1. Texture coordinates

Texture coordinates are the coordinates on the texture image, and texture coordinates can be used to get the texture color on the texture image. The texture coordinate system in the WEBGL system is two-dimensional. To differentiate between texture coordinates and widely used x and y coordinates, WEBGL uses S and t to name texture coordinates (ST coordinate systems).

The four corner coordinates of the texture image are the lower-left corner (0.0,0.0), the lower-right corner (1.0,0.0), the upper-right corner (1.0, 1.0), and the upper-left corner (0.0, 1.0). Texture coordinates are common because coordinate values are independent of the size of the image itself, whether it is a 128*128 or a 128*256 image, and the texture coordinates of the upper-right corner are always (1.0, 1.0).

2. Texture mapping Steps

1. Prepare the texture image to be mapped to the geometry.

2. Configure the texture mapping method for the geometry.

3. Load the texture image, write it and configure it to use it in WebGL.

4. Extract the corresponding texture from the texture in the slice shader and assign the color of the Texel to the element.

3.gl.createtexture ()

Create a texture object to store the texture image.

4.gl.deletetexture ()

Use Textur to delete a texture object. If you delete a texture object that has been deleted, no error will be made and no effect will occur.

5.gl.pixelstorei (pname, param)

Handles the loaded image in the way specified by PName and Param. Parameters

PName: Can be one of the following. Gl. UNPACK_FLIP_Y_WEBGL, the Y-axis of the image is reversed. The default value is FALSE;GL. UNPACK_PREMULTIPLY_ALPHA_WEBGL, multiply each component of an image's RGB color value by a. The default is FALSE;WEBGL, and the default value is False.

Param: Specify not 0 (true) or 0 (false). Must be an integer.

For example: Gl.pixelstorei (GL. UNPACK_FLIP_Y_WEBGL, 1), reverses the image in Y-axis. Because the orientation of the t-axis in the WEBGL texture coordinate system is the opposite of the y-axis of PNG, BMP, JPG, and other format pictures. Therefore, only the y-axis of the image is reversed to correctly map the image to the graphic.

6.gl.activetexture (Texunit)

Activates the texunit specified texture cell. Parameters:

Texunit: Specifies the texture unit that is ready to be activated: GL. TEXTURE0, GL. TEXTURE1., GL. TEXTURE7. The last number indicates the number of the texture unit

The number of texture units supported by the system depends on the WEBGL implementation of the hardware and browser, but by default WebGL supports at least 8 texture units.

7.gl.bindtexture (target, texture)

Turns on texture the specified texture object and binds it to the target. In addition, if a texture cell has been activated by Gl.activetexture (), the texture object is also bound to the texture unit. Parameters:

Target:gl. texture_2d or Gl.texture_buve_map

Texture: A Texture object that represents a binding

For example, Gl.activetexture (GL) was previously executed. TEXTURE0) function, activates the NO. 0 texture cell. Now execute Gl.bindtexture (GL. texture_2d, TEXTURE). Then the texture object texture will also be bound to the texture unit GL. On the TEXTURE0.

8.gl.texparameteri (target, pname, param)

Assigns the value of param to the pname parameter of the texture object bound to the target. Parameters:

Target:gl. texture_2d or Gl.texture_cube_map

PName: Texture Parameters

PARAM: The value of the texture parameter

PName can specify 4 texture parameters:

Magnification method (GL. Texture_map_filter): How to get the texture color when the texture's drawing range is larger than the texture itself. For example, when you map a 16*16 texture image to a space of 32*32 pixels, the size of the texture changes to twice times the original. The default value is GL. LINEAR.

Shrink Method (GL. Texture_min_filter): How to get the texel color when the texture's drawing returns more hours than the texture itself. For example, you map 32*32 texture images to 16*16 pixel space, and the texture size is only primitive. The default value is GL. Nearest_mipmap_linear.

The horizontal Fill method (GL. texture_wrap_s): This parameter indicates how to fill the left or right area of a texture image. The default value is GL. REPEAT.

Vertical Fill Method (GL. texture_wrap_t): This parameter indicates how the area above and below the texture image is populated. The default value is GL. REPEAT.

can be assigned to GL. The values of the Texture_map_filter and Gl.texture_min_filter parameters include:

Gl. NEAREST: Uses the color value of the most recent pixel in the center of the pixel at the distance from the original texture, as the value of the new pixel.

Gl. LINEAR: Uses the weighted average of the color values of the nearest four pixels from the center of the new pixel, as the value of the new pixel (and GL. Compared with nearest, the method has better image quality, but it also has a large overhead. ）

can be assigned to GL. Constants for texture_wrap_s and gl.texture_wrap_t:

Gl. REPEAT: Tiled repeating textures

Gl. Mirrored_repeat: Mirrored symmetric repeating texture

Gl. Clamp_to_edge: Using texture image edge values

9.gl.teximage2d (target, level, Internalformat, format, type, image)

Assigns an image specified by an image to a texture object that is bound to the target. Parameters:

Target:gl. texture_2d or Gl.texture_cube

Level: Passed in 0 (actually, this parameter is prepared for pyramid textures)

Internalformat: Internal format of the image

Format: Texture data formats, must use the same value as Internalformat

Type: Types of texture data

Image: An Image object that contains texture images

The texture data format contains: GL. RGB (Red, L green, blue), GL. RGBA (Red, L green, blue, transparency), GL. ALPHA (0.0, 0.0, 0.0, transparency), GL. Luminance, GL. Luminance_alpha.

If the texture picture is a JPG format, the format represents each pixel with an RGB three component, so the parameter is specified as GL. Rgb. Other formats, such as PNG for Gl.rgba, and BMP format for Gl.rgb.

The type parameter specifies the texture data type, which we typically use with GL. The Unsigned_byte data type. All data formats are as follows:

Gl. Unsigned_byte: Unsigned shaping, which occupies 1 bytes per color component

Gl. Unsigned_short_5_6_5:rgb each component occupies 5, 6, 5 bits, respectively.

Gl. Unsigned_short_4_4_4_:rgba each component occupies 4, 4, 4, 4 bits, respectively

Gl. Unsigend_short_5_5_5_1:rgba,rgb each component occupies 5 bits, and a component occupies 1 bits.

10. Data types that are specific to textures

SAMPLER2D: Bind to GL. Texture data types on the texture_2d

Samplercube: Bind to GL. Texture data types on the Texture_cube_map

11.gl.uniform1i (location, texunit)

The texture of the TextUnit unit is passed to the shader. Parameters:

Location: The address of the texture object

Texunit: Texture Unit Number

For example gl.uniform1i (U_sampler, 0), pass the No. 0 texture to the sampler variable in the shader

12.VEC4 texture2d (smapler2d sampler, vec2 coord)

Gets the pixel color at coord specified texture coordinates from the texture specified by the sampler. Parameters:

Sampler: Specify the texture unit number

Coord: Specifying texture coordinates

Return value: The color value of the pixel at the texture coordinates, which is formatted as determined by the Inernalformat parameter of Gl.teximage2d (). The following lists the return values under different parameters. Returns (0.0, 0.0, 0.0 1.0) If the texture image is not available due to some willingness to do so.

internalformat/return value

Gl. rgb/(r,g,b,1.0)

Gl. rbga/(R,g,b,a)

Gl. ALPHA (0.0, 0.0, 0.0, A)

Gl. luminance/(L, L, L, 1.0)

Gl. luminance_alpha/(L, L, L, A)

WebGL Colors and Textures