Vertex and fragment shader examples

Vertex and fragment shader examples

顶点片断着色程序例子

This page contains vertex and fragment program examples. For a basic introduction to shaders, see the shader tutorials: Part 1 and Part 2. For an easy way of writing regular material shaders, see Surface Shaders.

这章包含顶点和片段程序例子，对于着色器的基本介绍请看教程的前两部分，对于编写材质着色程序请看表面着色器。

You can download the examples shown below as a zipped Unity project.

你可以下载下面压缩的Unity工程例子。

Setting up the scene

建立场景

If you are not familiar with Unity’s Scene View, Hierarchy View, Project View and Inspector, now would be a good time to read the first few sections from the manual, starting with Unity Basics.

你不熟悉Unity的Scene，Hierarchy，Project和 Inspector面板的话，需要先去学习Unity的基础部分。

The first step is to create some objects which you will use to test your shaders. Select Game Object > 3D Object > Capsule in the main menu. Then position the camera so it shows the capsule. Double-click the Capsule in the Hierarchy to focus the scene view on it, then select the Main Camera object and click Game object > Align with View from the main menu.

建立一些物体可以用来测试我们的着色程序，这里选择创建一个胶囊体，用主摄像机聚焦它，在Hierarchy面板中双击它，Scene视图的视角聚焦于它，选中主摄像机，在主菜单栏中选择Game object > Align with View就完成了。

Create a new Material by selecting Create > Material from the menu in the Project View. A new material called New Material will appear in the Project View.

在工程视图中新建一个材质球，工程视图中可以看到初始名为New Material 的一个材质。

Creating a shader

创建一个着色器程序

Now create a new Shader asset in a similar way. Select Create > Shader > Unlit Shader from the menu in the Project View. This creates a basic shader that just displays a texture without any lighting.

用同样的方式创建一个着色器资源，主菜单栏中选中Create > Shader > Unlit Shader，这是最基本的不带任何光照只显示一张纹理贴图的着色器。

Other entries in the Create > Shader menu create barebone shaders or other types, for example a basic surface shader.

其他类型通过 Create > Shader选择，比如最基本的表面着色器。

Linking the mesh, material and shader

关联网格，材质和着色器

Make the material use the shader via the material’s inspector, or just drag the shader asset over the material asset in the Project View. The material inspector will display a white sphere when it uses this shader.

通过材质的检视面板来使用着色器，或者直接拖动着色器到材质的工程视图上，当用这个着色器进材质球显示为白色球状。

Now drag the material onto your mesh object in either the Scene or the Hierarchy views. Alternatively, select the object, and in the inspector make it use the material in the Mesh Renderer component’s Materials slot.

现在拖拽材质到你的网格对象上无论是用Scene还是 Hierarchy视图，或者选中对象的检视面板，让它网格渲染材质的地方使用我们的材质。

With these things set up, you can now begin looking at the shader code, and you will see the results of your changes to the shader on the capsule in the Scene View.

设置好后你可以在场景视图中看到你的着色器在胶囊体上的效果。

Main parts of the shader

着色器的主要部分

To begin examining the code of the shader, double-click the shader asset in the Project View. The shader code will open in your script editor (MonoDevelop or Visual Studio).

想查看着色器源码直接在工程视图中双击着色器，它就会被脚本编辑器（MonoDevelop or Visual Studio）打开。

The shader starts off with this code:

着色器源码如下：

This initial shader does not look very simple! But don’t worry, we will go over each part step-by-step.

初始代码看起来不简单，不用担心，一步一步来看。

Let’s see the main parts of our simple shader.

让我们先看简易着色器的主要部分。

The Shader command contains a string with the name of the shader. You can use forward slash characters “/” to place your shader in sub-menus when selecting your shader in the Material inspector.

Shader指令包含了以shader为名字的字符串，你可以使用斜杠“/”来指定着色器子菜单，这样你可以在材质的检视面板中进行你的着色器选择。

The Properties block contains shader variables (textures, colors etc.) that will be saved as part of the Material, and displayed in the material inspector. In our unlit shader template, there is a single texture property declared.

