[MetalKit]15-Using-MetalKit-part-9使用MetalKit9

本系列文章是对 metalkit.org 上面MetalKit内容的全面翻译和学习.

MetalKit系统文章目录

---

我打赌不少读者很相信MetalKit系列,因此今天我重回这个系列,咱们将学习如何在Metal中绘制3D内容.让咱们继续咱们在playground中的工做,继续本系列的第8部分 part 8.

在本章结束时,咱们将渲染一个3D立方体,可是首先让咱们绘制一个2D矩形并复用这个矩形的逻辑来建议立方体的全部面.让咱们修改vertex_data数组来保存4个顶点而不是原来三角形的3个顶点:

let vertex_data = [
    Vertex(pos: [-1.0, -1.0, 0.0,  1.0], col: [1, 0, 0, 1]),
    Vertex(pos: [ 1.0, -1.0, 0.0,  1.0], col: [0, 1, 0, 1]),
    Vertex(pos: [ 1.0,  1.0, 0.0,  1.0], col: [0, 0, 1, 1]),
    Vertex(pos: [-1.0,  1.0, 0.0,  1.0], col: [1, 1, 1, 1])
]
复制代码

最有意思的部分来了.矩形和其它复杂几何体都是由三角形组成,而且大部分顶点属于2个或更多三角形,就不须要给这些顶点建立复本了,由于咱们有一种办法经过index buffer索引缓冲器来复用它们,这种方法能够从vertex buffer顶点缓冲器中保存顶点索引到列表中,来追踪那些将要用到的顶点的顺序.因此让咱们建立这样一份索引列表:

let index_data: [UInt16] = [
    0, 1, 2, 2, 3, 0
]
复制代码

为了理解这些索引是如何被保存的,让咱们看下面这幅图:

对于前方的面(矩形)来讲,咱们用到的顶点储存在vertex buffer顶点缓冲器的0到3号位.稍后咱们将添加另外4个顶点.前面是由两个三角形构成.咱们先用顶点0,1和2绘制一个三角形,而后用顶点2,3和0再绘制一个三角形.请注意,正如期待的那样,有两个顶点被重用了.还要注意的是绘制是以clockwise顺时针完成的.这是Metal中默认的正面绕序,可是也能被设置为counterclockwise逆时针的.

而后咱们须要建立index_buffer:

var index_buffer: MTLBuffer!
复制代码

下一步,咱们须要在createBuffers()函数中把index_data赋值给index buffer:

index_buffer = device!.newBufferWithBytes(index_data, length: sizeof(UInt16) * index_data.count , options: [])
复制代码

最后,在drawRect(:)函数中咱们须要将drawPrimitives调用:

command_encoder.drawPrimitives(.Triangle, vertexStart: 0, vertexCount: 3, instanceCount: 1)
复制代码

替换为drawIndexedPrimitives调用:

command_encoder.drawIndexedPrimitives(.Triangle, indexCount: index_buffer.length / sizeof(UInt16), indexType: MTLIndexType.UInt16, indexBuffer: index_buffer, indexBufferOffset: 0)
复制代码

在playground主页面中,看看新产生的图像:

如今咱们知道如何绘制一个矩形了,让咱们看看如何绘制更多矩形!

let vertex_data = [
    Vertex(pos: [-1.0, -1.0,  1.0, 1.0], col: [1, 0, 0, 1]),
    Vertex(pos: [ 1.0, -1.0,  1.0, 1.0], col: [0, 1, 0, 1]),
    Vertex(pos: [ 1.0,  1.0,  1.0, 1.0], col: [0, 0, 1, 1]),
    Vertex(pos: [-1.0,  1.0,  1.0, 1.0], col: [1, 1, 1, 1]),
    Vertex(pos: [-1.0, -1.0, -1.0, 1.0], col: [0, 0, 1, 1]),
    Vertex(pos: [ 1.0, -1.0, -1.0, 1.0], col: [1, 1, 1, 1]),
    Vertex(pos: [ 1.0,  1.0, -1.0, 1.0], col: [1, 0, 0, 1]),
    Vertex(pos: [-1.0,  1.0, -1.0, 1.0], col: [0, 1, 0, 1])
]
let index_data: [UInt16] = [
    0, 1, 2, 2, 3, 0,   // front

    1, 5, 6, 6, 2, 1,   // right

    3, 2, 6, 6, 7, 3,   // top

    4, 5, 1, 1, 0, 4,   // bottom

    4, 0, 3, 3, 7, 4,   // left

    7, 6, 5, 5, 4, 7,   // back

]
复制代码

如今咱们有了准备渲染的整个立方体,让咱们来到MathUtils.swift中,在modelMatrix()中注释掉rotation和translation调用,只保留缩放倍数为0.5.你将极可能看到一个像这样的图像:

呃,可是仍然是一个矩形!是的,由于咱们仍没有depth深度概念因此立方体看起来只是个平的.是时候来点数学魔法了.咱们不须要使用Matrix矩阵结构体由于simd框架给咱们提供了相似的数据结构和数学函数,咱们能够直接使用.咱们能轻易用matrix_float4x4代替自定义的Matrix结构体来重写咱们的转换函数.

可是你可能会问,如何在咱们2D屏幕上显示3D物体.这个过程将每一个像素通过一系列变换.首先,modelMatrix() 将像素从物体空间转换到世界空间.这个矩阵是咱们已经知道的,负责平移,旋转和缩放的那个.添加新的重写过的函数后,modelMatrix应该看起来像这样:

