Metal入门教程（七）天空盒全景

正文

核心思路

天空盒的原理：想象有一个正方体，正方体的六个面都贴着纹理；摄像机在正方体的中心，近平面在正方体内部，远平面在正方体外面，随着摄像机的旋转可以看到整个正方体的贴图。
基于此，我们可以初步确定实现的思路：
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<half> 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;

作者：落影loyinglin
链接：https://www.jianshu.com/p/a938db5a7ccf