blog/raw-webgpu

[utterances-bot]

Raw WebGPU

Alain Galván is an Engineer @ Marmoset.co, here's his personal portfolio focused on 🛆 Computer Graphics, 🎨 Art & 🎹🎸 Audio Design/Engineering.

https://alain.xyz/

[huy-nguyen]

I tried running the example but only got a blank screen. My environment is Chrome Canaary Version 81.0.4026.0 on Mac OS Mojave with the flag "Unsafe WebGPU" enabled. My GPU is a Radeon Pro 555X. Am I missing something?

[alaingalvan]

~Thanks for bringing this to my attention @huy-nguyen, turns out you're right, on the latest version of MacOS you're unable to run this WebGPU example on Chrome Canary, but it does work on Edge Canary.~

~I'll look into this some more and update the post with more details. 👍~

~EDIT: I went ahead and tested BabylonJS' implementation of WebGPU and it doesn't seem to work either, so I'm going to edit the post to notify users to only try this on Edge Canary at the moment, at least until Chrome Canary has it working.~

EDIT (1/14/2020): Thanks @austinEng, looks like Chrome Canary is working again on MacOS. 😁

[austinEng]

Thanks for writing this! We recently had a regression which broke WebGPU which is why it was broken in Canary. I just checked 81.0.4027.0 and it's back working now.

[DjDeveloperr]

Great read up, really liked it! Though in my opinion, it would be worth using WGSL shaders. Also, there has been some updates to WebGPU API, could you update that?

[darzu]

Awesome tutorial! However it is broken for me on Chrome Canary "Version 92.0.4514.0 (Official Build) canary (arm64)"

Error: Failed to execute 'createRenderPipeline' on 'GPUDevice': required member vertex is undefined

[alaingalvan]

Alrighty, I've updated the repo, Codepen, and blog post to support the latest changes to the WebGPU API. Thanks for letting me know everyone!

[edap]

in the last WGSL specs, the block is not needed anymore

[[block]] struct UBO {
  modelViewProj: mat4x4<f32>;
  primaryColor: vec4<f32>;
  accentColor: vec4<f32>;
};

should become

struct UBO {
  modelViewProj: mat4x4<f32>;
  primaryColor: vec4<f32>;
  accentColor: vec4<f32>;
};

[sushruta]

struct members in the shader now need to be separated by , instead of ;.

Your struct definition now becomes --

 struct VSOut {
     @builtin(position) Position: vec4<f32>,
     @location(0) color: vec3<f32>,
 };

[tiye]

tried with uniforms code today, feeling strange to me:

  let uniformBindGroupLayout = device.createBindGroupLayout({
    entries: [
      {
        binding: 0,
        visibility: GPUShaderStage.VERTEX,
        buffer: {}, // TODO don't know why, but fixes, https://programmer.ink/think/several-best-practices-of-webgpu.html
      },
    ],
  });

error message is:

BindGroupLayoutEntry had none of buffer, sampler, texture, storageTexture, or externalTexture set
 - While validating entries[0]
 - While validating [BindGroupLayoutDescriptor]
 - While calling [Device].CreateBindGroupLayout([BindGroupLayoutDescriptor]).

localhost/:1 [Invalid BindGroupLayout] is invalid.
 - While validating [BindGroupDescriptor] against [Invalid BindGroupLayout]
 - While calling [Device].CreateBindGroup([BindGroupDescriptor]).

[alaingalvan]

  let uniformBindGroupLayout = device.createBindGroupLayout({
    entries: [
      {
        binding: 0,
        visibility: GPUShaderStage.VERTEX,
        buffer: {}, // TODO don't know why, but fixes, https://programmer.ink/think/several-best-practices-of-webgpu.html
      },
    ],
  });

Thanks, looks like the spec requires the addition of that buffer for describing a bind group layout entry for a uniform. It's just an object because it has some smart defaults to it.

https://github.com/gpuweb/types/blob/81a823d6bc44de84f8cc5f8fab785788f183f4ac/dist/index.d.ts#L431
interface GPUBindGroupLayoutEntry {
  binding: GPUIndex32;
  visibility: GPUShaderStageFlags;
  buffer?: GPUBufferBindingLayout;
  sampler?: GPUSamplerBindingLayout;
  texture?: GPUTextureBindingLayout;
  storageTexture?: GPUStorageTextureBindingLayout;
  externalTexture?: GPUExternalTextureBindingLayout;
}

interface GPUBufferBindingLayout {
  type?: GPUBufferBindingType;
  hasDynamicOffset?: boolean;
  minBindingSize?: GPUSize64;
}

type GPUBufferBindingType =
    | "uniform"
    | "storage"
    | "read-only-storage";

type GPUSize64 = number;

[tiye]

thanks.

I also noticed an error in parsing:

struct UBO {
  modelViewProj: mat4x4<f32>;
  primaryColor: vec4<f32>;
  accentColor: vec4<f32>;
};