属性块包含的是给材质使用的着色器变量（纹理，颜色等），并可以在材质的检视面板中调节。在不发光着色器模板的属性模块中就只声明了一个单独的纹理贴图。

A Shader can contain one or more SubShaders, which are primarily used to implement shaders for different GPU capabilities. In this tutorial we’re not much concerned with that, so all our shaders will contain just one SubShader.

一个着色器可以包含一个或多个子着色器模块，用来适应不同性能的GPU，我们先忽略这一块，接下来的着色器都只有一个子着色器。

Each SubShader is composed of a number of passes, and each Pass represents an execution of the vertex and fragment code for the same object rendered with the material of the shader. Many simple shaders use just one pass, but shaders that interact with lighting might need more (see Lighting Pipeline for details). Commands inside Pass typically setup fixed function state, for example blending modes.

每个子着色器被许多通道编译，每个通道代表了关于该着色器材质渲染的同一个对象的顶点和片段程序的执行。许多简单的着色器只有一个通道，关于光照作用的需要多个通道（详情查看Lighting Pipeline）。通道中的指令用来设置功能状态，比如混合模式。

These keywords surround portions of Cg/HLSL code within the vertex and fragment shaders. Typically this is where most of the interesting code is. See vertex and fragment shaders for details.

这些关键字是顶点片段程序中关于Cg/HLSL代码部分，这也是代码中最具代表性有趣的部分，详情查看顶点和片段着色器。

Simple unlit shader

简单的不发光着色器

The unlit shader template does a few more things than would be absolutely needed to display an object with a texture. For example, it supports Fog, and texture tiling/offset fields in the material. Let’s simplify the shader to bare minimum, and add more comments:

该着色器有许多效果而不仅仅是让作用对象显示一张纹理，比如它支持雾化，在材质中添加瓦和印刷等效果。可以简化一下着色器到最简，并加入一些注释。

The Vertex Shader is a program that runs on each vertex of the 3D model. Quite often it does not do anything particularly interesting. Here we just transform vertex position from object space into so called “clip space”, which is what’s used by the GPU to rasterize the object on screen. We also pass the input texture coordinate unmodified - we’ll need it to sample the texture in the fragment shader.

顶点着色器是一个作用于3D模型每个顶点的程序，做的事情比较枯燥。这里仅仅从物体空间对顶点位置进行转换，所以称作剪裁空间，在GPU中对物体进行光栅化输出到屏幕。不改变输入的纹理坐标，我们将需要在片段着色过程中进行取样。

The Fragment Shader is a program that runs on each and every pixel that object occupies on-screen, and is usually used to calculate and output the color of each pixel. Usually there are millions of pixels on the screen, and the fragment shaders are executed for all of them! Optimizing fragment shaders is quite an important part of overall game performance work.

片段程序是作用于每一个物体在屏幕上占用的像素，经常用来计算并输出每个像素点的颜色值。屏幕上通常有上百万个像素，片段着色器执行所有关于它们的信息。从整个游戏的性能来看，片段着色器优化是非常重要的一项工作。

Some variable or function definitions are followed by a Semantic Signifier - for example : POSITION or : SV_Target. These semantics signifiers communicate the “meaning” of these variables to the GPU. See the shader semantics page for details.

一些变量或者函数定义来源于语义标记符，比如 POSITION ，SV_Target，这些语义符号意味着可以与GPU中的这些变量通信，详情查看shader semantics这章。

When used on a nice model with a nice texture, our simple shader looks pretty good!

当我们使用一个使用了优质纹理的优质模型，我们的简单着色器效果也会非常棒。

Even simpler single color shader

平滑单一的简单着色着色器

Let’s simplify the shader even more – we’ll make a shader that draws the whole object in a single color. This is not terribly useful, but hey we’re learning here.

来编译更多的着色程序，我们将编写一个着色器可以在项目中用一个单一的颜色着色，作用不大但是可以学习一下。

This time instead of using structs for input (appdata) and output (v2f), the shader functions just spell out inputs manually. Both ways work, and which you choose to use depends on your coding style and preference.

这次我们不使用结构体作为数据的输入输出，使用着色器函数输出输入信息，两种方式都能工作，选哪个取决于你编程风格和偏好。