srt for https://www.youtube.com/watch?v=t9t-VXwIc4I&t=3s

Game on Chinese.srt

1
00:00:00,833 --> 00:00:05,433
[音乐]

2
00:00:07,733 --> 00:00:12,100
[音乐]

3
00:00:12,733 --> 00:00:18,166
我只是想

4
00:00:30,166 --> 00:00:35,366
[音乐]

5
00:00:38,300 --> 00:00:41,400
[音乐]

6
00:00:42,133 --> 00:00:46,000
你好，React Native 开发人员。

7
00:00:46,033 --> 00:00:51,700
[音乐]

8
00:00:52,133 --> 00:00:54,600
希望你一切都好。 威廉在这里

9
00:00:54,633 --> 00:00:56,300
录制了来自美丽的瑞士 Z 的节目。

10
00:00:56,300 --> 00:00:58,666
我想向你们展示两件事情，让这个

11
00:01:00,366 --> 00:01:02,366
早晨变得非常有趣。 首先，我们对

12
00:01:02,366 --> 00:01:04,666
React Native WebGPU 进行了更新。 我们将

13
00:01:04,700 --> 00:01:07,166
深受喜爱的 Web 标准引入 React Native，

14
00:01:07,200 --> 00:01:09,266
并希望向您展示

15
00:01:09,266 --> 00:01:11,000
我们将其集成到 React

16
00:01:11,033 --> 00:01:13,033
Native 平台的引人注目的方式。 我们想向您展示

17
00:01:13,400 --> 00:01:18,366
可以在其基础上构建的一系列新的用户体验。 我们想向

18
00:01:18,400 --> 00:01:21,033
您展示业界朋友如何使用

19
00:01:21,033 --> 00:01:23,566
它将 Web 生态系统的巨头（

20
00:01:23,600 --> 00:01:26,533
例如 three.js）引入 React Native。

21
00:01:26,533 --> 00:01:28,933
最后，除了图形之外，我们还想向

22
00:01:28,933 --> 00:01:31,166
您展示如何使用 WebGPU 为

23
00:01:33,433 --> 00:01:36,866
React Native 解锁通用 GPU 计算。 但是对于 React

24
00:01:36,866 --> 00:01:38,766
Native 开发人员来说，

25
00:01:38,766 --> 00:01:41,166
我们涉足 WebGPU 只有一个原因，

26
00:01:41,200 --> 00:01:43,200
那就是 React Native Skia。

27
00:01:43,200 --> 00:01:44,400
这是我们

28
00:01:44,400 --> 00:01:46,533
今天上午想要向你们展示的第二件事。 我们想向

29
00:01:46,533 --> 00:01:49,966
您展示 WebGPU 如何激发

30
00:01:50,000 --> 00:01:51,733
React Native Skia 的一系列改进，

31
00:01:51,733 --> 00:01:54,766
使用户能够在新的规模

32
00:01:54,766 --> 00:01:57,166
和新的平台上运行 Skia，其中一些

33
00:01:57,200 --> 00:01:59,600
甚至没有屏幕。 我们想向

34
00:01:59,600 --> 00:02:01,733
您展示这些改进如何

35
00:02:01,733 --> 00:02:03,866
滚雪球般地迁移到 Skia

36
00:02:03,900 --> 00:02:06,133
Graphite，Skia Graphite 是 Skia 的一个新的后端，用于在

37
00:02:06,533 --> 00:02:11,266
WebGPU 上运行的现代 GPU API，我们想向您展示

38
00:02:11,666 --> 00:02:15,466
随之而来的一些范式转变思想。

39
00:02:15,500 --> 00:02:17,500
最终，我们的目标是为

40
00:02:17,500 --> 00:02:19,900
您提供一个

41
00:02:19,900 --> 00:02:22,766
与 Google Chrome 对称的图形堆栈，其上运行着 Web GPU 和 Skia

42
00:02:22,800 --> 00:02:25,200
Graphite，并且

43
00:02:25,200 --> 00:02:27,100
这两个原语可以很好地

44
00:02:27,100 --> 00:02:29,733
相互组合。  Shopify

45
00:02:29,733 --> 00:02:32,000
正是倡导这一目标

46
00:02:32,033 --> 00:02:34,633
。 你好，React Native 开发人员。

47
00:02:34,633 --> 00:02:36,533
我是科林·格雷，来自

48
00:02:36,533 --> 00:02:38,600
安大略省美丽的斯特拉特福德的家中。 感谢您的

49
00:02:38,633 --> 00:02:41,166
收看。当我们第一次开始使用

50
00:02:41,200 --> 00:02:43,433
React Native Skia 时，我们的目标是

51
00:02:43,433 --> 00:02:45,500
弥合 React Native 中图形 API 的一个重要差距

52
00:02:45,500 --> 00:02:47,566
。 我们取得了令人难以置信的

53
00:02:47,566 --> 00:02:49,866
进步，并将重点转移到

54
00:02:49,900 --> 00:02:52,533
性能和稳定性上。 这促使

55
00:02:52,533 --> 00:02:55,000
我们开发了 WebGPU，这是一个令人兴奋的

56
00:02:55,033 --> 00:02:57,500
2D 和 3D 图形新 Web 标准，

57
00:02:57,500 --> 00:02:59,833
已经被核心 Skia 库所采用

58
00:02:59,866 --> 00:03:02,300
。 我们对持续改进的追求为

59
00:03:02,466 --> 00:03:06,700
React Native 中的一流 3D 图形打开了大门

60
00:03:06,700 --> 00:03:09,233
。 我们已经释放了

61
00:03:09,266 --> 00:03:11,733
令人惊叹的 3D 体验的潜力，其中一些

62
00:03:11,733 --> 00:03:13,233
已由 Shopify 团队完美地实现

63
00:03:13,266 --> 00:03:16,133
。 我们的愿景是让

64
00:03:16,133 --> 00:03:18,266
这些 2D 和 3D 功能能够

65
00:03:18,300 --> 00:03:21,033
以零成本进行组合，就像在网络上一样

66
00:03:21,066 --> 00:03:23,400
。 这些公告始终是

67
00:03:23,433 --> 00:03:25,100
我

68
00:03:25,100 --> 00:03:26,933
向 React Native 社区表达衷心感谢的重要机会

69
00:03:26,933 --> 00:03:29,000
。 如果没有你们的大力支持，我们的进步就不可能

70
00:03:29,033 --> 00:03:31,033
实现

71
00:03:31,033 --> 00:03:34,633
。 您在代码贡献

72
00:03:34,633 --> 00:03:36,933
请求、深刻的讨论和

73
00:03:36,933 --> 00:03:38,600
勤奋的错误报告中所做的贡献非常

74
00:03:38,633 --> 00:03:41,433
宝贵。 因此，Shopify 的全体员工向

75
00:03:41,433 --> 00:03:42,933
你们表示感谢。 感谢那些

76
00:03:42,933 --> 00:03:45,566
让 React Native Skia 成为今天的样子的人。

77
00:03:45,566 --> 00:03:47,633
现在，事不宜迟，让我们看看

78
00:03:47,666 --> 00:03:49,733
使用 WebGPU 和 React Native Skia 可以创造什么新的体验

79
00:03:49,733 --> 00:03:52,433
。 回到

80
00:03:52,466 --> 00:03:55,500
你身边，威廉。 因此，WebGPU，我们将

81
00:03:55,500 --> 00:03:57,900
全新的、但已经深受喜爱的

82
00:03:57,900 --> 00:04:00,533
Web 标准引入 React Native。 从

83
00:04:00,533 --> 00:04:02,366
本质上讲，此 API 允许您执行两

84
00:04:02,400 --> 00:04:05,100
件事。 绘制和着色三角形

85
00:04:05,100 --> 00:04:07,366
以及运行通用 GPU

86
00:04:07,400 --> 00:04:09,833
计算。 当我们研究该

87
00:04:09,833 --> 00:04:12,466
模块时，我们考虑了两个设计目标。

88
00:04:12,466 --> 00:04:14,466
首先，我们希望确保

89
00:04:14,466 --> 00:04:16,200
API 完全相同，您

90
00:04:16,233 --> 00:04:19,033
可以简单地将示例从网络复制粘贴

91
00:04:19,033 --> 00:04:21,100
到 React Native 上。 这意味着

92
00:04:21,100 --> 00:04:23,000
拥有一个

93
00:04:23,033 --> 00:04:25,966
与 Web Canva API 完全对称的 Canva API。 我们

94
00:04:26,000 --> 00:04:27,666
希望与

95
00:04:27,666 --> 00:04:30,266
React Native 平台紧密集成，特别是与

96
00:04:30,266 --> 00:04:32,533
reanimated 紧密集成。 例如，我

97
00:04:32,533 --> 00:04:34,266
可以方便地在这里做的一件事是

98
00:04:34,300 --> 00:04:36,933
在 UI 线程上运行一个重新动画的示例，

99
00:04:36,933 --> 00:04:38,666
并且我可以使用手势处理程序

100
00:04:38,700 --> 00:04:41,866
用手指操纵立方体。 我

101
00:04:41,900 --> 00:04:44,200
可以完全阻止 UI 线程，但

102
00:04:44,233 --> 00:04:46,066
仍然以全帧速率与立方体交互

103
00:04:47,700 --> 00:04:50,433
。 并且 React Native WebGPU 还

104
00:04:50,466 --> 00:04:54,066
支持 Mac OS 和 Vision Pro OS。

105
00:04:54,066 --> 00:04:57,400
WebGPU 是一个非常令人愉快的 API。

106
00:04:57,433 --> 00:04:59,333
开发人员的体验与 WebGL 有很大不同

107
00:04:59,333 --> 00:05:02,433
。  WebGL 是一对一移植到 JavaScript 的 C API

