写在前面：

对Metal技术感兴趣的同学，可以关注我的专题:Metal专辑
也可以关注我个人的简书账号：张芳涛
所有的代码存储的Github地址是：Metal

正文

在前面的部分中，我承诺我们将更多地了解Metal shading language(Metal着色语言)。 在此之前，首先让我们做一些代码清理和构造，因为我们已经养成了以前剧集做这个的习惯。 首先下载上一集的源代码。 我们想要重构巨大的render()函数，以开始。 因此，让我们将vertex buffer(顶点缓冲区)和render pipeline state(渲染管道状态)放在函数之外，并创建3个新的更小的函数，以便我们的旧函数可以简化为：

var vertex_buffer: MTLBuffer!
var rps: MTLRenderPipelineState! = nil

func render() {
device = MTLCreateSystemDefaultDevice()
createBuffer()
registerShaders()
sendToGPU()
}

对于createBuffer（）函数，我们需要先进行一些更改。 回想一下上一篇博客，顶点数据是这样的Float类型的数组：

let vertex_data:[Float] = [-1.0, -1.0, 0.0, 1.0,
                        1.0, -1.0, 0.0, 1.0,
                        0.0,  1.0, 0.0, 1.0]

让我们将其转换为更适合的格式，一个包含vector_float4类型的两个成员的结构，一个用于position(位置)，另一个用于color(颜色)：

struct Vertex {
var position: vector_float4
var color: vector_float4
}

你可能想知道vector_float4是什么样的数据类型。 从Apple的文档中，我们发现矢量类型是基于铛的类型，比矢量矢量和矢量标量算术运算的传统SIMD类型更适合。 可以通过数组样式的下标来访问矢量组件，也可以使用。 运算符与组件名称（x，y，z，w或其组合）。 除.xyzw组件名称外，还可以轻松访问以下子矢量：.lo / .hi（矢量的前半部分和后半部分）以及.even / .odd子矢量：

vector_float4 x = 1.0f;         // x = { 1, 1, 1, 1 }.

vector_float3 y = { 1, 2, 3 };  // y = { 1, 2, 3 }.

x.xyz = y.zyx;                  // x = { 1/3, 1/2, 1, 1 }.

x.w = 0;                        // x = { 1/4, 1/3, 1/2, 0 }.

让我们回到createBuffer（），以便我们可以使用新的结构来更改vertex_data：

func createBuffer() {
let vertex_data = [Vertex(position: [-1.0, -1.0, 0.0, 1.0], color: [1, 0, 0, 1]),
                   Vertex(position: [ 1.0, -1.0, 0.0, 1.0], color: [0, 1, 0, 1]),
                   Vertex(position: [ 0.0,  1.0, 0.0, 1.0], color: [0, 0, 1, 1])]
vertex_buffer = device!.newBufferWithBytes(vertex_data, length: sizeof(Vertex) * 3, options:[])
}

您注意到将它作为一个结构数组可以方便地创建顶点，这是多么方便。 您还注意到我们保留了上次的顶点位置，并且为每个顶点（红色，绿色和蓝色）添加了不同的颜色。 接下来是registerShaders（）函数。 除了将它移到新的地方之外，我们不会更改旧代码：

func registerShaders() {
let library = device!.newDefaultLibrary()!
let vertex_func = library.newFunctionWithName("vertex_func")
let frag_func = library.newFunctionWithName("fragment_func")
let rpld = MTLRenderPipelineDescriptor()
rpld.vertexFunction = vertex_func
rpld.fragmentFunction = frag_func
rpld.colorAttachments[0].pixelFormat = .BGRA8Unorm
do {
    try rps = device!.newRenderPipelineStateWithDescriptor(rpld)
} catch let error {
    self.print("\(error)")
 }
}

最后，我们对sendToGPU（）函数也做了同样的事情，除了将它移动到这个新的位置之外，没有什么更改为旧代码：

