Shader 分析之 - Hatching(阴影线)

Devil

原文出处：
格式问题，观看不清楚，请点这里看原文：
http://www.azure.com.cn/article.asp?id=283



如有转载，请注明：
http://www.azure.com.cn

效果图如下：



此例子作为NPR渲染的经典例子，对理解实现NPR渲染的方法，很有指导作用。
实现此效果需要两个pass

• PASS1: 绘制内部的阴影线
• PASS2: 绘制外部轮廓线
  

首先来说PASS1,
PASS1中需要一个vertex shader和pixel shader , 代码如下：

vertex shader:

1. 
   
2. uniform vec4 lightDir;
   
3. 
   
4. varying vec2 vTexCoord;
   
5. varying vec3 vHatchWeights0;
   
6. varying vec3 vHatchWeights1;
   
7. 
   
8. void main(void)
   
9. {
   
10.    gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
    
11.    vTexCoord = vec2(gl_MultiTexCoord0);
    
12. 
    
13.    vec3 posW    = gl_NormalMatrix * gl_Vertex.xyz;
    
14.    vec3 normalW = normalize(gl_NormalMatrix * gl_Normal);
    
15. 
    
16.    float  diffuse = min(1.0,max(0.0,dot(lightDir.xyz,normalW)));
    
17.    diffuse = diffuse * diffuse;
    
18.    diffuse = diffuse * diffuse;
    
19. 
    
20.    float  hatchFactor = diffuse * 6.0;
    
21.    vec3 weight0 = vec3(0.0);
    
22.    vec3 weight1 = vec3(0.0);
    
23. 
    
24.    if (hatchFactor>5.0)
    
25.    {
    
26.       weight0.x = 1.0;
    
27.    } // End if
    
28. 
    
29.    else if (hatchFactor>4.0)
    
30.    {
    
31.       weight0.x = 1.0 - (5.0 - hatchFactor);
    
32.       weight0.y = 1.0 - weight0.x;
    
33.    } // End else if
    
34. 
    
35.    else if (hatchFactor>3.0)
    
36.    {
    
37.       weight0.y = 1.0 - (4.0 - hatchFactor);
    
38.       weight0.z = 1.0 - weight0.y;
    
39.    } // End else if
    
40. 
    
41.    else if (hatchFactor>2.0)
    
42.    {
    
43.       weight0.z = 1.0 - (3.0 - hatchFactor);
    
44.       weight1.x = 1.0 - weight0.z;
    
45.    } // End else if
    
46. 
    
47.    else if (hatchFactor>1.0)
    
48.    {
    
49.       weight1.x = 1.0 - (2.0 - hatchFactor);
    
50.       weight1.y = 1.0 - weight1.x;
    
51.    } // End else if
    
52. 
    
53.    else if (hatchFactor>0.0)
    
54.    {
    
55.       weight1.y = 1.0 - (1.0 - hatchFactor);
    
56.       weight1.z = 1.0 - weight1.y;
    
57.    } // End else if
    
58. 
    
59.    vHatchWeights0 = weight0;
    
60.    vHatchWeights1 = weight1;
    
61. 
    
62.    
    
63. }
    

复制代码

pixel shader:

1. 
   
2. uniform sampler2D Hatch0;
   
3. uniform sampler2D Hatch1;
   
4. uniform sampler2D Hatch2;
   
5. uniform sampler2D Hatch3;
   
6. uniform sampler2D Hatch4;
   
7. uniform sampler2D Hatch5;
   
8. varying vec2 vTexCoord;
   
9. varying vec3 vHatchWeights0;
   
10. varying vec3 vHatchWeights1;
    
11. 
    
12. void main(void)
    
13. {
    
14.     vec4 hatchTex0 = texture2D(Hatch0,vTexCoord) * vHatchWeights0.x;
    
15.     vec4 hatchTex1 = texture2D(Hatch1,vTexCoord) * vHatchWeights0.y;
    
16.     vec4 hatchTex2 = texture2D(Hatch2,vTexCoord) * vHatchWeights0.z;
    
17.     vec4 hatchTex3 = texture2D(Hatch3,vTexCoord) * vHatchWeights1.x;
    
18.     vec4 hatchTex4 = texture2D(Hatch4,vTexCoord) * vHatchWeights1.y;
    
19.     vec4 hatchTex5 = texture2D(Hatch5,vTexCoord) * vHatchWeights1.z;
    
20.    
    
21.    
    
22.     vec4 hatchColor = hatchTex0 +
    
23.                         hatchTex1 +
    
24.                         hatchTex2 +
    
25.                         hatchTex3 +
    
26.                         hatchTex4 +
    
27.                         hatchTex5;
    
28.                         
    
29.      gl_FragColor = hatchColor;
    
30.   
    
31. }
    

复制代码

我们实现hatching需要多张hatching纹理，
这些hatching是一系列又淡到浓的素描纹理，如下：


