This time we come from the perspective of OpenGL ES to learn about vertex shaders and fragment shaders. Before we first look at OpenGL ES 3.0 graphics pipeline under:
Vertex shader Vertex Shader
Vertex shader, implements a method for operating a general-purpose programmable vertex. Vertex shader may be used based on the traditional vertex operations, such as conversion by a matrix location, is calculated by the illumination color generated equations to generate or transform the vertex and texture coordinates.
In programming, the input vertex shader are: 1. shader program description ShaderProgram --- vertex shader programming code for performing an operation on the source or executable file vertex. 2. The vertex shader input attribute to the Attributes --- vertex array to provide data for each vertex. 3. Unified variable constant data Uniforms --- vertex shader and fragment shader used. 4. representative of the texture sampler Samplers --- vertex shader variables used by the particular type of uniform, Uniforms special type to be used, the texture in use in the vertex shader, and is optional.
Accordingly, the output of the vertex shader is called varying variables. In the initial phase of rasterization, the variables are calculated, as the input fragment shader, using interpolation from vertex shader process produces a matrix fragment shader variables, inputs and outputs as shown below:
Vertex shader operations:
1. 2. Calculate the position of the illumination matrix conversion formula generation color per vertex texture coordinates converting generated or 3. The following look vertex shader code snippet:
attribute vec4 position; //四维向量
attribute vec2 textCoordinate; // 纹理坐标
uniform mat4 rotateMatrix; //旋转4X4矩阵
varying lowp vec2 varyTextCoord;
void main()
{
varyTextCoord = textCoordinate;
vec4 vPos = position;
vPos = vPos * rotateMatrix;
gl_Position = vPos;
}
复制代码##### vertex shader in the vertex shader variables built built-in variables can be divided into: (depth) special variables (vertex shader input / output), a state of unity and a predetermined maximum value (the number of attributes , the number of vertex shader variable and a variable number of uniform) constant.
Built-in special variables
gl_VertexID, is an input variable for storing the integer indices of the vertices of the integer variables, declared with qualifiers highp accuracy.
gl_InstanceID, is an input variable, for example in numbers of instances of the save FIG draw call, the draw call to a conventional call, this value is 0; gl_InstanceID is an integer type variable declared with qualifiers highp accuracy.
gl_Position, for outputting the position coordinates of the vertices of the crop, and the crop value in the viewport transformation for performing the respective cutting elements, and vertex position coordinates transformed from the screen coordinate clipping. If the vertex shader gl_Position not written, the undefined value gl_Position, gl_Position float is variable declared with qualifiers highp accuracy.
gl_PointSize, can be written to the pixel size of the dots represent wizard, wizard used when rendering point, gl_PointSize vertex shader output value is defined within the scope of the non-smooth OPenGL ES 3.0 spot size of the implementation supports, gl_PointSize is a floating point variable , declared with the qualifier highp accuracy.
gl_FrontFacing, it is a special variable, but not by the vertex shader written directly, but is generated in accordance with the type of vertex shader generating position values and rendering the primitive, which is a Boolean value.
Built-in variables unity
The only built Uniform state available within the window coordinates of the vertex shader the depth range, which is given by the variable name unified built gl_DepthRange.
struct gl_DepthRangeParameters
{
highp float near; //near z
highp float far; //near far
highp float diff; //far - near
}
uniform gl_DepthRangeParameters gl_DepthRange;
复制代码Built-in constants ·
const mediump int gl_MaxVertexAttribs = 16;
const mediump int gl_MaxVertexUniformVectors = 256;
const mediump int gl_MaxVertexOutputVectors = 16;
const mediump int gl_MaxVertexTextureImageUnits = 16;
const mediump int gl_MaxCombinedTextureImageUnits = 32;
复制代码The maximum number of vertex data can be specified: gl_MaxVertexAttribs. gl_MaxVertexUniformVectors: vect4 Uniform maximum number of vertex shader variables may be used. gl_MaxVertexOutputVectors: indicates the maximum number of output vectors. gl_MaxVertexTextureImageUnits: maximum number of available vertex shader texture units. gl_MaxCombinedTextureImageUnits: sum of the maximum number of vertices / fragment shader of available texture units.
Matrix transformed vertex shader
Matrix MVP (Model - View - projection matrix) stored in the input position of a vertex shader object space is saved and the output is cut coordinates coordinates MVP this transformation matrix is a 3D graphics three important transformation the product matrix: matrix model view matrix, a projection matrix. Model matrix: --- the object coordinates to world coordinates view matrix: --- the world coordinates to eye coordinates (observation coordinates) projection matrix: --- eye coordinates (observation coordinates) into coordinates cut
Entering after the vertex shader primitive assembly (Primitive Assembly) phase and rasterization (Rasterization) stage , the process developer can not intervene (in relation to the primitive assembly and the rasterized see: coordinate system and shaders in OpenGL rendering process )
Fragment shader Fragment Shader
Fragment shader unit is a programmable processing and fragment data values, which may perform texture sampling, colors and other operations are summarized. Fragment shader by repeatedly performing the main functions (one for each fragment) of each fragment produced after rasterized 3D primitive object attributes such as colors calculated into a subsequent stage;
Each fragment generated fragment shader stages of raster operation, the input data is the following: 1. shader program Shader program: fragment shader source or executable file that describes the fragment will be performed operating. 2. The input variables Varying variables: a vertex shader output effect after rasterization varying variables calculated to produce the interpolated value of each fragment. 3. Unified variable Uniforms: constant data fragment shader 4. sampler Samplers: a special uniforms, texture represents the fragment shader.
Fragment shader input and output as shown below:
gl_FragColor value is calculated after the color of this fragment. Usually at the end of the fragment shader gl_FragColor we need to be assigned.
Fragment shader operations: 1. Compute texture color value acquiring 3. 2. To fill color pixel value (color or texture value value) look at the following code snippet fragment shader:
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap; //采样器
void main()
{
//texture2D方法有两个参数：（纹理采样器，纹理坐标），取得纹素（纹理的像素值）。
gl_FragColor = texture2D(colorMap, varyTextCoord);
}
复制代码Fragment shader built-in variables
Built-in special variables
gl_FragCoord: fragment shader in a read-only variable that stored fragment window relative coordinates.
gl_FrontFacing: fragment shader in a read-only variables, the Boolean variable is true when element front view, otherwise false.
gl_PointCoord: Read-only variables, may be used when the point sprite rendering, texture coordinate point stored in the sprite, the coordinate point sprite automatically generated during rasterization, at (0,1).
gl_FragDepth: a write-only output variable, when fragment shader written, the cover sheet fixed function element depth values, the depth values to minimize manual writing implement, this feature requires caution because it may be disabled to optimize the depth of many GPU for example: many have GPU "Early-z" function, prior to performing the depth test fragment shader, the benefits of using "Early-z" is a depth test can not pass will not be colored fragments (thereby reducing the number of calls shaders, improved performance) but using gl_FragDepth, you must disable this feature, because the GPU does not know the depth values before executing shader.
Built-in constants
const mediump int gl_MaxFragmentInputVectors = 15;
const mediump int gl_MaxTextureImageUnits = 16;
const mediump int gl_MaxFragmentUniformVectors = 224;
const mediump int gl_MaxDrawBuffers = 4;
const mediump int gl_MinProgramTexelOffset = -8;
const mediump int gl_MaxProgramTexelOffset = 7;
复制代码gl_MaxFragmentInputVectors: The maximum number of fragment shader input. The maximum number of available texture image gl_MaxFragmentUniformVectors unit:: gl_MaxFragmentUniformVectors fragment shader variables available vec4 Uniform maximum number gl_MaxDrawBuffers: the maximum number of supported Multiple Render Targets
Multiple texture blending
//⽚片元着⾊色器器代码
attribute vec2 v_texCoord;
uniform sampler2D s_baseMap;
uniform sampler2D s_SecondMap;
void main()
{
vec4 baseColor;
vec4 secondColor;
baseColor = texture(s_baseMap ,v_texCoord);
secondColor = texture(s_SecondMap ,v_texCoord);
gl_FragColor = baseColor * secondColor;
}
复制代码//客户端代码: 将各个纹理理对象绑定到纹理理单元0和1,为采样器器设置数 值,将采集器器绑定到对应的纹理理单元
glActiveTexutre(GL_TEXTURE0);
glBindTeture(GL_TEXTURE_2D ,baseMapTexId);
glUniformli(baseMapTexId,0);
glActiveTexutre(GL_TEXTURE1);
glBindTeture(GL_TEXTURE_2D ,secondMapTexId);
glUniformli(secondMapTexId,1);
复制代码Fragment by Per-Fragment Operations Operation
First look at the process by operating segment:
Test Crop: Cutting test determines [Xw, Yw] is located within a portion of the crop rectangle as OpenGL ES state, if the segment is located outside the clipping region, were discarded.
Test Depth: Depth value input segment is compared, the test determines whether to reject the segment.
Mixing: mixing fragments the newly generated color values stored in color frame buffer locations combined. (Mixed with the mixed fragment shader herein to distinguish.)
Jitter: jitter can be used to minimize artifacts due to the use of finite precision color value stored in the frame buffer region is generated.
EGL (as understood)
OpenGL ES rendering context and draw commands required to complete surface painting graphics and images. Rendering context: storing the relevant state OpenGL ES rendering the surface: the surface is used to draw primitives, which specifies the type of buffer required for rendering, e.g. of colors in buffer, depth buffer, and stencil buffer area.
OpenGL ES API does not provide how to create a rendering context or in the context of how to connect to the native windowing system. EGL is an interface between Khronos rendering API (such as OpenGL ES) and native windowing system. The only ⽀ support OpenGL ES does not support EGL's platform iOS. Apple provides automatically a self ⼰ iOS EGL API implementation, called EAGL. because each system has a different definition window, the EGL provides substantially opaque type -EGLDisplay, this type encapsulates all the system dependencies, to Use and native window-connector system interface. Since OpenGL ES is a C-based API, so it is very portable and supported by the Wide-pan. As the C API, it Objective-C Cocoa Touch ⽆ seamless integration of the applications. OpenGL ES specification does not define a window layer; contrary, hosted operating system must provide a function to accept commands create OpenGL ES rendering context and a frame buffer, wherein writing of any results of drawing commands. Using On iOS required by OpenGL ES Use iOS class and rendering the drawing surface, and use of platform-neutral API to render its contents.
EGL's main functions are as follows:
- And a local window-connector system (native windowing system) communication;
- Query configuration available;
- OpenGL ES available Create "drawing surface" (drawing surface);
- Rendering the synchronization between the different categories of the API, such as between ⽐ OpenGL ES and OpenVG synchronization, or between the drawing commands in OpenGL and local window;
- Management "render resources" ⽐ such as texture mapping (rendering map).
Reproduced in: https: //juejin.im/post/5d09fb3e518825531e0649ff