flutter / flutter

Flutter makes it easy and fast to build beautiful apps for mobile and beyond
https://flutter.dev
BSD 3-Clause "New" or "Revised" License
163.02k stars 26.81k forks source link

Web WASM: "RuntimeError: memory access out of bounds" when loading Godot game in iframe #150119

Open uldall opened 2 weeks ago

uldall commented 2 weeks ago

Steps to reproduce

  1. Create Flutter application that opens Godot game in the WebViewWidget widget. For example this game.
  2. Build project using flutter build web --wasm.
  3. Open project in Chrome.

Note that a fix for webview_flutter_web is added to be able to use WebViewWidget with wasm.

Expected results

The game is shown like it is when not using --wasm: image

Actual results

The error is shown and the Godot game is not loaded: image

Code sample

Code sample ```dart import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; import 'package:webview_flutter_web/webview_flutter_web.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), useMaterial3: true, ), home: const MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({super.key, required this.title}); final String title; @override State createState() => _MyHomePageState(); } class _MyHomePageState extends State { WebViewController controller = WebViewController(); _MyHomePageState() { if (WebViewPlatform.instance is WebWebViewPlatform) { final WebWebViewController webWebController = controller.platform as WebWebViewController; webWebController.setIFrameCredentialless(true); } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: Theme.of(context).colorScheme.inversePrimary, title: Text(widget.title), ), body: WebViewWidget( controller: controller ..loadRequest(Uri.parse( 'https://godotengine.github.io/godot-demo-projects/2d/bullet_shower/'))), ); } } ```

Download the full sample here: https://github.com/uldall/wasmtestgodot

Screenshots or Video

Screenshots / Video demonstration [Upload media here]

Logs

Logs ```console skwasm.wasm:0xa0a8 Uncaught RuntimeError: memory access out of bounds at skwasm.wasm:0xa0a8 at skwasm.wasm:0x1e5318 at w._surface_renderPicturesOnWorker (skwasm.js:129:388) at f (skwasm.js:61:400) $free @ skwasm.wasm:0xa0a8 $surface_renderPicturesOnWorker @ skwasm.wasm:0x1e5318 w._surface_renderPicturesOnWorker @ skwasm.js:129 f @ skwasm.js:61 ```

Flutter Doctor output

Doctor output ```console $ flutter doctor -v [✓] Flutter (Channel stable, 3.22.2, on Fedora Linux 40 (Workstation Edition) 6.8.11-300.fc40.x86_64, locale en_US.UTF-8) • Flutter version 3.22.2 on channel stable at /home/uldall/git/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 761747bfc5 (7 days ago), 2024-06-05 22:15:13 +0200 • Engine revision edd8546116 • Dart version 3.4.3 • DevTools version 2.34.3 [✗] Android toolchain - develop for Android devices ✗ Unable to locate Android SDK. Install Android Studio from: https://developer.android.com/studio/index.html On first launch it will assist you in installing the Android SDK components. (or visit https://flutter.dev/docs/get-started/install/linux#android-setup for detailed instructions). If the Android SDK has been installed to a custom location, please use `flutter config --android-sdk` to update to that location. [✗] Chrome - develop for the web (Cannot find Chrome executable at google-chrome) ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable. [✗] Linux toolchain - develop for Linux desktop ✗ clang++ is required for Linux development. It is likely available from your distribution (e.g.: apt install clang), or can be downloaded from https://releases.llvm.org/ ✗ CMake is required for Linux development. It is likely available from your distribution (e.g.: apt install cmake), or can be downloaded from https://cmake.org/download/ ✗ ninja is required for Linux development. It is likely available from your distribution (e.g.: apt install ninja-build), or can be downloaded from https://github.com/ninja-build/ninja/releases • pkg-config version 2.1.0 ✗ GTK 3.0 development libraries are required for Linux development. They are likely available from your distribution (e.g.: apt install libgtk-3-dev) [!] Android Studio (not installed) • Android Studio not found; download from https://developer.android.com/studio/index.html (or visit https://flutter.dev/docs/get-started/install/linux#android-setup for detailed instructions). [✓] VS Code (version 1.89.1) • VS Code at /var/lib/flatpak/app/com.visualstudio.code/x86_64/stable/active/files/extra/vscode • Flutter extension version 3.90.0 [✓] Connected device (1 available) • Linux (desktop) • linux • linux-x64 • Fedora Linux 40 (Workstation Edition) 6.8.11-300.fc40.x86_64 [✓] Network resources • All expected network resources are available. ! Doctor found issues in 4 categories. ```
uldall commented 2 weeks ago

Note that I used this PR to get WebView to work on web: https://github.com/flutter/packages/pull/6792 as well as this branch to add the credentialless attribute: https://github.com/ThomasAunvik/flutter-packages/tree/wasmcredentialless

uldall commented 2 weeks ago

Further testing shows that the error also happens on other simple HTML websites, so maybe it isn't related to some Godot specific functionality (like WebGL). I was however able to load pages at some point, so I am a bit confused about what causes it to work. It is however super easy to reproduce the error as seen in the example code.

mkustermann commented 2 weeks ago

@uldall have you tried building & running with the -O1 optimization flag (the default -O4 is very aggressive and can sometimes make errors appear much later and therefore in seemingly unrelated places)?

uldall commented 2 weeks ago

@mkustermann I tried this now: $ flutter build web --wasm --no-strip-wasm -O1 (And without the --no-strip-wasm). Unfortunately it didn't make a difference.

