素描效果
案例分析自: 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画对角线的直线:
// 片元shadervec2 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 );}}}
<全文结束>
