原理篇

本文所用的代碼在https://github.com/SquarePants1991/OpenGLESLearn.git的ARKit分支中。

iOS11推出了新框架ARKit，通過ARKit和SceneKit可以很方便的制作AR App。蘋果也提供了AR基本的應(yīng)用框架，你可以直接從此開始你的AR App的開發(fā)。

不過本系列文章將使用OpenGL ES為ARKit提供渲染支持，接下來我們先去了解一下ARKit的理論相關(guān)知識。

AR基本概念

AR最基本的概念就是將虛擬的計(jì)算機(jī)圖形和真實(shí)環(huán)境結(jié)合的技術(shù)。該技術(shù)有很多種實(shí)現(xiàn)方式。

• 使用2D或者3D圖形裝飾人臉，常見于一些相機(jī)和視頻類App，主要使用人臉識別追蹤技術(shù)。

• 基于標(biāo)記的3D模型放置，比如基于AR的故事書，陰陽師的現(xiàn)世召喚。標(biāo)記可以是簡單的黑框包裹的標(biāo)記，也可以是一張復(fù)雜圖片的特征點(diǎn)訓(xùn)練數(shù)據(jù)。如果你感興趣可以前往ARToolKit，這是一個(gè)開源的AR框架，主要用于基于標(biāo)記的AR。最近出ARToolkit6 Beta了，不知道有沒有新的功能開放。

• 追蹤真實(shí)環(huán)境的特征點(diǎn)，計(jì)算真實(shí)攝像機(jī)在真實(shí)環(huán)境的位置。所謂特征點(diǎn)，就是圖片中灰度變化比較劇烈的位置，所以想要更精準(zhǔn)穩(wěn)定的計(jì)算，就需要真實(shí)環(huán)境的顏色變化比較豐富。ARKit就是使用這種原理進(jìn)行攝像機(jī)定位的。

世界追蹤（WorldTracking）

通過追蹤真實(shí)世界的特征點(diǎn)，計(jì)算真實(shí)攝像機(jī)位置并應(yīng)用到3D世界的虛擬攝像機(jī)是AR實(shí)現(xiàn)中最重要的部分。計(jì)算結(jié)果的精確性直接影響到渲染出來的結(jié)果。ARKit使用ARSession來管理整個(gè)AR處理流程，包括攝像機(jī)位置的計(jì)算。

#pragma make - AR Control
- (void)setupAR {
    if (@available(iOS 11.0, *)) {
        self.arSession = [ARSession new];
        self.arSession.delegate = self;
    }
}

- (void)runAR {
    if (@available(iOS 11.0, *)) {
        ARWorldTrackingSessionConfiguration *config = [ARWorldTrackingSessionConfiguration new];
        config.planeDetection = ARPlaneDetectionHorizontal;
        [self.arSession runWithConfiguration:config];
    }
}

- (void)pauseAR {
    if (@available(iOS 11.0, *)) {
        [self.arSession pause];
    }
}

使用ARSession的方式很簡單，初始化，設(shè)置delegate，開啟ARSession需要傳入一個(gè)配置ARWorldTrackingSessionConfiguration，ARWorldTrackingSessionConfiguration代表AR系統(tǒng)會追蹤真實(shí)世界的特征點(diǎn)，計(jì)算攝像機(jī)位置。蘋果以后也有可能會出ARMarkerTrackingSessionConfiguration之類用來識別追蹤標(biāo)記的配置吧。ARSession開啟后會啟動相機(jī)，并且會通過傳感器感知手機(jī)位置。借用WWDC中的一張圖。

ARSession綜合相機(jī)捕獲的視頻流和位置信息生成一系列連續(xù)的ARFrame。

- (void)session:(ARSession *)session didUpdateFrame:(ARFrame *)frame {
...
}

每個(gè)ARFrame包含了從相機(jī)捕捉的圖片，相機(jī)位置相關(guān)信息等。在這個(gè)方法里我們需要繪制相機(jī)捕捉的圖片。根據(jù)相機(jī)位置等信息繪制3D物體等。

平面檢測

ARKit提供了另一個(gè)很酷的功能，檢測真實(shí)世界的平面，并提供一個(gè)ARPlaneAnchor對象描述平面的位置，大小，方向等信息。

