Three.js: Screenshots for CI on MacOS

[munsocket]

Description of the problem

OS

• [ ] Windows
• [x] macOS
• [ ] Linux

Right now all contributions in Three.js checked with regression tests. If you make a new PR you should also update screenshot in order to simplify code reviews. But current screenshot maker not works in MacOS, and somebody need to create screenshots on Windows or Linux for those users. This is not handy at all. If you have MacBook can you help me to fix CI script for MacOS?

Solution

Try to change flags to --use-gl=swiftshader in file below
https://github.com/mrdoob/three.js/blob/47e1e3a9a0ac7cf6848ee005c172912ba4f6eff5/test/e2e/puppeteer.js#L60
or add some another, like --disable-setuid-sandbox and check what gives this command

npm run make-screenshot

right now it produces black images on MacOS.

[Mugen87]

If I use --use-gl=swiftshader, the screenshot is not black anymore. This is the result for misc_controls_fly.

However, git still shows a diff so the result is not the same as before. Adding --disable-setuid-sandbox made no difference.

or add some another

Except of --disable-setuid-sandbox, what are these other options?

[munsocket]

If diff not big enough all is ok.

Here some another flags that modify render:

'--use-gl=desktop',
'--use-angle=gl',
'--use-gl=omesa',
'--enable-surface-synchronization',
'--run-all-compositor-stages-before-draw',
'--disable-threaded-animation',
'--disable-threaded-scrolling',
'--disable-checker-imaging'

[Mugen87]

--use-gl=desktop produce a black picture, too. However, using --use-angle=gl or --use-gl=omesa instead of --use-gl=egl also works. The other flags seem to have no effect.

[munsocket]

@Mugen87 intresing! I probably just add --use-gl=swiftshader. Seems that Chrome with this flag not use opengl backend but somehow render canvas with metal.

[mrdoob]

AFAIK, angle is GPU and swiftshader is CPU.

If we want to avoid GPU bugs, we may want to go with --user-gl=swiftshader everywhere...

[munsocket]

Wow, I am not thought that we can do it without GPU.

TEST PASSED! 356 screenshots correctly rendered.

Also we have all platforms inside CI and can check script with one button.