swift+GLKit 繪製立方體

背景

爲了簡化基於OpenGL、OpenGL ES的應⽤開發。 蘋果提供了GLKit框架能夠省去書寫着色器代碼的煩惱。本篇即用GLKit框架完成立方體的繪製。基礎代碼註釋見上篇使用OpenGLES實現UIImageView顯示效果。

代碼

因上一篇使用oc完成，本篇採用了swift,對於指針的操做兩者仍是存在差別的。詳細代碼以下

import UIKit
import OpenGLES
import GLKit

struct CubeVertex {
    var positionCoord: GLKVector3 //頂點座標
    var textureCoord: GLKVector2  //紋理座標
}

class ViewController: UIViewController {

    lazy var glkView: GLKView = {
        let glkView = GLKView(frame: CGRect(x: 0, y: 200, width: UIScreen.main.bounds.size.width, height: UIScreen.main.bounds.size.width))
        glkView.backgroundColor = .purple
        //使用深度緩存
        glkView.drawableDepthFormat = GLKViewDrawableDepthFormat.format24
        glkView.delegate = self
        view.addSubview(glkView)
        return glkView
    }()
    
    lazy var baseEffect: GLKBaseEffect = {
        let baseEffect = GLKBaseEffect()
        return baseEffect
    }()
    
    //頂點數
    let kCoordCount = 36
    
    lazy var vertices: UnsafeMutablePointer<CubeVertex> = {
        let verticesSize = MemoryLayout<CubeVertex>.size * kCoordCount
        let vertices = UnsafeMutablePointer<CubeVertex>.allocate(capacity: verticesSize)
        return vertices
    }()
    
    lazy var displayLink: CADisplayLink = {
        let displayLink = CADisplayLink(target: self, selector: #selector(glkViewDisplay))
        return displayLink
    }()
    
    var angle = 0
    var vertexBuffer = GLuint()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        setupContext()
        setupEffect()
        setupVertexData()
        addDisplayLink()
    }


    private func setupContext() {
        if let context = EAGLContext(api: EAGLRenderingAPI.openGLES3) {
            EAGLContext.setCurrent(context)
            glkView.context = context
        }
    }
    
    private func setupEffect() {
       
        guard  let imagePath = Bundle.main.path(forResource: "me", ofType: "png", inDirectory: nil),
                   let image = UIImage(contentsOfFile: imagePath)?.cgImage
            else { return  }
        
        //設置紋理參數
        let options = [GLKTextureLoaderOriginBottomLeft : NSNumber(value: true)]
        let textureInfo = try? GLKTextureLoader.texture(with: image, options: options)
        if let textureInfo = textureInfo, let target = GLKTextureTarget(rawValue: textureInfo.target) {
            baseEffect.texture2d0.name = textureInfo.name
            baseEffect.texture2d0.target = target
        }
       
    }
    
