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使用

開發者需要實現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

先看效果:

代碼也很簡單：

#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內容了。

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使用基於物理的渲染著色器（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效果。

閱讀更多 今日頭條技術團隊 的文章

關鍵字: 7 軟件 HTML