Metal与图形渲染二：透明图片的渲染
零. 前言
这是我在Metal系列进行探索的第二篇文章，本章主要会介绍透明通道的素材如何渲染到屏幕上中，在Metal与图形渲染入门篇：绘制图片已经成功渲染出一张图片，现在让我们乘着温热的知识，再进一步，通过提取一张含透明通道的图片的信息，渲染出我们想要的透明图片的效果。什么意思呢？
比如：下面的图片中，左边代表着正常的图片数据，右边代表着该像素对应的透明数据，如果是白色则不透明，黑色则代表透明。美术那边会导出一个正常的视频，再导出一个只含透明度的视频，将两个视频合二为一得到：
我们需要得到以下的效果：
一. 基本思路
对于合二为一的分开图片，你第一感觉肯定是想到：分割处理，没错，这次我们的核心就是需要将同一张图片分开两次采样，合二为一得到一个rgba。
如果你对纹理还有点印象，那么你的想法应该是这样的：我需要取左半边的纹理进行采样，取其rgb值，再对右半边的纹理进行采样，取其r值（注意不是a值，白色的r>0，黑色r=0，因此我们取r值作为输出的alpha通道即可），即可得到(r1,g1,b1,r2)的片段着色器输出了！
二. 修改数据结构
还记得我们第一张渲染图片时用的数据结构吗？是xyzw的顶点坐标和xy的纹理坐标集合。
typedef struct {
float4 vertexPosition [[ position ]];
float2 textureCoor;
} RasterizerData;
那么这次我们既然多了一个纹理，则需要修改为如下数据结构：
typedef struct {
float4 vertexPosition [[ position ]]; // 顶点坐标
float2 textureCoorRgb; // 取RGB值的纹理坐标
float2 textureCoorAlpha; // 取Alpha值的纹理坐标
} RasterizerData;
作为顶点着色器的输出和片段着色器的输入，修改了该数据结构，我们就可以针对同一个数据结构的不同纹理进行采样，最后生成一个rgba值了！
二. 修改顶点着色器及输入缓冲值
还记得顶点着色器的缓冲值吗，他的句柄为[[buffer(index)]]，index即允许我们输入多个图像信息，所以，我们可以这样来修改顶点着色器：
vertex RasterizerData vertexShader(uint vertexId [[ vertex_id ]],
constant HobenVertex *rgbVertexArray [[ buffer(0) ]],
constant HobenVertex *alphaVertexArray [[ buffer(1) ]]) {
RasterizerData out;
out.vertexPosition = rgbVertexArray[vertexId].position;
out.textureCoorRgb = rgbVertexArray[vertexId].textureCoordinate;
out.textureCoorAlpha = alphaVertexArray[vertexId].textureCoordinate;
return out;
}
观察上面的图像，我们可以知道需要“各取一边”以进行采样，即纹理坐标对半分，对应的纹理顶点我们这样来分成两块来处理：
HobenVertex rgbVertices[] = {
// 顶点坐标 x, y, z, w --- 纹理坐标 x, y
{ {-widthScaling, heightScaling, 0.0, 1.0}, {0.0, 0.0} },
{ { widthScaling, heightScaling, 0.0, 1.0}, {0.5, 0.0} },
{ {-widthScaling, -heightScaling, 0.0, 1.0}, {0.0, 1.0} },
{ { widthScaling, -heightScaling, 0.0, 1.0}, {0.5, 1.0} },
};
self.rgbVertices = [_device newBufferWithBytes:rgbVertices length:sizeof(rgbVertices) options:MTLResourceStorageModeShared];
self.numVertices = sizeof(rgbVertices) / sizeof(HobenVertex);
CGFloat offset = .5f;
HobenVertex alphaVertices[] = {
// 顶点坐标 x, y, z, w --- 纹理坐标 x, y
{ {-widthScaling, heightScaling, 0.0, 1.0}, {0.0 + offset, 0.0} },
{ { widthScaling, heightScaling, 0.0, 1.0}, {0.5 + offset, 0.0} },
{ {-widthScaling, -heightScaling, 0.0, 1.0}, {0.0 + offset, 1.0} },
{ { widthScaling, -heightScaling, 0.0, 1.0}, {0.5 + offset, 1.0} },
};
self.alphaVertices = [_device newBufferWithBytes:alphaVertices length:sizeof(alphaVertices) options:MTLResourceStorageModeShared];
在输入缓冲的接口改成双输入即可：
// 设置rgb顶点数据
[renderEncoder setVertexBuffer:self.rgbVertices offset:0 atIndex:0];
// 设置透明半边顶点数据
[renderEncoder setVertexBuffer:self.alphaVertices offset:0 atIndex:1];
三. 修改片段着色器
片段着色器的修改也非常简单，既然我们已经传入了一个“含1个顶点坐标、2个纹理坐标”的数据结构了，我们分开对其进行采样就可以了：
fragment float4 fragmentShader(RasterizerData input [[ stage_in ]],
texture2d <float> colorTexture [[ texture(0) ]]) {
constexpr sampler textureSampler (mag_filter::linear, min_filter::linear);
float3 rgbColorSample = colorTexture.sample(textureSampler, input.textureCoorRgb).rgb;
float alphaColorSample = colorTexture.sample(textureSampler, input.textureCoorAlpha).r;
return float4(rgbColorSample, alphaColorSample);
}
修改完上面的代码，满怀欣喜地跑一跑：
???我明明将背景色设为灰色了呀，这飞机怎么看上去还是不透明的？？？
经过一番搜索，终于在万能的Stack Overflow搜索出了解答，原来MTKView的默认是不透明的，需要将他的不透明设置为NO。
self.mtkView.opaque = NO;
好啦，大功告成！
四. 总结
经过上一个从零开始章节的折磨，你会发现这个章节异常地简单，这是因为对于图形渲染的原理有所入门之后，了解到了纹理、采样的一些知识，对于这个需求也便得心应手了。
这一章主要介绍了如何将顶点着色器变为多个输入，以及如何按照自己的需求对纹理进行采样。
但是如果这是个视频格式的话，还需要额外进行一些处理，接下来将继续在Demo中探索如何渲染出一个透明通道视频，继续加油！
