[BUG] Crash on project load: wgpu validation error on older GPUs (buffer alignment)

[AARAV-2530]

Platform

Windows 10 64 bit, latest ESU verion.

Browser

Zen 1.19.8b (Firefox 149.0.2) and Edge (147.0.3912.60)

Current Behavior

The application panics and fails to initialize a new project across multiple browsers (Edge and Zen/Firefox). The console reports a WebGPU validation error related to buffer alignment in the compositor layer, and I get shown a "unreachable executed" (or "unreachable" on Edge).

Console logs:

• In Zen (Firefox):

panicked at /home/heart/.cargo/registry/src/index.crates.io-1949cf8c6b5b557f/wgpu-29.0.1/src/backend/wgpu_core.rs:1409:26:
wgpu error: Validation Error

Caused by:
  In Device::create_render_pipeline, label = 'compositor-layer-pipeline'
    In the provided shader, the type given for group 1 binding 0 has a size of 40. As the device does not support `DownlevelFlags::BUFFER_BINDINGS_NOT_16_BYTE_ALIGNED`, the type must have a size that is a multiple of 16 bytes.



Stack:

a$@https://opencut.app/_next/static/chunks/f741412813bdb97f.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:6:15028
@https://opencut.app/_next/static/chunks/0180b4bf9eaaf0d7.wasm?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:wasm-function[4253]:0x27bcb7
@https://opencut.app/_next/static/chunks/0180b4bf9eaaf0d7.wasm?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:wasm-function[1937]:0x2311e5
@https://opencut.app/_next/static/chunks/0180b4bf9eaaf0d7.wasm?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:wasm-function[3059]:0x25d499
@https://opencut.app/_next/static/chunks/0180b4bf9eaaf0d7.wasm?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:wasm-function[820]:0x1159ec
@https://opencut.app/_next/static/chunks/0180b4bf9eaaf0d7.wasm?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:wasm-function[653]:0x9b490
@https://opencut.app/_next/static/chunks/0180b4bf9eaaf0d7.wasm?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:wasm-function[3319]:0x26296e
@https://opencut.app/_next/static/chunks/0180b4bf9eaaf0d7.wasm?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:wasm-function[3333]:0x263ad8
o@https://opencut.app/_next/static/chunks/f741412813bdb97f.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:5:3908
ensureInitialized@https://opencut.app/_next/static/chunks/f741412813bdb97f.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:33:277657
render@https://opencut.app/_next/static/chunks/f741412813bdb97f.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:33:288067
async*renderToCanvas@https://opencut.app/_next/static/chunks/f741412813bdb97f.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:33:288248
updateThumbnailFromTimeline@https://opencut.app/_next/static/chunks/f741412813bdb97f.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:33:298901
loadProject@https://opencut.app/_next/static/chunks/f741412813bdb97f.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:33:292398
async*g/</<@https://opencut.app/_next/static/chunks/32ab2c2dd7ddbb3c.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:11:55770
async*g/<@https://opencut.app/_next/static/chunks/32ab2c2dd7ddbb3c.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:11:56154
ih@https://opencut.app/_next/static/chunks/657f596438d892c4.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:1:101211
uf@https://opencut.app/_next/static/chunks/657f596438d892c4.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:1:125061
uc@https://opencut.app/_next/static/chunks/657f596438d892c4.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:1:124725
uf@https://opencut.app/_next/static/chunks/657f596438d892c4.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:1:125043
uc@https://opencut.app/_next/static/chunks/657f596438d892c4.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:1:124725
uf@https://opencut.app/_next/static/chunks/657f596438d892c4.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:1:125043
uc@https://opencut.app/_next/static/chunks/657f596438d892c4.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:1:124725
uf@https://opencut.app/_next/static/chunks/657f596438d892c4.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:1:125043
uc@https://opencut.app/_next/static/chunks/657f596438d892c4.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:1:124725
uf@https://opencut.app/_next/static/chunks/657f596438d892c4.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:1:125108
uc@https://opencut.app/_next/static/chunks/657f596438d892c4.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:1:124725
uf@https://opencut.app/_next/static/chunks/657f596438d892c4.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:1:125108
uc@https://opencut.app/_next/static/chunks/657f596438d892c4.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:1:124725
uf@https://opencut.app/_next/static/chunks/657f596438d892c4.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:1:125043
uc@https://opencut.app/_next/static/chunks/657f596438d892c4.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:1:124725
uf@https://opencut.app/_next/static/chunks/657f596438d892c4.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:1:125108
uc@https://opencut.app/_next/static/chunks/657f596438d892c4.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:1:124725
uf@https://opencut.app/_next/static/chunks/657f596438d892c4.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:1:125043
uc@https://opencut.app/_next/static/chunks/657f596438d892c4.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:1:124725
uf@https://opencut.app/_next/static/chunks/657f596438d892c4.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:1:125043
uc@https://opencut.app/_next/static/chunks/657f596438d892c4.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:1:124725
uf@https://opencut.app/_next/static/chunks/657f596438d892c4.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:1:125043
uc@https://opencut.app/_next/static/chunks/657f596438d892c4.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:1:124725
uf@https://opencut.app/_next/static/chunks/657f596438d892c4.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:1:125043
uc@https://opencut.app/_next/static/chunks/657f596438d892c4.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:1:124725
uf@https://opencut.app/_next/static/chunks/657f596438d892c4.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:1:125108
uc@https://opencut.app/_next/static/chunks/657f596438d892c4.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:1:124725
uf@https://opencut.app/_next/static/chunks/657f596438d892c4.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:1:125043
uc@https://opencut.app/_next/static/chunks/657f596438d892c4.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:1:124725


