沈毅—AR 在百度小游戏中的探索和实践

前端狗

2019/07/09 发布于 编程 分类

GMTC2019 

文字内容
1. AR 在百度⼩小游戏中的探索和实践 沈沈毅
4. 关于我 • JavaScript • WebGL • Rendering • GIS • 数据可视化 (ECharts) • ⽣生成艺术 • 游戏开发⺠民科 • AR pissang1 pissang
5. 这次分享有什什么 • AR 应⽤用示例例介绍 • 百度⼩小游戏中的 AR ⽅方案 • 打造⼀一个百度⼩小游戏 AR 应⽤用
6. ⼀一些 AR 应⽤用示例例
7. 1 Marker Tracking 通过预⽣生成的特征识别标记物 • ARToolkit • AR.js
8. 2 Image Tracking
9. 3 Plane Detection 图像中的平⾯面检测 • ARKit • ARCore
10. 4 Location Based • Pokemon Go • ⼀一起来捉妖
11. 5 Snapchat Landmarks • 识别地标建筑 • 天空分割
12. 6 Argumented Face • ⼈人脸特征检测
13. 空间位置和朝向 Sensor Camera CV ⼈人脸 理理解现实场景 CNN 平⾯面 光照 GPS 花花草草 增强现实场景
14. 浏览器器中的 AR Sensor? DeviceOrientationEvent DeviceMotionEvent AR.js Camera? requestUserMedia Video face-api.js CV? WebGL TensorFlow.js NN? WebGPU WebNN Paddle.js
15. 更更直接的⽅方案 WebXR
16. WebXR • WebXR 前身 WebVR,⽬目前 Draft 主要是 VR 场景的⼀一些接⼝口, AR 场景只是在 GitHub 上关于 Anchor 和 Hit Test 有⼀一些讨论 • WebXR 整体更更倾向 Mixed Reality。其中⼀一些概念是在 VR 和 AR 中共⽤用的
17. 百度⼩小游戏中 AR 的集成 WebGL V8 / JSCore + File System Network WebXR
19. 1. AR Session Creation 2. AR Frame Update • World Tracking • Point Cloud • Plane Detection • Hit Test • Anchor • Light Estimate 3. AR Session End 注: • 红色部分在 WebXR Draft 里 • 灰色部分在 Proposal 或者讨论中
20. ⼀一段最简单的使⽤用代码 1. ⼩小程序⼩小游戏⻛风格的接⼝口 • 异步创建 • 创建成功 => success • 创建失败 => fail 2. 通过 mode 指定场景 3. ⾃自动调起后置相机 4. 每⼀一帧更更新相机矩阵
21. 1 World Tracking • 空间位置的追踪 • 每帧更更新相机的位置和朝向矩阵 • ⾼高频率的 Sensor + 低频率的 CV 计算
22. 2 Point Cloud 实时检测的可视化反馈 • 特征点检测 • 返回点云的空间位置(x, y, z)和 可信度。
23. 3 Plane Detection 在地⾯面/桌⾯面等平⾯面上放置虚拟物体 • 根据特征点检测空间中的平⾯面 • 返回平⾯面中⼼心点位置和朝向的矩阵以及可 检测到的平⾯面尺⼨寸
24. 4 Hit Test 实现点击放置虚拟物体等功能 • 获取屏幕上的像素位置对应的空间中的 位置和朝向 • 返回所有交点的矩阵,按照顺序排列列
25. 5 Anchor 锚点(Anchor)定义了了在现实世界中的⼀一 个固定位置和朝向 • 每⼀一帧锚点的坐标变换矩阵都会调整,保证 矩阵对应的虚拟物体在现实场景中能够看起 来固定在⼀一个位置 • 可以根据上⾯面射线检测得到的矩阵创建⼀一个 锚点
26. 6 Light Estimate 让虚拟场景中的光照效果跟现实场 景更更匹配,更更能融⼊入现实场景 • 检测现实世界中环境光亮度和⾊色调 • 返回归⼀一后的强度值以及颜⾊色 RGB • 根据提供的强度和⾊色调调整⾃自⼰己三维 虚拟场景中的环境光配置
27. 将三维的虚拟世界跟真实 世界结合,实现将虚拟的 三维场景放置并融⼊入在真 实世界中的沉浸式效果。
29. 增强⼈人脸 • 美颜,美妆 • 表情游戏
31. 1 相机数据 • 相机的 Video 对象 • Shader 中后处理理 • 磨⽪皮美⽩白、艺术滤镜 Glitch Duo Tone 美⽩白+磨⽪皮
32. 2 特征点以及姿态 • 95 个特征点的归⼀一坐标 • ⼈人脸姿态估计 • ⼤大部分效果的基础 • 瘦脸 • 贴纸 • …
33. 3 ⼈人脸⻣骨骼识别 • ⻣骨骼的层级关系 • ⻣骨骼节点的变换矩阵 • 换脸 • 佩戴装饰 • …
34. 4 表情系数 • 表情类型 mouth jaw • 表情触发游戏逻辑 eyes • 相似度匹配 brows • Morph Animation • 表情系数 0–1
35. 打造⼀一个 AR 百度⼩小游戏应⽤用
36. 1 基础的模型展示 JS Logic THREE.js DOM Adapter Native Runtime glTF
37. 2 初始化 AR 模式
38. 3 查找可以放置的平⾯面 1. hitTest 得到屏幕中间对应的三维空间坐标 2. getTrackablePlanes 获得空间中检测到的平⾯面 3. 判断 1 中得到的坐标是否在任意⼀一个平⾯面上 • 变换坐标到平⾯面所在的坐标系 • 判断点到平⾯面的距离是否 为 0 以及是否在平⾯面内 4. 绘制相应的提示
39. 4 点击固定位置放置模型 1. 根据 poseMatrix 矩阵创建锚点 2. 每⼀一帧获取锚点矩阵,更更新到模型中
40. 感觉只是把模型画⾯面贴到相机上?
41. 5 更更真实的光照 – IBL 1. 使⽤用 HDR 图⽚片作为光照源,基于物理理的渲染 • ⾦金金属、⾮非⾦金金属 • 粗糙度 • ⻋车漆: Clear Coat 2. 获取相机输⼊入的 HDR 图⽚片,实时反射 • ARKit: AREnvironmentProbeAnchor • ARCore: HDR Cubemap Reflections
42. 6 更更真实的光照 – Light Estimate 使⽤用 ambientIntensity 作为 Tone Mapping 的曝光系数
43. 7 渲染优化 – 直接阴影 阴影和遮挡是体现空间关系的两个 重要因素 1. 在模型底部放置平面 2. 只绘制阴影的 THREE.ShadowMaterial 3. 调整不透明度跟相机画面做混合 Directional Shadow
44. 8 渲染优化 – 间接阴影 1. 预处理理的 Bake AO 2. 实时的 Screen Space Ambient Occlusion 3. Poor man soft shadow • 渲染轮廓 + Gaussian Blur Contact Shadow
46. 总结 • ARKit 和 ARCore 的集成 - 渲染和数据管理理 - 概念统⼀一 - 接⼝口设计能够⾼高效访问,符合前端开发习惯 • 现有规范中扩展⼈人脸算法 - 利利⽤用 AI 提供更更多感知世界的能⼒力力 • 打造⼀一个可⽤用的 AR 应⽤用 - 更更适合 AR 的交互 - 优化渲染以融⼊入真实场景、 PBR、 Contact Shadow
47. THANKS
48. THANKS
51. THANKS