[ WWDC2018 ] - AR Quick Look 概览 AR Quick Look

1、什么是AR Quick Look

1.1、概述

AR Quick Look是用于在AR场景中预览3D模型的技术，通过它开发者能快速在自己的App中展示高质量的3D内容。

1.2、优点

使用简单，内置AR场景设置，使用者不需要了解AR技术。

1.3、使用环境

iOS12

1.4、usdz文件

AR Quick Look技术是基于usdz文件的，这是一种全新的用于描述3D模型的文件格式，它基于Pixar的开源USD文件格式，将模型和模型的纹理打包在一个文件当中，同时支持iOS和macOS系统。利用这一文件，我们可以很容易预览或者分享3D内容。
Xcode10中提供了usdz_converter工具用以生成usdz文件。

2、App中集成AR Quick Look

2.1、QLPreviewController概述

该类是用于展示QLPreviewItem内容的控制器，QLPreviewItem中包含了3D模型的URL和标题。

2.2、QLPreviewController使用

1 (1).png

开发者需要实现QLPreviewControllerDataSource和QLPreviewControllerDelegate中3个关键方法。

- (NSInteger)numberOfPreviewItemsInPreviewController:(QLPreviewController *)controller;//指明需要展示的Item数量
{
return 1;
}

- (id)previewController:(QLPreviewController *)controller 
previewItemAtIndex:(NSInteger)index;//根据index指明需要展示的QLPreviewItem，这里关键是通过usdz资源文件的路径生成QLPreviewItem
{
QLPreviewItem *item = [[QLPreviewItem alloc] init];
item.previewItemURL = [[NSBundle mainBundle] URLForResource:@"3d_model" withExtension:@"usdz"];
return item;
}
- (CGRect)previewController:(QLPreviewController *)controller 
frameForPreviewItem:(id)item 
inSourceView:(UIView * _Nullable *)view;//指明展示预览页面时转场动画的参数
{
return zoom_orginal_rect;
}

2.3、Demo

先看效果:

ARQuickLook.gif

代码也很简单：

#import "ViewController.h"
#import 

