ReaderMX.
小红书技术REDtech

WebGPU 引领前端未来，互动渲染如何驱动小红书业务增长？

小等你加入的约 6 分钟

Image

在大前端时代，浏览器能力得到显著的增强，为前端开发带来了更多的可能性和挑战。作为一套全新的 Web API 标准，WebGPU 旨在提供高性能的 3D 图形和数据并行计算能力，其在游戏、虚拟现实、机器学习等多个行业和应用场景中展现出潜力。

5 月 24 日晚，以“ WebGPU 与互动渲染技术的前沿探索”为主题，【REDtech来了】第十期技术沙龙在上海圆满落幕。

本次沙龙由小红书前端架构负责人瑞金（王康）出品，携手W3C 万维网联盟成员、小红书前端团队专家，与现场百余位技术爱好者展开积极交流，并在多个平台同步直播。

Image
小红书前端架构负责人瑞金（王康）

W3C 标准带头人 François Daoust、小红书互动渲染技术负责人灵感（黄越甲）和社区互动游戏负责人雨柔（王宁），共同为大家带来《探索实时音视频处理的 WEB 技术前沿》和《互动渲染技术驱动业务增长》的主题分享，现场气氛热烈，互动不停。

Image

这场关于 Web 技术的演讲吸引了众多目光，François Daoust 深入探讨了 WebCodecs、Streams 和 WebGPU 三项关键技术，如何共同构成 Web 视频处理的新基础。

Image

W3C 标准带头人 François Daoust
分享开始，François 幽默风趣地尝试用中文和大家打招呼。他介绍了 W3C 的使命和工作重点，包括制定开放的网络技术标准，如 HTML、CSS 和 JavaScript API，以及非浏览器技术，并提到了 W3C 在 2023 年转型为公益非营利组织的重要里程碑。

François 指出，随着网络技术的飞速发展，现在我们不仅拥有新的媒体分发方式，还有实时处理媒体的新方法。WebGPU 不仅能提供必要的并行处理能力，还能够高效地处理像素格式转换，这对于在多种设备上实现实时视频帧处理至关重要。

Image

他通过介绍去年探索的实验项目，展示了如何利用 WebCodecs API 访问原始视频帧，并通过 Streams API 创建 Pipeline，进而使用 WebGPU 进行高效的并行处理。

这些技术的结合为视频媒体流分析和操作提供了强大的支持，包括面部识别、情感分析以及实时添加趣味效果等。François 丰富地展示它们的潜力，并直面了实时视频处理中的挑战，如处理大量数据帧、跨平台性能优化以及内存管理等。

他通过实际的 demo 演示了不同技术的性能，强调了 WebGPU 在大多数设备上作为实时视频帧处理的可行选项，并讨论了内存复制对性能的影响以及如何优化。
演讲以对未来 Web 视频处理技术的乐观展望结束，鼓励大家保持好奇心继续合作，共同推动 Web 标准的发展，以实现更加丰富和动态的网络媒体体验。

Image

小红书前端团队的灵感和雨柔通过多个实际案例，深入探讨了互动渲染技术如何成为推动业务增长的关键因素。他们展示了小红书如何利用这些技术手段创造出引人注目的视觉效果和简单直接的交互体验，有效吸引用户参与和促进业务转化。
灵感通过「透明视频渲染」项目，展示了如何结合 WebCode 和 WebGL 技术，实现高质量视频渲染，确保视频帧与帧之间的精确对齐和色彩空间的转换。

Image

小红书社区互动游戏负责人雨柔（王宁）
在「宠物小伙伴」案例中，雨柔分享了小红书采用的两种互动开发模式：一种是针对业务逻辑复杂、需要长线迭代的产品的传统游戏模式；另一种是适合业务逻辑简单、以营销投放活动为主的编排投放模式。
提及编排模式的王者，那非 Lottie 莫属。但灵感指出了其局限性，如缺乏上线管控、视觉表现有限以及性能问题，并提出了渐进式编辑器体系的必要性。这一体系允许设计师和开发人员更高效地协作，通过将动画资源导入编辑器、增加交互效果，并最终导出为 JSON 文件，简化了开发流程。

Image

