前言
Metal入门教程（一）图片绘制
Metal入门教程（二）三维变换
Metal入门教程（三）摄像头采集渲染
Metal入门教程（四）灰度计算
Metal入门教程（五）视频渲染
Metal入门教程（六）边界检测
前面的教程介绍了Metal的图片绘制、三维变换、视频渲染、用MetalPerformanceShaders处理数据以及用计算管道实现灰度计算和sobel边界检测，这次对Metal的三维变换做更复杂的尝试——天空盒。
Metal系列教程的代码地址；
OpenGL ES系列教程在这里；
你的star和fork是我的源动力，你的意见能让我走得更远。
正文
核心思路
天空盒的原理：想象有一个正方体，正方体的六个面都贴着纹理；摄像机在正方体的中心，近平面在正方体内部，远平面在正方体外面，随着摄像机的旋转可以看到整个正方体的贴图。
基于此，我们可以初步确定实现的思路：
1、在三维空间绘制一个正方体；
2、给正方体六个面进行贴图；
3、把摄像机放在正方体中心；
4、随着时间改变摄像机的位置；
接下来我们考虑两个问题：
六个面共十二个三角形，在绘制过程中是否会重叠以及是否需要使用深度测试？
按照我们的思路，十二个三角形中，每个三角形最多与另外一个三角形重叠（试想一条线穿过正方体，除了顶点外最多只能接触两个面）。
基于上面的分析，因为在正方体的中心，近平面在内部而远平面在外面，重叠的两个三角形必然一个在平截体的内部，一个在平截体的外部。故而这里不使用深度测试。
具体步骤
1、绘制一个正方体
首先，我们定义8个顶点。
// 顶点坐标， 顶点颜色， 纹理坐标，
// 正方体上面的四个点
{{-0.5f, 0.5f, 0.5f, 1.0f}, {1.0f, 0.0f, 0.0f}, {0.0f, 1.0f}},//左上 0
{{0.5f, 0.5f, 0.5f, 1.0f}, {0.0f, 1.0f, 0.0f}, {1.0f, 1.0f}},//右上 1
{{-0.5f, -0.5f, 0.5f, 1.0f}, {0.0f, 0.0f, 1.0f}, {0.0f, 0.0f}},//左下 2
{{0.5f, -0.5f, 0.5f, 1.0f}, {1.0f, 1.0f, 1.0f}, {1.0f, 0.0f}},//右下 3
// 正方体下面的四个点
{{-0.5f, 0.5f, -0.5f, 1.0f}, {1.0f, 0.0f, 0.0f}, {0.0f, 1.0f}},//左上 4
{{0.5f, 0.5f, -0.5f, 1.0f}, {0.0f, 1.0f, 0.0f}, {1.0f, 1.0f}},//右上 5
{{-0.5f, -0.5f, -0.5f, 1.0f}, {0.0f, 0.0f, 1.0f}, {0.0f, 0.0f}},//左下 6
{{0.5f, -0.5f, -0.5f, 1.0f}, {1.0f, 1.0f, 1.0f}, {1.0f, 0.0f}},//右下 7
2、顶点与纹理位置对应
假设把下图的拼成一个正方体，根据我们定义的0~7号节点，可以一一标志出对应的顶点所在，如下：
顶点标注图
3、纹理转换
上面的顶点标注图在加载、处理的过程中并不方便，故而需要把图片预处理成width=x, height=6*x的大小。
天空盒纹理图
根据前面两个图，我们可以推导出最终天空盒的顶点数据如下：
// 顶点坐标， 顶点颜色， 纹理坐标，
// 上面
{{-6.0f, 6.0f, 6.0f, 1.0f}, {1.0f, 0.0f, 0.0f}, {0.0f, 2.0f/6}},//左上 0
{{-6.0f, -6.0f, 6.0f, 1.0f}, {0.0f, 0.0f, 1.0f}, {0.0f, 3.0f/6}},//左下 2
{{6.0f, -6.0f, 6.0f, 1.0f}, {1.0f, 1.0f, 1.0f}, {1.0f, 3.0f/6}},//右下 3
{{-6.0f, 6.0f, 6.0f, 1.0f}, {1.0f, 0.0f, 0.0f}, {0.0f, 2.0f/6}},//左上 0
{{6.0f, 6.0f, 6.0f, 1.0f}, {0.0f, 1.0f, 0.0f}, {1.0f, 2.0f/6}},//右上 1
{{6.0f, -6.0f, 6.0f, 1.0f}, {1.0f, 1.0f, 1.0f}, {1.0f, 3.0f/6}},//右下 3
// 下面
{{-6.0f, 6.0f, -6.0f, 1.0f}, {1.0f, 0.0f, 0.0f}, {0.0f, 4.0f/6}},//左上 4
{{6.0f, 6.0f, -6.0f, 1.0f}, {0.0f, 1.0f, 0.0f}, {1.0f, 4.0f/6}},//右上 5
{{6.0f, -6.0f, -6.0f, 1.0f}, {1.0f, 1.0f, 1.0f}, {1.0f, 3.0f/6}},//右下 7
{{-6.0f, 6.0f, -6.0f, 1.0f}, {1.0f, 0.0f, 0.0f}, {0.0f, 4.0f/6}},//左上 4
{{-6.0f, -6.0f, -6.0f, 1.0f}, {0.0f, 0.0f, 1.0f}, {0.0f, 3.0f/6}},//左下 6
{{6.0f, -6.0f, -6.0f, 1.0f}, {1.0f, 1.0f, 1.0f}, {1.0f, 3.0f/6}},//右下 7
// 左面
{{-6.0f, 6.0f, 6.0f, 1.0f}, {1.0f, 0.0f, 0.0f}, {0.0f, 1.0f/6}},//左上 0
{{-6.0f, -6.0f, 6.0f, 1.0f}, {0.0f, 0.0f, 1.0f}, {1.0f, 1.0f/6}},//左下 2
{{-6.0f, 6.0f, -6.0f, 1.0f}, {1.0f, 0.0f, 0.0f}, {0.0f, 2.0f/6}},//左上 4
{{-6.0f, -6.0f, 6.0f, 1.0f}, {0.0f, 0.0f, 1.0f}, {1.0f, 1.0f/6}},//左下 2
{{-6.0f, 6.0f, -6.0f, 1.0f}, {1.0f, 0.0f, 0.0f}, {0.0f, 2.0f/6}},//左上 4
{{-6.0f, -6.0f, -6.0f, 1.0f}, {0.0f, 0.0f, 1.0f}, {1.0f, 2.0f/6}},//左下 6
// 右面
{{6.0f, 6.0f, 6.0f, 1.0f}, {0.0f, 1.0f, 0.0f}, {1.0f, 0.0f/6}},//右上 1
{{6.0f, -6.0f, 6.0f, 1.0f}, {1.0f, 1.0f, 1.0f}, {0.0f, 0.0f/6}},//右下 3
{{6.0f, 6.0f, -6.0f, 1.0f}, {0.0f, 1.0f, 0.0f}, {1.0f, 1.0f/6}},//右上 5
{{6.0f, -6.0f, 6.0f, 1.0f}, {1.0f, 1.0f, 1.0f}, {0.0f, 0.0f/6}},//右下 3
{{6.0f, 6.0f, -6.0f, 1.0f}, {0.0f, 1.0f, 0.0f}, {1.0f, 1.0f/6}},//右上 5
{{6.0f, -6.0f, -6.0f, 1.0f}, {1.0f, 1.0f, 1.0f}, {0.0f, 1.0f/6}},//右下 7
// 前面
{{-6.0f, -6.0f, 6.0f, 1.0f}, {0.0f, 0.0f, 1.0f}, {0.0f, 4.0f/6}},//左下 2
{{6.0f, -6.0f, 6.0f, 1.0f}, {1.0f, 1.0f, 1.0f}, {1.0f, 4.0f/6}},//右下 3
{{6.0f, -6.0f, -6.0f, 1.0f}, {1.0f, 1.0f, 1.0f}, {1.0f, 5.0f/6}},//右下 7
{{-6.0f, -6.0f, 6.0f, 1.0f}, {0.0f, 0.0f, 1.0f}, {0.0f, 4.0f/6}},//左下 2
{{-6.0f, -6.0f, -6.0f, 1.0f}, {0.0f, 0.0f, 1.0f}, {0.0f, 5.0f/6}},//左下 6
{{6.0f, -6.0f, -6.0f, 1.0f}, {1.0f, 1.0f, 1.0f}, {1.0f, 5.0f/6}},//右下 7
// 后面
{{-6.0f, 6.0f, 6.0f, 1.0f}, {1.0f, 0.0f, 0.0f}, {1.0f, 5.0f/6}},//左上 0
{{6.0f, 6.0f, 6.0f, 1.0f}, {0.0f, 1.0f, 0.0f}, {0.0f, 5.0f/6}},//右上 1
{{6.0f, 6.0f, -6.0f, 1.0f}, {0.0f, 1.0f, 0.0f}, {0.0f, 6.0f/6}},//右上 5
{{-6.0f, 6.0f, 6.0f, 1.0f}, {1.0f, 0.0f, 0.0f}, {1.0f, 5.0f/6}},//左上 0
{{-6.0f, 6.0f, -6.0f, 1.0f}, {1.0f, 0.0f, 0.0f}, {1.0f, 6.0f/6}},//左上 4
{{6.0f, 6.0f, -6.0f, 1.0f}, {0.0f, 1.0f, 0.0f}, {0.0f, 6.0f/6}},//右上 5
有了以上的顶点数据和纹理数据，我们可以接着
4、调整投影矩阵和模型变换矩阵
这里我们用GLKMatrix4MakeLookAt来生成模型变换矩阵
// 调整眼睛的位置
self.eyePosition = GLKVector3Make(2.0f * sinf(angle),
2.0f * cosf(angle),
0.0f);
// 调整观察的位置
self.lookAtPosition = GLKVector3Make(2.0f * sinf(angleLook),
2.0f * cosf(angleLook),
2.0f);
GLKMatrix4 modelViewMatrix = GLKMatrix4MakeLookAt(
self.eyePosition.x,
self.eyePosition.y,
self.eyePosition.z,
self.lookAtPosition.x,
self.lookAtPosition.y,
self.lookAtPosition.z,
self.upVector.x,
self.upVector.y,
self.upVector.z); // 模型变换矩阵
这里的眼睛位置就是平截体起点，观察方向是指眼睛到远平面中心点的方向，如下：
投影矩阵如下，对应的参数是上面的视野角、宽高比、近平面距离、远平面距离。
GLKMatrix4 projectionMatrix = GLKMatrix4MakePerspective(GLKMathDegreesToRadians(85.0f), aspect, 0.1f, 20.f); // 投影变换矩阵
5、shader绘制
vertex RasterizerData
vertexShader(uint vertexID [[ vertex_id ]], // 顶点索引
constant LYVertex *vertexArray [[ buffer(LYVertexInputIndexVertices) ]], // 顶点数据
constant LYMatrix *matrix [[ buffer(LYVertexInputIndexMatrix) ]]) { // 变换矩阵
RasterizerData out; // 输出数据
out.clipSpacePosition = matrix->projectionMatrix * matrix->modelViewMatrix * vertexArray[vertexID].position; // 变换处理
out.textureCoordinate = vertexArray[vertexID].textureCoordinate; // 纹理坐标
out.pixelColor = vertexArray[vertexID].color; // 顶点颜色，调试用
return out;
}
fragment float4
samplingShader(RasterizerData input [[stage_in]],
texture2d textureColor [[ texture(LYFragmentInputIndexTexture) ]])
{
constexpr sampler textureSampler (mag_filter::linear,
min_filter::linear); // 采样器
half4 colorTex = textureColor.sample(textureSampler, input.textureCoordinate); // 纹理颜色
// half4 colorTex = half4(input.pixelColor.x, input.pixelColor.y, input.pixelColor.z, 1); // 顶点颜色，方便调试
return float4(colorTex);
}
顶点shader是正常对顶点进行变换处理，纹理坐标、顶点颜色读取buffer的值；
片元shader是从纹理中读取颜色，为了方便调试，可以注释上面的纹理颜色，采用下面的顶点颜色可以快速定位纹理坐标、顶点坐标的问题。
注意事项
在绘制正方体的时候，可以把正方体缩小，整个放在平截体内，这样可以看到完整的正方体，便于调整顶点坐标和纹理坐标。
此时需要解决重复渲染的问题，常用两种办法：
- 方案1、图元朝向做剔除；
[renderEncoder setFrontFacingWinding:MTLWindingCounterClockwise];
[renderEncoder setCullMode:MTLCullModeBack];
- 方案2、深度测试剔除；
// 创建深度缓存
MTLDepthStencilDescriptor *depthStencilDescriptor = [MTLDepthStencilDescriptor new];
depthStencilDescriptor.depthCompareFunction = MTLCompareFunctionLess;
self.depthStencilState = [self.mtkView.device newDepthStencilStateWithDescriptor:depthStencilDescriptor];
// 然后设置深度测试
[renderEncoder setDepthStencilState:self.depthStencilState];
实现过程还有另外的一个问题，棱角效果太明显。这个是因为天空盒太小，能投影到近平面的面积过小，导致棱角分明。解决方案是把天空盒的边长适当放大（不要超过远平面），使得天空盒更多区域能投影到屏幕，减少棱角区域的面积。
附录 ---- 天空盒的另一种简单实现
注意看前文步骤，shader读取纹理用的是texture2d格式，而天空盒还有另外一种方案是通过立方体纹理textureCube读取。
由于篇幅，不再赘述具体步骤，详见demo--TextureCube。
需要注意的是：
1、纹理加载方案不同，要用-textureCubeDescriptorWithPixelFormat方法，同时纹理上传接口也不相同。如下：
MTLTextureDescriptor *textureDescriptor = [MTLTextureDescriptor textureCubeDescriptorWithPixelFormat:MTLPixelFormatRGBA8Unorm size:image.size.width mipmapped:NO];
self.texture = [self.mtkView.device newTextureWithDescriptor:textureDescriptor];
Byte *imageBytes = [self loadImage:image];
NSInteger pixels = image.size.width * image.size.width;
if (imageBytes) {
for (int i = 0; i < 6; i++)
{
[self.texture replaceRegion:MTLRegionMake2D(0, 0, image.size.width, image.size.width)
mipmapLevel:0
slice:i
withBytes:imageBytes + (i * pixels * 4)
bytesPerRow:4 * (NSInteger)image.size.width
bytesPerImage:pixels * 4];
}
free(imageBytes);
imageBytes = NULL;
}
2、shader中的纹理坐标不同，这里的纹理坐标使用的是顶点坐标，而之前的方案使用的是顶点的纹理坐标。
out.textureCoordinate = vertexArray[vertexID].position.xyz;
注意，这里使用的是顶点变换前的坐标，如果使用顶点变换后的坐标，会导致的现象是视角无法旋转。
// 试试代码改为下面这段
out.textureCoordinate = out.clipSpacePosition.xyz;
总结
demo尝试实现天空盒的效果，通过较为复杂的方式，去更好学习天空盒的原理。
通过对顶点、纹理、变换矩阵的处理，能更好掌握图形学中三维空间的理解。
具体的代码在这里。