Open utterances-bot opened 4 years ago
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?
~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. 😁
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.
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?
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
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!
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>;
};
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>,
};
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]).
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;
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
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.
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:8080
orhttp://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"
Thanks @FuXiii, there were some changes to the WebGPU Shading Language spec that broke this example, it has since been fixed.
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.
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
chrome Version 116.0.5845.4 (Official Build) dev (64-bit) works !!!
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;
};
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/