Tint WGSL reader failure: :2:29 error: expected '}' for struct declaration
  modelViewProj: mat4x4<f32>;
                            ^
 - While validating [ShaderModuleDescriptor]
 - While calling [Device].CreateShaderModule([ShaderModuleDescriptor]).

localhost/:1 [Invalid ShaderModule] is invalid.
 - While validating vertex stage (module: [Invalid ShaderModule], entryPoint: vertex_main).
 - While validating vertex state.
 - While calling [Device].CreateRenderPipeline([RenderPipelineDescriptor]).

looks like it's already reported at https://github.com/alaingalvan/alainxyz-comments/issues/3#issuecomment-1136164653

[tiye]

createBuffer function in the article does not handle f32 and vec3<f32> quite well. it appears I have to align to 16 bytes according to https://github.com/gpuweb/gpuweb/discussions/2348 . somehow confused.

[FuXiii]

I tried running on Microsoft Edge dev with Version 109.0.1518.8 (Official build) dev (64-bit) . After run server then visit http://192.168.2.206:8080orhttp://127.0.0.1:8080 only show a black canvas. and terminal show the log:

PS E:\webgpu-seed> npm start

> webgpu-seed@0.1.0 start
> npm i && npm run build && npm run dev

added 176 packages, and audited 177 packages in 16s

21 packages are looking for funding
  run `npm fund` for details

2 high severity vulnerabilities

To address all issues, run:    
  npm audit fix

Run `npm audit` for details.   
npm notice 
npm notice New major version of npm available! 8.19.2 -> 9.1.3
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.1.3      
npm notice Run npm install -g npm@9.1.3 to update!
npm notice

> webgpu-seed@0.1.0 build
> cross-env NODE_ENV=production ts-node webpack.ts

✔️️  · Success · webgpu-seed (production) built in 834 ms.

> webgpu-seed@0.1.0 dev
> http-server

Starting up http-server, serving ./

http-server version: 14.1.0

http-server settings: 
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  http://192.168.2.206:8080
  http://127.0.0.1:8080
Hit CTRL-C to stop the server

[2022-12-06T03:32:42.920Z]  "GET /" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36 Edg/109.0.1518.8"
(node:14812) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated
(Use `node --trace-deprecation ...` to show where the warning was created)[2022-12-06T03:32:42.944Z]  "GET /dist/main.js" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36 Edg/109.0.1518.8"
[2022-12-06T03:32:42.983Z]  "GET /favicon.ico" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36 Edg/109.0.1518.8"
[2022-12-06T03:32:42.985Z]  "GET /favicon.ico" Error (404): "Not found"
[2022-12-06T03:32:49.831Z]  "GET /" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36 Edg/109.0.1518.8"
> [2022-12-06T03:33:37.550Z]  "GET /" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36 Edg/109.0.1518.8"
[2022-12-06T03:33:37.561Z]  "GET /dist/main.js" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like 
Gecko) Chrome/109.0.0.0 Safari/537.36 Edg/109.0.1518.8"
[2022-12-06T03:33:37.585Z]  "GET /favicon.ico" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36 Edg/109.0.1518.8"
[2022-12-06T03:33:37.586Z]  "GET /favicon.ico" Error (404): "Not found"

[alaingalvan]

Thanks @FuXiii, there were some changes to the WebGPU Shading Language spec that broke this example, it has since been fixed.

[ErichDonGubler]

Hey there! Member of Firefox's WebGPU team here. The only thing you should need to do to consume WebGPU is run a Nightly build. This is different from instructions current on this page, because we don't offer it in Beta at this point, and we have dom.webgpu.enabled set to true by default now. Caveat lector: our WebGPU implementation still very WIP[^1], and we're not feeling ready yet to ask the wider community to kick the tires yet.

[^1]: Since 2019, there have been quite a few JS API changes, and the back end and JS interface have fallen out-of-sync. We've been focusing on fixing big ticket items in internals (viz., the wgpu stack), and we're just now getting to the point where we're updating all the JS plumbing in Firefox.

[adammaj1]

NVIDIA Corporation GK104 [GeForce GTX 770], chromium Version 114.0.5735.106 (Official Build) snap (64-bit), enable-unsafe-webgpu is enabled, Browser restarted, still not working

[adammaj1]

chrome Version 116.0.5845.4 (Official Build) dev (64-bit) works !!!

[spyffe]

For what it's worth, I expressed createBuffer() using intersection types in a way that would allow creation of buffers with source data of arbitrary types:

function createBuffer (device: GPUDevice, arr: ArrayBufferView & ArrayLike<number>, usage: number) : GPUBuffer {
    let buffer = device.createBuffer({
        size: (arr.byteLength + 3) & ~3,
        usage,
        mappedAtCreation: true
    });
    const mapped_range = buffer.getMappedRange();
    new Uint8Array(mapped_range).set(new Uint8Array(arr.buffer));
    buffer.unmap();
    return buffer;
};