JSBeeb corruption in various browsers

[leenew]

Hi,

UPDATE: I AM SEEING CORRUPTION IN VARIOUS BROWSERS WITH VARIOUS GAMES. COULD ANYONE SEEING SCREEN CORRUPTION IN JSBEEB PLEASE POST THE DETAILS.

Would people mind playing "MAGIC EEL" from BEEBUG: http://www.bbcmicro.co.uk/game.php?id=621
I am experiencing graphical glitches around the play area but can't pin down why.
It could be browser related? I see glitches to the sides of the play area and sometimes a large glitch below the play area.
I get glitches with EDGE on WIN10 64bit.
I also see glitches with CHROME with WIN10 64bit.
FIREFOX seems fine with WIN10 64bit.
On my laptop WIN10 32 bit, EDGE seems fine.

Could I get some more results please?
You only have to play for 2 seconds. The glitches are very obvious from the beginning.
If it doesn't look like the screenshot in the link above then it is glitchy.
Please let me know if it does or doesn't work for you.


Lee.

[Deleted User 9295]

Could I get some more results please?

I see nothing obviously wrong here (MS Edge, Windows 10, 64-bits). Have you tried changing your graphics acceleration settings (if any)?

What happens with David Williams's rather more modern snake program here?

[lurkio]

Beebug's Magic Eel runs without any problems in Safari, Chrome and Firefox on 64-bit macOS Mojave.

Beebug's Magic Eel also runs without any problems in Chrome on Windows 7 in a 32-bit VM on macOS.

[lurkio]

No problems running Beebug's Magic Eel in JSBeeb on a real (non-VM) 64-bit Windows 8 PC in Chrome, Firefox, and Edge.

[BeebMaster]

You'll be glad to know I can break it.

That's on Firefox with Ubuntu 20.04.

[BeebMaster]

I'm not sure it is even playing correctly, can you not change direction between left and right, or up and down without losing a life?

[lurkio]

You'll be glad to know I can break it ... That's on Firefox with Ubuntu 20.04.

Do you have similar issues with any other games on bbcmicro.co.uk?

Magic Eel is playing normally for me, in JSBeeb on bbcmicro.co.uk, in several different browsers, on macOS and Windows. Plays like a normal Snake-type game.

[BeebMaster]

Some big problem with it generally I think, screen corruption on every mode change, and the cursor is wrong in mode 3 & 6:

Unless it's emulating a Beeb with knackered DRAMs?

[leenew]

I'm not sure it is even playing correctly, can you not change direction between left and right, or up and down without losing a life?

That's standard behaviour for all "Snake" games.
To change direction from up to down, you have to press UP then LEFT (or right) then DOWN.
You can't just press UP then DOWN as it is classed as "crashing into yourself"...

Lee.

[jimmy]

It breaks on my Ubuntu 20LTS Firefox 84 install as well...

Different corruption each time I try too. NVidia graphics card installed if that helps.

[lurkio]

It breaks on my Ubuntu 20LTS Firefox 84 install as well... Different corruption each time I try too. NVidia graphics card installed if that helps.

Do you have similar issues with any other games on bbcmicro.co.uk?


Are you seeing the same issues as BeebMaster? These issues don't seem to affect Magic Eel specifically -- they affect JSBeeb generally:

Some big problem with it [JSBeeb, the BBC Micro emulator in Javascript] generally I think, screen corruption on every mode change, and the cursor is wrong in mode 3 & 6

[BeebMaster]

My computer has an Nvidia graphics card as well.

But I just tried on the laptop with Ubuntu 18.04 and I still get screen corruption.

[leenew]

It breaks on my Ubuntu 20LTS Firefox 84 install as well...
MagicEel1.png
Different corruption each time I try too. NVidia graphics card installed if that helps.

That appears to be very similar to the corruption that I see.

[RobC]

I see it too using Chrome on Windows 10.

[lurkio]

I see it too using Chrome on Windows 10.

Do you see it only in Magic Eel or in other games too? And/or in JSBeeb generally?

[Deleted User 9295]

I see it too using Chrome on Windows 10.

I had not tried it in Chrome, but now I have (Windows 10, Dell XPS-13 laptop) and again I can't make it misbehave. This has the feel of not being a JSBeeb or browser issue, but something more fundamental in the graphics backend (e.g. GPU or WebGL drivers). If it was happening here I'd want to check if any updated drivers are available for download.

[BeebMaster]

When you change modes to a graphics mode on a real Beeb, you often get screen corruption for a fraction of a second until the screen finishes clearing. It's almost as if that is happening here, but the screen clearing part isn't working successfully, and something is also causing part of the corruption to occur in the border area which isn't normally accessible.

[BeebMaster]

Also I'm finding it drops a lot of keystrokes, don't know if that is related to the same thing, it seems to drop the 3rd keystroke quite often: 9 times out of 10 typing "MODE3" (for example) will give "MOE3".

[lurkio]

It breaks on my Ubuntu 20LTS Firefox 84 install as well ... MagicEel1.png ...