    private func setupVertexData() {
        // 前面
        self.vertices[0] = CubeVertex(positionCoord: GLKVector3(v: (-0.5, 0.5, 0.5)), textureCoord: GLKVector2(v: (0, 1)))
        self.vertices[1] = CubeVertex(positionCoord: GLKVector3(v: (-0.5, -0.5, 0.5)), textureCoord: GLKVector2(v: (0, 0)))
        self.vertices[2] = CubeVertex(positionCoord: GLKVector3(v: (0.5, 0.5, 0.5)), textureCoord: GLKVector2(v: (1, 1)))

        self.vertices[3] = CubeVertex(positionCoord: GLKVector3(v: (-0.5, -0.5, 0.5)), textureCoord: GLKVector2(v: (0, 0)))
        self.vertices[4] = CubeVertex(positionCoord: GLKVector3(v: (0.5, 0.5, 0.5)), textureCoord: GLKVector2(v: (1, 1)))
        self.vertices[5] = CubeVertex(positionCoord: GLKVector3(v: (0.5, -0.5, 0.5)), textureCoord: GLKVector2(v: (1, 0)))
        
        // 上面
        self.vertices[6] = CubeVertex(positionCoord: GLKVector3(v: (0.5, 0.5, 0.5)), textureCoord: GLKVector2(v: (1, 1)))
        self.vertices[7] = CubeVertex(positionCoord: GLKVector3(v: (-0.5, 0.5, 0.5)), textureCoord: GLKVector2(v: (0, 1)))
        self.vertices[8] = CubeVertex(positionCoord: GLKVector3(v: (0.5, 0.5, -0.5)), textureCoord: GLKVector2(v: (1, 0)))
        
        self.vertices[9] = CubeVertex(positionCoord: GLKVector3(v: (-0.5, 0.5, 0.5)), textureCoord: GLKVector2(v: (0, 1)))
        self.vertices[10] = CubeVertex(positionCoord: GLKVector3(v: (0.5, 0.5, -0.5)), textureCoord: GLKVector2(v: (1, 0)))
        self.vertices[11] = CubeVertex(positionCoord: GLKVector3(v: (-0.5, 0.5, -0.5)), textureCoord: GLKVector2(v: (0, 0)))

        // 下面
        self.vertices[12] = CubeVertex(positionCoord: GLKVector3(v: (0.5, -0.5, 0.5)), textureCoord: GLKVector2(v: (1, 1)))
        self.vertices[13] = CubeVertex(positionCoord: GLKVector3(v: (-0.5, -0.5, 0.5)), textureCoord: GLKVector2(v: (0, 1)))
        self.vertices[14] = CubeVertex(positionCoord: GLKVector3(v: (0.5, -0.5, -0.5)), textureCoord: GLKVector2(v: (1, 0)))
        
        self.vertices[15] = CubeVertex(positionCoord: GLKVector3(v: (-0.5, -0.5, 0.5)), textureCoord: GLKVector2(v: (0, 1)))
        self.vertices[16] = CubeVertex(positionCoord: GLKVector3(v: (0.5, -0.5, -0.5)), textureCoord: GLKVector2(v: (1, 0)))
        self.vertices[17] = CubeVertex(positionCoord: GLKVector3(v: (-0.5, -0.5, -0.5)), textureCoord: GLKVector2(v: (0, 0)))

        // 左面
        self.vertices[18] = CubeVertex(positionCoord: GLKVector3(v: (-0.5, 0.5, 0.5)), textureCoord: GLKVector2(v: (1, 1)))
        self.vertices[19] = CubeVertex(positionCoord: GLKVector3(v: (-0.5, -0.5, 0.5)), textureCoord: GLKVector2(v: (0, 1)))
        self.vertices[20] = CubeVertex(positionCoord: GLKVector3(v: (-0.5, 0.5, -0.5)), textureCoord: GLKVector2(v: (1, 0)))
        
        self.vertices[21] = CubeVertex(positionCoord: GLKVector3(v: (-0.5, -0.5, 0.5)), textureCoord: GLKVector2(v: (0, 1)))
        self.vertices[22] = CubeVertex(positionCoord: GLKVector3(v: (-0.5, 0.5, -0.5)), textureCoord: GLKVector2(v: (1, 0)))
        self.vertices[23] = CubeVertex(positionCoord: GLKVector3(v: (-0.5, -0.5, -0.5)), textureCoord: GLKVector2(v: (0, 0)))

        // 右面
        self.vertices[24] = CubeVertex(positionCoord: GLKVector3(v: (0.5, 0.5, 0.5)), textureCoord: GLKVector2(v: (1, 1)))
        self.vertices[25] = CubeVertex(positionCoord: GLKVector3(v: (0.5, -0.5, 0.5)), textureCoord: GLKVector2(v: (0, 1)))
        self.vertices[26] = CubeVertex(positionCoord: GLKVector3(v: (0.5, 0.5, -0.5)), textureCoord: GLKVector2(v: (1, 0)))
        
        self.vertices[27] = CubeVertex(positionCoord: GLKVector3(v: (0.5, -0.5, 0.5)), textureCoord: GLKVector2(v: (0, 1)))
        self.vertices[28] = CubeVertex(positionCoord: GLKVector3(v: (0.5, 0.5, -0.5)), textureCoord: GLKVector2(v: (1, 0)))
        self.vertices[29] = CubeVertex(positionCoord: GLKVector3(v: (0.5, -0.5, -0.5)), textureCoord: GLKVector2(v: (0, 0)))

        // 後面
        self.vertices[30] = CubeVertex(positionCoord: GLKVector3(v: (-0.5, 0.5, -0.5)), textureCoord: GLKVector2(v: (0, 1)))
        self.vertices[31] = CubeVertex(positionCoord: GLKVector3(v: (-0.5, -0.5, -0.5)), textureCoord: GLKVector2(v: (0, 0)))
        self.vertices[32] = CubeVertex(positionCoord: GLKVector3(v: (0.5, 0.5, -0.5)), textureCoord: GLKVector2(v: (1, 1)))
        
        self.vertices[33] = CubeVertex(positionCoord: GLKVector3(v: (-0.5, -0.5, -0.5)), textureCoord: GLKVector2(v: (0, 0)))
        self.vertices[34] = CubeVertex(positionCoord: GLKVector3(v: (0.5, 0.5, -0.5)), textureCoord: GLKVector2(v: (1, 1)))
        self.vertices[35] = CubeVertex(positionCoord: GLKVector3(v: (0.5, -0.5, -0.5)), textureCoord: GLKVector2(v: (1, 0)))

        //開闢緩存區
        glGenBuffers(1, &vertexBuffer)
        glBindBuffer(GLenum(GL_ARRAY_BUFFER), vertexBuffer)
        let bufferSize = MemoryLayout<CubeVertex>.size * kCoordCount
        glBufferData(GLenum(GL_ARRAY_BUFFER), bufferSize, self.vertices, GLenum(GL_STATIC_DRAW))

        //頂點數據
        glEnableVertexAttribArray(GLuint(GLKVertexAttrib.position.rawValue))
        glVertexAttribPointer(GLuint(GLKVertexAttrib.position.rawValue), 3, GLenum(GL_FLOAT), GLboolean(GL_FALSE), GLsizei(MemoryLayout<CubeVertex>.size), BUFFER_OFFSET(0))

        //紋理數據
        glEnableVertexAttribArray(GLuint(GLKVertexAttrib.texCoord0.rawValue))
        glVertexAttribPointer(GLuint(GLKVertexAttrib.texCoord0.rawValue), 2, GLenum(GL_FLOAT), GLboolean(GL_FALSE), GLsizei(MemoryLayout<CubeVertex>.size), BUFFER_OFFSET(MemoryLayout<GLKVector3>.size + 4))

    }
    
