素描效果
案例分析自: three.js/ToonShader.js/ToonShaderHatching
1、gl_FragColor
顶点着色器仅仅是显示几何体, 条纹处理都在片元着色器。
常规的顶点着色器:
varying vec3 vNormal;
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
vNormal = normalize( normalMatrix * normal );
}
片元着色器这里使用了 glsl 的内置变量gl_FragColor
。这里简单介绍一下.
gl_FragColor:
gl_FragColor
是该片元的屏幕相对像素坐标- 该参数是一个vec4类型,(x, y, z, 1/w)
- x,y的范围是viewport的范围
- x,y的值对应于相对于屏幕左下角为原点的屏幕坐标
注意,这里不能使用默认的顶点uv坐标,如果想通过uv画对角线的直线:
// 片元shader
vec2 uv =vUv;
if ( abs(uv.x-uv.y) <= 0.01) {
gl_FragColor = vec4( 1.0,0.0,0.0, 1.0 );
}
结果:
2、绘制纵条纹
float c = mod(gl_FragCoord.x, 20.0);
if ( c < 1.0) {
gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );
}
3、绘制横条纹
float c = mod(gl_FragCoord.y, 20.0);
if ( c < 1.0) {
gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );
}
4、绘制斜条纹
float c = mod(gl_FragCoord.y, 20.0);
if ( c < 1.0) {
float c = mod(gl_FragCoord.y+gl_FragCoord.x, 20.0);
}
在这里插入图片描述
5、计算光的比重
float directionalLightWeighting = max( dot( normalize(vNormal), uDirLightPos ), 0.0);
vec3 lightWeighting = uAmbientLightColor + uDirLightColor * directionalLightWeighting;
6、绘制不同层次的条纹
void main() {
float directionalLightWeighting = max( dot( normalize(vNormal), uDirLightPos ), 0.0);
vec3 lightWeighting = uAmbientLightColor + uDirLightColor * directionalLightWeighting;
gl_FragColor = vec4( uBaseColor, 1.0 );
if ( length(lightWeighting) < 1.00 ) {
if ( mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {
gl_FragColor = vec4( uLineColor1, 1.0 );
}
}
if ( length(lightWeighting) < 1.00 ) {
if ( mod(gl_FragCoord.x + gl_FragCoord.y-5.0, 10.0) == 0.0) {
gl_FragColor = vec4( uLineColor1, 1.0 );
}
}
if ( length(lightWeighting) < 0.75 ) {
if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {
gl_FragColor = vec4( uLineColor2, 1.0 );
}
}
if ( length(lightWeighting) < 0.50 ) {
if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {
gl_FragColor = vec4( uLineColor3, 1.0 );
}
}
if ( length(lightWeighting) < 0.3465 ) {
if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {
gl_FragColor = vec4( uLineColor4, 1.0 );
}
}
}
<全文结束>