108
00:05:02,466 --> 00:05:04,933
。 但是 WebGPU 是

109
00:05:04,933 --> 00:05:07,000
完全

110
00:05:07,033 --> 00:05:09,566
围绕现代 JavaScript 功能从头开始设计的。

111
00:05:09,600 --> 00:05:11,600
我们希望开发者社区能够以

112
00:05:11,866 --> 00:05:16,133
与 WebGL 完全不同的方式与这一新标准进行互动

113
00:05:16,133 --> 00:05:17,633
。

114
00:05:17,666 --> 00:05:20,933
现在，提到的软件工程师团队

115
00:05:20,933 --> 00:05:23,466
提出了一个问题，

116
00:05:23,500 --> 00:05:26,366
如果从头开始输入 API，它会是什么样子

117
00:05:26,400 --> 00:05:28,866
？

118
00:05:28,866 --> 00:05:32,466
软件公司的 Evo Plaza 将为我们解答这个问题。

119
00:05:32,466 --> 00:05:40,366
[音乐]

120
00:05:41,100 --> 00:05:43,400
介绍 typeGPU，一组类型安全的

121
00:05:43,433 --> 00:05:45,000
原语，用于弥合

122
00:05:45,033 --> 00:05:47,900
TypeScript 和 WebGPU 之间的差距。 我们的数据模式

123
00:05:47,900 --> 00:05:49,566
反映了 WGSL 语法，您可以使用

124
00:05:49,600 --> 00:05:51,733
它们在 JS 端创建类型缓冲区

125
00:05:51,733 --> 00:05:54,666
并生成匹配的着色器代码。

126
00:05:54,700 --> 00:05:57,166
您只需将 JS 对象和数组传递

127
00:05:57,166 --> 00:05:59,300
给 GPU，而不必担心

128
00:05:59,333 --> 00:06:01,633
它们如何以二进制表示。 并且

129
00:06:01,666 --> 00:06:03,100
不必担心必须重写

130
00:06:03,100 --> 00:06:05,166
整个应用程序。 我们在设计 API 时考虑到了

131
00:06:05,166 --> 00:06:06,666
渐进式采用，这意味着

132
00:06:06,700 --> 00:06:08,133
您可以选择要

133
00:06:08,133 --> 00:06:09,700
键入

134
00:06:09,733 --> 00:06:12,133
GPUi 的代码库部分。 为了测试这一点，我们挑选了

135
00:06:12,133 --> 00:06:14,533
一些开源项目并将

136
00:06:14,533 --> 00:06:17,000
GPU 类型集成到其中，而无需改变

137
00:06:17,033 --> 00:06:19,033
整体代码结构。 我们还从头开始了

138
00:06:19,033 --> 00:06:20,866
一些项目，例如

139
00:06:20,866 --> 00:06:23,400
wayfare 游戏引擎。 请查看

140
00:06:23,433 --> 00:06:26,466
typgu.com 上的 WebGPU 互操作性指南以了解

141
00:06:26,466 --> 00:06:29,166
更多详细信息。 哦，那些 JS 函数

142
00:06:29,166 --> 00:06:30,900
实际上是在 GPU 上运行的

143
00:06:30,933 --> 00:06:32,933
。 我们在 typeGPU.com 上已经有一些正在运行的演示，

144
00:06:32,933 --> 00:06:35,400
隐藏在

145
00:06:35,433 --> 00:06:37,566
实验性的开关下。 检查一下。   向

146
00:06:37,600 --> 00:06:39,666
我们提供反馈并帮助我们阅读

147
00:06:39,666 --> 00:06:42,666
稳定性。

148
00:06:46,000 --> 00:06:48,700
今天就尝试一下。

149
00:06:48,700 --> 00:06:51,233
谢谢。  Evo Evo 提到了一些

150
00:06:51,266 --> 00:06:53,900
有趣的事情。 首先，虽然 WebGPU

151
00:06:53,900 --> 00:06:56,433
是一个很棒的 AP​​I，但有些方面还是

152
00:06:56,466 --> 00:06:58,933
很底层的，比如统一咬合

153
00:06:58,933 --> 00:07:01,800
对齐和填充，而 GPU 类型

154
00:07:01,833 --> 00:07:03,666
确实可以帮到你。 与

155
00:07:03,666 --> 00:07:05,500
TypeScript 一样，您只能从

156
00:07:05,500 --> 00:07:07,866
几种类型开始，然后逐步将类型添加到

157
00:07:07,900 --> 00:07:09,233
您的系统中。 您不需要

158
00:07:09,266 --> 00:07:11,900
从头开始输入所有内容。 现在，我

159
00:07:11,900 --> 00:07:14,133
想向您介绍一个令

160
00:07:14,133 --> 00:07:16,033
我非常兴奋的 WebGPU 功能，因为它将

161
00:07:16,066 --> 00:07:18,366
成为今天上午的一个常见主题。

162
00:07:18,400 --> 00:07:20,300
这个主题就是运行

163
00:07:20,300 --> 00:07:23,500
函数接口的成本。 借助 WebGPU，我们可以运行速度

164
00:07:23,500 --> 00:07:26,200
极快的 GPU 计算。

165
00:07:26,233 --> 00:07:29,000
虽然 JavaScript 也非常快，但

166
00:07:29,033 --> 00:07:31,333
相对而言它实际上可能相当

167
00:07:31,333 --> 00:07:33,333
慢。 这里我们有我们的小立方体。

168
00:07:33,333 --> 00:07:34,766
我想要做的就是画出

169
00:07:34,800 --> 00:07:36,933
成千上万幅这样的画。 在这种情况下，

170
00:07:36,933 --> 00:07:38,533
在每个帧上运行 JavaScript 的成本

171
00:07:38,533 --> 00:07:40,200
以及

172
00:07:40,233 --> 00:07:43,433
在 C++ 中与 JavaScript 交互的成本变得太高。

173
00:07:43,433 --> 00:07:44,866
我们可以做的第一件事就是使用

174
00:07:44,866 --> 00:07:47,000
实例。 现在，我们不再需要进行数千次

175
00:07:47,033 --> 00:07:49,100
绘制调用，而是对所有这些实例进行一次调用，

176
00:07:49,100 --> 00:07:51,966
从而

177
00:07:52,000 --> 00:07:54,633
降低外部函数接口的成本。 但是

178
00:07:54,633 --> 00:07:57,166
对于像

179
00:07:57,166 --> 00:07:59,233
这样有大量不同

180
00:07:59,266 --> 00:08:02,066
物体的异质场景，该怎么办呢？ 这就是渲染包的

181
00:08:02,066 --> 00:08:04,300
用武之地。WebGPU 允许您创建

182
00:08:04,300 --> 00:08:06,300
场景的记录。 该记录

183
00:08:06,300 --> 00:08:08,433
可能像您想要的那样复杂。 在

184
00:08:08,466 --> 00:08:10,866
动画时，您可以简单地设置

185
00:08:10,866 --> 00:08:13,266
统一缓冲区并使用单个绘制

186
00:08:13,266 --> 00:08:15,500
调用渲染场景，同时保持

187
00:08:15,500 --> 00:08:17,866
外部函数接口的成本非常低

188
00:08:17,900 --> 00:08:20,300
。 渲染包是一个非常

189
00:08:20,300 --> 00:08:22,133
优雅的概念，可以

190
00:08:22,133 --> 00:08:25,066
降低函数接口的成本，我们

191
00:08:25,100 --> 00:08:27,700
可能会在稍后的演示中再次提到它

192
00:08:27,700 --> 00:08:30,133
。 所以 JavaScript API

193
00:08:30,133 --> 00:08:32,366
非常优雅。  GPU API 怎么样？

194
00:08:32,366 --> 00:08:34,600
WebGPU 有一种新型着色器，即

195
00:08:34,633 --> 00:08:36,766
计算着色器，它允许您

196
00:08:36,800 --> 00:08:39,900
在设备上运行通用 GPU 计算，

197
00:08:39,900 --> 00:08:42,600
并且其中的几个示例

198
00:08:42,633 --> 00:08:44,700
确实引起了我们的注意。 你们中的一些人

199
00:08:44,700 --> 00:08:46,600
非常熟悉 Sheder Toy，

200
00:08:46,633 --> 00:08:48,866
数字艺术家基于 WebGL 片段渲染器构建了令人难以置信的

201
00:08:48,866 --> 00:08:51,166
演示场景，

202
00:08:51,200 --> 00:08:53,666
并且大多数渲染器当然可以

203
00:08:53,666 --> 00:08:55,800
在 React Native Skia 上运行，

204
00:08:55,833 --> 00:08:58,300
只需进行最少的更改。  Compute Toys 是一个

205
00:08:58,300 --> 00:08:59,966
类似的项目，但它属于 WebGPU

206
00:09:00,000 --> 00:09:01,733
社区，并且使用计算

207
00:09:01,733 --> 00:09:03,566
着色器而不是片段着色器。

208
00:09:03,600 --> 00:09:05,433
计算着色器允许艺术家

209
00:09:05,433 --> 00:09:07,933
将像素值写入不同的

210
00:09:07,933 --> 00:09:10,366
缓冲区。 这意味着每个

211
00:09:10,366 --> 00:09:12,600
线程不仅可以影响

212
00:09:12,633 --> 00:09:14,933
其指定像素的颜色，还可以将

213
00:09:14,933 --> 00:09:17,000
值写入影响整个帧中

214
00:09:17,033 --> 00:09:19,266
许多像素颜色的数组

215
00:09:19,266 --> 00:09:21,733
。 为

216
00:09:21,733 --> 00:09:23,866
计算玩具提供支持的开源 JavaScript 引擎

217
00:09:23,900 --> 00:09:25,566
在 React Native 上完全开箱即用

