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);,此代码会使前后面颠倒,顺时针顶点变为正面。