shader_ 素描效果

素描效果

案例分析自: 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 );
    }
  }
}

<全文结束>