在 Visual Studio 中使用 Shader Designer 创建着色器

本文介绍如何使用 Shader Designer 创建不同类型的着色器。

创建基本平面颜色着色器

可以使用 Shader Designer 和 Directed Graph Shader 语言 (DGSL) 创建平面颜色着色器。 此着色器将最终颜色设置为常量 RGB 颜色值。 可将 RGB 颜色常量的颜色值写入最终输出颜色来实现平面颜色着色器。

开始前，请确保显示“属性”窗口和“工具箱”。

1. 创建要使用的 DGSL 着色器。 若要了解如何向项目添加 DGSL 着色器，请参阅着色器设计器中的“入门”部分。

2. 删除“点颜色”节点。 使用“选择”工具选择“点颜色”节点，然后在菜单栏上选择“编辑”>“删除”。

3. 将“颜色常量”节点添加到关系图。 在“常量”的“工具箱”中，选择“颜色常量”，然后将其移到设计图面。

4. 为“颜色常量”节点指定颜色值。 使用“选择”工具选择“颜色常量”节点，然后在“属性”窗口的“输出”属性中指定颜色值。 为橙色指定 (1.0, 0.5, 0.2, 1.0) 中的值。

5. 将颜色常量连接到最终颜色。 若要创建连接，请将“颜色常量”节点的“RGB”终端移到“最终颜色”节点的“RGB”终端，然后将“颜色常量”节点的“Alpha”终端移到“最终颜色”节点的“Alpha”终端。 这些连接将最终颜色设置为上一步中定义的颜色常量。

下图显示了已完成的着色器关系图和应用于立方体的着色器预览。

注意

在图中，指定橙色以更好地展示着色器的效果。

某些形状可能会增强某些着色器的预览效果。 若要深入了解如何在着色器设计器中预览着色器，请参阅着色器设计器。

创建基本 Lambert 着色器

你也可以使用 Shader Designer 和 Directed Graph Shader 语言 (DGSL) 创建实现经典 Lambert 光照模型的光照着色器。

朗伯照明模型将环境照明和方向照明应用到三维场景中的阴影对象。 环境分量在三维场景中提供基本照明级别。 方向分量提供来自定向（远）光源的额外照明。 环境照明会均匀影响场景中的所有表面，而不考虑其方向。 对于给定表面，它是表面的环境色和场景中环境照明的颜色和强度的结合产物。 定向照明根据相对于光源方向的表面方向，以不同方式影响场景中的每个表面。 它是表面的漫射颜色和方向，以及光源的颜色、强度和方向生成的结果。 直接面向光源的表面接收比例最大，直接背对的表面无接收比例。 在朗伯照明模型下，会结合环境分量和一个或多个定向分量来确定对象上每个点的总漫射颜色比例。

开始前，请确保显示“属性”窗口和“工具箱”。

1. 创建要使用的 DGSL 着色器。 若要了解如何向项目添加 DGSL 着色器，请参阅着色器设计器中的“入门”部分。

2. 从“最终颜色”节点断开“点颜色”节点。 选择“点颜色”节点的“RGB”终端，然后选择“断开链接”。 让“Alpha”终端保持连接状态。

3. 向关系图添加“朗伯”节点。 在“工具箱”中的“实用工具”下选择“朗伯”，然后将其移到设计图面。 朗伯节点基于环境和漫射照明参数计算像素的总漫射颜色比例。

4. 将“点颜色”节点连接到“朗伯”节点。 在“选择”模式下，将“点颜色”节点的“RGB”终端移到“朗伯”节点的“漫射颜色”终端。 此连接为朗伯节点提供了像素的内插漫射颜色。

5. 将计算得出的颜色值连接到最终颜色。 将“朗伯”节点的“输出”终端移到“最终颜色”节点的“RGB”终端。

   下图显示了已完成的着色器关系图和应用于茶壶体的着色器预览。

注意

为了更好地演示该图着色器的效果，使用着色器的 MaterialDiffuse 参数指定了橙色。 游戏或应用可使用此参数为每个对象提供唯一的颜色值。 有关材料参数的信息，请参阅 Shader Designer。

下图显示了本文档中所述的应用于三维模型的着色器。

创建基本 Phong 着色器

你也可以使用 Shader Designer 和 Directed Graph Shader 语言 (DGSL) 创建实现经典 Phong 光照模型的光照着色器。

冯氏照明模型扩展了朗伯照明模型，包括可反射图面属性的镜面高光。 反射分量提供用于朗伯照明模型的相同定向光源的其他照明，但是会以不同的方式处理其对最终颜色的比例。 镜面高光根据视图方向、光源方向和表面方向之间的关系，以不同的方式影响场景中的每个表面。 它是表面的反射颜色、反射强度和方向，以及光源的颜色、强度和方向共同产生的结果。 在观察者处直接反射光源的表面接收最大反射比例，反射远离观察者的光源的表面无接收比例。 在冯氏照明模型下，将结合一个或多个反射分量来确定对象上每个点的镜面高光颜色和强度，然后将其添加到朗伯照明模型的结果上以产生像素的最终颜色。

