Cocos Creator Shader实践：顶点设置颜色gl_Color用法

发表于 | 分类于

在手动写搓扑克效果(二)中我们介绍过verts和texCoord的使用。
其实在顶点Shader中还有另外两个：背面颜色gl_BackColor ,正面颜色gl_FrontColor可以用来设置顶点的颜色值。

"三角形分布图"

顶点Shader代码，顶点位置参考上图:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
module.exports =
`
void main(){
    // 坐标
    vec4 v = vec4(gl_Vertex);
    v = CC_PMatrix * v;
    //我们分别将六个顶点设置为四种颜色
    if(v.x > 0&&v.y>0){
        //蓝 点A,A'
        gl_FrontColor = vec4(0.0,0.0,1.0,1.0);
    }
    if(v.x>0&&v.y<0){
        //红 点B'
        gl_FrontColor = vec4(1.0,0.0,0.0,1.0);
    }
    if(v.x<0&&v.y<0){
        //绿 点C,C'
        gl_FrontColor = vec4(0.0,1.0,0.0,1.0);
    }
    if(v.x<0&&v.y>0){
        //红 点B 
        gl_FrontColor = vec4(1.0,0.0,0.0,1.0);
    }
    gl_Position = v;
}
`

片元Shader代码:

1
2
3
4
5
6
7
module.exports = 
`
void main(){

    gl_FragColor = gl_Color;
}
`

Cocos Creator Shader使用方法参考手动写搓扑克效果(一)

效果图:
"顶点颜色效果图"

gl_FrontColor和gl_BackColor会根据图元的方向，自动转变为片断shader中的gl_Color。并且片元的颜色值将自动计算为顶点颜色的插值。若想要单色，顶点颜色需设置为相同色。

正反面的判断是根据顶点设置顺序来决定的：
"三角形分布图"
默认逆时针设置的顶点为正面，当开启面剔除:glEnable(GL_CULL_FACE);Cocos Creator代码为:gl.enable(gl.CULL_FACE);，顺时针设置顶点构成面将不可见。面颠倒代码:glCullFace(GL_FRONT); Cocos Creator代码为:gl.cullFace(gl.FRONT);，此代码会使前后面颠倒，顺时针顶点变为正面。