全真3D实践: 云网络体验馆

来到云网络体验馆，看到的是整个云网络核心架构的速写图景 —— 云上网络、跨地域、混合云。

抽象的云网络产品体系在这里被具象化，吸引用户去深入探索云网络。

我们通过三维探索的体验方式，用视觉、动画、空间去讲述云网络抽象的业务架构，帮助用户从立体视角，去直观的领略云网络产品的功能与架构。

多场景间无缝切换衔接，单场景内沉浸式体验：

— 探索云上网络

— 探索跨地域网络

— 探索混合云网络

②云网络 · 产品形象设定

由于用户终端硬件性能差异会很大，所以Web端的Run-time 3D体验对性能优化，模型的设计都有专业要求。

3D渲染要尽可能的降低性能消耗，同时兼顾产品体系可视化的美观与识别性。所以我们对16个云网络产品，在云产品形象、REAL 3D 产品模型资产库V1.0的基础上，进一步优化升级了视觉设定。

以负载均衡的产品形象设定为例：

③云网络 · REAL 3D技术沉淀

〇动画路由 (Animation Router)

经过三维具象化后的云网络核心架构，共有5大模块共14个页面。为了减少性能开销和切换动画流畅，所有这些页面动画都需要渲染在同一个 HTML <Canvas> 元素内，而非页面跳转。

基于全真3D的底层能力 —— GDS，我们为此设计并开发了一个支持URL路由的三维动画架构管理模块，将每个页面的三维场景、动画、和摄像机实现动画变换和页面路由的双向绑定。当用户在进入页面或跳转时，对这些动画数值进行赋值和插值计算，以此实现动画顺滑过渡的路由管理。

— GDS：阿里云设计中心自研WebGL图形技术能力，由丰富的WebGL代码组件构成

〇低实例化合并渲染 (Less DrawCalls)

完成功能和动画的开发之后，很重要的一步是渲染性能的优化，在计算与渲染里，实例越少，DrawCalls越少，意味着性能越高。首先是模型面数，在进行3D低面布线建模（Topology）并烘焙AO（Ambient Occlusion）贴图后，我们对模型进行了低实例化合并，同时根据摄像机运动角度，我们还使用背面剔除（Backface Culling）提升模型渲染性能。