有关朗伯照明模型的详细信息，请参阅如何：创建基本朗伯着色器。

开始前，请确保显示“属性”窗口和“工具箱”。

1. 按如何：创建基本朗伯着色器中所述创建朗伯着色器。

2. 从“最终颜色”节点断开“朗伯”节点。 选择“朗伯”节点的“RGB”终端，然后选择“断开链接”。 这为在下一步中添加的节点腾出空间。

3. 向关系图添加“添加”节点。 在“工具箱”中的“数学”下选择“添加”，然后将其移到设计图面。

4. 向关系图添加“反射”节点。 在“工具箱”中的“实用工具”下，选择“反射”，然后将其移到设计图面。

5. 添加反射比例。 将“反射”节点的“输出”终端移到“添加”节点的“X”终端，然后将“朗伯”节点的“输出”终端移到“添加”节点的“Y”终端。 这些连接会组合像素的总漫射比例和总反射颜色比例。

6. 将计算得出的颜色值连接到最终颜色。 将“添加”节点的“输出”终端移到“最终颜色”节点的“RGB”终端。

   下图显示了已完成的着色器关系图和应用于茶壶体的着色器预览。

注意

为了更好地演示该图中着色器的效果，使用着色器的 MaterialDiffuse 参数指定了橙色，并使用 MaterialSpecular 和 MaterialSpecularPower 参数指定了金属外观。 有关材料参数的信息，请参阅 Shader Designer。

某些形状可能会增强某些着色器的预览效果。 要了解有关预览着色器的详细信息，请参阅 Shader Designer。

下图显示了本文档中所述的应用于三维模型的着色器。 MaterialSpecular 属性设置为 (1.00, 0.50, 0.20, 0.00)，并将其 MaterialSpecularPower 属性设置为 16。

注意

MaterialSpecular 属性确定表面材质的表面光洁度。 高光泽表面（如玻璃或塑料）往往具有白色明亮阴影的反射颜色。 金属表面往往具有接近其漫射颜色的反射颜色。 缎面表面往往具有深灰色的反射颜色。

MaterialSpecularPower 属性确定高光的强度。 高反射强度模拟更暗淡、更局部化的高光效果。 较低的反射强度模拟大幅度的强烈高光，其可能会过度饱和并遮掩整个表面的颜色。

创建基本纹理着色器

使用 Shader Designer 和 Directed Graph Shader 语言 (DGSL) 创建单纹理着色器。 此着色器直接将最终颜色设置为从纹理中采样的 RGB 和 alpha 值。

可通过将纹理样本的颜色和 alpha 值直接写入最终输出颜色，实现基本的单纹理着色器。

开始前，请确保显示“属性”窗口和“工具箱”。

1. 创建要使用的 DGSL 着色器。 若要了解如何向项目添加 DGSL 着色器，请参阅着色器设计器中的“入门”部分。

2. 删除“点颜色”节点。 在“选择”模式下，选择“点颜色”节点，然后在菜单栏上选择“编辑”>“删除”。 这为在下一步中添加的节点腾出空间。

3. 将“纹理样本”节点添加到关系图。 在“工具箱”中的“纹理”下选择“纹理样本”，然后将其移到设计图面。

4. 将“纹理坐标”节点添加到关系图。 在“工具箱”中的“纹理”下选择“纹理坐标”，然后将其移到设计图面。

5. 选择要应用的纹理。 在“选择”模式中，选择“纹理样本”节点，然后在“属性”窗口中通过“文件名”属性指定要使用的纹理。

6. 使纹理可公开访问。 选择“纹理样本”节点，然后在“属性”窗口中将“访问”属性设置为“公共”。 现可利用其他工具（如模型编辑器）设置纹理。

7. 将纹理坐标连接到纹理样本。 在“选择”模式下，将“纹理坐标”节点的“输出”终端移到“纹理样本”节点的“UV”终端。 此连接在指定坐标处对纹理进行采样。

8. 将纹理样本连接到最终颜色。 将“纹理示例”节点的“RGB”终端移到“最终颜色”节点的“RGB”终端，然后将“纹理示例”节点的“Alpha”终端移到“最终颜色”节点的“Alpha”终端。

下图显示了已完成的着色器关系图和应用于立方体的着色器预览。

注意

在此插图中，飞机用作预览形状，并且已指定一个纹理以更好地演示着色器的效果。

某些形状可能会增强某些着色器的预览效果。 若要深入了解如何在着色器设计器中预览着色器，请参阅着色器设计器

创建灰度纹理着色器

使用 Shader Designer 和 Directed Graph Shader 语言 (DGSL) 创建灰度纹理着色器。 此着色器将修改纹理样本的 RGB 颜色值，然后将其与未修改的 Alpha 值一起用于设置最终颜色。

可以通过在将纹理样本写入最终输出颜色之前修改纹理样本的颜色值来实现灰度纹理着色器。

开始前，请确保显示“属性”窗口和“工具箱”。