Not too long ago, I was seeing similar artefacts in JSBeeb on bbcmicro.co.uk in Firefox on macOS.

I found that the Firefox setting labelled "Use hardware acceleration" under "Performance" was unticked. (Whether it had always been unticked or whether it had become unticked during an update I don't know.) I enabled the setting, and the artefacts and graphics corruption went away.

[jimmy]

I've done some further testing. It does work on my machine using Chromium 88, so I guess my graphics driver is good enough?
It doesn't work using Firefox 85 (latest), and turning hardware acceleration off made no difference.
So into development tools I went and just started to look for errors and warnings. There is one near the start which caught my eye:

Code: Select all

Failed to create WebGL context: failIfMajorPerformanceCaveat: Compositor is not hardware-accelerated.

The line it was failing at was in canvas.js at:

Code: Select all

var gl = canvas.getContext('webgl', glAttrs) || canvas.getContext('experimental-webgl', glAttrs);

This line was not failing in Chromium, but it was in Firefox.
Searching for this message gave a few hits, and the page at https://bugzilla.mozilla.org/show_bug.cgi?id=1678652 talks about it. It suggested setting webgl.disable-fail-if-major-performance-caveat to true.
I did this and the corruption has almost gone - but now I just get a white border (single pixel) around the screen which flickers too much to be comfortable with. The flickering also affects every game so it's not usable.
Other workarounds were suggested but they seemed to involve (fairly big) code changes. It seems to be a Firefox 83 change, but it would be good to know if an ATI graphics card on Firefox 83+ has this problem too.
The graphics corruption can be seen on other games. The "Tapper" by MicroPower loading screen and "Hobgoblin" by Atlantis main menu screen are two examples.

[Deleted User 9295]

I guess my graphics driver is good enough?

At the link you gave is this comment: "I installed a more recent driver for my graphics card, now the bug is fixed for me". Later there's "we've included 'readback required for compositing' as a caveat" so it could still be a graphics driver capability issue, causing Firefox to refuse to create the WebGL context.

There's evidently some debate over whether Firefox is overreacting to the graphics driver issue by setting the 'major performance caveat' status, or whether it's the fault of the web page (I suppose JSBeeb in this case) for treating that as a failure.

[lurkio]

... I did this and the corruption has almost gone - but now I just get a white border (single pixel) around the screen which flickers too much to be comfortable with. The flickering also affects every game so it's not usable.

Not that it's a long-term solution, but does the flickering stop if you slightly resize the whole Firefox window?

[Matt Godbolt]

Hi all!

Thanks for taking the time to look in to this! jsbeeb does indeed use WebGL to put the screen up, and the fact it's failing is interesting. I mainly test with Chrome, and we know we've had folks on Windows occasionally report issues that go away when they upgrade their browser. I'm not sure what's going on here; it's pretty straightforward code.

For faster "service" (such as it is)... can you report and log these things on the jsbeeb issue tracker: https://github.com/mattgodbolt/jsbeeb/issues -- I get notified there and can look in. I was only pointed at this by a kindly person emailing me!

Thanks all, Matt

[Matt Godbolt]

Also I'm finding it drops a lot of keystrokes, don't know if that is related to the same thing, it seems to drop the 3rd keystroke quite often: 9 times out of 10 typing "MODE3" (for example) will give "MOE3".

I've seen this on machines that are already struggling: emulating a beeb in javascript is quite a "silly" thing to do, and it takes a lot of power. If the OpenGL acceleration has failed too, then it takes even more and so might miss keystrokes from time to time

[Deleted User 9295]

emulating a beeb in javascript is quite a "silly" thing to do

Is the 'fail if major performance caveat' setting, which looks to be a possible cause of the corruption issue reported here, something you have control over in JSBeeb? If I have understood correctly, it is typically set like this:

Code: Select all

var context = canvas.getContext('webgl', {'failIfMajorPerformanceCaveat': true});

[Matt Godbolt]

Quite possibly; I've not heard of this until this thread. Did this setting fix anything (I rather lost the thread, will re-read)?

[Matt Godbolt]

"corruption has almost gone" doesn't really sound like a fix, especially for what is ostensibly a "performance" thing, not a correctness. I'm really hoping not to get into the bad old days of having to detect individual browsers' foibles and have a load of workarounds for each; but...

[leenew]

It seems Tricky noticed this corruption last October.
https://github.com/mattgodbolt/jsbeeb/issues/309

Lee.

[Deleted User 9295]

Did this setting fix anything?

I don't think that's been established (I don't see any failure here anyway), but if setting failIfMajorPerformanceCaveat to false is easy, it could be a worthwhile thing to try, if only to eliminate it as a fix.

[Matt Godbolt]

I understand the point, but I'm reluctant to putt things I can't test or reproduce and might have unusual unintended side effects. That said: this is probably a strict improvement in this case (https://blog.tojicode.com/2013/12/faili ... great.html is a little less convincing but hey!)

Thanks all.