在VS中。我们通过 N dot L 算出了此顶点的受光亮度，如下

1. 
   
2.    float  diffuse = min(1.0,max(0.0,dot(lightDir.xyz,normalW)));
   
3.    diffuse = diffuse * diffuse;
   
4.    diffuse = diffuse * diffuse;
   

复制代码

后面把diffuse平方两次是为了，把亮度降低点，把整体亮度向暗方向偏移，
这里只是为了更好的视觉效果。

现在最关键的就是要通过这个亮度值决定使用哪些hatch纹理的权重(hatch0, hatch1, hatch2, hatch3, hatch4, hatch5)
在这里为了减少vs向ps插值变量个数，巧妙使用了两个vec3来记录每个hatch图所绘制的权重，
见以下代码：

1. 
   
2.    float  hatchFactor = diffuse * 6.0;
   
3.    vec3 weight0 = vec3(0.0);
   
4.    vec3 weight1 = vec3(0.0);
   
5. 
   
6.    if (hatchFactor>5.0)
   
7.    {
   
8.       weight0.x = 1.0;
   
9.    } // End if
   
10. 
    
11.    else if (hatchFactor>4.0)
    
12.    {
    
13.       weight0.x = 1.0 - (5.0 - hatchFactor);
    
14.       weight0.y = 1.0 - weight0.x;
    
15.    } // End else if
    
16. 
    
17.    else if (hatchFactor>3.0)
    
18.    {
    
19.       weight0.y = 1.0 - (4.0 - hatchFactor);
    
20.       weight0.z = 1.0 - weight0.y;
    
21.    } // End else if
    
22. 
    
23.    else if (hatchFactor>2.0)
    
24.    {
    
25.       weight0.z = 1.0 - (3.0 - hatchFactor);
    
26.       weight1.x = 1.0 - weight0.z;
    
27.    } // End else if
    
28. 
    
29.    else if (hatchFactor>1.0)
    
30.    {
    
31.       weight1.x = 1.0 - (2.0 - hatchFactor);
    
32.       weight1.y = 1.0 - weight1.x;
    
33.    } // End else if
    
34. 
    
35.    else if (hatchFactor>0.0)
    
36.    {
    
37.       weight1.y = 1.0 - (1.0 - hatchFactor);
    
38.       weight1.z = 1.0 - weight1.y;
    
39.    } // End else if
    
40. 
    
41.    vHatchWeights0 = weight0;
    
42.    vHatchWeights1 = weight1;
    

复制代码

首先diffuse值被乘以6，是为了好方便区分区段。
下面一系列判断就是判断diffuse值到底在哪个区段里面，
以决定相应的权重。
vHatchWeights0.x 对应hatch0 的权重
vHatchWeights0.y 对应hatch1 的权重
vHatchWeights0.z 对应hatch2 的权重
vHatchWeights1.x 对应hatch3 的权重
vHatchWeights1.y 对应hatch4 的权重
vHatchWeights1.z 对应hatch5 的权重

接下来vHatchWeights0, vHatchWeight1 被插值到了ps
后面就很简单了，根据相应的权重，取得相应纹理的颜色，再合成起来。
代码如下：

1.   vec4 hatchTex0 = texture2D(Hatch0,vTexCoord) * vHatchWeights0.x;
   
2.     vec4 hatchTex1 = texture2D(Hatch1,vTexCoord) * vHatchWeights0.y;
   
3.     vec4 hatchTex2 = texture2D(Hatch2,vTexCoord) * vHatchWeights0.z;
   
4.     vec4 hatchTex3 = texture2D(Hatch3,vTexCoord) * vHatchWeights1.x;
   
5.     vec4 hatchTex4 = texture2D(Hatch4,vTexCoord) * vHatchWeights1.y;
   
6.     vec4 hatchTex5 = texture2D(Hatch5,vTexCoord) * vHatchWeights1.z;
   
7.    
   
8.    
   
9.     vec4 hatchColor = hatchTex0 +
   
10.                         hatchTex1 +
    
11.                         hatchTex2 +
    
12.                         hatchTex3 +
    
13.                         hatchTex4 +
    
14.                         hatchTex5;

复制代码

此时pass1完成了。

PASS2 绘制外部轮廓线：
其实很简单，就是将原来的模型，以背面剔除的方式，线框模式，再绘制一遍，
你可以设置适当线宽。

最后效果就出来了。

www.azure.com.cn

clayman

啊，效果不错
不过if else太多了，不知道性能如何
看了一下还有很大优化空间
把条件测试改为1D纹理查找应该会更快
另外轮廓线都是灰度图的情况下，可以把多张纹理打包为一张^^

顶一下～～

akira32

hatching texture要如何?生呢?不同的texture要可以接和要花一些工夫.
???一下,有完整的project??可以放上???

Devil

不需要,接合 ,
是程序插值来过渡的