opengles 颜⾊和着⾊
上⼀节介绍了
我们对着⾊器原理和过程有了较为详细的理解,并且重点讲解了使⽤顶点着⾊器来实现opengl基本图元(点,直线,三⾓形)的位置,那么本节讲解opengl es对颜⾊的绘制。
三⾓形扇:
之前讲解如果想描述⼀个长⽅形可以⽤两个三⾓形来描述,⽐如:
// Triangle 1
-0.5f, -0.5f,
0.5f, 0.5f,
-0.5f, 0.5f,
// Triangle 2
-0.5f, -0.5f,
0.5f, -0.5f,
0.5f, 0.5f,
。。。。
很容易发现有很多坐标重复的问题,特别是复杂图形这样组成坐标的数组⾥有⼤量的数据冗余,为了解决这个问题提出了三⾓形扇的概念。
fatherandson如下图:
我们在桌⼦中间引⼊⼀个点(0,0)即1位置作为起始点,使⽤相邻两个顶点创建第⼀个三⾓形,接下来的每个顶点都会创建⼀个三⾓形,围绕起始点按照扇形展开,当最后重复第⼆个点时我们知道绘制完成。坐标位置数组也变成如下:在本例AirHockeyRenderer的onDrawFrame中,代码如下:
/*
float[] tableVerticesWithTriangles = {
nesta// Triangle Fan
0, 0,
argument
-0.5f, -0.5f,
0.5f, -0.5f,
0.5f, 0.5f,
-0.5f, 0.5f,
-0.5f, -0.5f,
虚拟墓地
// Line 1
-0.5f, 0f,
0.5f, 0f,
// Mallets
0f, -0.25f,
0f, 0.25f
};*/
/**
* OnDrawFrame is called whenever a new frame needs to be drawn. Normally, * this is done at the refresh rate of the screen.
2018考研时间*/
@Override
public void onDrawFrame(GL10 glUnud) {
// Clear the rendering surface.
glClear(GL_COLOR_BUFFER_BIT);
// Draw the table.胚根
glDrawArrays(GL_TRIANGLE_FAN, 0, 6);
// Draw the center dividing line.
glDrawArrays(GL_LINES, 6, 2);
// Draw the first mallet.
glDrawArrays(GL_POINTS, 8, 1);
专四成绩2021什么时候出
// Draw the cond mallet.
soccer怎么读glDrawArrays(GL_POINTS, 9, 1);
}
glDrawArrays(GL_TRIANGLE_FAN, 0, 6);指定⽤6个坐标值绘制三⾓形扇。 颜⾊属性:
我们要为每个顶点增加颜⾊属性代码如下:
//
// Vertex data is stored in the following manner:
//
// The first two numbers are part of the position: X, Yartificial
// The next three numbers are part of the color: R, G, B
//
float[] tableVerticesWithTriangles = {
// Order of coordinates: X, Y, R, G, B
/
/ Triangle Fan
0f, 0f, 1f, 1f, 1f,
-0.5f, -0.5f, 0.7f, 0.7f, 0.7f,
0.5f, -0.5f, 0.7f, 0.7f, 0.7f,
0.5f, 0.5f, 0.7f, 0.7f, 0.7f,
-0.5f, 0.5f, 0.7f, 0.7f, 0.7f,
-0.5f, -0.5f, 0.7f, 0.7f, 0.7f,
// Line 1
-0.5f, 0f, 1f, 0f, 0f,
0.5f, 0f, 1f, 0f, 0f,
// Mallets
0f, -0.25f, 0f, 0f, 1f,
0f, 0.25f, 1f, 0f, 0f
};
可以看到为每个顶点增加了三个分量坐标分别对应颜⾊的红,绿,蓝分量,每个分量值在0-1范围。
打开simple_fragment_shader.glsl和simple_vertex_shader.glsl我们发现⾥⾯没有了uniform属性⽽是varying。varying的意思就是把给他的值进⾏混合,⽐如在第⼀个顶点是红⾊,第⼆个顶点是绿⾊则使⽤varying后的效果就是组成第⼀第⼆顶点连线的直线离第⼀个顶点越近越呈现红⾊,直线离第⼆个点越近越呈现绿⾊,⽽且这是⼀种平滑按⽐例呈现的效果,⽤公式表达如下:tec
这个公式是应⽤于每个颜⾊分量的。如下图是从红到绿的直线,
则线上各个颜⾊分量如下图
上⾯是直线按照线性⽐例来实现这种颜⾊的平滑变化,如果是三⾓形则是按照构成三⾓形⾯积的分量,原理相似。
值得注意的是在代码上引⼊了 private static final int STRIDE =
(POSITION_COMPONENT_COUNT + COLOR_COMPONENT_COUNT) * BYTES_PER_FLOAT;因为我们坐标和颜⾊使⽤的是同⼀个缓冲器(这样有利于节省内存,性能)所以我们需要⽤STRIDE 来表⽰内存字节偏移量。所以在
onSurfaceCreated⾥⾯指定位置的时候使⽤了这个偏移量
glVertexAttribPointer(aPositionLocation, POSITION_COMPONENT_COUNT, GL_FLOAT,
fal, STRIDE, vertexData);指定颜⾊的时候也使⽤了这个偏移量STRIDE ,
vertexData.position(POSITION_COMPONENT_COUNT);
glVertexAttribPointer(aColorLocation, COLOR_COMPONENT_COUNT, GL_FLOAT,
fal, STRIDE, vertexData);