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
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效果。
网友评论