在 3D 图形场景下的前端开发 朱毅

QCon大会

2019/05/14 发布于 技术 分类

QCon  QCon2019 

文字内容
1. 在3D图形场景下的前端开发 朱毅 ⻉贝壳 · 如视
2. ⾃自我介绍
3. 朱毅 ⻉贝壳 · 如视 @zythum_朱⼀一 先后就职于微博和⻉贝壳,参与了了微博 PC 主站的建设研 发。其后加⼊入⻉贝壳,先后做过移动站,数据可视化,之后 来到如视部⻔门,致⼒力力于三维模型的前端展示⼯工作。
6. 全景展示以及补间动画 摄像机坐标系 模型⽂文件的加载
7. 全景展示以及补间动画 摄像机坐标系 模型⽂文件的加载
8. 我们要做些不不⼀一样的事情 啥⺓⼳幺蛾⼦子? 我们要开始搞三维看房了了,准备下。
9. 硬件⼩小哥哥能提供啥?
10. Cubemap
11. <CSS> Cubemap 3D viewer
12. CSS Cubmap 的效果
14. 我们要在场景⾥里里漫游 漫游啥意思? 两个点之前要⾛走过去。
15. 加个渐隐渐显?
16. 加个渐隐渐显?
17. 过度过程中,并没有真实的相对运动产⽣生。 我们可能需要创建⼀一个真实的3D场景了了。 上 WEBGL 吧。
18. webgl opengl es 在 web 上的通过 canvas 实现。 基本可以认为是将 opengl 和 javascript 结合在了了⼀一起。 将⼀一个 opengl 函数和 javascript ⼀一⼀一对应。
19. 同样来通过cubemap创建3Dviewer 试试
21. 没事⾛走两步?
22. 没事⾛走两步?
23. 摄像机位置发现移动
24. 周围的贴图也需要 跟着移动
25. shader
26. 上帝视⻆角
27. 摄像机视⻆角
28. 全景展示以及补间动画 摄像机坐标系 模型⽂文件的加载
30. 摄像机的平滑转动
31. P1 (1,x:1,11) x: (-1, -1 -1, -1) P2 y: 1 y: -1 z: 1 z: -1
33. P1 (1, 1, 1) P2 (-1, -1, -1) lat: 0.6154 lat: -0.6154 long: 0.7854 long: -2.3562
35. 摄像机的平滑转动
36. 全景展示以及补间动画 摄像机坐标系 模型⽂文件的加载
38. v ⼏几何体顶点(Geometric vertices) vt 贴图坐标点(Texture vertices) vn 顶点法线(Vertex normals) f ⾯面(Face)
39. 1. ⾏行行号索引,⾏行行数越多,索引值越⼤大 2. VN 没有特殊需要可以通过 face 计算 3. 字符串串传输效率低
40. vertices ⼏几何体顶点(Geometric vertices) uvs 贴图坐标点(Texture vertices) face ⾯面(Face)
41. 1. ⾏行行号索引,⾏行行数越多,索引值越⼤大 2. VN 没有特殊需要可以通过 face 计算 3. 字符串串传输效率低
42. ProtoBuf Google Protocol Buffer( 简称 Protobuf) 是 Google 公司内部的混合语⾔言数据标准。 Protocol Buffers 是⼀一种轻便便⾼高效的结构化数据存储格式,可以⽤用于结构化数据串串⾏行行 化,或者说序列列化。它很适合做数据存储或 RPC 数据交换格式。可⽤用于通讯协议、数 据存储等领域的语⾔言⽆无关、平台⽆无关、可扩展的序列列化结构数据格式。
45. 全景展示以及补间动画 摄像机坐标系 模型⽂文件的加载
46. ⾃自我介绍