webAR涉及的技术

1.技术体系

1.1技术体系整理

其中绿色底色的代表Demo中表现出的能力比较成熟，可以直接应用。

脑图地址：http://naotu.baidu.com/file/3392a895a903972520b2f65fda12ee3c?token=55695cff60c6e275

1.2 兼容性

Web AR的兼容性，可以认为是其用到两大核心技术的兼容性：

WebRTC:

WebGL：

1.3案例分析

公司的王者荣耀貂蝉AR广告， 《Web前端也能做的AR互动》

实际上就是一个基于Three.js渲染模型，并自行基于Three.js实现空间定位的一个AR应用。效果类似的是awe.js的空间定位功能，下面的Demo中有提供。

其开发模式为：

UI开发

• 开发or导出貂蝉游戏人物模型

• 开发人物皮肤贴图纹理

• 开发模型动画

• 使用3D软件导出Three.js支持的模型格式（这里看似简单，实际有大坑，不同的模型、骨骼、贴图、动画，导出时会有不同问题，还要控制模型资源大小，不能过大）

前端开发

• · WebGL全景场景（不支持WebRTC设备柔性降级）

• · 空间定位开发

• · 模型渲染

• · 交互与动画控制

• · 终端适配

2.业界相关的库及Demo

整理了部分Demo：https://artoolkittest.sparta.html5.qq.com/

2.1JsArtoolkit

Artoolkit的js版本，支持pat marker和nft marker的识别与跟踪，配合threejs可渲染模型，目前的问题是nft marker跟踪的帧率不高。

JsArtoolkit的项目地址为：https://github.com/artoolkit/jsartoolkit5

Pa