func modelMatrix() -> matrix_float4x4 {
    let scaled = scalingMatrix(0.5)
    let rotatedY = rotationMatrix(Float(M_PI)/4, float3(0, 1, 0))
    let rotatedX = rotationMatrix(Float(M_PI)/4, float3(1, 0, 0))
    return matrix_multiply(matrix_multiply(rotatedX, rotatedY), scaled)
}
复制代码

你注意到用到的matrix_multiply函数由于Matrix结构体已经不能用了.同时,由于全部像素将经历一样的变换,咱们想要把矩阵储存为一个Uniform并传递到vertex shader.为此,让咱们建立一个新的结构体:

struct Uniforms {
    var modelViewProjectionMatrix: matrix_float4x4
}
复制代码

回到createBuffers()函数,让咱们用传递modelMatrix时用到的缓冲器指针来传递全局变量到着色器:

let modelViewProjectionMatrix = modelMatrix()
var uniforms = Uniforms(modelViewProjectionMatrix: modelViewProjectionMatrix)
memcpy(bufferPointer, &uniforms, sizeof(Uniforms))
复制代码

在playground主页面中,看看新产生的图像:

呃...立方体看上去差很少了,但是有些地方没了.下一步变换,像素将从世界空间到摄像机空间.咱们在屏幕上看到的全部东西都是被一个虚拟摄像机观察到的,它经过带有near最近和far最远平面的frustum平头截体(金字塔形)来限制观察(摄像机)空间:

回到MathUtils.swift让咱们建立viewMatrix():

func viewMatrix() -> matrix_float4x4 {
    let cameraPosition = vector_float3(0, 0, -3)
    return translationMatrix(cameraPosition)
}
复制代码

下一步的变换,像素将从camera space摄像机空间变换到clip space裁剪空间.这里,全部不在clip space裁剪空间里面的顶点将被判断,看三角形被culled剔除(全部顶点都在裁剪空间外)或clipped to bounds截断(某些顶点在外面某些在内部).projectionMatrix() 会帮咱们计算边界并判断顶点在哪里:

func projectionMatrix(near: Float, far: Float, aspect: Float, fovy: Float) -> matrix_float4x4 {
    let scaleY = 1 / tan(fovy * 0.5)
    let scaleX = scaleY / aspect
    let scaleZ = -(far + near) / (far - near)
    let scaleW = -2 * far * near / (far - near)
    let X = vector_float4(scaleX, 0, 0, 0)
    let Y = vector_float4(0, scaleY, 0, 0)
    let Z = vector_float4(0, 0, scaleZ, -1)
    let W = vector_float4(0, 0, scaleW, 0)
    return matrix_float4x4(columns:(X, Y, Z, W))
}
复制代码

最后两个变换是从clip space裁剪空间到normalized device coordinates (NDC)规格化设备坐标,还有从NDC到screen space屏幕空间.这两步是由Metal框架为咱们处理的.

下一步,回到createBuffers()函数,让咱们修改modelViewProjectionMatrix,咱们以前为了适应modelMatrix来设置的:

let aspect = Float(drawableSize.width / drawableSize.height)
let projMatrix = projectionMatrix(1, far: 100, aspect: aspect, fovy: 1.1)
let modelViewProjectionMatrix = matrix_multiply(projMatrix, matrix_multiply(viewMatrix(), modelMatrix()))
复制代码

在drawRect(:)中咱们须要设置裁剪模式,正面模式,来避免出现奇怪的现象好比立方体透明了:

command_encoder.setFrontFacingWinding(.CounterClockwise)
command_encoder.setCullMode(.Back)
复制代码

在playground主页面中,看看新产生的图像:

这就是咱们一直想看到的最终版3D立方体! 还要作一件事来让它更真实:让它旋转起来.首先,让咱们建立一个全局变量命名为rotation,咱们想要随着时间流逝来刷新它:

var rotation: Float = 0
复制代码

下一步,从createBuffers()函数中取出矩阵,并建立一个新的命名为update().下面是咱们每帧更新rotation来建立平滑滚动效果的地方:

func update() {
    let scaled = scalingMatrix(0.5)
    rotation += 1 / 100 * Float(M_PI) / 4
    let rotatedY = rotationMatrix(rotation, float3(0, 1, 0))
    let rotatedX = rotationMatrix(Float(M_PI) / 4, float3(1, 0, 0))
    let modelMatrix = matrix_multiply(matrix_multiply(rotatedX, rotatedY), scaled)
    let cameraPosition = vector_float3(0, 0, -3)
    let viewMatrix = translationMatrix(cameraPosition)
    let aspect = Float(drawableSize.width / drawableSize.height)
    let projMatrix = projectionMatrix(0, far: 10, aspect: aspect, fovy: 1)
    let modelViewProjectionMatrix = matrix_multiply(projMatrix, matrix_multiply(viewMatrix, modelMatrix))
    let bufferPointer = uniform_buffer.contents()
    var uniforms = Uniforms(modelViewProjectionMatrix: modelViewProjectionMatrix)
    memcpy(bufferPointer, &uniforms, sizeof(Uniforms))
}
复制代码

在drawRect(:)中调用update函数:

update()
复制代码

在playground主页面中,看看新产生的图像:

源代码source code 已发布在Github上.

下次见!