Golang.org/x/mobile/exp/gl/glutil/glimage.go Source Code Analysis

This is a creation in Article, where the information may have evolved or changed.

Before looking at this article, it is recommended to look at the previous few, these are the basis.

Go Mobile Example Basic source code Analysis
Http://www.cnblogs.com/ghj1976/p/5183199.html

OpenGL ES Coloring language
Http://www.cnblogs.com/ghj1976/p/5180895.html

Affine transformation matrix (this is the basic knowledge of matrix algorithm transformation logic of Glimage packet core)
Http://www.cnblogs.com/ghj1976/p/5199086.html

The important class in the Glutil package is the Image class, which implements the *image. The bridge between RGBA and OpenGL texture graphics, and the most critical part of the image class is the completion of the drawing, and we focus on analyzing the function.

Color shader for drawing

The precision is used to determine the default precision modifier, precision mediump float; Basically equivalent to medium precision.

The varying indicator is a variable passed from the vertex shader. VEC2 2 floating-point vector uvs

Uniform read-only variable sampler2d

What's a sampler2d? In fact, in CG, SAMPLER2D is a data container interface that is bound to texture. This argument is still too complex, simple to understand, so-called after the texture (map) is just a piece of memory storage, using the RGB (and maybe a) channel, and each channel 8bits of data. In particular, to know the correspondence between pixels and coordinates, and to get the data, we can not always go to calculate the memory address or offset at once, so it is possible to manipulate the map through sampler2d. More simply, sampler2d is the type of 2D map in GLSL, corresponding, Sampler1d,sampler3d,samplercube and so on.

Texture2d (Texturesample, UV) through the texture2d function we can get a texel (Texel), which is a pixel in a texture picture. function parameters are simpler2d and texture coordinates, respectively.

Reference: http://blog.csdn.net/racehorse/article/details/6664717

Vertex shaders for drawing

Parameter type description:

• Uniform read-only variables
• MAT3 the floating-point matrix of the 3*3.
• Attribute read-only variables dedicated to vertex shaders
• VEC3 a vector of three floating-point vectors, vec2 2 floating-point vectors.
• The varying indicator is a variable to be passed from the vertex shader, whose name is UV, followed by the calculation formula for the UV.

Gl_position related calculations

The gl_position variable is a four-dimensional (VEC4) variable that contains the x, Y, Z, and W values of the vertices. The above code has a constant W value of 1, and the other values are calculated as MVP * p.

MVP is the matrix of coordinate transformation, the concrete calculation logic see behind.

P is a three-dimensional variable with a constant Z axis of 1, and the other two dimensions are passed in by the POS parameter.

POS is passed in by Quadxycoords, which is the four vertex coordinates of the OpenGl coordinate system.

UV vertex corresponding color calculation

In a color shader, the correspondence between color and position is passed in by UV. The calculation of the Uvs is done in the vertex shader.

Uvs are calculated from the UVP transformation matrix * Specific coordinate INUV.

The value passed by the INUV is transmitted by Quaduvcoords, which is a four vertex of the coordinates of the phone's screen coordinate system.

Parametric analysis of drawing function

We use the following encapsulated function to draw a specific diagram
Golang.org/x/mobile/exp/gl/glutil/glimage.go

