【李旭东】亿级用户规模的互动应用研发.pdf

《【李旭东】亿级用户规模的互动应用研发.pdf》由会员分享，可在线阅读，更多相关《【李旭东】亿级用户规模的互动应用研发.pdf（28页珍藏版）》请在三个皮匠报告上搜索。

1、亿亿级级用用户户规规模模公公益益项项目目背背后后的的互互动动技技术术李李旭旭东东支付宝公益业务前端负责人神神奇奇海海洋洋李李旭旭东东支付宝体验技术部公益业务前端负责人Galacean 团队成员熟悉 WebGL，略懂 Unity/Unreal喜欢玩游戏，喜欢在支付宝里种树养鱼养鸡希望为世界带来微小而美好的改变蚂蚂蚁蚁森森林林|神神奇奇海海洋洋全民公益互动项目属属性性海洋生态保护意意义义关卡升级类玩玩法法蚂蚁森林入入口口西西沙沙群群岛岛长长江江口口舟舟山山群群岛岛项项目目背背景景及及挑挑战战业业务务诉诉求求视视觉觉上上突破传统公益项目的表现形式排排期期上上快速迭代，可维护性强兼兼容容上上亿级规模，

2、全机型兼容低低端端机机一一键键降降级级2 2&3 3D D 混混合合开开发发与与渲渲染染重重业业务务逻逻辑辑部部分分 2 2D D 渲渲染染重重效效果果展展示示部部分分 3 3D D 渲渲染染生动立体的视觉效果3D 节点替换成 2D 节点兼兼顾顾视视觉觉效效果果、维维护护性性、稳稳定定性性3 3D D2 2D D+业务逻辑变更频繁代码复用，方便维护架架构构设设计计如如何何渲渲染染“生生动动立立体体”的的海海底底世世界界？图1图2海海水水：线线性性雾雾图3海海面面：视视差差映映射射图4海海底底：细细胞胞网网格格噪噪声声图5体体积积光光：纹纹理理偏偏移移采采样样图6水水泡泡：粒粒子子发发射射初初始

3、始状状态态模模拟拟海海洋洋效效果果自定义材质鳞鳞片片反反光光：菲菲涅涅尔尔特特效效软软体体珊珊瑚瑚随随水水流流飘飘动动：U UV V 顶顶点点动动画画初初始始效效果果菲菲涅涅尔尔加加持持模模拟拟海海洋洋生生物物外外表表轨轨迹迹编编辑辑加加载载&解解析析&应应用用点点击击加加速速导出轨迹JSON模模拟拟海海洋洋生生物物行行为为海海的的音音效效后后处处理理水水波波纹纹更更沉沉浸浸式式的的体体验验技术走到业务前面去，尝试给业务带来增益如如何何进进行行“极极致致”优优化化？为为什什么么要要优优化化？移动 web，全机型覆盖用用户户网网络络情情况况不不定定一一个个关关卡卡 3 3D D 模模型型资资源源

4、大大小小1 12 2MMD Dr ra awwC Ca al ll l 次次数数1 14 45 5次次C CP PU U 平平均均占占用用3 34 4%优优化化前前不不允允许许上上线线用用户户机机型型分分布布广广泛泛访问高峰时段可能在上下班途中（地铁|公交）WiFi|5G|4G|3G会有很多老旧机型优优化化方方向向模模型型压压缩缩逻辑压缩：通过技术手段减少美术资源1 12 2MM 3 3D D 资资源源2 2.7 7MM压缩率 77%美术工作流，一键压缩与上传压压缩缩效效果果模模型型压压缩缩物理压缩：对资源本身进行压缩加加载载策策略略3 30 0个个关关卡卡资资源源太太大大，预预推推浪浪费费千

5、千人人一一面面过过期期淘淘汰汰，不不适适合合长长期期运运营营项项目目预预推推方方案案千千人人千千面面专专属属项项目目独独立立存存储储空空间间自自定定义义淘淘汰汰机机制制交交互互式式缓缓存存方方案案资资源源缓缓存存一一帧帧的的简简略略绘绘制制过过程程C CP PU UG GP PU U准备渲染状态准备数据传输计算绘制一一次次 d dr ra awwC Ca al ll ld dr ra awwc ca al ll l 小小科科普普一一帧帧要要做做 1 14 45 5 次次145次 drawCall38次效效果果34%CPU 占用20%I In ns st ta an nc ce e 绘绘制制减减

6、少少 d dr ra awwc ca al ll 优优化化前前优优化化后后一一个个关关卡卡 3 3D D 模模型型资资源源大大小小1 12 2MM2 2.7 7MM （同同步步加加载载的的资资源源只只需需1 1.9 9MM）D Dr ra awwC Ca al ll l 次次数数1 15 54 4次次3 38 8次次C CP PU U 平平均均占占用用3 34 4%1 16 6.5 5%不不可可上上线线可可上上线线优优化化结结果果背背后后的的引引擎擎：G Ga al la ac ce ea an 20162017201820192020202120222