@interface ViewController ()
@property (nonatomic) UIButton *button;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    self.navigationItem.title=@"预览";

    _button = [[UIButton alloc] init];
    _button.frame = CGRectMake(100, 100, 100, 100);
    _button.backgroundColor = [UIColor yellowColor];
    [_button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [_button setTitle:@"tap" forState:UIControlStateNormal];
    [_button addTarget:self action:@selector(tap:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:_button];
    
}
- (void)tap:(id)sender{
    QLPreviewController *qlVc = [[QLPreviewController alloc] init];
    qlVc.delegate = self;
    qlVc.dataSource = self;
    qlVc.navigationController.navigationBar.userInteractionEnabled = YES;
    qlVc.view.userInteractionEnabled = YES;
    [self presentViewController:qlVc animated:YES completion:nil];
}
#pragma mark - QLPreviewController 代理方法
- (NSInteger)numberOfPreviewItemsInPreviewController:(QLPreviewController *)controller{
    return 1;
}

- (id)previewController:(QLPreviewController *)controller previewItemAtIndex:(NSInteger)index{
    return [[NSBundle mainBundle] URLForResource:@"retrotv" withExtension:@"usdz"];
}
- (CGRect)previewController:(QLPreviewController *)controller frameForPreviewItem:(id )item inSourceView:(UIView * _Nullable * __nonnull)view{
    return _button.frame;
}


@end

可以在这里下载usdz文件

3、Safari中预览3D内容

HTML中可以通过标签直接嵌入usdz文件的链接，这样就可以在Safari中预览3D内容了。

2 (1).png

3 (1).png

4、创建3D模型

4.1、位置

渲染时会进行模型坐标系到真实世界坐标系的变化，因此3D模型在模型坐标系中的位置会直接影响渲染效果。AR Quick Look要求3D模型在模型坐标系中的位置符合以下要求：

1.面向摄像机镜头

4 (1).png

模型坐标系如图所示，z轴的正方向指向镜头

2.模型底部平面位于y=0的平面

5 (1).png

3.模型底部平面的中心点位于原点 (x=0,y=0,z=0)

6 (1).png

4.2、物理尺寸

模型的物理尺寸需要与现实世界相吻合。对于在现实世界中不存在的形象，可以把模型尺寸设置成动态，因而可以随使用者需要进行缩放。

4.3、动画

给模型添加动画可以让渲染更生动，交互效果更好。因此建议给3D模型添加一个默认的动画。动画在渲染时是循环播放的，可以由骨骼动画和变换动画混合而成。
这里有一些给模型添加动画的建议：

1.选择增强AR沉浸感的动画

2.不要让物体远离原点制作动画

3.在整个动画中保持一致的边界框

4.创建的动画在静态的位置有意义

5.创建的动画作为独立场景

4.4、阴影

AR Quick Look 在渲染时会根据现实场景生成阴影，这意味着：你可以选择打开或者关闭阴影效果，也可以选择环境光照的条件。需要注意的是，不要在3D模型中设置阴影，因为这样的话，AR Quick Look生成的阴影会跟模型自带的阴影重合了。

AR Quick Look会选择动画的第一帧作去生成阴影。因此要仔细选择动画的第一帧，让生成的阴影效果与后面的动画帧契合。

错误的阴影例子，动画的第一帧选择不当，导致在后续的动画播放中，即使小球运动到水平位置，左侧的阴影依然存在，导致失真。

7 (1).png

正确的例子，选择小球在水平位置的状态作为动画第一帧，这样在小球运动的动画播放时，阴影不会失真。

8 (1).png

4.5、外观

AR Quick Look使用基于物理的渲染着色器（PBR Shader），提供六个维度去控制3D模型的外观。

没有外观描述的基础模型：

9 (1).png

4.5.1反照率（基础色）

10 (1).png

4.5.2金属光泽

11 (1).png

4.5.3粗糙度

12 (1).png

4.5.4表面细节

13 (1).png

4.5.5环境光遮蔽

14 (1).png

4.5.6发光程度

15 (1).png

4.5.7透明度

除了上述6个维度，透明度也能影响模型的渲染效果。透明度是通过改变反照率的alpha通道实现的。官方建议为模型的透明和不透明部分使用单独的mesh，在模型的透明区域使用透明度。

不透明区域的mesh：

16 (1).png

透明区域的mesh：

17 (1).png

4.5.8纹理文件格式

描述反照率、表面细节、发光度的文件应该是RGB图像（反照率可以是RGBA图像以实现透明度），而描述金属光泽、粗超度、环境光遮蔽的文件是灰度图像。这些图像文件格式可以是任意的iOS系统支持的图像文件格式，比如
.png，图像长宽必须是2的指数（2048，1024，512...）。

4.5.9设备兼容性

AR Quick Look建议开发者在内存较大的设备上测试模型，比如iPhone 7 Plus，iPhone 8 Plus，iphone X，iPad Pro12.9。在使用这些模型时，AR Quick Look会根据设备需要，动态对模型的图像文件进行降采样以优化内存使用（比如在旧的设备上），但是网格和动画不会修改。

4.5.10模型尺寸约束

影响模型渲染时的内存消耗主要有网格和动画的复杂度，纹理文件大小和数量。官方建议：

1.单个物体模型，网格中多边形数量在100k左右

2.纹理图像为2048*2048

3.10秒的动画

4.在真实设备上测试你的模型

4.6、优化并输出模型

4.6.1优化模型

官方给出的优化建议包括：

1.冻结变换并合并相邻的顶点

2.如果可能，请为整个模型使用单个材质/纹理集

3.不要包含你不需要的纹理

4.把你的纹理预算花在增加最大价值和体现模型现实性的方面

5.请记住像素在AR中具有物理大小

6.在纹理的质量和文件大小间平衡

4.6.2 usdz Converter

Xcode 10自带的命令行工具，用来生成usdz文件
工具的输入是：

OBJ 文件

单帧的Alembic文件

USD文件（.usda 或.usdc）

一个usdz文件包含下面内容：

18 (1).png

通过usdz_converter命令，可以把3D模型素材转化为usdz文件:

19 (1).png

5、总结

AR Quick Look给开发者提供了便捷的3D模型预览和分享的工具，在生成usdz文件后，可以很轻松的在App或者HTML中展示AR效果。