    private func BUFFER_OFFSET(_ i: Int) -> UnsafeRawPointer? {
        return UnsafeRawPointer(bitPattern: i)
    }
    
    private func addDisplayLink() {
        displayLink.add(to: RunLoop.main, forMode: .common)
    }
    
    @objc private   func glkViewDisplay() {
        angle = (angle + 3) % 360
        let radians = GLKMathDegreesToRadians(Float(angle))
        //模型視圖矩陣變換
        baseEffect.transform.modelviewMatrix = GLKMatrix4MakeRotation(radians, 0.5, 0.3, 0.4)
        glkView.display()
    }
    
    override func viewDidDisappear(_ animated: Bool) {
        super.viewDidDisappear(animated)
        displayLink.invalidate()
    }
    deinit {
        if EAGLContext.current() == glkView.context {
            EAGLContext.setCurrent(nil)
        }
        
       vertices.deallocate()
       glDeleteBuffers(1, &vertexBuffer)
        
    }
}

extension ViewController: GLKViewDelegate {
    func glkView(_ view: GLKView, drawIn rect: CGRect) {
        glEnable(GLenum(GL_DEPTH_TEST))
        glClear(GLbitfield(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT))
        baseEffect.prepareToDraw()
        glDrawArrays(GLenum(GL_TRIANGLES), 0, GLsizei(kCoordCount))
    }
}

複製代碼

代碼解析

上述代碼對頂點和紋理座標數據的使用採用了指針操做，具體使用方式可參考我上篇文章iOS 指針與數組。

還有一點就是在結構體CubeVertex中，根據偏移取紋理座標GLKVector2的值：

BUFFER_OFFSET(MemoryLayout<GLKVector3>.size + 4)
複製代碼

這個地方加4是由於蘋果對部分包含vector類型數據的結構體加了一個padding,此處這個padding等於4個字節。CubeVertex佔24個字節，而不是5個float所佔的20個字節，具體參見sizeof() returns wrong size for struct which contains GLKVector3, GLKVector4 variable

效果