ARKit & OpenGL ES - ARKit 原理及實現
原理篇
如果你想了解更多關于OpenGL ES的知識，請移步至OpenGL ES相關文章目錄
本文所用的代碼在https://github.com/SquarePants1991/OpenGLESLearn.git的ARKit分支中。
iOS11推出了新框架ARKit，通過ARKit和SceneKit可以很方便的制作AR App。蘋果也提供了AR基本的應用框架，你可以直接從此開始你的AR App的開發。
不過本系列文章將使用OpenGL ES為ARKit提供渲染支持，接下來我們先去了解一下ARKit的理論相關知識。
AR基本概念
AR最基本的概念就是將虛擬的計算機圖形和真實環境結合的技術。該技術有很多種實現方式。
-
使用2D或者3D圖形裝飾人臉，常見于一些相機和視頻類App，主要使用人臉識別追蹤技術。
-
基于標記的3D模型放置，比如基于AR的故事書，陰陽師的現世召喚。標記可以是簡單的黑框包裹的標記，也可以是一張復雜圖片的特征點訓練數據。如果你感興趣可以前往ARToolKit，這是一個開源的AR框架，主要用于基于標記的AR。最近出ARToolkit6 Beta了，不知道有沒有新的功能開放。
-
追蹤真實環境的特征點，計算真實攝像機在真實環境的位置。所謂特征點，就是圖片中灰度變化比較劇烈的位置，所以想要更精準穩定的計算，就需要真實環境的顏色變化比較豐富。ARKit就是使用這種原理進行攝像機定位的。
世界追蹤（WorldTracking）
通過追蹤真實世界的特征點，計算真實攝像機位置并應用到3D世界的虛擬攝像機是AR實現中最重要的部分。計算結果的精確性直接影響到渲染出來的結果。ARKit使用ARSession來管理整個AR處理流程，包括攝像機位置的計算。
- #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的方式很簡單，初始化，設置delegate，開啟ARSession需要傳入一個配置ARWorldTrackingSessionConfiguration，ARWorldTrackingSessionConfiguration代表AR系統會追蹤真實世界的特征點，計算攝像機位置。蘋果以后也有可能會出ARMarkerTrackingSessionConfiguration之類用來識別追蹤標記的配置吧。ARSession開啟后會啟動相機，并且會通過傳感器感知手機位置。借用WWDC中的一張圖。
ARSession綜合相機捕獲的視頻流和位置信息生成一系列連續的ARFrame。
- - (void)session:(ARSession *)session didUpdateFrame:(ARFrame *)frame {
- ...
- }
每個ARFrame包含了從相機捕捉的圖片，相機位置相關信息等。在這個方法里我們需要繪制相機捕捉的圖片。根據相機位置等信息繪制3D物體等。
平面檢測
ARKit提供了另一個很酷的功能，檢測真實世界的平面，并提供一個ARPlaneAnchor對象描述平面的位置，大小，方向等信息。
- - (void)runAR {
- if (@available(iOS 11.0, *)) {
- ARWorldTrackingSessionConfiguration *config = [ARWorldTrackingSessionConfiguration new];
- config.planeDetection = ARPlaneDetectionHorizontal;
- [self.arSession runWithConfiguration:config];
- }
- }
上面的config.planeDetection = ARPlaneDetectionHorizontal;設置了檢測平面的類型是水平。不過目前也就只有這一個選項可以選。如果ARKit檢測到了平面，會通過delegate中的方法- (void)session:(ARSession *)session didAddAnchors:(NSArray
Hit Test
Hit Test可以讓你方便的在檢測到的平面上放置物體。當你點擊屏幕時，使用Hit Test可以檢測出你點擊的位置有哪些平面，并且提供ARAnchor用于設置放置物體的位置。
- [frame hitTest:CGPointMake(0.5, 0.5) types:ARHitTestResultTypeExistingPlane];
使用ARFrame的hitTest方法，***個傳入的點取值范圍從(0,0)到(1,1)，第二個參數代表可以檢測哪些對象。可以檢測到的對象如下。
-
ARHitTestResultTypeFeaturePoint，根據距離最近的特征點檢測出來的連續表面。
-
ARHitTestResultTypeEstimatedHorizontalPlane，非精準方式計算出來與重力垂直的平面。
-
ARHitTestResultTypeExistingPlane, 已經檢測出來的平面，檢測時忽略平面本身大小，把它看做一個無窮大的平面。
-
ARHitTestResultTypeExistingPlaneUsingExtent, 已經檢測出來的平面，檢測時考慮平面本身的大小。
檢測成功則返回NSArray
光線強度調節
ARKit還提供了一個檢測光照強度的功能，主要為了讓3D模型的光照和環境的光照強度保持一致。在ARFrame中有一個lightEstimate的變量，如果檢測光照強度成功，則會有值。值的類型為ARLightEstimate，其中只包含一個變量ambientIntensity。在3D光照模型中，它對應環境光，它的值從0 ~ 2000。使用OpenGL渲染時，可以使用這個值調整光照模型中的環境光強度。
ARKit的理論知識差不多到此結束了，下一篇將會介紹如何使用OpenGL ES渲染ARFrame里的內容。
實現篇
本文所用的代碼在https://github.com/SquarePants1991/OpenGLESLearn.git的ARKit分支中。
本文所用OpenGL基礎代碼來自OpenGL ES系列，具備渲染幾何體，紋理等基礎功能，實現細節將不贅述。
集成ARKit的關鍵代碼都在ARGLBaseViewController中。我們來看一下它的代碼。
處理ARFrame
- - (void)session:(ARSession *)session didUpdateFrame:(ARFrame *)frame {
- // 同步YUV信息到 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)];
- // 同步攝像機
- 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。默認情況下，圖片信息的格式是YUV，通過兩個Plane來存儲，也可以理解為兩張圖片。一張格式是Y（Luminance），保存了明度信息，另一張是UV（Chrominance、Chroma），保存了色度和濃度。我們需要把這兩張圖分別綁定到不同的紋理上，然后在Shader中利用算法將YUV轉換成RGB。下面是處理紋理的Fragment Shader，利用公式進行顏色轉換。
- 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進行重了新計算[self setupViewport: CGSizeMake(imageHeight, imageWidth)];。接下來將ARKit計算出來的攝像機的變換賦值給self.cameraMatrix。注意ARKit捕捉的圖片需要旋轉90度后才能正常顯示，所以在設置Viewport時特意顛倒了寬和高，并在***對攝像機進行了旋轉。
VideoPlane
VideoPlane是為了顯示視頻編寫的幾何體，它能夠接收兩個紋理，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];
- }
其他的功能很簡單，就是繪制一個正方形，最終配合顯示視頻的Shader，渲染YUV格式的數據。
透視投影矩陣
在ARFrame可以獲取渲染需要的紋理和攝像機矩陣，除了這些，和真實攝像頭匹配的透視投影矩陣也是必須的。它能夠讓渲染出來的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透視投影矩陣，有了透視投影矩陣和攝像機矩陣，就可以很方便的利用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技術細節描述太多。如果你有興趣，可以直接clone Github上的代碼深入了解。
