Qt 3D的研究（五）：Gooch Shader
Qt 3D的研究（五）：Gooch Shader
Qt 3D的一个很大的优势就是采用数据驱动的方式，将C++和GLSL使用QML来表示，动态语言的优势尽显。在上一次的研究中，我实现了一个非常简单的着色器，接下来，我们可以在此基础上，通过设定着色器的数据，制作出更加绚丽的着色效果。作为开始，我们先从几个非真实渲染（Non-Photorealistic Rendering，NPR）开始吧。
蒋彩阳原创文章，首发地址：http://blog.csdn.net/gamesdev/article/details/44007495。欢迎同行前来探讨。
首先我们开始研究Gooch着色器。Gooch着色器是Phong着色器的一个变种，一般用于技术插图中，比如说下面这张插图的效果就可以使用Gooch着色器完成。
接下来我们将上一篇文章的QML代码稍微修改一下，以支持我们的Gooch着色器。下面是新增的代码：
import Qt3D 2.0
import Qt3D.Render 2.0
Entity
{
id: root
Camera
{
id: camera
position: Qt.vector3d( 0.0, 0.0, 40.0 )
projectionType: CameraLens.PerspectiveProjection
fieldOfView: 45
aspectRatio: 16.0 / 9.0
nearPlane : 0.1
farPlane : 1000.0
upVector: Qt.vector3d( 0.0, 1.0, 0.0 )
viewCenter: Qt.vector3d( 0.0, 0.0, 0.0 )
}
components: FrameGraph
{
ForwardRenderer
{
clearColor: Qt.rgba( 1.0, 0.8, 0.2, 1 )
camera: camera
}
}
Entity
{
Mesh
{
id: mesh
source: "qrc:/toyplane.obj"
}
Material
{
id: material
effect: effect
Effect
{
id: effect
techniques: [ technique ]
Technique
{
id: technique
openGLFilter
{
api: OpenGLFilter.Desktop
profile: OpenGLFilter.None
majorVersion: 2
minorVersion: 0
}
renderPasses: [ renderPass ]
//! [5]
parameters:
[
Parameter
{
name: "lightPosition"
value: camera.position
},
Parameter
{
name: "surfaceColor"
value: Qt.rgba( 0.9, 0.9, 0.9, 1 )
},
Parameter
{
name: "warmColor"
value: Qt.rgba( 0.8, 0.3, 0.0, 1 )
},
Parameter
{
name: "coolColor"
value: Qt.rgba( 0.0, 0.3, 0.2, 1 )
},
Parameter
{
name: "diffuseWarm"
value: 0.4
},
Parameter
{
name: "diffuseCool"
value: 0.6
}
]
//! [5]
RenderPass
{
id: renderPass
shaderProgram: goochSP
ShaderProgram
{
id: goochSP
vertexShaderCode: loadSource( "qrc:/Gooch.vert" )
fragmentShaderCode: loadSource( "qrc:/Gooch.frag" )
}
}
}
}
}
components: [ mesh, material ]
}
Configuration
{
controlledCamera: camera
}
}在//! [5]中我们定义了一些需要传入的参数。它们是lightPosition、surfaceColor、warmColor、coolColor、diffuseWarm和diffuseCool。这些是要在着色器中定义的uniform参数，所以我们必须要在QML中显示地指定它。其实Parameter定义在哪里，Qt 3D是有讲究的。Qt 3D是这样一个规律：Parameter定义在外层的，会覆盖在内层的同名Parameter，也就是说，内层的Parameter作为一个默认的参数，可以通过外层的Parameter进行修改。目前，Qt3D的覆盖优先顺序是：Material→Effect→Technique→RenderPass→GLSL默认值。
介绍完了这些，让我们看看GLSL是如何的吧。
// Gooch.vert
#version 100
// Qt 3D默认提供的参数
attribute vec3 vertexPosition;
attribute vec3 vertexNormal;
uniform mat4 modelView;
uniform mat4 modelNormalMatrix;
uniform mat4 mvp;
// 自己提供的参数
uniform vec3 lightPosition;
varying vec3 reflectVec;
varying vec3 viewVec;
varying float NdotL;
void main( void )
{
vec3 ecPos = ( modelView * vec4( vertexPosition, 1.0 ) ).xyz;
vec3 normal = normalize( modelNormalMatrix * vec4( vertexNormal, 1.0 ) ).xyz;
vec3 lightVec = normalize( lightPosition - ecPos );
reflectVec = normalize( reflect( -lightVec, normal ) );
viewVec = normalize( -ecPos );
NdotL = ( dot( lightVec, normal ) + 1.0 ) * 0.5;
gl_Position = mvp * vec4( vertexPosition, 1.0 );
}顶点着色器中我们仍然像Phong光照模型一样，求出NdotL，在片断着色器中使用；然后我们算出reflectVec，和viewVec，作为反射和视向量的单位向量，留到片断着色器中使用。
// Gooch.frag
#version 100
// 自己提供的参数
uniform vec3 surfaceColor;
uniform vec3 warmColor;
uniform vec3 coolColor;
uniform float diffuseWarm;
uniform float diffuseCool;
varying vec3 reflectVec;
varying vec3 viewVec;
varying float NdotL;
void main( void )
{
vec3 kcool = min( coolColor + diffuseCool * surfaceColor, 1.0 );
vec3 kwarm = min( warmColor + diffuseWarm * surfaceColor, 1.0 );
vec3 kfinal = mix( kcool, kwarm, NdotL );
float spec = max( dot( reflectVec, viewVec ), 0.0 );
spec = pow( spec, 32.0 );
gl_FragColor = vec4( min( kfinal + spec, 1.0 ), 1.0 );
}在片断着色器中，我们定义了平面颜色、暖色调颜色、冷色调颜色以及他们相应的参数。这些参数需要我们通过mix函数（线性插值函数）最终得出基本的颜色，紧接着我们计算镜面反射光，让模型飞机具有光泽效果，最后将这些值添加起来，得到的是片断颜色。
演示程序截图如下：
嗯，通过调节参数来获取更好的效果，不过呢，更好的方法是定义一个颜色版纹理来得到一些更有趣的渲染效果：
方法是：首先我们定义一个颜色调色版的纹理：
然后在QML中添加这样一个参数以及相应的纹理对象：
parameters:
[
Parameter
{
name: "lightPosition"
value: camera.position
},
Parameter
{
name: "surfaceColor"
value: Qt.rgba( 0.9, 0.9, 0.9, 1 )
},
Parameter
{
name: "warmColor"
value: Qt.rgba( 0.8, 0.3, 0.0, 1 )
},
Parameter
{
name: "coolColor"
value: Qt.rgba( 0.0, 0.3, 0.2, 1 )
},
Parameter
{
name: "diffuseWarm"
value: 0.4
},
Parameter
{
name: "diffuseCool"
value: 0.6
},
//! [6]
Parameter
{
name: "texPalette"
value: texPalette
}
]
Texture2D
{
id: texPalette
TextureImage
{
source: "qrc:/texturePalette.png"
}
}
//! [6]
这里定义了Texture2D类以及TextureImage类。TextureImage类作为纹理的载入者，可以接受QImage能够载入的图片类型，接着作为Texture2D类的默认属性被生成一个纹理采样器（texture sampler2D），作为一个uniform变量载入到GLSL中。
GLSL中顶点着色器不变，片断着色器作如下的修改：
// Gooch.frag
#version 100
// 自己提供的参数
uniform vec3 surfaceColor;
uniform vec3 warmColor;
uniform vec3 coolColor;
uniform float diffuseWarm;
uniform float diffuseCool;
varying vec3 reflectVec;
varying vec3 viewVec;
varying float NdotL;
uniform sampler2D texPalette;
void main( void )
{
vec3 kcool = min( coolColor + diffuseCool * surfaceColor, 1.0 );
vec3 kwarm = min( warmColor + diffuseWarm * surfaceColor, 1.0 );
//! [6]
vec3 kfinal = texture2D( texPalette, vec2( NdotL, 1.0 ) ).xyz;
//! [6]
float spec = max( dot( reflectVec, viewVec ), 0.0 );
spec = pow( spec, 32.0 );
gl_FragColor = vec4( min( kfinal + spec, 1.0 ), 1.0 );
}这里添加了texturePalette这个sampler2D变量，并且修改了kfinal的值。
参考文献：
http://www.jonatron.ca/tag/shader/
http://shiba.hpe.sh.cn/jiaoyanzu/wuli/showArticle.aspx?articleId=333&classId=4