WebGPU的API又更新了课件：https://github.com/buglas/webgpu-lesson 知识点

知识点：同步WebGPU最新API

1-我遇到警告

刚才打开上一节课的代码，发现页面里出现了一堆警告：

jsToFrag.ts:22 Calling getPreferredFormat() on a GPUCanvasContext is deprecated and will soon be removed. Call navigator.gpu.getPreferredCanvasFormat() instead, which no longer requires an adapter.
initWebGPU @ jsToFrag.ts:22
await in initWebGPU（异步）
run @ jsToFrag.ts:198
（匿名） @ jsToFrag.ts:217
jsToFrag.ts:31 compositingAlphaMode is deprecated and will soon be removed. Please set alphaMode instead.
initWebGPU @ jsToFrag.ts:31
await in initWebGPU（异步）
run @ jsToFrag.ts:198
（匿名） @ jsToFrag.ts:217
jsToFrag.ts:31 Setting an explicit size when calling configure() on a GPUCanvasContext has been deprecated, and will soon be removed. Please set the canvas width and height attributes instead. Note that after the initial call to configure() changes to the canvas width and height will now take effect without the need to call configure() again.
initWebGPU @ jsToFrag.ts:31
await in initWebGPU（异步）
run @ jsToFrag.ts:198
（匿名） @ jsToFrag.ts:217
jsToFrag.html:1 1 warning(s) generated while compiling the shader:
:1:2 warning: use of deprecated language feature: remove stage and use @vertex
@stage(vertex)
 ^^^^^

jsToFrag.html:1 1 warning(s) generated while compiling the shader:
:3:2 warning: use of deprecated language feature: remove stage and use @fragment
@stage(fragment)
 ^^^^^

我知道WebGPU的API又更新啦。

我当前的WebGPU版本是：

"@webgpu/types": "^0.1.15"

我更新一下WebGPU

npm i @webgpu/types

可以看到webgpu已经更新了

"@webgpu/types": "^0.1.20"

接下来咱们就根据警告依次更新一下之前的代码。

2-更新代码

我这里就以上节课的“js向片元着色器传递数据”的代码进行更新了。

1.jsToFrag.ts:22 Calling getPreferredFormat() on a GPUCanvasContext is deprecated and will soon be removed. Call navigator.gpu.getPreferredCanvasFormat() instead, which no longer requires an adapter.

翻译：getPreferredFormat() 将被移除，需要替换成navigator.gpu.getPreferredCanvasFormat()

当前代码

//获取浏览器默认的颜色格式
const format = context.getPreferredFormat(adapter)

更新后

//获取浏览器默认的颜色格式
const format = navigator.gpu.getPreferredCanvasFormat()

2.jsToFrag.ts:31 compositingAlphaMode is deprecated and will soon be removed. Please set alphaMode instead.

翻译：compositingAlphaMode () 将被移除，需要替换成alphaMode

当前代码

//配置WebGPU
context.configure({
    device,
    format,
    size,
    // Alpha合成模式，opaque为不透明
    compositingAlphaMode: "opaque",
})

更新后

//配置WebGPU
context.configure({
    device,
    format,
    size,
    // Alpha合成模式，opaque为不透明
    alphaMode: "opaque",
})

3.jsToFrag.ts:31 Setting an explicit size when calling configure() on a GPUCanvasContext has been deprecated, and will soon be removed. Please set the canvas width and height attributes instead. Note that after the initial call to configure() changes to the canvas width and height will now take effect without the need to call configure() again.

翻译：在GPUCanvasContext.configure()中设置size的方法将被移除，需要自己设置canvas画布的width 和height 。

当前代码

//canvas尺寸
const size = {
    width: canvas.clientWidth * devicePixelRatio,
    height: canvas.clientHeight * devicePixelRatio,
}
//配置WebGPU
context.configure({
    device,
    format,
    size,
    // Alpha合成模式，opaque为不透明
    alphaMode: "opaque",
})

更新后

//canvas尺寸
const size = {
    width: canvas.clientWidth * devicePixelRatio,
    height: canvas.clientHeight * devicePixelRatio,
}
canvas.width = size.width
canvas.height =size.height
//配置WebGPU
context.configure({
    device,
    format,
    // Alpha合成模式，opaque为不透明
    alphaMode: "opaque",
})

4.jsToFrag.html:1 1 warning(s) generated while compiling the shader: :1:2 warning: use of deprecated language feature: remove stage and use @vertex @stage(vertex)

翻译：顶点着色器里的@stage(vertex)需要替换成@vertex

当前代码

@stage(vertex)
fn main(@location(0) position : vec3<f32>) -> @builtin(position) vec4<f32> {
    return vec4<f32>(position, 1.0);
}

更新后

@vertex
fn main(@location(0) position : vec3<f32>) -> @builtin(position) vec4<f32> {
    return vec4<f32>(position, 1.0);
}

5.jsToFrag.html:1 1 warning(s) generated while compiling the shader: :3:2 warning: use of deprecated language feature: remove stage and use @fragment @stage(fragment) ^^^^^

翻译：片元着色器里的@stage(vertex)需要替换成@vertex当前代码

@group(0) @binding(0) var<uniform> color : vec4<f32>;

@stage(fragment)
fn main() -> @location(0) vec4<f32> {
    return color;
}

更新后

@group(0) @binding(0) var<uniform> color : vec4<f32>;

@fragment
fn main() -> @location(0) vec4<f32> {
    return color;
}

好，现在问题就都解决啦。下节课，咱们会说一下如何用矩阵变换图形。