技术周刊 2021-09-07：WebGPU 进入 Chrome 初期试用

WebGPU 在 Chrome 94 进行初期试用

• WebGPU简介：WebGPU 将允许开发者利用 GPU 进行计算，提供低成本的访问 GPU 的方式，性能表现更可控。它暴露现代计算机系统的图形绘制 API，包括微软的 Direct3D 12、苹果的 Metal 和英伟达的 Vulkan。作为 WebGL 和 WebGL2 的后继版本，WebGPU 带来了多项改进。

• WebGPU 与 WebGL 的对比：

  资源管理：不像 WebGL 的 context 可以管理一切内容，WebGPU 区分了 GPU 的多个计算单元，将它们分到资源管理（GPUDevice）、指令编码（GPUCommandEncoder）、指令缓冲（GPUCommandBuffer）和指令队列中。

  管线状态：WebGL 中的着色器可能会在执行过程中出现状态变化，多次触发内部重编译，导致 CPU 的延迟。而 WebGPU 封装了跟操作系统相似的管线状态（Pipeline State），包括 GPURenderPipeline 和 GPUComputePipeline，允许在 GPU 执行指令前对着色器、顶点缓冲、绑定组结构、混合缓冲、深度缓冲、模版缓冲进行粒度合理的计算。

  绑定模型：WebGPU 抽象了绑定模型（GPUBindGroup），让图形驱动可以提前准备资源的计算流程，使渲染调用过程更快。

• WebGPU 的使用：

  工具库支持：WebGPU 在工具库 Babylon.js 中被试验性支持。

  Chrome 启用：可以在 Chrome 的 chrome://flags 中通过 #enable-unsafe-webgpu 打开对 WebGPU 的支持。

  浏览器支持：Safari 和 Firefox 均在试验性支持 WebGPU。

  支持性检测：可以通过 "gpu" in navigator 来动态进行 WebGPU 支持性检测。

  示例集合：WebGPU Samples 收集了几个 WebGPU 的示例，供开发者参考。

其他技术动态

• 类静态初始化区块进入 ES2022：类静态初始化区块（Class Static Initialization Blocks）语法进入 Stage 4，将进入 ES2022 中。它与 Field（创建实例上的属性）、Constructor（在每个实例初始化前执行的方法）的区别在于，Static Initialization Blocks 是在类初始化前执行的静态方法，用于初始化静态成员。

• TypeScript 4.4 正式发版：

  控制流中的 typeof 推断强化，间接获取的 typeof 返回值也能正确触发类型窄化。

  下标支持了 symbol 和模版字符串类型。

  catch 中的 error 参数将自动被推断为 unknown 而非 any，此行为对应 tsc 中的 --useUnknownInCatchVariables。

  可以明确区分可选成员变量和 undefined 值，此行为对应 tsc 中的 --exactOptionalPropertyTypes。

  支持 ECMAScript Stage 4 的类静态初始化区块。

• 互联网已经 30 岁了：互联网自诞生至今已经走过了 30 年的历程，见证了信息技术的飞速发展和全球互联的深刻变革。

百宝箱

• Electron 发版 14.0.0：Electron 升级到了 Chromium 93 和 V8 9.3，为开发者提供了更强大的桌面应用开发能力。

• Smartcrop.js：Smartcrop.js 是一个算法，能智能监测到图片中适合的裁剪部分，在 Node.js 和前端均可运行，为图片处理提供了便利。

• Reaflow：Reaflow 是一个基于 React 和 canvas 绘制图形式的数据的工具，为数据可视化提供了新的解决方案。

• bioicons：bioicons 中收录了大量生物相关的 SVG 图表，为生物信息可视化提供了丰富的素材。

• wavesurfer.js：wavesurfer.js 可以在网页上绘制波形图，并可用于调整音频播放，为音频可视化提供了强大的支持。

以上内容涵盖了本期技术周刊的主要动态，包括 WebGPU 在 Chrome 的初期试用、TypeScript 4.4 的发布以及其他多项技术更新和工具推荐。希望这些信息对您的技术学习和实践有所帮助。