营销场景下互动技术的应用与探索
如果无法正常显示，请先停止浏览器的去广告插件。
1. 营销场景下互动技术的应用与探索
赤芍
体验技术部-互动与工程-互动工程师
2. 目录
01 02
WebGL渲染性能优化 智能动效
3. 01 02
WebGL渲染性能优化 智能动效
4.
5.
6.
7. 150+图层动画
10+粒子效果
8.
9.
10.
11.
12. CSS/Canvas动画
13. CSS/Canvas动画
巨大的工作量
14. CSS/Canvas动画
巨大的工作量
性能问题，无法稳定上线
15. CSS/Canvas动画
巨大的工作量
性能问题，无法稳定上线
MarsStudio
16. /01
大场景下渲染性能保证
WebGL渲染性能优化
17. WebGL渲染性能优化
传统渲染管线
18. WebGL渲染性能优化
传统渲染管线
减少CPU与GPU之间通信
19. WebGL渲染性能优化
三维场景模拟用户操作
20. WebGL渲染性能优化
三维场景模拟用户操作
用户屏幕
三维相机
21. WebGL渲染性能优化
三维场景模拟用户操作
22. WebGL渲染性能优化
三维场景模拟用户操作
23. WebGL渲染性能优化
24. WebGL渲染性能优化
视锥体碰撞检测
视锥体包围检测
25. WebGL渲染性能优化
视锥体碰撞检测
视锥体包围检测
剔除无效元素
减少CPU与GPU通信
26. WebGL渲染性能优化
27. WebGL渲染性能优化
30+图层动画
28. WebGL渲染性能优化
数据特性
30+图层动画
1.数据只读
2.数据可多次读取
3.数据类型固定
29. WebGL渲染性能优化
数据特性
30+图层动画
1.数据只读
2.数据可多次读取
3.数据类型固定
interLeaved模式组装元素数据
30. InterLeaved模式
整体偏移
模型1
顶点
uv
参数偏移
模型2
…
顶点
uv
模型3
…
顶点
uv
模型4
…
顶点
uv
…
31. InterLeaved模式
模型1
我是一棵白菜
顶点
uv
…
模型2
我也是一棵白菜
顶点
uv
…
模型3
我还是一棵白菜
顶点
uv
…
模型4
对不起，我是白菜
顶点
uv
…
32. 01 02
WebGL渲染性能优化 智能动效
33. 动效
34. 更好的视觉表现
动效
35. 有效的增加用户粘性
更好的视觉表现
动效
36. 有效的增加用户粘性
更好的视觉表现
更好的业务表现
动效
37. 有效的增加用户粘性
更好的视觉表现
更好的业务表现
动效
Ctr与⻚面停留时间都有增⻓
38. 有效的增加用户粘性
更好的视觉表现
更好的业务表现
动效
项目倒排
业务方提供静态图
设计软件有⻔槛
Ctr与⻚面停留时间都有增⻓
39. /02
智能动效
基于机器学习与图像算法的自动化动效生成
40. 基于机器学习与图像算法自动化生成动效
什么是智能动效？
41. 基于机器学习与图像算法自动化生成动效
42. 基于机器学习与图像算法自动化生成动效
43. 基于机器学习与图像算法自动化生成动效
让图片”活”过来
44. 基于机器学习与图像算法自动化生成动效
让图片”活”过来
45. 基于图像算法的动效配置生成
46. 基于图像算法的动效配置生成
47. 基于机器学习的一键式动效生成
48. 基于机器学习一键式动效生成
49. 基于机器学习一键式动效生成
50. 基于机器学习一键式动效生成
动效没有唯一解
51. 基于机器学习一键式动效生成
对抗生成网络
52. 基于机器学习一键式动效生成
对抗生成网络
生成不存在的“真实数据”
53. 基于机器学习一键式动效生成
生成器
对抗生成网络
生成不存在的“真实数据”
54. 基于机器学习一键式动效生成
生成器
对抗生成网络
生成不存在的“真实数据”
生成动效数据
55. 基于机器学习一键式动效生成
生成器
对抗生成网络
生成不存在的“真实数据”
判别器
生成动效数据
56. 基于机器学习一键式动效生成
生成器 生成动效数据
判别器 鉴别动效数据
对抗生成网络
生成不存在的“真实数据”
57. 基于机器学习一键式动效生成
生成器
g(x)
输入图片x
58. 基于机器学习一键式动效生成
生成器
g(x)
输入图片x
59. 基于机器学习一键式动效生成
生成器
g(x)
输入图片x
开始时生成器能力很差，
几乎是随机的
60. 基于机器学习一键式动效生成
生成器
g(x)
输入图片x
开始时生成器能力很差，
几乎是随机的
判别器
d(x, g(x))
61. 基于机器学习一键式动效生成
X X
X X
生成器
g(x)
输入图片x
开始时生成器能力很差，
几乎是随机的
判别器
d(x, g(x))
62. 基于机器学习一键式动效生成
X X
X X
生成器
g(x)
输入图片x
开始时生成器能力很差，
通过模型不断训练，
生成器和判别器都有加强
几乎是随机的
判别器
d(x, g(x))
63. 基于机器学习一键式动效生成
X X
X ✓
生成器
g(x)
输入图片x
开始时生成器能力很差，
通过模型不断训练，
生成器和判别器都有加强
几乎是随机的
判别器
d(x, g(x))
64. 基于机器学习一键式动效生成
X X
X ✓
生成器
g(x)
输入图片x
最后判别器已真假难分，
开始时生成器能力很差，
通过模型不断训练，
说明生成器可以具有很好能力
生成器和判别器都有加强
几乎是随机的
判别器
d(x, g(x))
65. 基于机器学习一键式动效生成
✓ ✓
✓ ✓
生成器
g(x)
输入图片x
最后判别器已真假难分，
开始时生成器能力很差，
通过模型不断训练，
说明生成器可以具有很好能力
生成器和判别器都有加强
几乎是随机的
判别器
d(x, g(x))
66. 基于图像算法的动效定位
67. 基于图像算法的动效定位
68. 基于图像算法的动效定位
图分割算法
69. 基于图像算法的动效定位
图分割算法
70. 基于图像算法的动效定位
图分割算法
71. 基于图像算法的动效定位
图分割算法
添加预设动效
72. 基于图像算法的动效定位
图分割算法
添加预设动效
73. 总结
打通前端与设计工作链路
74. 总结
渲染性能保证
打通前端与设计工作链路
75. 总结
设计同学发挥才华
渲染性能保证
前端同学减轻负担
打通前端与设计工作链路
76. 总结
设计同学发挥才华
渲染性能保证
前端同学减轻负担
打通前端与设计工作链路
智能动效
77. 总结
设计同学发挥才华
渲染性能保证
前端同学减轻负担
打通前端与设计工作链路
前端同学自制动效
智能动效
设计同学减轻负担
78. 谢谢观看