[g-webgl] HAL 支持 WebGPU

[xiaoiver]

Chrome 94 的一项重大更新就是将之前预览版本实现的 WebGPU 纳入了正式版，Firefox、Safari、Edge 目前在预览版本也可以体验（所有浏览器厂商达成共识不容易）：
https://developer.chrome.com/blog/new-in-chrome-94/#webgpu
升级后通过在页面中添加 origin trial meta 标签使用。

与此同时，iOS 15 也终于支持了 WebGL2：
https://developer.apple.com/documentation/safari-release-notes/safari-15-release-notes#Web-APIs

目前 G 按照 WebGPU -> WebGL2 -> WebGL1 自动降级：#851

为了通过 origin trial 使用 WebGPU，在 G 官网中增加了如下脚本：

// origin trial for WebGPU
// @see https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md#16-can-i-provide-tokens-by-running-script
const tokenElement1 = document.createElement('meta');
tokenElement1.httpEquiv = 'origin-trial';
tokenElement1.content =
  // https://localhost:8000
  'AqCnZyPTDPRK7MVw+bbVJoQkYndOjHKTarXCp+JTVy4VPAKv/E1SJDuFzsJGm0COxapIEanHG7oF0W+HT0ANwQUAAABJeyJvcmlnaW4iOiJodHRwOi8vbG9jYWxob3N0OjgwMDAiLCJmZWF0dXJlIjoiV2ViR1BVIiwiZXhwaXJ5IjoxNjQzMTU1MTk5fQ==';
document.head.appendChild(tokenElement1);

这样在 Chrome 开发者工具 “应用” -> "帧" 中可以查看 origin trial：

[xiaoiver]

WGSL 语法有一些变化，例如使用 @ 代替 [[]]:
https://github.com/gpuweb/gpuweb/pull/2517/files

需要等 Chrome 实现更新，否则现在新语法会报错：

#1103

[xiaoiver]

由于 WebGPU 使用 [0, 1] 而非 OpenGL / WebGL 的 [-1, 1] 作为深度范围，Camera 生成投影矩阵时也应作出区分：

// WebGL
mat4.ortho(this.projectionMatrix, left, right, bottom, top, near, far);

// WebGPU
mat4.orthoZO(this.projectionMatrix, left, right, bottom, top, near, far);

#1399
#1400