小红书互动渲染技术负责人灵感（黄越甲）
灵感进一步讨论了将 2D 动画迁移到 WebGL 的过程，并指出 WebGL 在 FPS、CPU 和 Memory 方面相较于 LottieWeb 有显著优势，尽管代价是首帧渲染时间的增长。为此，他详细阐述了如何通过异步 Shader 编译和压缩纹理技术进行 WebGL 的性能优化，以平衡渲染效率和首帧渲染时间。
从 OpenGL 到 WebGL，再到 WebGPU，灵感阐述跨端渲染的几大变化：Shader 编译提升、更少的数据绑定和多线程支持。他预言未来是一个可能由 AR 技术引领的新时代，WebGPU 与 WebGL 相比更接近系统底层，将为前端开发带来更大的潜力，希望大家持续关注。
Image
分享结束后，四位嘉宾就 Web 技术的未来发展、AI 为前端带来什么、工程师职业路径、小红书业务实践场景等话题进行深入讨论，并与现场观众积极交流。
嘉宾们指出，前端与 AI 的结合正在打开新的视野，人际交互将变得更加自然流畅，提升用户体验；而 WebGPU 作为接触 GPU 底层能力的桥梁，其发展预示着在浏览器中将能够实现更加丰富和高效的图形渲染及计算任务。
瑞金分享了小红书前端架构在互动渲染和图形可视化领域的快速发展。他表示：在过去的一年里，团队已经验证在多个大型活动，互动渲染对业务增长的收益远超预期。
小红书始终以用户体验为核心，前端架构团队为公司提供大前端基础设施建设，主要包含开发框架、CI/CD、前端监控、组件搭建、跨端开发和互动渲染等六大方向。非常欢迎感兴趣的同学加入（邮件联系[email protected]、[email protected]），一起做前沿有趣的事！
本次沙龙中英文直播回看视频，已上传至「小红书技术REDtech」视频号、B 站账号，欢迎大家点击“阅读原文”直接观看。

Image

小红书前端架构师-业务架构

岗位职责：

1、参与前端架构的设计与实施，解决工程规范、研发提效、性能优化等问题；

2、跨部门的沟通协调能力，保证技术架构与各业务目标的高度一致；

3、参与技术规划和目标设定，适当地引进新技术，落地转换价值，为结果负责。

任职资格：

1、具备 JavaScript 专家技能，对前端生态有敏锐的洞见；

2、精通 Vue/React，对其实现有深入理解；

3、对前端研发流程有深入实践，熟悉 CI/CD、监控等；

4、对跨端开发有一定涉猎，了解 Hybrid H5，React Native 等；

5、怀有同理心，能够站在开发者、用户角度独立思考，跨越技术界限，主动挖掘技术和业务痛点并寻求解决问题的方法。

小红书前端架构师-APM 监控平台

岗位职责：

1、负责前端监控平台架构设计优化，确保系统稳定、高效运行；

2、负责前端监控 SDK 架构设计和开发，确保 SDK 可扩展性和数据采集准确性；

3、负责前端监控应用层建设，打造业界一流的前端可观测性平台，赋能业务；

4、参与小红书性能和稳定性标准规范制定，与业务协作达成体验优化目标。

任职资格：

1、本科及以上学历（优先），至少 3 年前端开发经验，计算机基础扎实；

2、精通 Vue/React，对其实现有深入理解；

3、对前端监控有深入的研究和业务实践，熟悉监控平台相关技术，如数据采集、数据分析、可视化等；

4、具有良好的沟通能力和团队合作精神，能够有效地与团队成员协作；

5、具有较强的问题分析和解决能力，能够独立完成工作任务；

6、怀有同理心，能够站在开发者、用户角度独立思考，主动挖掘技术和业务痛点并寻求解决问题的方法。

欢迎感兴趣的同学发送简历至 [email protected]，并抄送至 [email protected]

Image

Image

往期精彩内容指路 

W3C 标准带头人开讲 WebGPU 前沿趋势，小红书线下沙龙开放报名！

CVPR 2024｜多模态场景感知，小红书高保真人体运动预测方法来了！
释放数据湖潜力：小红书如何实现数仓效率与成本的双重优化

添加小助手，了解更多内容

微信号 / REDtech01

Image

KEEP THE THREAD GOING

更多来源文章