flame-engine/flame

Flutter CanvasKit can't display spritesheets WebGL: INVALID_VALUE: texImage2D: width or height out of range

Closed this issue · 1 comments

thandal commented

What happened?

I have a Flutter web app that uses spritesheets.

On both Android and a real device, the spritesheet (about 30 frames of 256x256 sprites) does not appear. This used to work with the html renderer, but that has been deprecated.

There is a stream of errors in the chrome console: WebGL: INVALID_VALUE: texImage2D: width or height out of range

I believe it is related to flutter/flutter#140689 but I don't know if there is some downstream fix possible for flame?

What do you expect?

The spritesheet to show.

How can we reproduce this?

No response

What steps should take to fix this?

No response

Do have an example of where the bug occurs?

No response

Relevant log output

From the chrome console, the following error repeats for each frame:

canvaskit.js:22 WebGL: INVALID_VALUE: texImage2D: width or height out of range
makeTexture	@	canvaskit.js:22
methodCaller<() => unsigned int>	@	canvaskit.js:150
t	@	canvaskit.js:150
$func8716	@	canvaskit.wasm:0x4266e9
$func10758	@	canvaskit.wasm:0x4aea38
$func3818	@	canvaskit.wasm:0x1d757f
$func815	@	canvaskit.wasm:0x390c8
$func3827	@	canvaskit.wasm:0x1db416
$func2669	@	canvaskit.wasm:0x11e9e5
$func6773	@	canvaskit.wasm:0x37ed5a
$func9962	@	canvaskit.wasm:0x472d0f
$func1289	@	canvaskit.wasm:0x6ad51
$func2113	@	canvaskit.wasm:0xd3e56
$func2937	@	canvaskit.wasm:0x153465
$func10128	@	canvaskit.wasm:0x4829db
$func9956	@	canvaskit.wasm:0x471c1b
$func1162	@	canvaskit.wasm:0x6034e
$func2113	@	canvaskit.wasm:0xd3f06
$func2937	@	canvaskit.wasm:0x153465
$func10128	@	canvaskit.wasm:0x4829db
$func9956	@	canvaskit.wasm:0x471c1b
$func1162	@	canvaskit.wasm:0x6034e
$func9982	@	canvaskit.wasm:0x474224
$func910	@	canvaskit.wasm:0x44a8a
Canvas._drawPicture	@	canvaskit.js:109
a.Canvas.drawPicture	@	canvaskit.js:50
b3R	@	main.dart.js:48057
(anonymous)	@	main.dart.js:4080
aE	@	main.dart.js:56028
(anonymous)	@	main.dart.js:49895
(anonymous)	@	main.dart.js:5288
$2	@	main.dart.js:57845
t	@	main.dart.js:5274
bb7	@	main.dart.js:49938
QI	@	main.dart.js:49890
(anonymous)	@	main.dart.js:49405
(anonymous)	@	main.dart.js:5288
$2	@	main.dart.js:57845
t	@	main.dart.js:5274
bb6	@	main.dart.js:49407
Ii	@	main.dart.js:49401
(anonymous)	@	main.dart.js:48374
(anonymous)	@	main.dart.js:5288
$2	@	main.dart.js:57845
t	@	main.dart.js:5274
JM	@	main.dart.js:48394
(anonymous)	@	main.dart.js:49633
(anonymous)	@	main.dart.js:5288
$2	@	main.dart.js:57845
t	@	main.dart.js:5274
b3P	@	main.dart.js:49635
Oe	@	main.dart.js:49623
(anonymous)	@	main.dart.js:49748
(anonymous)	@	main.dart.js:5288
$2	@	main.dart.js:57845
t	@	main.dart.js:5274
aUN	@	main.dart.js:49766
M1	@	main.dart.js:49741
(anonymous)	@	main.dart.js:49718
(anonymous)	@	main.dart.js:5288
$2	@	main.dart.js:57845
t	@	main.dart.js:5274
aOr	@	main.dart.js:49740
Ez	@	main.dart.js:49709
(anonymous)	@	main.dart.js:49703
(anonymous)	@	main.dart.js:5288
$2	@	main.dart.js:57845
t	@	main.dart.js:5274
bbN	@	main.dart.js:49708
a1N	@	main.dart.js:49689
(anonymous)	@	main.dart.js:51754
(anonymous)	@	main.dart.js:5288
$2	@	main.dart.js:57845
t	@	main.dart.js:5274
bbI	@	main.dart.js:51756
R1	@	main.dart.js:51744
b1x	@	main.dart.js:103962
a_3	@	main.dart.js:95414
a_3	@	main.dart.js:109677
aKW	@	main.dart.js:95404
(anonymous)	@	main.dart.js:4080
aaZ	@	main.dart.js:104942
aaY	@	main.dart.js:104947
akB	@	main.dart.js:104931
aJC	@	main.dart.js:104903
(anonymous)	@	main.dart.js:4079
vk	@	main.dart.js:1234
$1	@	main.dart.js:50866
Cx	@	main.dart.js:58946
$1	@	main.dart.js:58962
c4m	@	main.dart.js:7818
(anonymous)	@	main.dart.js:7804

Execute in a terminal and put output into the code block below

[√] Flutter (Channel stable, 3.32.0, on Microsoft Windows [Version 10.0.22631.5624], locale en-US)

... but then running flutter web-serve with lots of flags to allow local LAN testing from android devices

Affected platforms

Web

Other information

No response

Are you interested in working on a PR for this?

  • I want to work on this
spydon commented

This is unfortunately not possible to fix from Flame's side, some platforms don't support massive images like that.
A workaround is to split up the spritesheet into several images.