全景图片显示

前言

这是介绍全景图片显示demo，通过Metal进行图片渲染请查看落影大神的博客

正文

先上全景图片的效果图

普通模式图片

小行星

鱼眼

具体步骤

1、新建MTKView

2、设置渲染管道

3、设置顶点数据

4、设置纹理数据

5、渲染过程

6、Shader处理

普通图片渲染过程基本上是上面6个步骤，全景图片和普通图片不同的地方在于步骤3和步骤6.

设置顶点数据

- (void)setupVertex {
    float *vertices = 0;// 顶点
    float *texCoord = 0;// 纹理
    uint16_t *indices  = 0;// 索引
    int numVertices = 0;
    self.numIndices = initSphere(200, 1.0f, 360, &vertices, &texCoord, &indices, &numVertices);
    
    self.vertices = [self.mtkView.device newBufferWithBytes:vertices
                                                     length:sizeof(float) * 4 * numVertices
                                                    options:MTLResourceStorageModeShared]; // 创建顶点缓存
    self.textures = [self.mtkView.device newBufferWithBytes:texCoord
                                                     length:sizeof(float) * 2 * numVertices
                                                    options:MTLResourceStorageModeShared]; // 创建纹理坐标缓存
    self.indices = [self.mtkView.device newBufferWithBytes:indices
                                                     length:sizeof(uint16_t) * self.numIndices
                                                    options:MTLResourceStorageModeShared];  //索引缓存
}

创建顶点数据和纹理数据主要是通过initSphere 函数，函数具体实现查看Sphere文件

Shader处理

vertex RasterizerData // 返回给片元着色器的结构体
vertexShader(uint vertexID [[ vertex_id ]], // vertex_id是顶点shader每次处理的index，用于定位当前的顶点
             constant float4 *vertexArray [[ buffer(0) ]],// 顶点
             constant float2 *textureArray [[ buffer(1)]],// 纹理
             constant LYMatrix *matrix [[ buffer(2)]]) { // 矩阵
    RasterizerData out;
    out.clipSpacePosition = matrix->mvpMatrix * matrix->lookAtMatrix * matrix->rotateMatrix * vertexArray[vertexID];
    out.textureCoordinate = textureArray[vertexID];
    return out;
}

全景图片主要是通过三个矩阵来实现缩放mvpMatrix、模式lookAtMatrix和旋转rotateMatrix的。
得到观看视角的矩阵，不同模式其实是在球的不同位置看球，普通模式是在球心、小行星模式是在球表面、鱼眼模式是在球外。

///设置观看模式
- (void)setPanoramicModel:(DFPanoramaModel)type {
    self.type = type;
    self.mvpDegree = 90;
    switch (type) {
        case DFPanoramaModelNoramal:
        {
            self.orginEyeMatrix = GLKMatrix4MakeLookAt(0, 0, 0,
                                                       0, 0, -1.0f,
                                                       0, -1.0f, 0);
        }
            break;
        case DFPanoramaModelLitlePlanet:
        {
            self.mvpDegree = kPlanetMaxDegree;
            self.orginEyeMatrix = GLKMatrix4MakeLookAt(0, 0, 1.0f,
                                                       0, 0, -1.0f,
                                                       0, -1.0f, 0);
        }
            break;
        case DFPanoramaModelFisheye:
        {
            self.orginEyeMatrix = GLKMatrix4MakeLookAt(0, 0, 2.0f,
                                                       0, 0, -1.0f,
                                                       0, -1.0f, 0);
        }
            break;
            
        default:
            break;
    }
    
    self.horizontalDegree = 0;
    self.verticalDegree = 0;
}

将三个矩阵值传入顶点着色器

- (void)setupMatrixWithEncoder:(id)renderEncoder {
    [self smooth]; //滑动效果
    [self scaleToMaxOrdMin]; //设置最大和最小角度
    
    GLKMatrix4 mvpMatrix = GLKMatrix4MakePerspective(GLKMathDegreesToRadians(self.mvpDegree), CGRectGetWidth(self.view.bounds) / CGRectGetHeight(self.view.bounds), 0.1, 10);
    
    GLKMatrix4 lookAtMatrix = GLKMatrix4RotateX(self.orginEyeMatrix, _verticalDegree);
    
    GLKMatrix4 rotateX = GLKMatrix4RotateY(GLKMatrix4Identity, _horizontalDegree);
    
    LYMatrix matrix = {[self getMetalMatrixFromGLKMatrix:mvpMatrix], [self getMetalMatrixFromGLKMatrix:lookAtMatrix], [self getMetalMatrixFromGLKMatrix:rotateX]};
    
    [renderEncoder setVertexBytes:&matrix
                           length:sizeof(matrix)
                          atIndex:2];
}

最后附上demo地址