Attribute

Definition: The attribute variable is a GLSL ES variable used to transmit data from the outside to the vertex shader. It can only be used by the vertex shader and can only be declared as a global variable to represent “vertex by vertex” information. The type intelligence of the attribute variable is float, VEC2, VEC3, VEC4, mat2, mat3, and mat4.

Statement: Attribute VEC4 a_Position

Define an attribute variable a_Position, whose type is VEC4, and then summarize the variable types in WebGL separately

By value:

var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); gl.vertexAttrib3f(a_Position, 0.0.0.0.0.0);
Copy the code

Gl.getattriblocation () gets the address where the attribute variable is stored, and then assigns a value to the attribute variable through gl.vertexattrib3f ().

gl.getAttribLocation

Get the address where the attribute variable is stored

Gl.vertexattrib3f homolog function

Gl. VertexAttrib [1 | 2 | 3 | 4] f series of the function of task is through the js to attribute variables by value in the vertex shader, 1 | 2 | 3 | 4 respectively represent the number of parameters in the transmission.

gl.vertexAttrib1f(location, v0)
gl.vertexAttrib2f(location, v0, v1)
gl.vertexAttrib3f(location, v0, v1, v2)
gl.vertexAttrib4f(location, v0, v1, v2, v3)
Copy the code

At the same time, you can use vector versions of these methods, whose names end in “v” and accept typed arrays

var position = new Float32Array([1.0.2.0.3.0.1.0])
gl.vertexAttrib4fv(a_Position, position)
Copy the code

gl.vertexAttribPointer

The above-mentioned gl. VertexAttrib [1 | 2 | 3 | 4] f series function allocation values for the attribute variables, but only once a value assigned to the attribute variables; What if you need to assign all the values of an array to an attribute variable at once

var vertices = new Float32Array([
	0.0.0.5, -0.5, -0.5.0.5, -0.5
])
// Create a buffer object
var vertexBuffer = gl.createBuffer()

// Bind the buffer object
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)

// Write data to the buffer
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)

// Get the attribute in the shader
var a_position = gl.getAttribLocation(program, 'a_Position')

// Assign a_position to buffer data (gl.float)
gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false.0.0)
// the a_position variable is associated with the corresponding buffer object
gl.enableVertexAttribArray(a_position)
Copy the code

Uniform

Uniform variables can only be used by vertex shaders. With a uniform shader, you need uniform variables. The attribute type can only be float, and uniform variables can be of any type except groups and structures. Uniform variables can be used in vertex shaders and slice shaders and must be global. Uniform variables contain “consistent” (non-per-vertex/per-slice, per-vertex or per-slice shared) data. For example, the transformation matrix is not per-vertex, but is shared by all vertices, so it is a uniform variable in shaders.

uniform mat4 u_ViewMatrix
uniform vec4 u_LightPosition
Copy the code

Uniform VEC4 u_FragColor uniform VEC4 u_FragColor

By value:

var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor')
gl.uniform4f(u_FragColor, rgba[0], rgba[1], rgba[2], rgba[3])
Copy the code

gl.getUniformLocation

GetAttribLocation returns the uniform variable address, but if the UNIFORM variable does not exist or is named with a reserved prefix, then null is returned. Instead of -1(gl.getattribLocation returns -1 in this case)

Gl. homologous functions of Uniform4f

With gl. VertexAttrib3f kin function, by the same token, the gl. Uniform [1 | 2 | 3 | 4] f is uniform in the shader variables by value via the js.

Varying

The variable varying must act as a global variable. Its job is to transfer data from the vertex shader to the shard shader. We must declare varying variables of the same type and same name in both shaders. Like the attribute variable, VARYING variables can only be of the following types: Float, VEC2, VEC3, VEC4, MAT2, MAT3 and MAT4.

Declaration: VARYING VEC2 v_textCoord

Use:

var vertexShaderSource = "" +
    "attribute vec4 a_Position; \n" +
    "attribute vec2 a_TexCoord; \n" +
    "varying vec2 v_TexCoord; \n" +
    "void main(){\n" +
    " gl_Position = a_Position; \n" +
    " v_TexCoord = a_TexCoord; \n" +
		"}\n";
var fragmentShaderSource = "" + 
    "uniform sampler2D u_Sampler; \n" +
    "varying vec2 v_TexCoord; \n" +
    "void main(){\n" +
    " gl_FragColor = texture2D(u_Sampler, v_TexCoord); \n" +
    "}\n";
// Assign the attribute variable a_TexCoord to the variable v_TexCoord varying. The vertex shader's v_TexCoord synchronizes the chip shader's v_TexCoord

// Data buffer
var verticesTexCoords = new Float32Array([-0.5.0.5.0.0.1.0,
  -0.5, -0.5.0.0.0.0.0.5.0.5.1.0.1.0.0.5, -0.5.1.0.1.0
])
var n = 4
var vertexTexCoordBuffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexCoordBuffer)
gl.bufferData(gl.ARRAY_BUFFER, verticesTexCoords, gl.STATIC_DRAW)
// Assign the attribute value, and synchronize varying
var a_TexCoord = gl.getAttribLocation(program, "a_TexCoord")
gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, FSIZE * 4, FSIZE * 2);
gl.enableVertexAttribArray(a_TexCoord);

Copy the code