WebAR应用案例和技术详解 燃燃(曾柏然)

前端狗

2019/01/19 发布于 技术 分类

文字内容
1. WebAR 应⽤用案例例 应⽤用案例例与技术详解 技术详解 燃然 / 蚂蚁⾦金金服 ⾼高级前端⼯工程师
2. AR VR 3D WebGL WebGPU
3. 创意海海报 发货时间T+7
4. AR海海报预览 1:1 场景还原 100% 如假包换 先⽤用后买不不上当 炫酷炫酷 实⽤用 ⽜牛逼 先⽤用后付款 不不好看不不给钱不不骗⼈人
5. 通⽤用SLAM能⼒力力 重建世界 提供绘制3D场景需要的MVP Matirx,以m为单位还原现实世界 碰撞检测 对于屏幕2维坐标映射出现实世界的3维坐标 ARKit 平⾯面检测 检测现实环境中的⽔水平⾯面,垂直平⾯面位置和⼤大⼩小
6. 好玩 实⽤用
7. 证件照拍摄
8. 如何在Web上进⾏行行AR渲染 相机 算法 3D
9. 3D渲染-相机 ProjectionMatrix ViewMatrix
10. 3D渲染-模型 (x,y,z,1) * modelMat * viewMat * projectionMat ModelMatrix = (x’,y’,z’,1)
11. 3D渲染-管线 vertex fragment Screen
12. 3D渲染-引擎 相机背景 渲染引擎 camera 3D <canvas> <div>
13. 如何在Web上进⾏行行AR渲染 相机 算法 3D
14. WebAR的主要能⼒力力 渲染相机 桥接算法
15. 渲染相机 庞⼤大的相机数据量量 720 * 1280 * 1.5 = 1.38M 整个⽅方案起源于⼀一个iOS的API 每秒30/60帧 内存指针 —> ArrayBuffer —> Texture
16. 渲染相机 庞⼤大的相机数据量量 使⽤用WebGL进⾏行行⾊色彩空间转化 相机采样的数据格式YCbCr / NV21 R = Y + 1.402 * (V - 128) G = Y - 0.34414 * (U - 128) - 0.71414 * (V - 128) B = Y + 1.772 * (U - 128)
17. 渲染相机 庞⼤大的相机数据量量 使⽤用WebGL进⾏行行⾊色彩空间转化 适配WKWebView和ARCore ⽆无法获取/转化相机数据指针到ArrayBuffer 同层渲染显示相机画⾯面 直接使⽤用Native绘制 Web Native DOM
18. 渲染相机 庞⼤大的相机数据量量 使⽤用WebGL进⾏行行⾊色彩空间转化 适配WKWebView和ARCore .5ms iOS上使⽤用Metal渲染 OpenGL was designed for the render pipeline of 20 years ago 更更快地渲染,更更少地电量量消耗,更更⾼高效的滤镜
19. 渲染相机 庞⼤大的相机数据量量 使⽤用WebGL进⾏行行⾊色彩空间转化 适配WKWebView和ARCore iOS上使⽤用Metal渲染 可编程滤镜
20. 渲染相机 庞⼤大的相机数据量量 使⽤用WebGL进⾏行行⾊色彩空间转化 适配WKWebView和ARCore iOS上使⽤用Metal渲染 可编程滤镜
21. 渲染相机 OpenGL Metal vertex compute 庞⼤大的相机数据量量 使⽤用WebGL进⾏行行⾊色彩空间转化 适配WKWebView和ARCore iOS上使⽤用Metal渲染 可编程滤镜 fragment FBO texture vertex fragment Screen
22. 渲染相机 接⼊入图像native算法 Detector Camera JS Detector 桥接算法
23. 渲染相机 桥接算法 接⼊入图像native算法 优化Detector数据传递 float 3.141592653579 —> 4 bytes string ‘3.141592653579’ —> 13 bytes float[16] —> 9 * 16 bytes base64的⼆二进制 60帧
24. 如何在Web上进⾏行行AR渲染 相机 算法 3D
25. ⼊入坑指南 通⽤用前端 集团⽤用户 1. WebRTC渲染背景(iOS受限) 1. 打开相机 2. 使⽤用陀螺仪,绘制3D场景 2. 绘制3D场景,应⽤用滤镜 3. 结合简单JS图像算法 3. 结合Native图像算法
26. 仍有不不⾜足 1. ARCore⽀支持更更多机型 2. 统⼀一的滤镜接⼝口 3. 寻找更更多图像算法
28. 谢谢⼤大家,开饭啦