218
00:09:25,600 --> 00:09:28,233
。 我们将

219
00:09:28,233 --> 00:09:30,933
时间和手势的动画值重新集成

220
00:09:30,933 --> 00:09:33,966
到计算引擎中。 我们还构建了

221
00:09:34,000 --> 00:09:36,066
一个小型实用程序来直接查看

222
00:09:36,066 --> 00:09:38,600
React Native 中现有的计算玩具。

223
00:09:38,633 --> 00:09:41,266
计算着色器的另一个引人注目的例子

224
00:09:41,266 --> 00:09:44,300
是 tensorflow.js，它

225
00:09:44,533 --> 00:09:49,266
使用 react native webpu 后端在 react native 中完全开箱即用

226
00:09:49,266 --> 00:09:51,266
。 例如，在这个演示中，我们

227
00:09:51,266 --> 00:09:54,533
甚至没有使用 canva，我们只是使用了

228
00:09:54,533 --> 00:09:57,566
计算着色器。 现在向我们展示

229
00:09:57,766 --> 00:10:02,833
来自 typeGPU 团队 Marin Horac 和

230
00:10:02,866 --> 00:10:05,666
软件 manion 的 Conrad Resko 的更引人注目的计算着色器示例。

231
00:10:05,666 --> 00:10:07,400
计算着色器

232
00:10:07,433 --> 00:10:09,566
在各种项目中非常强大且有用。 现在，

233
00:10:09,600 --> 00:10:11,733
借助基于

234
00:10:11,733 --> 00:10:14,200
WebGPU 构建的库，我们希望能够比以往更轻松地定义和

235
00:10:14,233 --> 00:10:15,966
执行您自己的计算管道

236
00:10:16,000 --> 00:10:17,600
。 在

237
00:10:17,600 --> 00:10:19,833
开发我们的库时，我们很高兴地

238
00:10:19,833 --> 00:10:21,700
创建了一些

239
00:10:21,700 --> 00:10:24,200
可视化示例，这些示例使用计算

240
00:10:24,233 --> 00:10:26,866
着色器的功能来计算一些数据，

241
00:10:26,866 --> 00:10:29,233
然后这些数据也

242
00:10:29,266 --> 00:10:31,900
通过 React Native WebGPU 和 typeGPU 用于渲染，

243
00:10:31,900 --> 00:10:34,600
如下所示。 这些

244
00:10:34,633 --> 00:10:37,033
最初为 Web 创建的示例现在可以

245
00:10:37,266 --> 00:10:41,966
通过 React Native WebGPU 轻松在 React Native 应用程序上运行，

246
00:10:42,000 --> 00:10:44,066
几乎不需要修改。 您可以

247
00:10:44,133 --> 00:10:48,133
在我们的网站 typgpu.com 上找到我们所有的示例及其代码实现

248
00:10:48,133 --> 00:10:49,866
。

249
00:10:49,900 --> 00:10:52,366
机器学习工作负载是

250
00:10:52,366 --> 00:10:55,066
GPU 加速的完美选择，而 typeGPU

251
00:10:55,100 --> 00:10:56,966
使得实现这些工作负载变得更加

252
00:10:57,000 --> 00:10:59,433
容易。 我们设计 TypeGPU 作为

253
00:10:59,433 --> 00:11:01,500
基础。 我们自己并不提供

254
00:11:01,500 --> 00:11:03,333
特定于人工智能的抽象，而是

255
00:11:03,333 --> 00:11:05,233
为

256
00:11:05,266 --> 00:11:07,266
模块化推理库生态系统的

257
00:11:07,266 --> 00:11:10,300
出现创造条件。  TypeGPU 通过

258
00:11:10,300 --> 00:11:11,800
提供构建块来实现这一点，这些构建块让

259
00:11:11,833 --> 00:11:13,433
开发人员能够精确地制作他们

260
00:11:13,433 --> 00:11:15,166
需要的东西，并且类型安全可以弥合

261
00:11:15,200 --> 00:11:17,266
Typ GPU 和 WGSL 世界之间的差距。 我们

262
00:11:17,266 --> 00:11:18,766
通过

263
00:11:18,800 --> 00:11:20,800
在 GPU 上实现 MINIST 数字识别证明了这种潜力

264
00:11:20,800 --> 00:11:23,500
。 突出的是数据结构如何

265
00:11:23,666 --> 00:11:27,733
在整个管道中保持人类可读性。 即使以 GPU 速度执行，神经网络

266
00:11:27,733 --> 00:11:29,466
操作仍然清晰且

267
00:11:29,500 --> 00:11:31,966
可维护

268
00:11:32,000 --> 00:11:33,833
。 我们还在开发一种新的

269
00:11:33,833 --> 00:11:35,733
React Native 包，用于

270
00:11:35,733 --> 00:11:38,900
专门在 GPU 上运行五彩纸屑动画。

271
00:11:38,933 --> 00:11:41,033
计算着色器是实现的核心部分，

272
00:11:41,066 --> 00:11:43,333
因为每个粒子的位置都是

273
00:11:43,433 --> 00:11:48,300
在计算管道内并行计算的。 我们

274
00:11:48,300 --> 00:11:50,300
设法让用户能够

275
00:11:50,300 --> 00:11:52,533
深度定制模拟。

276
00:11:52,533 --> 00:11:53,966
配置不仅仅是

277
00:11:54,000 --> 00:11:56,000
数字参数。 这是一种行为上的改变

278
00:11:56,000 --> 00:11:58,366
。 例如，重力

279
00:11:58,366 --> 00:12:00,433
不仅仅是一个静态矢量。 它可以

280
00:12:00,466 --> 00:12:02,133
取决于每个粒子的当前位置

281
00:12:02,133 --> 00:12:04,200
。 与仅使用常规的 WebGPU API 相比，TypeGPU 使我们更容易

282
00:12:04,233 --> 00:12:05,900
创建和扩展

283
00:12:05,900 --> 00:12:07,900
模拟

284
00:12:07,900 --> 00:12:10,366
。 用户也可以更

285
00:12:10,366 --> 00:12:12,033
轻松地贡献自己的

286
00:12:12,066 --> 00:12:14,533
逻辑。 用户传递给 comparing

287
00:12:14,533 --> 00:12:16,666
组件的本质上只是一个标记的

288
00:12:16,700 --> 00:12:18,933
TypeScript 函数，可以无缝

289
00:12:18,933 --> 00:12:20,933
集成到 GPU 上的并行计算中

290
00:12:20,933 --> 00:12:24,033
。 这有点像

291
00:12:24,066 --> 00:12:26,300
提到的软件在重新动画中所做的事情，其

292
00:12:26,300 --> 00:12:28,833
功能可以在 UI 线程上运行。

293
00:12:28,866 --> 00:12:31,000
我们使 TypeScript 函数能够

294
00:12:31,033 --> 00:12:33,266
在 GPU 上运行。 如果您想关注我们的

295
00:12:33,266 --> 00:12:35,400
进展，您可以查看我们的 Discord

296
00:12:35,433 --> 00:12:37,900
服务器、GitHub 存储库和我们的

297
00:12:37,900 --> 00:12:40,033
网站 typgpu.com。

298
00:12:40,066 --> 00:12:43,366
到时候见。

299
00:12:43,866 --> 00:12:47,900
与 typeGPU 团队一样，我

300
00:12:47,900 --> 00:12:51,100
对 Web GPU API 感到非常兴奋，但我们

301
00:12:51,100 --> 00:12:53,166
预计很多 React Native

302
00:12:53,200 --> 00:12:55,300
开发人员将使用 React Native

303
00:12:55,300 --> 00:12:57,800
WebGPU 而不直接与其交互

304
00:12:57,833 --> 00:13:00,466
。 相反，我们认为您

305
00:13:00,466 --> 00:13:02,200
将利用

306
00:13:02,233 --> 00:13:06,066
three.js 等网络生态系统巨头。  three.js 彻底

307
00:13:06,066 --> 00:13:08,700
改变了网络的 3D 图形，

308
00:13:08,700 --> 00:13:10,833
并使数百万开发人员

309
00:13:10,866 --> 00:13:13,900
能够构建令人惊叹的 3D 体验。

310
00:13:13,900 --> 00:13:15,566
当我们开始使用 React Native

311
00:13:15,600 --> 00:13:18,133
WebGPU 时，我们想了解

312
00:13:18,133 --> 00:13:21,333
three.js 社区对 WebGPU

313
00:13:21,333 --> 00:13:24,033
支持的兴奋程度。 我们看到了一些非常

314
00:13:24,066 --> 00:13:26,533
积极的信号，令人惊叹的社区

315
00:13:26,533 --> 00:13:29,200
成员正在推动 three.js 中的 Web GPU 支持

316
00:13:29,233 --> 00:13:32,933
。  three.js 中的 WebGPU 支持是一个双重

317
00:13:32,933 --> 00:13:35,800
问题。 首先，three.js 的 WebGPU 后端

318
00:13:35,833 --> 00:13:38,866
和 TSL 的引入，TSL 是一种

319
00:13:38,866 --> 00:13:40,300
TypeScript 着色语言，可以

320
00:13:40,300 --> 00:13:43,233
从 GLSL（

321
00:13:43,266 --> 00:13:47,666
WebGPU 的着色语言）和 WGSL（WebGPU

322
00:13:47,666 --> 00:13:49,966
着色语言）中抽象出来。 如果我们做得好，

323
00:13:50,000 --> 00:13:52,066
这些 three.js 示例应该可以

324
00:13:52,066 --> 00:13:55,266
在 React Native WebGPU 上完全开箱即用。

325
00:13:55,266 --> 00:13:57,800
他们确实这么做了。 一些示例

