Metal入门教程(七)天空盒全景

时间:2022-06-05
本文章向大家介绍Metal入门教程(七)天空盒全景,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

前言

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<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;

总结

demo尝试实现天空盒的效果,通过较为复杂的方式,去更好学习天空盒的原理。 通过对顶点、纹理、变换矩阵的处理,能更好掌握图形学中三维空间的理解。 具体的代码在这里