Issues when trying to develop with model-viewer

[hybridherbst]

Description

When trying to develop for and with model-viewer, I ran into a couple issues so I thought it makes sense to track those.

• scripts and pathes are set up for Linux/Mac only, don't work on Windows (probably just a / vs \ issue)
• when running the tests, at some point early the console just sat there idling - I just guessed from some of the debug logs that I needed to have Chrome installed (which makes sense), would be great if you add that to the dev docs (I usually do have it installed everywhere, but this was a fresh VM). Installed Chrome and re-run the command - works.
  
• I'm getting page crashes when khronos-AlphaBlendModeTest runs
  

OS

• Android
• iOS
• Linux
• MacOS
• Windows

[cdata]

Thanks for your on-going feedback and attention to these issues @soraryu 🙌

scripts and pathes are set up for Linux/Mac only, don't work on Windows (probably just a / vs \ issue

On this topic, we have a few outstanding issues (#562, #805) and as has been mentioned there and elsewhere, Windows development is an on-going blind spot for us. At Google, very few engineers develop on Windows, and all internal Google projects/products are developed in a Linux environment. The chances of us doing regular development on Windows in the future are very low. So, the only way we can offer support for Windows on the development side is if someone from the community can champion Windows-compatible development. PRs are welcome!

That said, it should be possible to install @google/model-viewer and @google/3dom as NPM dependencies on Windows and use them in your project. If that is not possible, then I would consider that a bug in our project that we can and will fix.

when running the tests, at some point early the console just sat there idling - I just guessed from some of the debug logs that I needed to have Chrome installed (which makes sense), would be great if you add that to the dev docs (I usually do have it installed everywhere, but this was a fresh VM). Installed Chrome and re-run the command - works.

This is kind of weird, and not entirely expected. We may have accidentally switched from running Chrome that is installed via puppeteer to using the locally installed Chrome. I would consider this a bug that we should look into.

I'm getting page crashes when khronos-AlphaBlendModeTest runs

I have seen this when running fidelity tests on low-end VMs (I always assumed it was due to exhausting system resources), but otherwise this is unexpected. I would be interested to hear what you find if you investigate this any further.

[hybridherbst]

Did some more tests with this, trying to get it to run on Windows.

• there's some issues in fetch-khronos-gltf-samples.sh that prevent it to run from Windows ( . not found)
• I was able to run it from WSL (after changing line ends from CRLF to LF, might be that git checkout from windows decided to change that)
• I was able to pingpong back and forth with some commands working in Powershell and some commands working in WSL/Ubuntu
• I was able to npm run build on WSL (yay!)
• npm run test on Windows always has issues with missing files (the ones in shared assets, which are clearly there)
• npm run test on WSL does not find / can't start ChromeHeadless and I couldn't find a way to install it
  • I tried https://stackoverflow.com/questions/54090298/karma-use-windows-chrome-from-wsl but then it's stuck on "Starting browser ChromeHeadless"

So to summarize: I was able to build on Windows with what feels like a pretty hacky workflow. I'm not able to run the automated tests, though (obviously not ideal).

Additionally I'm not sure if this is a bug: since none of the models can't be found my assumption would be that all tests related to that fail but some seem to still succeed - is this expected @elalish ?

[elalish]

@bsdorra has gotten this working a bit better on WSL and he said he might write up some tips that we can document.

[bsdorra]

@hybridherbst, @elalish I only figured out how to run the fidelity-tools. With 'npm run test' I also got stuck at some point...

Steps that worked for me so far:

• Managing the repo from WSL instead of Win gets rid of the problem with the line endings in bash scripts. It might make sense to enforce LF line ending for .sh files via .gitattribute. This would would stop git from messing with the line ending of those files on Windows if core.autocrlf=true (didn't test this though)

• npm install, boostrap and build from WSL just worked without issues

• npm run test (WSL): Also stuck on "Starting browser ChromeHeadless", no matter what I tried so far.

• npm run test (Win)

  • Most of the packages use the packages/shared-assets folder, which is getting simlinked into the project folders on setup. The simlink is of course not resolved by Windows, which is the source of the missing file issue. So I copied the shared-assets folder into the project folders manually. Not nice, but it works.
  • Test execution complains about missing modules
    npm install karma mocha karma-mocha chai karma-chai karma-mocha-reporter karma-chrome-launcher solves this. I guess those should have been installed during npm install from WSL, not sure why they're missing when running it from Windows.
  • Puppeteer needs to be reinstalled from Win side. This will fetch the windows chromium executable
    npm i puppeteer
  • npm run test should now successfully run through the 3dom tests. But is stuck again during model-viewer tests
    Error: Could not resolve import "@google/3dom/lib/facade/three-js/correlated-scene-graph.js" in "lib\three-components\gltf-instance\ModelViewerGLTFInstance.js". That's where I stopped digging into the test execution.

• render-fildelity-tools

  • npm update-screenshots (Win) fails because of missing Chromium. Reinstall puppeteer, as mentioned above, in the render-fidelity-tools subfolder fixed it. I had to remove the package-lock.json file before calling npm i puppeteer.
  • For some reason the rendered images all had a scrollbar on the right side. Which is weird, because the Chromium default should disable those. Enforcing it via flag didn't work either. Setting the fullPage flag for the screenshot function did get rid of the scrollbars, but messed up the image size. Settings the isMobile: true puppeteer launch flag solved the issue 💯

[elalish]

Wow, looks like we have some work to do for windows development still 😳. Thanks for the writeup. The issue with npm run test looks like maybe 3dom didn't get built, or the path to its library files got messed up. The issues with puppeteer might be avoidable with npm run watch:test which keeps a server open so you can run the tests by pointing your browser to the served URL. Still, there must be a way to make this work better. Wish I had a windows box to test on.

[hybridherbst]

One thing I also did is update the lerna config to only use packages/model-viewer. This avoids some of the build issues with the other packages, but still stuck running the tests.

Also, I had to run npm install from both Windows and WSL (and manually pull the khronos samples in Windows). Feels like there's not much missing but a bit.

EDIT: Oh, and I had to install rollup manually. Plus some paths didn't match between the installed rollup version and the one in use (?).

Edit 2: Also, since I went to the current master and threejs has been updated, I had to run npm install / npm bootstrap again, otherwise I was getting compile errors from threejs. This might be common knowledge but thought it would still be worth mentioning.

Sorry if I'm not much of help here, don't have much of a webdev background at all 😅