326
00:13:57,833 --> 00:14:00,066
与网络上的示例完全相同。

327
00:14:00,066 --> 00:14:02,133
有些示例依赖外部 Web

328
00:14:02,133 --> 00:14:04,666
API 来加载模型。 这里我们

329
00:14:04,700 --> 00:14:06,700
提供了与这些示例类似的 React Native 等效版本

330
00:14:06,700 --> 00:14:09,000
。 在最新的

331
00:14:09,033 --> 00:14:10,600
贡献者提交中，React Native

332
00:14:10,633 --> 00:14:12,366
贡献者提出了将

333
00:14:12,366 --> 00:14:14,600
一部分 Web API 引入 React

334
00:14:14,633 --> 00:14:16,933
Native 的想法。 我们认为这些例子

335
00:14:16,933 --> 00:14:19,066
很好地展示了

336
00:14:19,100 --> 00:14:21,100
遵循 Web 一致性有多么有益

337
00:14:21,100 --> 00:14:23,900
。 这些在

338
00:14:23,900 --> 00:14:25,633
React Native WebGPU 上运行的 three.js 示例

339
00:14:25,666 --> 00:14:27,966
与 WebGL 示例有很大不同

340
00:14:28,000 --> 00:14:30,000
。 首先，他们在 Android 上使用 Vulkan

341
00:14:30,000 --> 00:14:32,800
，在 iOS 上使用 Metal。  OpenGL

342
00:14:32,800 --> 00:14:35,866
在 iOS 上已被弃用，并且它们支持

343
00:14:35,866 --> 00:14:38,033
重新动画。 我们想进行一个小

344
00:14:38,066 --> 00:14:40,300
实验，看看是否能够

345
00:14:40,300 --> 00:14:42,833
在工作线程上完全运行 three.js 因此，

346
00:14:42,866 --> 00:14:44,700
我们构建了一个小型实用程序，要求

347
00:14:44,700 --> 00:14:46,933
Metro Bundler 为我们制作一个特殊的 3GS

348
00:14:46,933 --> 00:14:49,233
捆绑包，以便我们可以在 UI 线程上使用

349
00:14:49,266 --> 00:14:51,333
。 我们可以用它来运行我们的 three.js

350
00:14:51,333 --> 00:14:53,966
场景。 看起来不错。 我甚至可以使用

351
00:14:54,000 --> 00:14:56,466
手势处理程序。 如果我们

352
00:14:56,466 --> 00:14:58,600
像这样完全阻止 JavaScript 线程，

353
00:14:58,633 --> 00:15:02,566
场景仍然会完全

354
00:15:02,600 --> 00:15:05,500
流畅地运行。 这个 three.js 场景在

355
00:15:05,500 --> 00:15:08,766
Vulkan 和 Metal 等现代 GPU API 上运行，

356
00:15:08,800 --> 00:15:10,300
并且

357
00:15:10,300 --> 00:15:13,233
与 Reanimated 完全集成，这

358
00:15:13,266 --> 00:15:16,066
对于 React Native 来说确实是首创。 那么

359
00:15:16,066 --> 00:15:19,666
Skia 的故事是怎样的呢？例如，它为

360
00:15:20,033 --> 00:15:23,733
路径几何、布尔路径运算符、

361
00:15:23,733 --> 00:15:25,900
文本布局、磁吸技巧

362
00:15:25,933 --> 00:15:29,166
计算等提供了大量的实用工具，我们不需要

363
00:15:29,166 --> 00:15:32,100
在工作线程上运行那么多复杂的 npm 包

364
00:15:32,133 --> 00:15:34,533
。 但是对于 WebGPU（

365
00:15:34,533 --> 00:15:37,066
一种更低级别的 API），

366
00:15:37,066 --> 00:15:41,966
在工作台上运行 three.js 等成熟的 npm 包的需求

367
00:15:42,000 --> 00:15:45,833
变得更大。 您刚才

368
00:15:45,833 --> 00:15:48,700
看到的只是概念证明，但我们预计

369
00:15:48,700 --> 00:15:50,933
这种做法将在

370
00:15:50,933 --> 00:15:54,533
不久的将来成为主流。 说到 three.js

371
00:15:54,533 --> 00:15:57,866
和 React，生态系统的另一个重要部分

372
00:15:57,900 --> 00:16:00,533
是 React three fiber

373
00:16:00,533 --> 00:16:03,333
three fiber 是 three.js 的 react reconciliate

374
00:16:03,333 --> 00:16:05,166
与 skia 一样，

375
00:16:05,166 --> 00:16:08,033
在 React 编程模型中使用时，其图形 API 的功能会被放大

376
00:16:08,066 --> 00:16:10,300
。

377
00:16:10,300 --> 00:16:12,033
能够

378
00:16:12,066 --> 00:16:14,066
轻松地组成强大的图形

379
00:16:14,066 --> 00:16:17,000
基元真是令人高兴的事。 因此，我们想知道谁能

380
00:16:17,033 --> 00:16:19,100
利用 three fiber 做出真正酷的东西

381
00:16:19,100 --> 00:16:21,966
？ 首先，是

382
00:16:22,000 --> 00:16:24,533
来自 Shopify 的 Daniel Bosch。 大家好，

383
00:16:24,533 --> 00:16:26,600
我是 Daniel Bosch，Shopify 的软件工程师

384
00:16:26,633 --> 00:16:28,633
，我很乐意向你们展示

385
00:16:28,633 --> 00:16:30,333
我们在 3D 领域的创新成果

386
00:16:30,333 --> 00:16:33,233
。 欢迎来到 Shopify Live Globe

387
00:16:33,266 --> 00:16:35,000
Mothership。 现在，您首先会

388
00:16:35,033 --> 00:16:36,600
注意到这不是一段录制的

389
00:16:36,633 --> 00:16:38,933
视频。 这是一个完全交互式的 3D

390
00:16:38,933 --> 00:16:41,166
场景。 它是

391
00:16:41,166 --> 00:16:43,700
使用 React three fiber（

392
00:16:43,733 --> 00:16:46,533
React 的流行 three.js 包装器）从头开始构建的。 一切都是

393
00:16:46,533 --> 00:16:49,000
互动的。 我可以放大这里来查看

394
00:16:49,033 --> 00:16:51,500
这些订单的发生情况。 这是 2024 年

395
00:16:51,500 --> 00:16:53,500
黑色星期五高峰期订单的重演。

396
00:16:53,500 --> 00:16:55,900
每一个弧线都是真实的

397
00:16:55,900 --> 00:16:58,133
订单。 我可以尝试

398
00:16:58,133 --> 00:17:01,233
改变艺术颜色或粒子颜色。 我

399
00:17:01,266 --> 00:17:03,100
可以玩摇头娃娃，

400
00:17:03,100 --> 00:17:05,866
关闭重力，并移动这些物理

401
00:17:05,900 --> 00:17:08,133
物体。 这里甚至还有一个

402
00:17:08,133 --> 00:17:10,433
令人愉快的小电缆，我可以通过它切换

403
00:17:10,466 --> 00:17:13,100
到不同的数据源来查看

404
00:17:13,100 --> 00:17:15,166
Shopify 在黑色星期五期间如何推动商业发展

405
00:17:15,166 --> 00:17:17,700
。 这里我最喜欢的

406
00:17:17,733 --> 00:17:19,766
功能之一就是这个音乐

407
00:17:19,766 --> 00:17:22,266
合成器。 所以，我可以打开它，然后

408
00:17:22,300 --> 00:17:24,533
就可以收听“黑色星期五”了。 当

409
00:17:24,533 --> 00:17:26,833
这些弧线碰到音乐网格时，它会

410
00:17:26,866 --> 00:17:29,333
发出不同的声音。 所以，我可以

411
00:17:29,333 --> 00:17:31,733
去南美洲，将其改为

412
00:17:31,733 --> 00:17:33,633
方波，调整一些

413
00:17:33,666 --> 00:17:35,733
设置，然后立即开始

414
00:17:35,733 --> 00:17:38,666
创作音乐。 它甚至有一个网络 MIDI

415
00:17:38,700 --> 00:17:40,433
输出，如果你有

416
00:17:40,466 --> 00:17:43,000
一个物理设备可以输出的话，这非常棒。 如果

417
00:17:43,033 --> 00:17:45,100
您有 Vision Pro 或 Quest，您

418
00:17:45,100 --> 00:17:48,133
可以在这些设备上的网络上体验完整的空间 3D 体验

419
00:17:48,133 --> 00:17:50,666
。

420
00:17:50,700 --> 00:17:53,000
很酷吧？ 每年我们都试图超越

421
00:17:53,033 --> 00:17:54,700
自己，今年我们计划

422
00:17:54,700 --> 00:17:57,000
使用 WebGPU 真正将我们的世界提升到一个新的

423
00:17:57,033 --> 00:17:59,266
水平。 去年的 React three

424
00:17:59,266 --> 00:18:02,366
Fiber 采用了 WebGL2，这

425
00:18:02,400 --> 00:18:03,933
意味着我们所有的着色器都是用

426
00:18:03,933 --> 00:18:06,766
GLSL 编写的。 为了使用 WebGPU，我们必须使用

427
00:18:06,766 --> 00:18:07,800
不同的着色

428
00:18:07,833 --> 00:18:09,900
语言来编写，而同时支持这两种语言会很

429
00:18:09,900 --> 00:18:12,300
麻烦。 这就是 TSL 的用武之地。它是

430
00:18:12,300 --> 00:18:14,600
three.js 着色语言。 您只需编写

431
00:18:14,633 --> 00:18:16,466
一次即可支持

432
00:18:16,466 --> 00:18:19,333
WebGPU 和传统 WebGL 目标。

433
00:18:19,333 --> 00:18:21,333
现在有了 Skia，我们实际上可以