func sendToGPU() {
if let rpd = currentRenderPassDescriptor, drawable = currentDrawable {
    rpd.colorAttachments[0].clearColor = MTLClearColorMake(0.5, 0.5, 0.5, 1.0)
    let command_buffer = device!.newCommandQueue().commandBuffer()
    let command_encoder = command_buffer.renderCommandEncoderWithDescriptor(rpd)
    command_encoder.setRenderPipelineState(rps)
    command_encoder.setVertexBuffer(vertex_buffer, offset: 0, atIndex: 0)
    command_encoder.drawPrimitives(.Triangle, vertexStart: 0, vertexCount: 3, instanceCount: 1)
    command_encoder.endEncoding()
    command_buffer.presentDrawable(drawable)
    command_buffer.commit()
 }
}

接下来让我们继续看Shaders.metal文件。 我们在这里做两个修改。 首先，我们在Vertex结构体中添加一个color(颜色)成员，以便我们可以在CPU和GPU之间来回传递它：

struct Vertex {
float4 position [[position]];
float4 color; 
};

其次，我们替换上次在fragment shader(片段着色器)中使用的硬编码颜色：

fragment float4 fragment_func(Vertex vert [[stage_in]]) {
return float4(0.7, 1, 1, 1);
}

用每个顶点携带的实际颜色（由vertex_buffer发送给GPU）：

fragment float4 fragment_func(Vertex vert [[stage_in]]) {
return vert.color;
}

如果你运行这个应用程序，你现在应该看到一个更漂亮的彩色三角形：

您可能想知道为什么当我们离开我们传递给着色器的三个顶点时，颜色渐变？ 要理解这一点，首先了解两种着色器之间的区别以及它们在图形管道中的作用非常重要。 让我们看看写入任何着色器的语法（我们选择顶点着色器作为例子）：

vertex Vertex vertex_func(constant Vertex *vertices [[buffer(0)]], uint vid [[vertex_id]])

第一个关键字是function qualifier(函数限定符)，只能具有vertex(顶点)，fragment(片段)或kernel(内核)的值。 下一个关键字是return type(返回类型)。 接下来是function name(函数名称)，后面是括号内的function arguments(函数参数)。 Metal shading language（Metal着色语言）限制指针的使用，除非参数是用device(设备)，threadgroup(线程组)或constant(常量)地址空间限定符声明的，该设备，线程组或常量地址空间限定符指定分配函数变量或参数的内存区域。[[...]]语法用于声明属性，如资源位置，着色器输入以及在着色器和CPU之间来回传递的内置变量。

vertex shader(顶点着色器)将指向顶点列表的指针作为第一个参数。 我们可以使用由vertex_id归属的第二参数vid来索引vertices(顶点)，告诉Metal将当前正在处理的顶点索引作为此参数插入。 然后，我们简单地传递每个顶点（以及它的位置和颜色）以供fragment shader(片段着色器)消耗。 所有fragment shader(片段着色器)的作用是从顶点着色器传递顶点，并通过每个像素的颜色，而不改变任何输入数据。 vertex shader(顶点着色器)很少运行（在这种情况下只有3次 - 对于每个顶点），而fragment shader(片段着色器)运行数千次 - 对于需要绘制的每个像素。

所以你可能还在问：“好的，但是颜色渐变怎么样”？ 那么，现在你已经理解了每个着色器的功能以及它们运行的频率，你可以将任何给定像素处的颜色视为其邻居的average(平均)颜色值。 例如，红色和绿色像素之间的中间颜色将是黄色的，因为片段着色器通过对它们进行平均来插值两种颜色：0.5 *红色+ 0.5 *绿色。 红色和蓝色产生的洋红色之间的中间颜色，以及蓝色和绿色之间的中途产生的青色也会发生同样的情况。 从这里开始，剩下的像素将被插入不同的原色，从而产生您所看到的梯度范围。

OSX代码地址： Ch04-OSX

iOS平台下执行效果：

71528360081_.pic.jpg

iOS代码地址： Ch04-iOS

TvOS平台执行效果：

TvOS代码地址： Ch04-TvOS