opencut_wasm_bg.js:835:17

• In Edge (Chromium):

1460da2f-db6a-42f1-a168-d297bb129eb9:1 No available adapters.
f741412813bdb97f.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:6 panicked at /home/heart/.cargo/registry/src/index.crates.io-1949cf8c6b5b557f/wgpu-29.0.1/src/backend/wgpu_core.rs:1409:26:
wgpu error: Validation Error

Caused by:
  In Device::create_render_pipeline, label = 'compositor-layer-pipeline'
    In the provided shader, the type given for group 1 binding 0 has a size of 40. As the device does not support `DownlevelFlags::BUFFER_BINDINGS_NOT_16_BYTE_ALIGNED`, the type must have a size that is a multiple of 16 bytes.



Stack:

Error
    at a$ (https://opencut.app/_next/static/chunks/f741412813bdb97f.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:6:15028)
    at https://opencut.app/_next/static/chunks/0180b4bf9eaaf0d7.wasm?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:wasm-function[4253]:0x27bcb7
    at https://opencut.app/_next/static/chunks/0180b4bf9eaaf0d7.wasm?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:wasm-function[1937]:0x2311e5
    at https://opencut.app/_next/static/chunks/0180b4bf9eaaf0d7.wasm?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:wasm-function[3059]:0x25d499
    at https://opencut.app/_next/static/chunks/0180b4bf9eaaf0d7.wasm?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:wasm-function[820]:0x1159ec
    at https://opencut.app/_next/static/chunks/0180b4bf9eaaf0d7.wasm?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:wasm-function[653]:0x9b490
    at https://opencut.app/_next/static/chunks/0180b4bf9eaaf0d7.wasm?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:wasm-function[3319]:0x26296e
    at https://opencut.app/_next/static/chunks/0180b4bf9eaaf0d7.wasm?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:wasm-function[3333]:0x263ad8
    at o (https://opencut.app/_next/static/chunks/f741412813bdb97f.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:5:3908)
    at s.ensureInitialized (https://opencut.app/_next/static/chunks/f741412813bdb97f.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:33:277657)


t9 @ f741412813bdb97f.js?dpl=dpl_H5DYXbeyhh5chkWbjhaGKzmaX8PK:6

Environment:
Browsers tested: Microsoft Edge (Chromium), Zen Browser (Firefox-based), both of which are untampered, and official builds. Even after disabling all extensions, the behaviour stays same.
Action: Occurs immediately upon "New Project" creation, or opening, after about a second of loading.
Possible Cause: The compositor-layer-pipeline uses a 40-byte buffer which lacks 16-byte alignment required by some hardware/drivers, Edge also mentions missing adapters.
and, this PC uses the iGPU of Intel i3-3245 (Intel HD 4000).

URL before crash: https://opencut.app/projects
URL after crash (by clicking on New Project, or a existing, crashed project): https://opencut.app/editor/

Additional note: Another parking issue is logged in the console logs, which is not included here to avoid confusion. I will make another issue and comment with the link.

Expected Behavior

The project gets initiallized successfully and I get redirected to the editor.

Recurrence Probability

Always

Steps To Reproduce

1. Go to the projects page (https://opencut.app/projects), and create a New project using its button OR click on a previously created project (A bad project in my case, because it never gets created.)
2. You get shown "unreachable executed" if on Firefox or "unreachable" on Edge.

Anything else?

Screenshot on Zen:

Screenshot on Edge (kindly ignore the bookmark 😭):

[AARAV-2530]

The issue with the parking issue has been written and published at: #769