- (void)runAR {
    if (@available(iOS 11.0, *)) {
        ARWorldTrackingSessionConfiguration *config = [ARWorldTrackingSessionConfiguration new];
        config.planeDetection = ARPlaneDetectionHorizontal;
        [self.arSession runWithConfiguration:config];
    }
}

上面的config.planeDetection = ARPlaneDetectionHorizontal;設(shè)置了檢測平面的類型是水平。不過目前也就只有這一個(gè)選項(xiàng)可以選。如果ARKit檢測到了平面，會通過delegate中的方法- (void)session:(ARSession *)session didAddAnchors:(NSArray *)anchors提供數(shù)據(jù)給你。你可以判斷ARAnchor是不是ARPlaneAnchor來判斷是否檢測到了平面。ARAnchor用來表示3D物體在真實(shí)環(huán)境的位置。你只要保持你的3D物體和ARAnchor的3D變換同步就能實(shí)現(xiàn)AR效果了。

Hit Test

Hit Test可以讓你方便的在檢測到的平面上放置物體。當(dāng)你點(diǎn)擊屏幕時(shí)，使用Hit Test可以檢測出你點(diǎn)擊的位置有哪些平面，并且提供ARAnchor用于設(shè)置放置物體的位置。

[frame hitTest:CGPointMake(0.5, 0.5) types:ARHitTestResultTypeExistingPlane];

使用ARFrame的hitTest方法，***個(gè)傳入的點(diǎn)取值范圍從(0,0)到(1,1)，第二個(gè)參數(shù)代表可以檢測哪些對象?？梢詸z測到的對象如下。

• ARHitTestResultTypeFeaturePoint，根據(jù)距離最近的特征點(diǎn)檢測出來的連續(xù)表面。

• ARHitTestResultTypeEstimatedHorizontalPlane，非精準(zhǔn)方式計(jì)算出來與重力垂直的平面。

• ARHitTestResultTypeExistingPlane, 已經(jīng)檢測出來的平面，檢測時(shí)忽略平面本身大小，把它看做一個(gè)無窮大的平面。

• ARHitTestResultTypeExistingPlaneUsingExtent, 已經(jīng)檢測出來的平面，檢測時(shí)考慮平面本身的大小。

檢測成功則返回NSArray *，ARHitTestResult中包含檢測類型，相交點(diǎn)的距離，平面的ARAnchor。注意只有檢測到ARHitTestResultTypeExistingPlane和ARHitTestResultTypeExistingPlaneUsingExtent才會有ARAnchor。這四個(gè)檢測類型是可以通過|的方式同時(shí)存在的，比如ARHitTestResultTypeEstimatedHorizontalPlane |  ARHitTestResultTypeExistingPlane。

光線強(qiáng)度調(diào)節(jié)

ARKit還提供了一個(gè)檢測光照強(qiáng)度的功能，主要為了讓3D模型的光照和環(huán)境的光照強(qiáng)度保持一致。在ARFrame中有一個(gè)lightEstimate的變量，如果檢測光照強(qiáng)度成功，則會有值。值的類型為ARLightEstimate，其中只包含一個(gè)變量ambientIntensity。在3D光照模型中，它對應(yīng)環(huán)境光，它的值從0 ~ 2000。使用OpenGL渲染時(shí)，可以使用這個(gè)值調(diào)整光照模型中的環(huán)境光強(qiáng)度。

ARKit的理論知識差不多到此結(jié)束了，下一篇將會介紹如何使用OpenGL ES渲染ARFrame里的內(nèi)容。

實(shí)現(xiàn)篇

本文所用的代碼在 https://github.com/SquarePants1991/OpenGLESLearn.git的ARKit分支中。

本文所用OpenGL基礎(chǔ)代碼來自O(shè)penGL ES系列，具備渲染幾何體，紋理等基礎(chǔ)功能，實(shí)現(xiàn)細(xì)節(jié)將不贅述。

集成ARKit的關(guān)鍵代碼都在ARGLBaseViewController中。我們來看一下它的代碼。

處理ARFrame

