营销场景下互动技术的应用与探索

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. 谢谢观看