在 3D 图形场景下的前端开发.pdf

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