434
00:18:21,333 --> 00:18:23,966
直接在 React

435
00:18:24,000 --> 00:18:26,700
Native 应用程序中运行 WebGPU。 在 Shopify，我们所有的移动

436
00:18:26,700 --> 00:18:29,100
应用程序都是用 React Native 编写的。 因此，现在

437
00:18:29,100 --> 00:18:31,566
我们只需编写一次代码，

438
00:18:31,600 --> 00:18:33,833
无需额外代码，即可

439
00:18:33,833 --> 00:18:36,466
直接在我们的移动应用程序中运行我们的地球。

440
00:18:36,466 --> 00:18:38,600
这是我们制作的快速原型，

441
00:18:38,633 --> 00:18:40,466
实际

442
00:18:40,466 --> 00:18:43,733
在 WebGPU 中运行了去年地球仪的一些着色器。 正如

443
00:18:43,733 --> 00:18:46,933
您在此处看到的，结果是

444
00:18:46,933 --> 00:18:49,333
相同的。 不需要额外的代码即可

445
00:18:49,333 --> 00:18:51,333
在 React Native 应用程序中实际本地运行它

446
00:18:51,333 --> 00:18:54,366
。 这只是

447
00:18:54,400 --> 00:18:56,400
我们迈向

448
00:18:56,400 --> 00:18:58,466
WebGPU 和

449
00:18:58,466 --> 00:19:01,100
直接在原生应用内运行地球仪等事物的旅程的开始。 我们

450
00:19:01,100 --> 00:19:03,400
对 Skia 提供的可能性感到非常兴奋，它让

451
00:19:03,433 --> 00:19:05,566
我们

452
00:19:05,600 --> 00:19:08,066
无需额外的代码就可以运行这些东西。 谢谢

453
00:19:08,066 --> 00:19:09,866
你，丹妮尔。 这绝对令人

454
00:19:09,866 --> 00:19:12,066
难以置信。 如果您有兴趣

455
00:19:12,066 --> 00:19:14,366
了解有关 Shopify 黑色星期五

456
00:19:14,400 --> 00:19:16,300
地球仪是如何构建的更多信息，可以参阅

457
00:19:16,366 --> 00:19:21,400
Diego Mario 创建的精彩交互式教程，我强烈

458
00:19:21,400 --> 00:19:23,733
推荐。 还有谁

459
00:19:23,733 --> 00:19:25,966
在 React Native 上使用 3D 做很酷的事情？

460
00:19:26,000 --> 00:19:28,766
当然是来自 SpaceX 的 Haron Grider。 

461
00:19:28,766 --> 00:19:30,666
three fiber 是 StarLink 应用程序的核心，

462
00:19:30,700 --> 00:19:32,366
我们希望与 AORN 一起进行一项小型

463
00:19:32,400 --> 00:19:34,700
实验，将部分

464
00:19:34,700 --> 00:19:37,866
GLSL 代码迁移到 TSL，看看我们是否

465
00:19:37,900 --> 00:19:39,733
可以在 React Native WebGPU 上运行该体验

466
00:19:39,733 --> 00:19:42,766
。 目标是首先

467
00:19:42,766 --> 00:19:46,200
在现代 GPU API 上运行体验，

468
00:19:46,233 --> 00:19:47,966
并为与 Reanimated 的更深层次集成奠定基础

469
00:19:48,000 --> 00:19:50,866
。 这就是

470
00:19:50,866 --> 00:19:52,200
我今天早上想向你们展示的第一件事

471
00:19:52,233 --> 00:19:53,366
。

472
00:19:53,400 --> 00:19:56,000
WebGPU 是一个全新但已广

473
00:19:56,000 --> 00:19:58,400
受喜爱的网络标准。 我们正在以

474
00:19:58,400 --> 00:20:00,133
我们认为非常引人注目的方式将其与 React Native 进行集成

475
00:20:00,133 --> 00:20:02,366
。 这使

476
00:20:02,400 --> 00:20:05,266
我们能够利用现有的 Web 生态系统，

477
00:20:05,266 --> 00:20:08,566
例如 Compute Toys、TypeGPU、

478
00:20:08,600 --> 00:20:11,900
TensorflowJS，并且我们认为 three.js 和

479
00:20:11,900 --> 00:20:13,966
React three fiber 将成为

480
00:20:14,000 --> 00:20:18,300
React Native WebGPU 的主要关注点。 现在让我们来

481
00:20:18,300 --> 00:20:21,333
谈谈我们

482
00:20:21,333 --> 00:20:23,400
首先研究 WebGPU 的原因，那

483
00:20:23,433 --> 00:20:25,733
当然是 React Native Skia。

484
00:20:25,733 --> 00:20:28,500
Skia 当然是

485
00:20:28,533 --> 00:20:30,933
React Native 上 2D 图形的宠儿，您已经

486
00:20:30,933 --> 00:20:33,966
使用它来带来 Juno Sequa 来

487
00:20:34,000 --> 00:20:36,766
取悦您的用户，就像在 OnSphere

488
00:20:36,766 --> 00:20:39,166
应用程序中一样。 您已经使用 Skia 将

489
00:20:39,200 --> 00:20:41,500
游戏化的含义提升到了一个全新

490
00:20:41,500 --> 00:20:44,300
的水平，就像独一无二的 Dion Moon 制作的 Callie 应用程序一样

491
00:20:44,300 --> 00:20:46,833
。 您已经

492
00:20:46,866 --> 00:20:49,900
使用 Skia 构建了

493
00:20:49,900 --> 00:20:53,166
类似 daze app 的全新级别的聊天应用程序。

494
00:20:53,200 --> 00:20:54,633
您已经使用 Skia 构建了

495
00:20:54,766 --> 00:21:00,766
类似 azzapp 的一流视频编辑器和导出器，并构建了

496
00:21:00,766 --> 00:21:03,866
类似 Phomo 和 Blindsoot 的最先进的照片编辑器。 您

497
00:21:03,900 --> 00:21:06,433
已经使用 Skia 构建了

498
00:21:06,466 --> 00:21:09,100
像 Prado 这样的沉浸式游戏，并让学习变得像

499
00:21:09,100 --> 00:21:11,633
Gecko Med 一样有趣。 您已经使用它来让

500
00:21:11,666 --> 00:21:13,666
用户参与健身之

501
00:21:13,666 --> 00:21:17,400
旅，就像在 Runna 和 B42 应用程序中一样。

502
00:21:17,433 --> 00:21:19,100
这些是您

503
00:21:19,100 --> 00:21:21,633
使用 React Native Skia 构建的一些应用程序。

504
00:21:21,666 --> 00:21:23,733
您对这个项目的支持和贡献

505
00:21:23,733 --> 00:21:25,666
确实令人感到

506
00:21:25,700 --> 00:21:28,433
温暖。 所以今天早上我们想

507
00:21:28,466 --> 00:21:30,866
宣布一些

508
00:21:30,866 --> 00:21:34,733
我们非常自豪的新功能。

509
00:21:34,733 --> 00:21:38,100
请击鼓。 零。 这是正确的。 零新

510
00:21:38,133 --> 00:21:40,366
功能。 在构建任何新

511
00:21:40,400 --> 00:21:42,400
功能之前，我们想要做的是

512
00:21:42,400 --> 00:21:44,533
让 React Skia 上的动画时间

513
00:21:44,533 --> 00:21:47,866
在 iOS 上加快 50%，

514
00:21:47,900 --> 00:21:50,600
在 Android 上加快近 200%。 我们还将 Android 和 iOS 上的

515
00:21:50,633 --> 00:21:53,900
第一个动画帧的时间缩短了近

516
00:21:53,900 --> 00:21:57,800
200%。 我们

517
00:21:57,833 --> 00:22:00,233
只是渴望让 React native skia 变得

518
00:22:00,233 --> 00:22:02,766
更精简、更强大。 事实上，我们甚至将

519
00:22:02,766 --> 00:22:05,866
代码库减少了 13%。 但更

520
00:22:05,900 --> 00:22:08,433
重要的是，我们通过偿还技术债务修复了 98%

521
00:22:08,466 --> 00:22:11,500
报告给我们的 Android 崩溃问题

522
00:22:11,500 --> 00:22:13,333
。 我们正在

523
00:22:13,333 --> 00:22:15,000
使 React native Skia 能够

524
00:22:15,033 --> 00:22:17,033
在三个新平台上使用，并

525
00:22:17,033 --> 00:22:19,100
为 Skia Graphite（

526
00:22:19,100 --> 00:22:22,766
使用 WebGPU 的 Skia 新后端）做好准备。 在开发

527
00:22:22,766 --> 00:22:24,666
React Native Skia 的过程中，我们一直有关于

528
00:22:24,700 --> 00:22:27,333
如何改进它的想法。 当我们

529
00:22:27,333 --> 00:22:29,166
开始研究 React Native WebGPU 时，

530
00:22:29,200 --> 00:22:31,033
我们有一个绿地项目，我们

531
00:22:31,033 --> 00:22:33,433
可以在其中测试这些想法，一旦它们得到

532
00:22:33,433 --> 00:22:36,233
验证，我们就可以将它们运送到

533
00:22:36,233 --> 00:22:38,466
Skia。 那么，让我们来讨论一下其中的一些

534
00:22:38,466 --> 00:22:40,300
架构改进，

535
00:22:40,300 --> 00:22:42,033
今天早上我为你们挑选了三个。

536
00:22:42,066 --> 00:22:43,966
Skia 连接到

537
00:22:44,000 --> 00:22:46,533
底层 3D API 的后端 API、

538
00:22:46,533 --> 00:22:48,033
利用 React

539
00:22:48,066 --> 00:22:50,466
编程模型和协调器的声明性 API 以及使

