[your-first-webgpu-app] Needs a link to the full index.html file or a repo with step commits

[gmlewis]

In the "your-first-webgpu-app" codelab: https://codelabs.developers.google.com/your-first-webgpu-app#7 on the page titled "8. Run the Simulation" at the point where it says:

"Now you can refresh the page again, and you should see that the grid inverts itself with each update."

the Chrome browser reports an error because of a missing binding, so it looks like I messed up the order of code insertion.

It would be REALLY nice if you added a link somewhere in the codelab to the final version of "index.html" so that we can see what we did wrong.

Ideally, you would have a repo that has a commit at least once per each page/step in the codelab so that we can compare our progress along the way.

Thank you for an otherwise excellent codelab!

[gmlewis]

It turns out that I found and fixed the problem.

In this code:

// Create the bind group layout and pipeline layout.
const bindGroupLayout = device.createBindGroupLayout({
  label: "Cell Bind Group Layout",
  entries: [{
    binding: 0,
    // Add GPUShaderStage.FRAGMENT here if you are using the `grid` uniform in the fragment shader.
    visibility: GPUShaderStage.VERTEX | GPUShaderStage.COMPUTE,
    buffer: {} // Grid uniform buffer
  }, {
...

I had to change this line:

    visibility: GPUShaderStage.VERTEX | GPUShaderStage.COMPUTE,

to this:

    visibility: GPUShaderStage.FRAGMENT | GPUShaderStage.VERTEX | GPUShaderStage.COMPUTE,

This is running on a Mac M2 Max running Sonoma 14.4.1 with Chrome version:

Google Chrome | 125.0.6422.61 (Official Build) (arm64)
Revision | 0e32b459e15a72d5ffe73ffa8a7d92c2f278e1ff-refs/branch-heads/6422@{#1018}
OS | macOS Version 14.4.1 (Build 23E224)
JavaScript | V8 12.5.227.8

It would STILL be nice to have a repo with commits showing the progress at the end of each step. Thanks.

[beaufortfrancois]

There's a note for this in https://codelabs.developers.google.com/your-first-webgpu-app?hl=en#7:

[gmlewis]

Ah, missed that. Thank you, @beaufortfrancois !