- (void)session:(ARSession *)session didUpdateFrame:(ARFrame *)frame {
    // 同步Y(jié)UV信息到 yTexture 和 uvTexture
    CVPixelBufferRef pixelBuffer = frame.capturedImage;
    GLsizei imageWidth = (GLsizei)CVPixelBufferGetWidthOfPlane(pixelBuffer, 0);
    GLsizei imageHeight = (GLsizei)CVPixelBufferGetHeightOfPlane(pixelBuffer, 0);
    void * baseAddress = CVPixelBufferGetBaseAddressOfPlane(pixelBuffer, 0);

    glBindTexture(GL_TEXTURE_2D, self.yTexture);
    glTexImage2D(GL_TEXTURE_2D, 0, GL_LUMINANCE, imageWidth, imageHeight, 0, GL_LUMINANCE, GL_UNSIGNED_BYTE, baseAddress);
    glBindTexture(GL_TEXTURE_2D, 0);

    imageWidth = (GLsizei)CVPixelBufferGetWidthOfPlane(pixelBuffer, 1);
    imageHeight = (GLsizei)CVPixelBufferGetHeightOfPlane(pixelBuffer, 1);
    void *laAddress = CVPixelBufferGetBaseAddressOfPlane(pixelBuffer, 1);
    glBindTexture(GL_TEXTURE_2D, self.uvTexture);
    glTexImage2D(GL_TEXTURE_2D, 0, GL_LUMINANCE_ALPHA, imageWidth, imageHeight, 0, GL_LUMINANCE_ALPHA, GL_UNSIGNED_BYTE, laAddress);
    glBindTexture(GL_TEXTURE_2D, 0);

    self.videoPlane.yuv_yTexture = self.yTexture;
    self.videoPlane.yuv_uvTexture = self.uvTexture;
    [self setupViewport: CGSizeMake(imageHeight, imageWidth)];

    // 同步攝像機(jī)
    matrix_float4x4 cameraMatrix = matrix_invert([frame.camera transform]);
    GLKMatrix4 newCameraMatrix = GLKMatrix4Identity;
    for (int col = 0; col < 4; ++col) {
        for (int row = 0; row < 4; ++row) {
            newCameraMatrix.m[col * 4 + row] = cameraMatrix.columns[col][row];
        }
    }

    self.cameraMatrix = newCameraMatrix;
    GLKVector3 forward = GLKVector3Make(-self.cameraMatrix.m13, -self.cameraMatrix.m23, -self.cameraMatrix.m33);
    GLKMatrix4 rotationMatrix = GLKMatrix4MakeRotation(M_PI / 2, forward.x, forward.y, forward.z);
    self.cameraMatrix = GLKMatrix4Multiply(rotationMatrix, newCameraMatrix);
}

上面的代碼展示了如何處理ARKit捕捉的ARFrame，ARFrame的capturedImage存儲了攝像頭捕捉的圖片信息，類型是CVPixelBufferRef。默認(rèn)情況下，圖片信息的格式是YUV，通過兩個(gè)Plane來存儲，也可以理解為兩張圖片。一張格式是Y（Luminance），保存了明度信息，另一張是UV（Chrominance、Chroma），保存了色度和濃度。我們需要把這兩張圖分別綁定到不同的紋理上，然后在Shader中利用算法將YUV轉(zhuǎn)換成RGB。下面是處理紋理的Fragment Shader，利用公式進(jìn)行顏色轉(zhuǎn)換。

precision highp float;

varying vec3 fragNormal;
varying vec2 fragUV;

uniform float elapsedTime;
uniform mat4 normalMatrix;
uniform sampler2D yMap;
uniform sampler2D uvMap;

void main(void) {
    vec4 Y_planeColor = texture2D(yMap, fragUV);
    vec4 CbCr_planeColor = texture2D(uvMap, fragUV);

    float Cb, Cr, Y;
    float R ,G, B;
    Y = Y_planeColor.r * 255.0;
    Cb = CbCr_planeColor.r * 255.0 - 128.0;
    Cr = CbCr_planeColor.a * 255.0 - 128.0;

    R = 1.402 * Cr + Y;
    G = -0.344 * Cb - 0.714 * Cr + Y;
    B = 1.772 * Cb + Y;


    vec4 videoColor = vec4(R / 255.0, G / 255.0, B / 255.0, 1.0);
    gl_FragColor = videoColor;
}

