[ WWDC2018 ] - 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<QLPreviewItem>)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<QLPreviewItem>)item  
inSourceView:(UIView * _Nullable *)view;//指明展示预览页面时转场动画的参数  
{
return zoom_orginal_rect;  
}

2.3、Demo

先看效果: ARQuickLook.gif

代码也很简单:

#import "ViewController.h"
#import <QuickLook/QuickLook.h>

@interface ViewController ()<QLPreviewControllerDataSource,QLPreviewControllerDelegate>
@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<QLPreviewItem>)previewController:(QLPreviewController *)controller previewItemAtIndex:(NSInteger)index{
    return [[NSBundle mainBundle] URLForResource:@"retrotv" withExtension:@"usdz"];
}
- (CGRect)previewController:(QLPreviewController *)controller frameForPreviewItem:(id <QLPreviewItem>)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效果。

本文总阅读量