ARKit & OpenGL ES - ARKit 原理及實(shí)現(xiàn)
原理篇
如果你想了解更多關(guān)于OpenGL ES的知識(shí)，請(qǐng)移步至OpenGL ES相關(guān)文章目錄
本文所用的代碼在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)知識(shí)。
AR基本概念
AR最基本的概念就是將虛擬的計(jì)算機(jī)圖形和真實(shí)環(huán)境結(jié)合的技術(shù)。該技術(shù)有很多種實(shí)現(xiàn)方式。
-
使用2D或者3D圖形裝飾人臉，常見于一些相機(jī)和視頻類App，主要使用人臉識(shí)別追蹤技術(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)會(huì)追蹤真實(shí)世界的特征點(diǎn)，計(jì)算攝像機(jī)位置。蘋果以后也有可能會(huì)出ARMarkerTrackingSessionConfiguration之類用來識(shí)別追蹤標(biāo)記的配置吧。ARSession開啟后會(huì)啟動(dòng)相機(jī)，并且會(huì)通過傳感器感知手機(jī)位置。借用WWDC中的一張圖。
ARSession綜合相機(jī)捕獲的視頻流和位置信息生成一系列連續(xù)的ARFrame。
- - (void)session:(ARSession *)session didUpdateFrame:(ARFrame *)frame {
- ...
- }
每個(gè)ARFrame包含了從相機(jī)捕捉的圖片，相機(jī)位置相關(guān)信息等。在這個(gè)方法里我們需要繪制相機(jī)捕捉的圖片。根據(jù)相機(jī)位置等信息繪制3D物體等。
平面檢測(cè)
ARKit提供了另一個(gè)很酷的功能，檢測(cè)真實(shí)世界的平面，并提供一個(gè)ARPlaneAnchor對(duì)象描述平面的位置，大小，方向等信息。
- - (void)runAR {
- if (@available(iOS 11.0, *)) {
- ARWorldTrackingSessionConfiguration *config = [ARWorldTrackingSessionConfiguration new];
- config.planeDetection = ARPlaneDetectionHorizontal;
- [self.arSession runWithConfiguration:config];
- }
- }
上面的config.planeDetection = ARPlaneDetectionHorizontal;設(shè)置了檢測(cè)平面的類型是水平。不過目前也就只有這一個(gè)選項(xiàng)可以選。如果ARKit檢測(cè)到了平面，會(huì)通過delegate中的方法- (void)session:(ARSession *)session didAddAnchors:(NSArray
Hit Test
Hit Test可以讓你方便的在檢測(cè)到的平面上放置物體。當(dāng)你點(diǎn)擊屏幕時(shí)，使用Hit Test可以檢測(cè)出你點(diǎn)擊的位置有哪些平面，并且提供ARAnchor用于設(shè)置放置物體的位置。
- [frame hitTest:CGPointMake(0.5, 0.5) types:ARHitTestResultTypeExistingPlane];
使用ARFrame的hitTest方法，***個(gè)傳入的點(diǎn)取值范圍從(0,0)到(1,1)，第二個(gè)參數(shù)代表可以檢測(cè)哪些對(duì)象?？梢詸z測(cè)到的對(duì)象如下。
-
ARHitTestResultTypeFeaturePoint，根據(jù)距離最近的特征點(diǎn)檢測(cè)出來的連續(xù)表面。
-
ARHitTestResultTypeEstimatedHorizontalPlane，非精準(zhǔn)方式計(jì)算出來與重力垂直的平面。
-
ARHitTestResultTypeExistingPlane, 已經(jīng)檢測(cè)出來的平面，檢測(cè)時(shí)忽略平面本身大小，把它看做一個(gè)無窮大的平面。
-
ARHitTestResultTypeExistingPlaneUsingExtent, 已經(jīng)檢測(cè)出來的平面，檢測(cè)時(shí)考慮平面本身的大小。
檢測(cè)成功則返回NSArray
光線強(qiáng)度調(diào)節(jié)
ARKit還提供了一個(gè)檢測(cè)光照強(qiáng)度的功能，主要為了讓3D模型的光照和環(huán)境的光照強(qiáng)度保持一致。在ARFrame中有一個(gè)lightEstimate的變量，如果檢測(cè)光照強(qiáng)度成功，則會(huì)有值。值的類型為ARLightEstimate，其中只包含一個(gè)變量ambientIntensity。在3D光照模型中，它對(duì)應(yīng)環(huán)境光，它的值從0 ~ 2000。使用OpenGL渲染時(shí)，可以使用這個(gè)值調(diào)整光照模型中的環(huán)境光強(qiáng)度。
ARKit的理論知識(shí)差不多到此結(jié)束了，下一篇將會(huì)介紹如何使用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存儲(chǔ)了攝像頭捕捉的圖片信息，類型是CVPixelBufferRef。默認(rèn)情況下，圖片信息的格式是YUV，通過兩個(gè)Plane來存儲(chǔ)，也可以理解為兩張圖片。一張格式是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;
- }
理并綁定好紋理后，為了保證不同屏幕尺寸下，紋理不被非等比拉伸，所以對(duì)viewport進(jìn)行重了新計(jì)算[self setupViewport: CGSizeMake(imageHeight, imageWidth)];。接下來將ARKit計(jì)算出來的攝像機(jī)的變換賦值給self.cameraMatrix。注意ARKit捕捉的圖片需要旋轉(zhuǎn)90度后才能正常顯示，所以在設(shè)置Viewport時(shí)特意顛倒了寬和高，并在***對(duì)攝像機(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的基本思路，沒有對(duì)OpenGL ES技術(shù)細(xì)節(jié)描述太多。如果你有興趣，可以直接clone Github上的代碼深入了解。
