examples/subimage: SubImage as a destination should work more efficiently on browsers

[hajimehoshi]

Ebitengine Version

9aedafbb1af36e3a664d83417a79b15b39ec5fe6

Operating System

• [ ] Windows
• [ ] macOS
• [ ] Linux
• [ ] FreeBSD
• [ ] OpenBSD
• [ ] Android
• [ ] iOS
• [ ] Nintendo Switch
• [ ] Xbox
• [X] Web Browsers

Go Version (go version)

go version go1.19.2 darwin/amd64

What steps will reproduce the problem?

examples/subimage doesn't work efficiently on browsers. On MacBook Pro 2020 Chrome, the FPS was less than 10.

What is the expected result?

60 FPS.

What happens instead?

Less than 10 FPS.

Anything else you feel useful to add?

• The original issue was for DirectX (#2232), but this was resolved.
• WebGPU might improve the situation (#719)
• Desktop OpenGL doesn't have this issue.

[memmaker]

I experienced similar behavior, namely major slow-downs on Mac OS when adding

screen.SubImage(image.Rect(xPos, yPos, x+tilewidth, y+tileheight)).(*ebiten.Image).Fill(c.buffer[x][y].Background)

To a tight update loop for drawing cells.

[hajimehoshi]

@memmaker Which Ebitengine version did you use?

[hajimehoshi]

Calling DrawElements many times in one frame seems the cause.

[hajimehoshi]

I failed to find an easy solution for this issue with WebGL.

[memmaker]

I think this was back on 2.4.16. I am not a 100% sure though.

[hajimehoshi]

Interestingly this works very well in Firefox, but not in Chrome. Safari is between Chrome and Firefox.

[hajimehoshi]

I don't think there is an action item on this. I'll remove the milestone.

[hajimehoshi]

Hmm, this might be a sign to introduce WebGPU (#719) 🤔