hjlld / learningwebgpu Goto Github PK

感谢您写了这么多通俗易懂的教程。受益匪浅。

提一个小瑕疵。我看您的Code里canvas.getContext( 'webgpu' )里面都已经用webgpu上下文了。您看教程里的gpupresent是否需要同步改为webgpu。

谢谢。

context.getPreferredFormat 变成了 navigator.gpu.getPreferredCanvasFormat();

发现文章里面的代码还是旧的 WebGPU 代码，但是 code文件里面 的代码已经是最新了。

比如 Lesson1_Triangle_and_square.md一文中提到了vertexStage等，现在已经都统一为vertex和fragment了

调试代码时浏览器控制台给出了警告：The size of the resolve target must be the same as the color attachment，并且没有绘制图形。
我将app.ts中第75、77、97、99行中的 ‘ * window.devicePixelRatio’ 删掉后，能正常绘制图形。
操作系统是macos。

已更新成如下参数：

dictionary GPURenderPipelineDescriptor : GPUPipelineDescriptorBase {
    required GPUVertexState vertex;
    GPUPrimitiveState primitive = {};
    GPUDepthStencilState depthStencil;
    GPUMultisampleState multisample = {};
    GPUFragmentState fragment;
};

与第二课中对此API的描述不符（实际跑起第二课的代码会警告，api将被移除）：

dictionary GPURenderPipelineDescriptor : GPUPipelineDescriptorBase {
    required GPUProgrammableStageDescriptor vertexStage;
    GPUProgrammableStageDescriptor fragmentStage;

    required GPUPrimitiveTopology primitiveTopology;
    GPURasterizationStateDescriptor rasterizationState = {};
    required sequence<GPUColorStateDescriptor> colorStates;
    GPUDepthStencilStateDescriptor depthStencilState;
    GPUVertexStateDescriptor vertexState = {};

    unsigned long sampleCount = 1;
    unsigned long sampleMask = 0xFFFFFFFF;
    boolean alphaToCoverageEnabled = false;
    // TODO: other properties
};

请更新课程代码，感谢教程

Hi,

Thank you for your great WebGPU tutorials.

I can run Lesson0 example without any issue. However, I got the following error messages when trying to run Lession1_Triangle_and _square example:

app.ts:62 Passing a GPUDevice to getSwapChainPreferredFormat is deprecated. Pass a GPUAdapter instead, and update the calling code to expect a GPUTextureFormat to be retured instead of a Promise.
InitWebGPU @ app.ts:62

Uncaught (in promise) TypeError: Failed to execute 'setIndexBuffer' on 'GPURenderPassEncoder': 2 arguments required, but only 1 present.
at App.InitGPUBuffer (app.ts:235)
at main (main.ts:53)
localhost/:1 indexFormat must be undefined when using non-strip primitive topologies
at ValidateVertexStateDescriptor (../../third_party/dawn/src/dawn_native/RenderPipeline.cpp:106)
at ValidateRenderPipelineDescriptor (../../third_party/dawn/src/dawn_native/RenderPipeline.cpp:322)
at CreateRenderPipelineInternal (../../third_party/dawn/src/dawn_native/Device.cpp:1039)

I run this example under Google Chrome canary (64-bit) version 89.0.4379.0.

Can you look into this issue?

Thanks.

想学习这个webgpu，有专门的教程吗

The context type 'gpupresent' is deprecated. Use 'webgpu' instead.

Chrome ver：版本 82.0.4051.0（正式版本）canary （64 位）
试了网上其它WebGPU的例子也会崩溃，有可能是浏览器的bug？

Hi,

Can run examples Lesson0 to Lesson 4 without any problem. However, got the following error when run other examples:

1. Got an empty white screen at first and then it became a black screen when running Lesson5 example.
2. Got the following same error message when running examples in Lesson6 and Lesson7:

Uncaught (in promise) TypeError: Cannot read property 'requestDevice' of null
at App.InitWebGPU (app.ts:100)
InitWebGPU @ app.ts:100
Promise.then (async)
main @ main.ts:175

在最新的 webgpu 标准中好像由于 device.createBufferMapped 存在不会自动清除内存的问题 被干掉了, 需要使用 device.createBuffer 方法取代掉
调用方式如下
const GPUBuffer = await this.device.createBuffer({ size, usage, mappedAtCreation: true })
new TypedArray.constructor(GPUBuffer.getMappedRange()).set(TypedArray, 0)
GPUBuffer.unmap()

The YUV data has been converted into Uint8Array. Next, I want to render it to the canvas through webgpu, but after trying, it fails. Have any good ideas or sample programs?

getSwapChainPreferredFormat() is deprecated. Use getPreferredFormat() instead.

The viewport must be contained in the render targets
at operator() (../../third_party/dawn/src/dawn_native/RenderPassEncoder.cpp:153)
at FinishInternal (../../third_party/dawn/src/dawn_native/CommandEncoder.cpp:960)
localhost/:1 Object is an error.
at ValidateObject (../../third_party/dawn/src/dawn_native/Device.cpp:398)
at ValidateSubmit (../../third_party/dawn/src/dawn_native/Queue.cpp:373)

图像无法渲染出来。

作者您好~ 我对您的DEMO和教程非常感兴趣, 想将其中部分内容 转载/引用 于自己的 博客/笔记 中，请问是否允许?
我将会在文章中注明 转载/引用 出处, 并且放出github链接. 非常感谢~!!!

Lesson2的wgsl出现警告，导致页面无法渲染了

node 20.9.0
npm 10.1.0

http://madebyevan.com/webgl-water/