彩色矩形

要点

1. 将颜色值和坐标点按照一定的规律放置在一个 float[] 数组里面

2. 使用offset 控制设置参数使用的数据位置, 和数据,

3. glsl代码改写.

4. 问题?

   透明度没用?

代码修改

1. 将坐标点和颜色值按照规律放在一起 (坐标3个数, 颜色值4个值)

   static final float squareCoords[] = {
           -0.5f,  0.5f, 0.0f,     1, 0, 0, 0.1f,  // top left
           -0.5f, -0.5f, 0.0f,     0, 1, 0, 0.1f, // bottom left
           0.5f, -0.5f, 0.0f,      0, 0, 1, 0.1f, // bottom right
   
           -0.5f,  0.5f, 0.0f,     1, 0, 0, 0.1f,  // top left
           0.5f, -0.5f, 0.0f,      0, 0, 1, 0.1f, // bottom right
           0.5f,  0.5f, 0.0f,      0, 1, 0, 0.1f,// top right
   };
   

2. 重新计算数据的跨度,和元素个数.

   因为 颜色值的混入, 长度会需要明显的增加, 因为这28 个数值表示的还是4个点的矩形.

   //顶点个数
   vertexCount = squareCoords.length / (COORDS_PER_VERTEX  + COORDS_PER_COLOR);
   //步长.
   vertexStride = (COORDS_PER_VERTEX  + COORDS_PER_COLOR) * 4; //需要跨过三个点.,  // 4 bytes per vertex
   

3. 使用offset 控制分离 点坐标和 颜色float值.

   shaderProgram.enableVertexAttribute("vPosition");
   //这个地方没有使用 传入数据, 而是选择 offset 这个函数, 将数据的传入放到了后面的 GPU 里面直接拉取,
   //这个地方的第二个参数 size 代表的意义是多少个float 点表示一个坐标.
   shaderProgram.setVertexAttribute("vPosition" ,COORDS_PER_VERTEX , GLES20.GL_FLOAT , false , vertexStride , 0);
   //加载buffer 数据到画布里面去
   //数据之前就已经放置进去了.
   
   shaderProgram.enableVertexAttribute("aColor");
   shaderProgram.setVertexAttribute("aColor", COORDS_PER_COLOR, GLES20.GL_FLOAT ,false , vertexStride, COORDS_PER_VERTEX * 4);
   

4. glsl 代码改写

   #version 100
   precision mediump float;
   
   varying lowp vec4 vColor;
   void main() {
       gl_FragColor = vColor;
   }
   
   
   #version 100
   attribute vec4 vPosition;
   attribute vec4 aColor;
   
   varying lowp vec4 vColor;
   void main() {
       gl_Position = vPosition;
       vColor = aColor;
   }
   

   ​

5. Note

   varying : 这个参数在vert 里面就是 out 数据,

   在frag 里面就是in 的数据, flag 和 vert 可以通过这个变量类型传递值.

   lowp: 精度修饰符,

   mediump : 中级的精度

   highp: 高精度.

   ​ 精度修饰符声明了底层实现存储这些变量必须要使用的最小范围和精度。实现可能会使用比要求更大的范围和精度，但绝对不会比要求少。

   ​ 下面是精度修饰符要求的最低范围和精度：

480634_3228.jpeg

​