darshankawar commented 2 weeks ago

Thanks for the report. I was able to replicate the reported behavior using the details provided.

stable, master flutter doctor -v ``` [!] Flutter (Channel stable, 3.22.2, on macOS 12.2.1 21D62 darwin-x64, locale en-GB) • Flutter version 3.22.2 on channel stable at /Users/dhs/documents/fluttersdk/flutter ! Warning: `flutter` on your path resolves to /Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter. Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path. ! Warning: `dart` on your path resolves to /Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter. Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path. • Upstream repository https://github.com/flutter/flutter.git • Framework revision 761747bfc5 (33 hours ago), 2024-06-05 22:15:13 +0200 • Engine revision edd8546116 • Dart version 3.4.3 • DevTools version 2.34.3 • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades. [!] Xcode - develop for iOS and macOS (Xcode 12.3) • Xcode at /Applications/Xcode.app/Contents/Developer ! Flutter recommends a minimum Xcode version of 13. Download the latest version or update via the Mac App Store. • CocoaPods version 1.11.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] VS Code (version 1.62.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.21.0 [✓] Connected device (5 available) • SM G975F (mobile) • RZ8M802WY0X • android-arm64 • Android 11 (API 30) • Darshan's iphone (mobile) • 21150b119064aecc249dfcfe05e259197461ce23 • ios • iOS 14.4.1 18D61 • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729 • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator) • macOS (desktop) • macos • darwin-x64 • Mac OS X 10.15.4 19E2269 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 98.0.4758.80 [✓] HTTP Host Availability • All required HTTP hosts are available ! Doctor found issues in 1 category. [!] Flutter (Channel master, 3.23.0-13.0.pre.212, on macOS 12.2.1 21D62 darwin-x64, locale en-GB) • Flutter version 3.23.0-13.0.pre.212 on channel master at /Users/dhs/documents/fluttersdk/flutter ! Warning: `flutter` on your path resolves to /Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter. Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path. ! Warning: `dart` on your path resolves to /Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter. Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path. • Upstream repository https://github.com/flutter/flutter.git • Framework revision 7b6d667701 (7 hours ago), 2024-06-12 19:34:52 -0400 • Engine revision c7fcbfce60 • Dart version 3.5.0 (build 3.5.0-250.0.dev) • DevTools version 2.36.0 • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades. [!] Android toolchain - develop for Android devices (Android SDK version 30.0.3) • Android SDK at /Users/dhs/Library/Android/sdk ✗ cmdline-tools component is missing Run `path/to/sdkmanager --install "cmdline-tools;latest"` See https://developer.android.com/studio/command-line for more details. ✗ Android license status unknown. Run `flutter doctor --android-licenses` to accept the SDK licenses. See https://flutter.dev/docs/get-started/install/macos#android-setup for more details. [✓] Xcode - develop for iOS and macOS (Xcode 13.2.1) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 13C100 • CocoaPods version 1.11.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] IntelliJ IDEA Ultimate Edition (version 2021.3.2) • IntelliJ at /Applications/IntelliJ IDEA.app • Flutter plugin version 65.1.4 • Dart plugin version 213.7228 [✓] VS Code (version 1.62.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.29.0 [✓] Connected device (3 available) • Darshan's iphone (mobile) • 21150b119064aecc249dfcfe05e259197461ce23 • ios • iOS 15.3.1 19D52 • macOS (desktop) • macos • darwin-x64 • macOS 12.2.1 21D62 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 109.0.5414.119 [✓] Network resources • All expected network resources are available. ! Doctor found issues in 1 category. [!] Xcode - develop for iOS and macOS (Xcode 12.3) • Xcode at /Applications/Xcode.app/Contents/Developer ! Flutter recommends a minimum Xcode version of 13. Download the latest version or update via the Mac App Store. • CocoaPods version 1.11.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] VS Code (version 1.62.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.21.0 [✓] Connected device (5 available) • SM G975F (mobile) • RZ8M802WY0X • android-arm64 • Android 11 (API 30) • Darshan's iphone (mobile) • 21150b119064aecc249dfcfe05e259197461ce23 • ios • iOS 14.4.1 18D61 • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729 • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator) • macOS (desktop) • macos • darwin-x64 • Mac OS X 10.15.4 19E2269 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 98.0.4758.80 [✓] HTTP Host Availability • All required HTTP hosts are available ! Doctor found issues in 1 category. ```
mkustermann commented 2 weeks ago

@mkustermann I tried this now: $ flutter build web --wasm --no-strip-wasm -O1 (And without the --no-strip-wasm). Unfortunately it didn't make a difference.

If using -O1 doesn't change the error and the error happens in skwasm.wasm then maybe the issue is in flutter engine /cc @eyebrowsoffire

AbhishekDoshi26 commented 2 weeks ago

I don't think this is limited to Godot game. I have my website migrated to wasm and it has carousel. Swiping on carousel for a longer time also created this issue:

main.dart.js:3304 Uncaught RuntimeError: memory access out of bounds at canvaskit.wasm:0x3abfc at canvaskit.wasm:0x29150 at Tb.save (canvaskit.js:115:52) at Gv.d6 (main.dart.js:26771:53) at B_.j6 (main.dart.js:26595:3) at KO.jU (main.dart.js:26486:28) at a1L.$0 (main.dart.js:26727:18) at Object.axo (main.dart.js:1160:18) at a1I.aj5 (main.dart.js:26715:3) at main.dart.js:27070:27