playcanvas / playcanvas/engine

Drag&Drop failing on Linux

Open
#7,456 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
16.8k
Forks
2k
Avg merge
4h 32m
Merged PRs (30d)
222

Description

When I Drag&Drop the BusterDrone glTF dir on the model-viewer, it simply errors and doesn't load anything - but no one can reproduce it on Mac or Windows (I use Linux Mint). Interestingly https://sandbox.babylonjs.com/ has the same bug, but then it works on https://gltf-viewer.donmccurdy.com/

TLDR:
Works:

Half-broken (does't work with dir drop, but half-works with selecting all individual files and then dropping):

Can't get it to work at all:

Steps to reproduce the problem:

  1. Go to https://playcanvas.com/model-viewer
  2. Drag&drop the dir of the BusterDrone glTF
  3. Open DevTools and see the "Network error"

Because it works in Linux/Firefox and @slimbuck tested on Mac/Chrome, I started to think it must be a Chrome bug, so I started an issue here too: https://issues.chromium.org/issues/404044460

From the technical POV, I figured that even the old playcanvas-gltf version works, so I just ported the Promise-based Drag&Drop code from this repo to the old playcanvas-gltf viewer in the hope it would crash too, so I could debug line by line - but it just kept working. So I'm just baffled still and hope this is actually a Chrome bug.

After digging more through the code I finally found:

this.supportsImageBitmap = !isSafari && typeof ImageBitmap !== 'undefined';

It is true on Chrome/Linux, but for some reason Chrome on Linux laggs behind at everything (e.g. WebGPU is still a headache too). Or maybe just another driver issue because NVIDIA can't write proper Linux drivers.

The code where it makes a difference:

https://github.com/playcanvas/engine/blob/03d30259c91af8f8f154f546b28ae7abc4886622/src/framework/parsers/texture/img.js#L63-L68

https://github.com/playcanvas/engine/blob/03d30259c91af8f8f154f546b28ae7abc4886622/src/framework/parsers/texture/img.js#L37-L47

We could rewrite the condition like:

- this.supportsImageBitmap = !isSafari && typeof ImageBitmap !== 'undefined'
+ this.supportsImageBitmap = !isSafari && typeof ImageBitmap !== 'undefined' && !(navigator.userAgent.includes('Chrome') && navigator.userAgent.includes('Linux'))

But then again, maybe it works on some Linux systems, uff - so it would be like: wait until error happens, reset the this.supportsImageBitmap and try again

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the directory drop on Linux Chrome at https://playcanvas.com/model-viewer, then inspect src/framework/parsers/texture/img.js around the linked ImageBitmap support checks and texture loading paths. Compare the behavior with individual-file drops and the working gltf-viewer. Done means BusterDrone glTF directory drops load without the network error on affected Linux systems, with the behavior verified across the relevant browser environments.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.