https://github.com/yorshka20/webgpu-demo

an implement of Game-of-living using webGPU
https://github.com/yorshka20/webgpu-demo

canvas reactjs typescript vite webgpu

Last synced: 11 days ago
JSON representation

an implement of Game-of-living using webGPU

• Host: GitHub
• URL: https://github.com/yorshka20/webgpu-demo
• Owner: yorshka20
• Created: 2023-10-02T03:19:08.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2024-03-17T07:24:51.000Z (8 months ago)
• Last Synced: 2024-03-17T08:49:10.431Z (8 months ago)
• Topics: canvas, reactjs, typescript, vite, webgpu
• Language: TypeScript
• Homepage: https://webgpu-demo.vercel.app
• Size: 196 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# WebGPU Demo

this project is implemented under the tutorial created by Google. you can read the tutorial here: https://codelabs.developers.google.com/your-first-webgpu-app#0

## Preview

vercel deployment: https://webgpu-demo.vercel.app/

![preview](./screenshot//preview.png)

# instruction

## Mistake from tutorial

there is a mistake in google's tutorial which will result in an error below:

```

Entry point's stage (ShaderStage::Fragment) is not in the binding visibility in the layout (ShaderStage::(Vertex|Compute)).

 - While validating that the entry-point's declaration for @group(0) @binding(0) matches [BindGroupLayout "Cell Bind Group Layout"]

 - While validating the entry-point's compatibility for group 0 with [BindGroupLayout "Cell Bind Group Layout"]

 - While validating fragment stage ([ShaderModule "Cell shader"], entryPoint: fragmentMain).

 - While validating fragment state.

 - While calling [Device].CreateRenderPipeline([RenderPipelineDescriptor "Cell pipeline"]).

```

![error](./screenshot//tutorial-error.png)

you can fix it by add a `GPUShaderStage.FRAGMENT` to the `bindGroupLayout.entries[0].visibility` like below:

```ts

const bindGroupLayout = device.createBindGroupLayout({

  label: 'Cell Bind Group Layout',

  entries: [

    {

      binding: 0,

      visibility:

        GPUShaderStage.VERTEX |

        GPUShaderStage.COMPUTE |

        GPUShaderStage.FRAGMENT, // this is where the tutorial gets wrong.

      buffer: {},

    },

    {

      binding: 1,

      visibility: GPUShaderStage.VERTEX | GPUShaderStage.COMPUTE,

      buffer: { type: 'read-only-storage' },

    },

    {

      binding: 2,

      visibility: GPUShaderStage.COMPUTE,

      buffer: { type: 'storage' },

    },

  ],

});

```