Everybody is good, and under the university together learn how to use the fragment shader fragment shader to render colorful color, have a project in my lot OpenGLES2.0 SamplesForAndroid, I’ll write constantly learning sample, articles and code synchronization update, welcome the attention, Link: github.com/kenneycode/…

In the last article, we introduced the render pipeline. Here’s a review of the fragment shader’s place in the render pipeline:

The fragment shader is executed once for each pixel after being rasterized. Take a look at the fragment shader we used in our previous example:

precision mediump float;
void main() {
    gl_FragColor = vec4(0.0.0.0.1.0.1.0);
}
Copy the code

The fragment shader has a built-in variable, gl_FragColor, that represents the output of the fragment shader. The fragment shader has a built-in variable, gl_FragColor, that represents the output of the fragment shader. In the previous example we set gl_FragColor to a fixed value vec4(0.0, 0.0, 1.0, 1.0), which is a RGBA color value, so the triangle we saw before was a pure blue one. Now let’s implement a colored triangle. Vertex Shader fragment Shader fragment Shader fragment Shader fragment Shader

// vertex shader
precision mediump float;
attribute vec4 a_Position;
attribute vec4 a_Color;
varying vec4 v_Color;
void main() {
    v_Color = a_Color;
    gl_Position = a_Position;
}
Copy the code
// fragment shader
precision mediump float;
varying vec4 v_Color;
void main() {
    gl_FragColor = v_Color;
}
Copy the code

Instead of a fixed value, gl_FragColor is a color value varying in type v_Color. The variable varying type is an interpolated variable. Varying VEC4 v_Color specifies the same type of fragment in the Vertex shader, and assigns a_Color to v_Color. The v_Color fragment in the fragment shader is passed from the vertex shader. A_Color, like a_Position, is an attribute type.

Vertex Shader executes every vertex and fragment shader executes every pixel. What is the v_Color value in the fragment shader? It’s an interpolated value. How do you understand that? Let’s take a look at the value passed in our example:

// Color data
// The color data
private val colorData = floatArrayOf(
                                    1.0f, 0.0f, 0.0f, 1.0f,
                                    0.0f, 1.0f, 0.0f, 1.0f,
                                    0.0f, 0.0f, 1.0f, 1.0f)
// Number of components per color (RGBA)
// The num of components of per color(RGBA)
private val COLOR_COMPONENT_COUNT = 4
    
// Put the triangle vertex data into buffer
// Put the triangle vertex data into the buffer
val colorDataBuffer = ByteBuffer.allocateDirect(colorData.size * java.lang.Float.SIZE)
    .order(ByteOrder.nativeOrder())
    .asFloatBuffer()
colorDataBuffer.put(colorData)
colorDataBuffer.position(0)

// Get the position of field a_Color in the shader
// Get the location of a_Color in the shader
val aColorLocation = GLES20.glGetAttribLocation(programId, "a_Color")

// Start the argument for the corresponding position
// Enable the parameter of the location
GLES20.glEnableVertexAttribArray(aColorLocation)

// Specify the vertex data used by a_Color
// Specify the vertex data of a_Color
GLES20.glVertexAttribPointer(aColorLocation, COLOR_COMPONENT_COUNT, GLES20.GL_FLOAT, false.0, colorDataBuffer)
Copy the code

We pass the three color values (1.0f, 0.0f, 0.0f, 1.0f), (0.0f, 1.0f, 0.0f, 1.0f) and (0.0f, 0.0f, 1.0f, 1.0f) to a_Color in the same way we pass the triangle vertices to a_Position, When vertex shader is executed, the vertex and color data in the same position will be retrieved at the same time. After passing these three color values to v_Color, the v_Color in the fragment shader will be the interpolation value of these three color values. For example, the closer to the point corresponding to the color (1.0f, 0.0f, 0.0f, 1.0f), the closer the color will be to (1.0f, 0.0f, 0.0f, 1.0f). Let’s look at the effect:

Code in my lot OpenGLES2.0 SamplesForAndroid project, in this paper, the corresponding is SampleFragmentShader, link of the project: github.com/kenneycode/…

Thanks for reading!