WebGPU is more powerful. It's basically Vulkan Lite. Limited threading. Bindless Vulkan is at least two years away. Only one queue to the GPU. This limits performance to roughly OpenGL levels. Not clear there's a big market for slightly better 3D in the browser. You can't do an AAA title in the browser yet, because the browser environment is too weak. But in a few years, maybe.

Unclear where this is going. The near future might be a world in which the only way you can run unapproved programs is via a browser. Phones mostly only run apps from approved app stores, and Windows in S mode only runs approved apps from Microsoft's store. Each year, the restrictions seem to get tighter. In which case the only way to do 3D anything without paying off the platform operator will be to use WebGPU or WebGL.

[1] https://webglsamples.org/

[2] https://www.crazygames.com/t/3d

It looks like changing the shadow map resolution breaks things:

    None of the supported sample types (UnfilterableFloat|Depth) of [Texture "Directional Shadow Depth Texture"] match the expected sample types (Float).
     - While validating entries[3] as a Sampled Texture.
    Expected entry layout: {sampleType: TextureSampleType::Float, viewDimension: 2, multisampled: 0}
     - While validating [BindGroupDescriptor ""G-Buffer Textures Input Bind Group""] against [BindGroupLayout "GBuffer Textures Bind Group"]
     - While calling [Device].CreateBindGroup([BindGroupDescriptor ""G-Buffer Textures Input Bind Group""]).

    // redacted...

    webgpu-sponza-demo/:1 WebGPU: too many warnings, no more warnings will be reported to the console for this GPUDevice.

If “30.2ms” is how long it took to render 1 frame, then label it “frame time”, not FPS (frames per second, or frame rate). Or if you want to show FPS, compute an actual FPS value, ie 1000/frame_time_ms.

(Frame time is a better metric for performance optimization work than the more popularly known frame rate, because frame time is linear, and frame rate isn’t.)

Firefox: 'Uncaught (in promise) ReferenceError: GPUShaderStage is not defined <anonymous> https://gnikoloff.github.io/webgpu-sponza-demo/assets/index-... <anonymous> https://gnikoloff.github.io/webgpu-sponza-demo/assets/index-... index-BeB41sTJ.js:422:31 "

Uncaught (in promise) ReferenceError: GPUShaderStage is not defined

    <anonymous> https://gnikoloff.github.io/webgpu-sponza-demo/assets/index-BeB41sTJ.js:422

    <anonymous> https://gnikoloff.github.io/webgpu-sponza-demo/assets/index-BeB41sTJ.js:2288

In this part of the code:

  private onKeyDown = (e: KeyboardEvent) => {
    // @ts-expect-error Deprecated but still available
    this.presedKeys[e.keyCode] = true
  }

You might notice this still looks pretty dated, and that's primarily because the scene doesn't include ambient occlusion, which is usually the most important lighting feature to fake for realistic looking lighting.

UE5 WebGPU demo: https://play.spacelancers.com/

Company website: https://simplystream.com/

edit: I see you also wrote a webgpu ray tracer, very impressive! I am slowly working on a browser based 3d game in my spare time, your projects are right on my interests. I see you used MIT license on your ray tracer, do you have a license for the sponza demo?

I suppose they are unchecked by default so that the demo runs out of the box on worse hardware.

Interesting key ordering in the instructions.

Out of curiosity, are there any of these features that couldn't be done with WebGL 2?

Did you do the whole reversing of the z trick?

I despise implementing cascaded shadow maps, and have a lot of respect for anyone that makes them work.

Unless this was meant to be more of a stress test?

WebGPT has entered the chat.

  webgpu-sponza-demo/:1 No available adapters.
  index-BeB41sTJ.js:2288 Uncaught (in promise) TypeError: 
  Cannot read properties of null (reading 'requestDevice')
    at yn.initialize (index-BeB41sTJ.js:2288:13559)
    at async index-BeB41sTJ.js:2288:13792