540
00:22:50,466 --> 00:22:52,200
该库能够

541
00:22:52,233 --> 00:22:55,433
在 Android、iOS、Web 等上运行的平台 API。 对于

542
00:22:55,433 --> 00:22:57,566
后端 API，我们目前

543
00:22:57,600 --> 00:23:00,066
在 Android 上使用 OpenGL，在 iOS 上使用 Metal。  OpenGL 和

544
00:23:00,066 --> 00:23:01,800
Metal 是完全不同的 API，

545
00:23:01,833 --> 00:23:03,266
我们编写了两个完全不同的

546
00:23:03,266 --> 00:23:05,333
后端，每次我们想要

547
00:23:05,333 --> 00:23:07,233
构建一个新的后端相关功能时，我们都

548
00:23:07,266 --> 00:23:09,566
需要构建两次，而这

549
00:23:09,600 --> 00:23:11,600
很快就会让事情变得混乱。

550
00:23:11,600 --> 00:23:13,733
随着即将迁移到 WebGPU，我们

551
00:23:13,733 --> 00:23:15,333
知道我们需要消除

552
00:23:15,333 --> 00:23:17,400
后端 API 之间的这些差异，以便

553
00:23:17,433 --> 00:23:19,433
我们可以轻松插入新的统一

554
00:23:19,433 --> 00:23:22,866
后端 WebGPU。 尽管 OpenGL

555
00:23:22,866 --> 00:23:24,933
和 Metal 是非常不同的 API，但我们

556
00:23:24,933 --> 00:23:26,666
确实找到了一种

557
00:23:26,700 --> 00:23:29,333
非常适合我们的通用后端模型。 通过调整这些

558
00:23:29,333 --> 00:23:32,366
后端 API，我们为用户修复了大量错误，

559
00:23:32,400 --> 00:23:34,866
尤其是在 OpenGL 和 Android 上

560
00:23:34,866 --> 00:23:37,966
。 我们正在

561
00:23:38,000 --> 00:23:41,200
通过

562
00:23:41,200 --> 00:23:43,433
开关的翻转来启用 Graphite 后端实验。 它还

563
00:23:43,433 --> 00:23:47,100
为视频和摄像头馈送实现了一些更复杂的用例

564
00:23:47,100 --> 00:23:50,133
。

565
00:23:50,133 --> 00:23:53,633
来自 Azzapp 的 Francois 将为您详细介绍这一点。

566
00:23:53,666 --> 00:23:57,500
大家好。 我是 Francois，azzapp 的首席技术官，azzapp 是一家

567
00:23:57,500 --> 00:24:00,133
初创公司，致力于开发数字网络

568
00:24:00,133 --> 00:24:02,600
移动应用程序，将数字

569
00:24:02,633 --> 00:24:05,100
名片与我们所谓的网络

570
00:24:05,100 --> 00:24:08,033
名片（一种时尚的交互式数字

571
00:24:08,066 --> 00:24:09,366
演示

572
00:24:09,400 --> 00:24:12,633
页面）相结合。  Azzapp 的一个突出特点

573
00:24:12,633 --> 00:24:15,833
是封面。

574
00:24:15,833 --> 00:24:18,366
当您使用应用程序共享您的联系人时人们首先看到的东西

575
00:24:18,400 --> 00:24:21,333
。 我们希望用户

576
00:24:21,333 --> 00:24:23,466
在分享他们的联系信息时感到自豪。

577
00:24:23,500 --> 00:24:26,033
为了实现这一点，封面必须

578
00:24:26,066 --> 00:24:29,400
尽可能具有视觉吸引力。 我们

579
00:24:29,433 --> 00:24:31,566
希望我们的用户能够使用

580
00:24:31,600 --> 00:24:34,600
多种媒体、应用过滤器、添加

581
00:24:34,600 --> 00:24:37,100
动画并生成

582
00:24:37,100 --> 00:24:39,566
可在所有

583
00:24:39,600 --> 00:24:42,400
社交媒体平台上轻松分享的视频。

584
00:24:42,400 --> 00:24:44,866
在早期开发阶段，我们

585
00:24:44,866 --> 00:24:46,933
意识到唯一能够提供

586
00:24:47,133 --> 00:24:52,033
实现我们愿景所需的容量和性能的解决方案是 React native

587
00:24:52,066 --> 00:24:55,233
skia 但是，为了满足我们的特定

588
00:24:55,266 --> 00:24:57,733
要求，我们必须开发一个

589
00:24:57,733 --> 00:25:00,933
名为 React native skia video 的自定义模块。 该

590
00:25:00,933 --> 00:25:03,966
模块允许我们提取视频帧

591
00:25:04,000 --> 00:25:06,700
并将它们无缝集成到

592
00:25:06,700 --> 00:25:09,333
清晰绘制管道中，同时还

593
00:25:09,333 --> 00:25:11,466
支持从单独的线程导出视频

594
00:25:11,500 --> 00:25:13,800
。 我们为该库做出了贡献，

595
00:25:13,833 --> 00:25:16,766
并实现了

596
00:25:16,766 --> 00:25:19,633
原生纹理的直接传输系统以

597
00:25:19,666 --> 00:25:22,300
react native skia，从而使我们能够直接

598
00:25:22,300 --> 00:25:25,566
在 iOS 上使用 metal 纹理，

599
00:25:25,600 --> 00:25:28,766
在 Android 上使用 OpenGL 纹理。 这种方法

600
00:25:28,766 --> 00:25:31,566
不仅优化了内存使用，而且

601
00:25:31,600 --> 00:25:34,533
提高了渲染速度。 我们相信

602
00:25:34,533 --> 00:25:36,933
该解决方案对于

603
00:25:36,933 --> 00:25:39,166
在 React Native 应用程序中利用视频内容具有真正的作用，

604
00:25:39,200 --> 00:25:41,833
我们很高兴分享

605
00:25:41,833 --> 00:25:44,066
有关这一创新的更多信息以及它如何使

606
00:25:44,066 --> 00:25:47,500
其他开发人员受益。 谢谢。

607
00:25:47,500 --> 00:25:48,933
谢谢你，Francois。 这看起来

608
00:25:48,933 --> 00:25:51,000
令人难以置信。  React Native Skia 视频是

609
00:25:51,033 --> 00:25:53,500
一个令人难以置信的开源项目，它使用

610
00:25:53,500 --> 00:25:56,033
React Native Skia 处理视频，

611
00:25:56,066 --> 00:25:58,933
并且还有 React Native Vision

612
00:25:58,933 --> 00:26:01,866
摄像头用于摄像头支持，而 React

613
00:26:01,900 --> 00:26:04,300
Native 视频在其即将推出的版本 7 中

614
00:26:04,300 --> 00:26:07,800
也支持 Skia。 现在让我们进入

615
00:26:07,833 --> 00:26:09,900
更高一层，

616
00:26:09,900 --> 00:26:11,733
讨论声明性 API。

617
00:26:11,733 --> 00:26:13,800
声明性 API 是奇迹

618
00:26:13,833 --> 00:26:15,733
发生的地方。

619
00:26:15,733 --> 00:26:18,500
能够

620
00:26:18,533 --> 00:26:22,200
在 React 的组合模型中使用 Skia 是一件非常令人愉快的事情。 我们添加了

621
00:26:22,233 --> 00:26:24,933
一个名为 Skia DOM 的精简的图。 我们将其称为

622
00:26:24,933 --> 00:26:26,766
Skia DOM，因为像 DOM 一样，它是

623
00:26:26,766 --> 00:26:30,433
完全可变的，并且我们

624
00:26:30,466 --> 00:26:33,800
用 C++ 编写了它。 因此它非常快，但有

625
00:26:33,833 --> 00:26:36,533
一个致命的设计流程。 我们平等对待

626
00:26:36,533 --> 00:26:38,033
来自 JavaScript 线程

627
00:26:38,066 --> 00:26:40,066
和 UI 线程的更新。 即使

628
00:26:40,066 --> 00:26:41,500
在动画时我们希望速度

629
00:26:41,500 --> 00:26:43,100
非常快，但如果 JavaScript 线程想要更​​新树，我们真的无法

630
00:26:43,100 --> 00:26:45,000
承受任何类型的锁定

631
00:26:45,233 --> 00:26:48,366
。 最重要的是，我们使用了

632
00:26:48,400 --> 00:26:49,900
reanimated 来进行线程

633
00:26:49,900 --> 00:26:51,566
调度，这在

634
00:26:51,600 --> 00:26:53,266
基准测试中出现，我们可以看到我们

635
00:26:53,266 --> 00:26:55,266
支付了两次 线程调度，

636
00:26:55,266 --> 00:26:57,566
一次是在 reanimated 中，另一次是在

637
00:26:57,600 --> 00:26:59,733
Skia DOM 中。 我们所做的是，我们

638
00:26:59,733 --> 00:27:01,633
从完全可变的线程调节器转向

639
00:27:01,800 --> 00:27:08,766
不可变的 fabric 调节器，并且在动画时事情

640
00:27:08,766 --> 00:27:10,500
会非常快，因为我们不需要

641
00:27:10,533 --> 00:27:11,666
处理

642
00:27:11,700 --> 00:27:13,866
并发。 通过实施这一新

643
00:27:13,900 --> 00:27:16,033
模型，我们将 Android

644
00:27:16,066 --> 00:27:19,000
上的动画时间性能提高了近 200%，并将

645
00:27:19,233 --> 00:27:26,066
iOS 和 Android 上的第一帧动画时间提高了近 200%

646
00:27:26,066 --> 00:27:29,166
。 我们最终在

647
00:27:29,200 --> 00:27:32,133
这里实现的是一个支持动画值的不可变显示列表

648
00:27:32,133 --> 00:27:34,200
。