Draw draws the srcbounds part of the image onto a parallelogram, defined by
Three of its corners, in the current GL framebuffer.
Func (img *image) Draw (sz size. Event, TopLeft, TopRight, Bottomleft Geom. Point, srcbounds image. Rectangle) {

This function draws a parallelogram by a given three points (upper-left corner, upper-right corner, bottom-left corner).

• IMG To draw the class of pictures.
• The first parameter of this function is SZ size. Event is the size of the game screen.
• TopLeft, TopRight, Bottomleft Geom. Point is the three points that determine parallelogram.
• Srcbounds image. Rectangle is the position boundary value to draw, that is, where the diagram is drawn. By two points Min, Max Point is positioned.

The coordinate system of this function output parameter is the coordinate system of the phone screen, such as:

There are pixel and PT conversion functions in the Golang.org/x/mobile/geom package.

PX is the pixel, the smallest element unit in the screen.
PT is the number of points and 1 inches is 72 lbs. The size of the font is usually measured in points.

Calculation of MVP matrix values passed to OpenGL

We is drawing a parallelogram PQRS, defined by three of its corners, onto the entire GL framebuffer ABCD.
We draw a parallelogram PQRS that is determined by three corners in the entire OpenGL frame buffer abcd.

The quads may actually was equal, but in the general case, PQRS can be smaller, and PQRS are not necessarily axis-aligne D.
The two quads are actually equal, but generally the PQRS are smaller and the PQRS are not aligned with the axes.

There is co-ordinate spaces:geom space and framebuffer space.
Here we will use 2 coordinate systems, Geom coordinate system and Framebuffer coordinate system.

In Geom space, the ABCD rectangle is:
In the Geom coordinate system, the ABCD coordinates of the rectangle are as follows:

(0, 0) (Geom. Width, 0)
(0, Geom. Height) (Geom. Width, Geom. Height)

The coordinates of the PQRS quad Is:pqrs are:

(Topleft.x, Topleft.y) (Topright.x, Topright.y)
(Bottomleft.x, Bottomleft.y) (Implicit, implicit)

In Framebuffer space, the ABCD rectangle is:
In the framebuffer coordinate system, the ABCD rectangle coordinates are

(-1, + 1) (+1, + 1)
(-1,-1) (+1,-1)

First of all, convert from Geom space to framebuffer space.
First, we need to convert from Geom coordinate system to framebuffer coordinate system.
For later convenience, we divide everything by 2 here:px2 are half of the p.x co-ordinate (in framebuffer space).
For the sake of convenience, we have 2 points here, px2 is half the actual coordinates of the PX coordinate system (framebuffer coordinate system)

PX2: = -0.5 + float32 (topleft.x/sz. WIDTHPT)
Py2: = +0.5-float32 (Topleft.y/sz. HEIGHTPT)
QX2: = -0.5 + float32 (topright.x/sz. WIDTHPT)
Qy2: = +0.5-float32 (Topright.y/sz. HEIGHTPT)
SX2: = -0.5 + float32 (bottomleft.x/sz. WIDTHPT)
Sy2: = +0.5-float32 (Bottomleft.y/sz. HEIGHTPT)

For this coordinate conversion please see:

Next, solve for the affine transformation matrix
Next, solve the affine transformation matrix ( affine transformation (affine transformation))

For the knowledge of affine transformation matrices see: http://www.cnblogs.com/ghj1976/p/5199086.html

We are now going to calculate point A through a matrix into P-point coordinates, B-point to Q-point coordinates, D-point to S-point coordinates, such as:

This conversion is definitely an affine transformation.

The coordinates of point A are ( -1,+1) the coordinates of P (2*PX2, 2*py2), which can be expressed in the following formula.

Similarly there are b–> Q, d->s formulas.

Extract the 6 expressions from the formula as follows:

-a00 + A01 + A02 = 2*px2
-A10 + A11 + A12 = 2*py2
+a00 + A01 + A02 = 2*qx2
+A10 + A11 + A12 = 2*qy2
-A00-A01 + A02 = 2*sx2
-a10-a11 + A12 = 2*sy2

By combining operations, you can infer

A00 = qx2-px2
A01 = PX2-SX2
A02 = qx2 + sx2
A10 = Qy2-py2
A11 = Py2-sy2
A12 = Qy2 + sy2

That is, MVP, this transformation matrix should be

Calculation of the matrix value of the UVP passed to OpenGL

The computational logic process is the same as the MVP process, but the screen coordinates

The coordinates of the map texture are similar, but in the texture coordinate system, the ABCD coordinates are:

(0,0) (1,0)
(0,1) (a)

PQRS Four axes are aligned with the coordinate system. As shown in the effect:

Because it is axis-aligned, there are:

PX=SX qy=py

Do the same as above to convert from A to P and B to Q. The matrix operation is as follows:

Finally, you can get this transformation matrix for, which is also the value that UVP passed in.

Passing vertex data to OpenGL

The following three lines of code often appear together, meaning the following:

Glctx. Bindbuffer (GL. Array_buffer, GLIMAGE.QUADXY)

Glctx. Enablevertexattribarray (Glimage.pos)

Glctx. Vertexattribpointer (Glimage.pos, 2, GL. FLOAT, False, 0, 0)

Bindbuffer (Target Enum, b Buffer)

The first parameter is the type that indicates the buffer, GL. Array_buffer indicates that vertex data is stored.
After binding the buffer, we need to pass the value for buffer, and the value is done here before the completion of Bufferdata.

Enablevertexattribarray (a Attrib)

Activate this property

Vertexattribpointer (DST Attrib, size int, ty Enum, normalized bool, stride, offset int)

• DST: The index value of the property that needs to be bound.
• Size: Indicates that several values in buffer represent a vertex.
• Ty: Indicates the type of data in buffer, usually fixed, BYTE, Unsigned_byte, FLOAT, short, unsigned_short.
• Normalized: This parameter can be set to TRUE or FALSE, which involves data conversion. Generally we set it to false.
• Stride: If 0, the data in buffer is stored sequentially.
• The offset value of the Offset:buffer, if set, starts from the offset position.

The whole process can be represented, drawing from: https://github.com/fem-d/webGL/blob/master/blog/WebGL%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0%E7% Af%87%ef%bc%88lesson%202%ef%bc%89.md

Https://github.com/fem-d/webGL/tree/master/blog

Data Flow chart

Vertex data transfer flowchart

Color Rendering data transfer flowchart

Reference:

OpenGL ES 2 Package Library description
Https://godoc.org/golang.org/x/mobile/gl

Glutil Package Description Document
Https://godoc.org/golang.org/x/mobile/exp/gl/glutil

Basic WebGL Learning Chapter
https://github.com/fem-d/webGL/blob/master/blog/WebGL%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0%E7%AF%87%EF%BC% 88lesson%202%ef%bc%89.md