1. 按如何：创建基本纹理着色器中所述创建基本纹理着色器。

2. 从“最终颜色”节点的“RGB”终端断开“纹理示例”节点的“RGB”终端。 在“选择”模式中，选择“纹理示例”节点的“RGB”终端，然后选择“断开链接”。 这为在下一步中添加的节点腾出空间。

3. 向图添加“去除饱和度”节点。 在“工具箱”中的“文件”，选择“去除饱和度”，然后将其移到设计图面。

4. 使用“去除饱和度”节点计算灰度值。 在“选择”模式中，将“纹理样示例”节点的“RGB”终端移到“去除饱和度”节点的“RGB”终端。

   注意

   默认情况下，“去除饱和度”节点完全去除输入颜色的饱和度，并使用标准亮度权重进行灰度转换。 可以通过更改“亮度”属性的值或仅部分去除输入颜色的饱和度来更改“去除饱和度”节点的行为方式。 若要部分去除输入颜色的饱和度，请向“去除饱和度”节点的“百分比”终端提供 [0,1) 范围中的标量值。

5. 将灰度颜色值连接到最终颜色。 将“去除饱和度”节点的“输出”终端移到“最终颜色”节点的“RGB”终端。

下图显示了已完成的着色器关系图和应用于立方体的着色器预览。

在此插图中，飞机用作预览形状，并且已指定一个纹理以更好地演示着色器的效果。 某些形状可能会增强某些着色器的预览效果。 要了解有关预览着色器的详细信息，请参阅 Shader Designer。

创建基于几何图形的渐变着色器

使用 Shader Designer 和 Directed Graph Shader 语言创建基于几何图形的渐变着色器。 此着色器将常量 RGB 颜色值按照世界空间中对象的每个点的高度进行缩放。

您可以通过将像素的位置并入着色器中来实现基于几何图形的着色器。 在着色语言中，除了 2D 屏幕上的颜色和位置之外，像素还包含其他信息。 像素（在某些系统中称为片段）是值的一个集合，描述对应于像素的图面。 本文档中描述的着色器利用全局空间中三维对象的每个像素的高度，来影响片段的最终输出颜色。

开始前，请确保显示“属性”窗口和“工具箱”。

1. 创建要使用的 DGSL 着色器。 要了解如何向项目添加 DGSL 着色器，请参阅关于 Shader Designer 中的“入门”部分。

2. 从“最终颜色”节点断开“点颜色”节点。 选择“点颜色”节点的“RGB”终端，然后选择“断开链接”。 这为在下一步中添加的节点腾出空间。

3. 向关系图添加“乘法”节点。 在“工具箱”中的“数学”下，选择“乘法”，然后将其移到设计图面。

4. 向关系图添加“遮罩向量”节点。 在“工具箱”中的“实用工具”下，选择“遮罩向量”，然后将其移到设计图面。

5. 为“遮罩向量”节点指定掩码值。 在“选择”模式中，选择“遮罩向量”节点，然后在“属性”窗口中，将“绿色/Y”属性设置为“True”，并将“红色/X”、“蓝色/Z”和“Alpha / W”属性设置为“False”。 在此示例中，“红色/X”、“绿色/Y”和“蓝色/Z”属性对应于“世界位置”节点的 x、y 和 z 分量，并且不使用“Alpha / W”。 由于仅将“绿色/Y”设置为“True”，因此在遮盖它后，仅保留输入向量的 y 分量。

6. 向关系图添加“世界位置”节点。 在“工具箱”中的“常量”下，选择“世界位置”，然后将其移到设计图面。

7. 掩盖片段的世界空间位置。 在“选择”模式中，将“世界位置”的“输出”终端移到“遮罩向量”节点的“矢量”终端。 此连接会掩盖片段的位置以忽略 x 和 z 分量。

8. 将 RGB 颜色常量乘以遮罩的世界空间位置。 将“点颜色”节点的“RGB”终端移到“乘法”节点的“Y”终端，然后将“遮罩向量”节点的“输出”终端移到“乘法”节点的“X”终端。 此连接按全局空间中的像素高度缩放颜色值。

9. 将缩放的颜色值连接到最终颜色。 将“乘法”节点的“输出”终端移到“最终颜色”节点的“RGB”终端。

下图显示了已完成的着色器关系图和应用于球体的着色器预览。

注意

在此图中，指定了橙色以更好地演示着色器的效果，但因为预览形状在世界空间中没有位置，所以无法在着色器设计器中完全预览该着色器。 必须在实际场景中预览着色器以演示完全效果。

某些形状可能会增强某些着色器的预览效果。 要了解有关预览着色器的详细信息，请参阅 Shader Designer。

下图显示了应用于在如何：构建三维地形模型中演示的三维场景的着色器（此着色器为本文档中所述的着色器）。 颜色的强度随着世界中点的高度而增加。

有关如何向三维模型应用着色器的详细信息，请参阅如何：向三维模型应用着色器。

相关内容

• 如何：向三维模型应用着色器
• 如何：导出着色器
• 着色器设计器节点
• 图像编辑器