649
00:27:34,233 --> 00:27:36,133
值得庆幸的是，Fabric Reconciler

650
00:27:36,133 --> 00:27:40,033
完全支持这一点。 它的

651
00:27:40,066 --> 00:27:42,300
概念与 WebGPU 中的渲染包非常相似

652
00:27:42,300 --> 00:27:45,633
。 我真的很喜欢我们

653
00:27:45,666 --> 00:27:47,500
在图形堆栈的不同部分移动，

654
00:27:47,500 --> 00:27:49,733
并且事物看起来非常

655
00:27:49,733 --> 00:27:51,966
不同，但在抽象层面上，它们

656
00:27:52,000 --> 00:27:54,366
经常尝试解决类似的问题。 在

657
00:27:54,366 --> 00:27:56,200
这个特定的例子中，

658
00:27:56,233 --> 00:27:58,633
外部函数接口的成本。 那么，让我们来

659
00:27:58,633 --> 00:28:00,700
看看。 这是

660
00:28:00,700 --> 00:28:03,233
通过 GLSL 向 JavaScript 公开的 Skia 的示例。

661
00:28:03,266 --> 00:28:05,500
很快。 它确实很快，但是

662
00:28:05,500 --> 00:28:07,500
我们现在变得太贪心了，所以它

663
00:28:07,500 --> 00:28:09,500
有点慢。 有两件事我们

664
00:28:09,500 --> 00:28:11,166
想要摆脱。 首先，所有

665
00:28:11,200 --> 00:28:13,600
对象实例实际上都是

666
00:28:13,600 --> 00:28:16,633
JSI 中的热点。 最重要的是，

667
00:28:16,633 --> 00:28:19,333
即使它们速度很快，这些对象的生命周期也

668
00:28:19,333 --> 00:28:21,866
只有一个动画帧，

669
00:28:21,900 --> 00:28:23,400
这意味着您要么需要

670
00:28:23,433 --> 00:28:25,100
明确删除它们，要么让

671
00:28:25,100 --> 00:28:26,766
垃圾收集器来处理它们。

672
00:28:26,766 --> 00:28:28,833
Skia 绘图彼此深度嵌套

673
00:28:28,866 --> 00:28:30,533
，我们提出了一个

674
00:28:30,533 --> 00:28:32,033
指令集，允许您

675
00:28:32,066 --> 00:28:34,300
表达任何 Skia 绘图，但无需

676
00:28:34,300 --> 00:28:36,700
任何新的对象实例，从而大大降低了

677
00:28:36,700 --> 00:28:38,933
函数接口的成本

678
00:28:38,933 --> 00:28:42,033
。 这是一个

679
00:28:42,066 --> 00:28:44,133
深度嵌套 Skia 绘图的示例，它

680
00:28:44,133 --> 00:28:46,266
等效于使用我们的指令集。

681
00:28:46,500 --> 00:28:51,166
在某些示例中，这个新 API 的速度提高了三倍。 但是当然在

682
00:28:51,200 --> 00:28:53,733
动画时我们希望

683
00:28:53,733 --> 00:28:55,166
函数接口的成本尽可能低

684
00:28:55,200 --> 00:28:57,266
。 因此，我们所做的就是

685
00:28:57,266 --> 00:29:01,433
在绘图中添加对重新动画值的本机支持。 您记录您的

686
00:29:01,433 --> 00:29:02,533
绘图，并且在

687
00:29:02,533 --> 00:29:04,933
动画时您所要做的就是

688
00:29:04,933 --> 00:29:07,333
从重新动画中设置新值并执行绘图。

689
00:29:07,333 --> 00:29:09,466
除了我们

690
00:29:09,500 --> 00:29:11,333
从 rean animated 中获取新值之外，我们已经完全消除了

691
00:29:11,333 --> 00:29:12,733
框架函数接口的成本

692
00:29:12,733 --> 00:29:15,800
。  Skia 带有 React 声明式

693
00:29:15,833 --> 00:29:18,300
模型，使用起来极其优雅且功能强大

694
00:29:18,300 --> 00:29:21,233
。 因此，社区

695
00:29:21,266 --> 00:29:24,600
成员希望在 iOS、

696
00:29:24,633 --> 00:29:27,433
Android 和 Web 之外使用它也就不足为奇了。

697
00:29:27,433 --> 00:29:30,633
微软的 Saad Najmi、

698
00:29:30,633 --> 00:29:33,500
Swsh 的 Nathan Ahn 和 Plex 的 Ruud Berg 将向我们详细介绍这一点

699
00:29:33,500 --> 00:29:36,500
。

700
00:29:36,533 --> 00:29:38,933
您好，我叫 Assad Najimi。 我是

701
00:29:38,933 --> 00:29:40,500
React Native Mac OS 的维护者之一

702
00:29:40,533 --> 00:29:43,800
。 我最近致力于将

703
00:29:43,833 --> 00:29:46,066
React Native WebGPU 和 React Native

704
00:29:46,066 --> 00:29:48,866
Skia 移植到 React Native MacOS。 我这样做

705
00:29:48,866 --> 00:29:51,166
主要有两个原因。 第一个原因是

706
00:29:51,200 --> 00:29:52,533
我想更多地了解这些

707
00:29:52,533 --> 00:29:54,200
类库。 它们有点超出我

708
00:29:54,233 --> 00:29:56,700
正常的知识范围，我想

709
00:29:56,700 --> 00:29:59,566
通过将

710
00:29:59,600 --> 00:30:01,600
其移植到我工作的平台上来以我所知道的最佳方式学习

711
00:30:01,600 --> 00:30:04,233
。 呃，其次，如果您正在制作 React Native MacOS 应用程序，我想

712
00:30:04,233 --> 00:30:07,666
确保作为库开发人员的您拥有

713
00:30:07,666 --> 00:30:09,966
可用的最好的库。

714
00:30:10,266 --> 00:30:13,900
所以，我希望你能玩得开心

715
00:30:13,900 --> 00:30:17,100
。 嘿，我叫 Ritz。 我是

716
00:30:17,100 --> 00:30:18,600
Plex 的一名软件工程师。

717
00:30:18,633 --> 00:30:20,133
在过去的两年里，我们一直在

718
00:30:20,133 --> 00:30:22,133
使用 React Native 重写 Plex 应用程序

719
00:30:22,133 --> 00:30:24,133
。 我们一直在使用 React Native

720
00:30:24,133 --> 00:30:26,133
Skia

721
00:30:26,133 --> 00:30:27,966
根据您在屏幕上看到的艺术品生成背景。

722
00:30:28,000 --> 00:30:30,000
当您浏览应用程序时，艺术品

723
00:30:30,000 --> 00:30:32,700
和背景都会发生变化。

724
00:30:32,700 --> 00:30:34,533
之前我们使用 SVG 和遮罩

725
00:30:34,533 --> 00:30:36,200
视图，但它们的性能不够

726
00:30:36,233 --> 00:30:38,700
好。 嗯，React Native Skia 在这里帮助了我们

727
00:30:38,700 --> 00:30:41,633
。 嗯，它还允许我们

728
00:30:41,666 --> 00:30:44,466
添加更多功能。 例如，我们在

729
00:30:44,666 --> 00:30:48,833
渐变顶部有一个噪声着色器，有助于防止色带

730
00:30:48,866 --> 00:30:51,000
。 在接下来的几个月里，我们将

731
00:30:51,333 --> 00:30:53,100
在构建

732
00:30:53,300 --> 00:30:57,733
应用程序时使用 React Native Skia 来实现更多的动画。 大家好，我是 Nathan，

733
00:30:57,733 --> 00:30:59,233
从纽约打来电话。 很高兴讨论

734
00:30:59,266 --> 00:31:01,333
我们如何使用 React Native Skia 来

735
00:31:01,333 --> 00:31:02,933
增强开放图表的用户和开发人员

736
00:31:02,933 --> 00:31:05,233
体验。 在 Swsh，

737
00:31:05,266 --> 00:31:07,100
我们正在构建一个由人工智能驱动的相册，

738
00:31:07,100 --> 00:31:08,700
让您可以分享

739
00:31:08,700 --> 00:31:10,533
任何活动的照片和视频，从

740
00:31:10,533 --> 00:31:12,266
大学派对到 Rolling Loud 等音乐节

741
00:31:12,300 --> 00:31:14,833
。 用户

742
00:31:14,866 --> 00:31:16,066
邀请朋友访问

743
00:31:16,066 --> 00:31:18,133
相册的主要方式是分享链接，以确保

744
00:31:18,133 --> 00:31:19,633
客人能够获得相册的最佳预览

745
00:31:19,666 --> 00:31:21,500
。 我们在服务器环境中

746
00:31:21,500 --> 00:31:23,866
使用 React Native Skia 的

747
00:31:23,900 --> 00:31:25,733
无头支持实现了开放图形标准。

748
00:31:25,733 --> 00:31:27,233
我们能够在几秒钟内

749
00:31:27,266 --> 00:31:30,100
使用专辑的名称和内容动态呈现开放图形预览

750
00:31:30,333 --> 00:31:33,866
。 这些动态视频是

751
00:31:33,900 --> 00:31:35,733
通过将

752
00:31:35,733 --> 00:31:37,966
各个帧和渲染的图像组合

753
00:31:38,000 --> 00:31:40,233
成无缝视频来按需渲染的。 作为前端

754
00:31:40,233 --> 00:31:42,133
开发人员，我们需要能够看到

755
00:31:42,133 --> 00:31:43,800
我们正在进行的工作，以确保干净地

756
00:31:43,833 --> 00:31:46,233
实现我们梦想的设计。

757
00:31:46,233 --> 00:31:48,933
通过跨平台网络支持的 React

758
00:31:48,933 --> 00:31:51,566
使我们能够在故事书中设计开放图形图像

