「WWDC2018」-AR Quick Look概观AR Quick Look

 1、什么是AR Quick Look1.1、概述

AR Quick Look是用于在AR场景中预览3D模型【3d模型就是三维的、立体的模型，D是英文Dimensions的缩写。】的技术，通过它开发者能快速在自己的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【converter n.】工具用以生成usdz文件。

2、App中集成AR Quick Look2.1、QLPreviewController概述

该类是用于展示QLPreviewItem【“Item”是类似“管理者”地位的学园都市暗部组织，主要成员由4名女孩组成。】内容的控制器，QLPreviewItem中包含了3D模型的URL和标题。

2.2、QLPreviewController使用

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

- (NSInteger)numberOfPreviewItemsInPreviewController:(QLPreviewController *)controller;//指明需要展示的Item数量{return【return 表示从被调函数返回到主调函数继续执行，返回时可附带一个返回值，由return后面的参数指定。】 1;}- (id【ID是英文IDentity的缩写，身份标识号码的意思。】)previewController:(QLPreviewController *)controller previewItemAtIndex:(NSInteger)index;//根据index指明需要展示的QLPreviewItem，这里关键是通过usdz资源文件的路径生成QLPreviewItem{QLPreviewItem *item = [[QLPreviewItem alloc【函数alloc是可返回一个指向n个连续字符存储单元的指针，alloc函数的调用者可以利用该指针存储字符序列。】] init];item.previewItemURL = [[NSBundle mainBundle] URLForResource:@"3d_model【Model，意思是模特儿，模特儿是英文“model”的音译。】" withExtension:@"usdz"];return item;}- (CGRect)previewController:(QLPreviewController *)controller frameForPreviewItem:(id)item inSourceView:(UIView * _Nullable *)view;//指明展示预览页面时转场动画的参数{return zoom_orginal_rect;}2.3、Demo

先看效果:

代码也很简单：

#import "ViewController.h"#import @interface ViewController ()@property【@property，是一种计算机语言，使用特点是与@synthesize配对使用。】 (nonatomic) UIButton *button【button n. 按钮，纽扣HTML <button> 标签音标：['bʌt(ə)n]...】;@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【tap，是一个新型的免费自助建站服务平台，它可以创建并管理包括网站在内的各种网络应 Tap全新编辑器用。】" forState:UIControlStateNormal]; [_button addTarget:self action:@selector【selector 1.选择器 选择器 Selector样式要套用的对象. 样式规则Rule样式设定的内容. 每个样式後要加. 如H2 2.选择符 CSS的定义是由三个部分构成选择符selector属性properties和属性的取值value 基本格式 3.寻线器 SEL selector 选择装置寻线器转换开关. Select 选择. Selectivity收音机选择性. Semi 4.选择装置 SEL selector 选择装置寻线器转换开关. Select 选择. Selectivity收音机选择性. Semi 5.转换开关 SEL selector 选择装置寻线器转换开关. Select 选择. Selectivity收音机选择性. Semi 6.波段开关 selectivity 选择性...selector 选择器，波段开关 Notebook Selector for Airli...】(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【在所有的预处理指令中，#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内容了。

4、创建3D模型4.1、位置

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

1.面向摄像机镜头

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

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

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

4.2、物理尺寸

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

4.3、动画

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

这里有一些给模型添加动画的建议：

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

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

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

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

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

4.4、阴影

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

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

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

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

4.5、外观

AR Quick Look使用基于物理的渲染着色器【着色器（Shader）是用来实现图像渲染的，用来替代固定渲染管线的可编辑程序。】（PBR Shader），提供六个维度去控制3D模型的外观。

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

4.5.1反照率（基础色）

4.5.2金属光泽

4.5.3粗糙度

4.5.4表面细节

4.5.5环境光遮蔽

4.5.6发光程度

4.5.7透明度

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

不透明区域的mesh：

透明区域的mesh：

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文件包含下面内容：

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

5、总结

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