處理并綁定好紋理后，為了保證不同屏幕尺寸下，紋理不被非等比拉伸，所以對viewport進(jìn)行重了新計(jì)算[self setupViewport: CGSizeMake(imageHeight, imageWidth)];。接下來將ARKit計(jì)算出來的攝像機(jī)的變換賦值給self.cameraMatrix。注意ARKit捕捉的圖片需要旋轉(zhuǎn)90度后才能正常顯示，所以在設(shè)置Viewport時(shí)特意顛倒了寬和高，并在***對攝像機(jī)進(jìn)行了旋轉(zhuǎn)。

VideoPlane

VideoPlane是為了顯示視頻編寫的幾何體，它能夠接收兩個(gè)紋理，Y和UV。

@interface VideoPlane : GLObject
@property (assign, nonatomic) GLuint yuv_yTexture;
@property (assign, nonatomic) GLuint yuv_uvTexture;
- (instancetype)initWithGLContext:(GLContext *)context;
- (void)update:(NSTimeInterval)timeSinceLastUpdate;
- (void)draw:(GLContext *)glContext;
@end

...

- (void)draw:(GLContext *)glContext {
    [glContext setUniformMatrix4fv:@"modelMatrix" value:self.modelMatrix];
    bool canInvert;
    GLKMatrix4 normalMatrix = GLKMatrix4InvertAndTranspose(self.modelMatrix, &canInvert);
    [glContext setUniformMatrix4fv:@"normalMatrix" value:canInvert ? normalMatrix : GLKMatrix4Identity];
    [glContext bindTextureName:self.yuv_yTexture to:GL_TEXTURE0 uniformName:@"yMap"];
    [glContext bindTextureName:self.yuv_uvTexture to:GL_TEXTURE1 uniformName:@"uvMap"];
    [glContext drawTrianglesWithVAO:vao vertexCount:6];
}

其他的功能很簡單，就是繪制一個(gè)正方形，最終配合顯示視頻的Shader，渲染YUV格式的數(shù)據(jù)。

透視投影矩陣

在ARFrame可以獲取渲染需要的紋理和攝像機(jī)矩陣，除了這些，和真實(shí)攝像頭匹配的透視投影矩陣也是必須的。它能夠讓渲染出來的3D物體透視看起來很自然。

- (void)session:(ARSession *)session cameraDidChangeTrackingState:(ARCamera *)camera {
    matrix_float4x4 projectionMatrix = [camera projectionMatrixWithViewportSize:self.viewport.size orientation:UIInterfaceOrientationPortrait zNear:0.1 zFar:1000];
    GLKMatrix4 newWorldProjectionMatrix = GLKMatrix4Identity;
    for (int col = 0; col < 4; ++col) {
        for (int row = 0; row < 4; ++row) {
           newWorldProjectionMatrix.m[col * 4 + row] = projectionMatrix.columns[col][row];
        }
    }
    self.worldProjectionMatrix = newWorldProjectionMatrix;
}

上面的代碼演示了如何通過ARKit獲取3D透視投影矩陣，有了透視投影矩陣和攝像機(jī)矩陣，就可以很方便的利用OpenGL渲染物體了。

- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect {
    [super glkView:view drawInRect:rect];

    [self.objects enumerateObjectsUsingBlock:^(GLObject *obj, NSUInteger idx, BOOL *stop) {
        [obj.context active];
        [obj.context setUniform1f:@"elapsedTime" value:(GLfloat)self.elapsedTime];
        [obj.context setUniformMatrix4fv:@"projectionMatrix" value:self.worldProjectionMatrix];
        [obj.context setUniformMatrix4fv:@"cameraMatrix" value:self.cameraMatrix];

        [obj.context setUniform3fv:@"lightDirection" value:self.lightDirection];
        [obj draw:obj.context];
    }];
}

本文主要介紹了OpenGL ES渲染ARKit的基本思路，沒有對OpenGL ES技術(shù)細(xì)節(jié)描述太多。如果你有興趣，可以直接clone Github上的代碼深入了解。