759
00:31:51,600 --> 00:31:54,366
并进行实时编辑预览。

760
00:31:54,366 --> 00:31:56,433
然后，一旦预览在前端看起来很完美

761
00:31:56,466 --> 00:31:58,300
，我们就可以将相同的

762
00:31:58,300 --> 00:31:59,966
代码发送到后端，在那里它将以与

763
00:32:00,233 --> 00:32:03,833
开发人员环境中完全相同的方式呈现。 此外，我们

764
00:32:03,833 --> 00:32:05,666
可以使用

765
00:32:05,666 --> 00:32:07,966
与 React native 应用程序相同的工具套件来

766
00:32:08,000 --> 00:32:09,900
设计通常的后端

767
00:32:09,900 --> 00:32:11,900
功能。

768
00:32:11,900 --> 00:32:15,233
MacOS、tvOS 和 Node 是三个

769
00:32:15,266 --> 00:32:17,266
支持 React Native

770
00:32:17,266 --> 00:32:19,900
Skia 的新平台。

771
00:32:19,900 --> 00:32:22,700
Reactive Skia 变得如此多功能，我一点也不感到惊讶。   举个

772
00:32:22,700 --> 00:32:25,233
例子，这个视频本身，所有的

773
00:32:25,266 --> 00:32:27,666
图形动作都是使用

774
00:32:27,666 --> 00:32:30,600
React Native Skia 和 Remotion 生成的。 因此，我们

775
00:32:30,633 --> 00:32:33,500
使用 React Native web 来开发

776
00:32:33,500 --> 00:32:36,300
图形运动并使用无头支持来

777
00:32:36,300 --> 00:32:38,700
导出视频。 因此，我们可以

778
00:32:38,866 --> 00:32:43,400
使用 React Native Skia 本身来讲述有关 React Native Skia 的故事。

779
00:32:43,433 --> 00:32:46,766
这是一件非常有趣的事情。 现在

780
00:32:46,766 --> 00:32:48,366
我们来谈谈 React

781
00:32:48,366 --> 00:32:51,300
Native Skia 的未来，也就是 Graphite。 我们有

782
00:32:51,333 --> 00:32:53,633
一个支持

783
00:32:53,666 --> 00:32:56,133
Skia Graphite 的实验分支。 这还没有准备好迎接

784
00:32:56,133 --> 00:32:57,966
黄金时段，但今天早上我

785
00:32:58,000 --> 00:32:59,666
想向你们展示 Skia Graphite  的三个演示

786
00:32:59,666 --> 00:33:01,900
。 这是

787
00:33:01,900 --> 00:33:04,200
我们熟悉并喜爱的在 Skia Graphite 上运行的 Ski IO 世界示例

788
00:33:04,233 --> 00:33:06,700
。 这意味着在

789
00:33:06,700 --> 00:33:08,733
Android 上使用的是 Vulkan 而不是

790
00:33:08,733 --> 00:33:11,566
OpenGL。 最大的区别是，现在

791
00:33:11,600 --> 00:33:13,900
这个例子完全在专用线程上运行

792
00:33:13,900 --> 00:33:15,900
。 您

793
00:33:15,900 --> 00:33:18,300
不需要在 Canva 中更改任何内容。

794
00:33:18,300 --> 00:33:19,966
React Native Skia 将

795
00:33:20,000 --> 00:33:22,300
自动在专用线程上运行它，我们

796
00:33:22,300 --> 00:33:24,433
在 UI 线程上进行同步以进行

797
00:33:24,466 --> 00:33:27,566
屏幕渲染。 沒有問題。

798
00:33:27,600 --> 00:33:30,766
Skia 在 2D 任务方面表现最佳，例如

799
00:33:30,766 --> 00:33:33,066
路径几何、布尔路径运算符、

800
00:33:33,100 --> 00:33:36,200
文本布局等等。 现在您

801
00:33:36,233 --> 00:33:38,466
可以零成本将这些图元带入您的 3D

802
00:33:38,466 --> 00:33:41,733
场景。 这是在

803
00:33:41,733 --> 00:33:43,566
WebGPU 上运行的 3D 场景。 我们使用两个

804
00:33:43,600 --> 00:33:45,600
WebGPU 纹理来实现路径动画

805
00:33:45,600 --> 00:33:47,600
和文本布局。 但这里它们是

806
00:33:47,600 --> 00:33:50,300
使用 Skia 编写的。 借助 Graphite，

807
00:33:50,300 --> 00:33:53,233
我们可以将 3D 和 2D 场景

808
00:33:53,266 --> 00:33:56,133
相互组合。 我们也可以

809
00:33:56,133 --> 00:33:57,800
反过来做。 这里我们直接

810
00:33:57,833 --> 00:33:59,733
使用 WebGPU 纹理绘制了一幅疤痕

811
00:33:59,733 --> 00:34:02,100
。 这里的着色是使用

812
00:34:02,133 --> 00:34:04,366
计算玩具的计算着色器完成的。

813
00:34:04,433 --> 00:34:05,533
能够

814
00:34:05,766 --> 00:34:10,133
使用零成本 API 组成一流的 2D 和 3D 基元真是令人高兴

815
00:34:10,133 --> 00:34:12,600
。 这就是

816
00:34:12,633 --> 00:34:14,700
在 Graphite 上运行的 React Native Skia。 这

817
00:34:14,700 --> 00:34:17,500
还没有准备好在黄金时段播出，但我们正在

818
00:34:17,500 --> 00:34:20,033
努力。 这就是

819
00:34:20,066 --> 00:34:21,166
我今天早上想要向你们展示的两件事

820
00:34:21,200 --> 00:34:23,733
。  WebGPU 和 Skia 是

821
00:34:23,733 --> 00:34:25,633
同一枚硬币的两面。 我们遵循

822
00:34:25,666 --> 00:34:27,166
Google Chrome 图形堆栈的对称性，

823
00:34:27,433 --> 00:34:31,033
在其上运行 WebGPU 和 Skia graphite，并使

824
00:34:31,033 --> 00:34:32,866
这两个原语很好地

825
00:34:32,866 --> 00:34:35,000
相互组合。 感谢

826
00:34:35,033 --> 00:34:37,033
谷歌

827
00:34:37,033 --> 00:34:39,900
对这些开源项目的出色管理。

828
00:34:40,233 --> 00:34:41,066
能够

829
00:34:41,400 --> 00:34:46,000
在 React 的声明模型中使用这些强大的原语是一件非常令人愉快的事情

830
00:34:46,033 --> 00:34:48,600
。 然后就是我们，React

831
00:34:48,633 --> 00:34:50,533
Native 社区。 我们要尝试

832
00:34:50,533 --> 00:34:52,933
并开发像这样的社区驱动的解决方案

833
00:34:52,933 --> 00:34:55,866
。 而这只是

834
00:34:55,900 --> 00:34:57,566
谜团的一小部分。 目前正在开发许多令人

835
00:34:57,566 --> 00:34:59,566
兴奋的基层项目

836
00:34:59,566 --> 00:35:01,966
。 我想到的一个名字

837
00:35:02,000 --> 00:35:04,566
是 nitro

838
00:35:04,566 --> 00:35:07,400
模块。 现在，我

839
00:35:07,433 --> 00:35:09,300
今天早上向你们展示的很多东西都是相当

840
00:35:09,300 --> 00:35:11,633
实验性的。 所以，我们需要多给

841
00:35:11,666 --> 00:35:14,700
章鱼按摩一下。 我们会的。   在此

842
00:35:14,700 --> 00:35:16,533
过程中，我们会

843
00:35:16,533 --> 00:35:18,833
随时向您通报进展情况。 因此

844
00:35:18,866 --> 00:35:21,166
我确实期待着

845
00:35:21,200 --> 00:35:23,033
很快与您交谈。 直到下次，祝您

846
00:35:23,033 --> 00:35:25,300
happy hacking

847
00:35:25,300 --> 00:35:29,233
[音乐]

848
00:35:29,266 --> 00:35:31,300
我所有的烦恼都

849
00:35:31,300 --> 00:35:33,766
消失了，

850
00:35:33,800 --> 00:35:38,500
看着星星撞到

851
00:35:38,500 --> 00:35:41,733
天花板上。 心碎只是一种

852
00:35:41,733 --> 00:35:44,933
感觉。 基线蓝色让你想要

853
00:35:44,933 --> 00:35:48,200
动起来。

854
00:35:48,266 --> 00:35:52,933
哦。 我没有打架。 我想相信

855
00:35:52,933 --> 00:35:56,200
这一点。 心碎。 这只是一种

856
00:35:56,233 --> 00:35:59,100
感觉。 跳舞来克服

857
00:35:59,100 --> 00:36:03,033
你所经历的所有痛苦。 你经历过。

858
00:36:03,066 --> 00:36:04,333
哦。

859
00:36:04,366 --> 00:36:06,833
[音乐]

860
00:36:06,833 --> 00:36:11,766
N. 心碎。 心碎。

861
00:36:11,766 --> 00:36:17,066
[音乐]

862
00:36:17,133 --> 00:36:21,066
Heartbe 看着星星碰撞到

863
00:36:21,100 --> 00:36:25,100
天花板。 心碎只是一种

864
00:36:25,100 --> 00:36:28,200
感觉。 基线蓝色让你想要

865
00:36:28,666 --> 00:36:38,800
动起来。 我想相信这一点。 心高气昂。

866
00:36:38,800 --> 00:36:42,000
这只是一种在

867
00:36:42,000 --> 00:36:44,433
你所经历的所有痛苦中翩翩起舞的感觉。

868
00:36:44,433 --> 00:36:47,500
[音乐]

869
00:36:51,200 --> 00:36:58,200
[音乐]