Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Flutter beta channel broken for fragment shaders (windows 11) #141838

Closed
jtmcdole opened this issue Jan 19, 2024 · 13 comments
Closed

Flutter beta channel broken for fragment shaders (windows 11) #141838

jtmcdole opened this issue Jan 19, 2024 · 13 comments
Labels
c: crash Stack traces logged to the console engine flutter/engine repository. See also e: labels. found in release: 3.19 Found to occur in 3.19 has reproducible steps The issue has been confirmed reproducible and is ready to work on P2 Important issues not at the top of the work list platform-web Web applications specifically r: fixed Issue is closed as already fixed in a newer version team-web Owned by Web platform team triaged-web Triaged by Web platform team

Comments

@jtmcdole
Copy link

Steps to reproduce

Clone a project like https://github.com/renancaraujo/turi
flutter run -d windows

Expected results

Turi running.
Web shaders working.

Actual results

Turi runs, but the screen gets corrupted with some black frames.

Also:
Using shaders on flutter web stopped working with a runtime error loading the shader.
flutter run -d chrome --web-renderer canvaskit

With Flutter 3.13.0: see screenshot
With Flutter 3.19.0-0.2.pre: exception (see logs)

3.19.0-0.2.pre compiled for web throws in some stack trace checking if the shader is a typeof string when its an object.

Code sample

none

Screenshots or Video

Screenshots / Video demonstration

image

Logs

Logs
══╡ EXCEPTION CAUGHT BY FLUTTER FRAMEWORK ╞═════════════════════════════════════════════════════════
The following FormatException was thrown:
Invalid Shader Data

When the exception was thrown, this was the stack:
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 297:3  throw_
lib/_engine/engine/shader_data.dart 24:7                                     fromBytes
lib/_engine/engine/canvaskit/painting.dart 305:46                            fromBytes
lib/_engine/engine/canvaskit/renderer.dart 464:32                            <fn>
dart-sdk/lib/async/zone.dart 1661:54                                         runUnary
dart-sdk/lib/async/future_impl.dart 162:18                                   handleValue
dart-sdk/lib/async/future_impl.dart 838:44                                   handleValueCallback
dart-sdk/lib/async/future_impl.dart 867:13                                   _propagateToListeners
dart-sdk/lib/async/future_impl.dart 643:5                                    [_completeWithValue]
dart-sdk/lib/async/future_impl.dart 713:7                                    callback
dart-sdk/lib/async/schedule_microtask.dart 40:11                             _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5                              _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 181:7           <fn>
════════════════════════════════════════════════════════════════════════════════════════════════════

Flutter Doctor output

Doctor output
[✓] Flutter (Channel beta, 3.19.0-0.2.pre, on Microsoft Windows [Version 10.0.22631.3007], locale en-US)
    • Flutter version 3.19.0-0.2.pre on channel beta at C:\Development\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision c1df7d07ac (29 hours ago), 2024-01-17 15:42:07 -0800
    • Engine revision 4f18bb4dcb
    • Dart version 3.3.0 (build 3.3.0-279.0.dev)
    • DevTools version 2.31.0

[✓] Windows Version (Installed version of Windows is version 10 or higher)

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at C:\Development\Android\Sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = C:\Development\Android\Sdk
    • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-10027231)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[✓] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.7.6)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.7.34221.43
    • Windows 10 SDK version 10.0.19041.0

[✓] Android Studio (version 2022.3)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • android-studio-dir = C:\Program Files\Android\Android Studio
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-10027231)

[✓] VS Code, 64-bit edition (version 1.85.1)
    • VS Code at C:\Program Files\Microsoft VS Code
    • Flutter extension version 3.80.0

[✓] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.22631.3007]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 120.0.6099.218
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 120.0.2210.133

[✓] Network resources
    • All expected network resources are available.

• No issues found!```

</details>
@huycozy huycozy added the in triage Presently being triaged by the triage team label Jan 19, 2024
@huycozy
Copy link
Member

huycozy commented Jan 19, 2024

Hi @jtmcdole
I ran the project on my Windows 10 (Windows desktop app) but can't see the screenshot you shared. The splash and gameplay scenes are showing on my end like this:

Demo (splash+game play)

image

image

Could you share how to produce the issue like in the screenshot you share?

When running on Web, the app is a black screen only and there is an exception from the output console. On Flutter stable 3.16.8, the exception has only the message Got object store box in database hydrated_box but on beta channel 3.19.0-0.2.pre, it also has the message FormatException: Invalid Shader Data like you shared above. The master channel has the same error as beta channel.

Exception on stable 3.16.8 - Web
Launching lib\main.dart on Chrome in debug mode...
This app is linked to the debug service: ws://127.0.0.1:52440/gwPuHYsLAV8=/ws
Debug service listening on ws://127.0.0.1:52440/gwPuHYsLAV8=/ws
Connecting to VM Service at ws://127.0.0.1:52440/gwPuHYsLAV8=/ws
Got object store box in database hydrated_box.
[log] RangeError (index): Index out of range: index should be less than 5: 19
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 294:3  throw_
dart-sdk/lib/_internal/js_dev_runtime/private/js_array.dart 610:7            _set]
lib/_engine/engine/shader_data.dart 56:15                                    fromBytes
lib/_engine/engine/canvaskit/painting.dart 305:46                            fromBytes
lib/_engine/engine/canvaskit/renderer.dart 397:32                            <fn>
dart-sdk/lib/async/zone.dart 1661:54                                         runUnary
dart-sdk/lib/async/future_impl.dart 162:18                                   handleValue
dart-sdk/lib/async/future_impl.dart 846:44                                   handleValueCallback
dart-sdk/lib/async/future_impl.dart 875:13                                   _propagateToListeners
dart-sdk/lib/async/future_impl.dart 647:5                                    [_completeWithValue]
dart-sdk/lib/async/future_impl.dart 721:7                                    callback
dart-sdk/lib/async/schedule_microtask.dart 40:11                             _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5                              _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 181:7           <fn>

@huycozy huycozy added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jan 19, 2024
@jtmcdole
Copy link
Author

I ran the project on my Windows 10 (Windows desktop app) but can't see the screenshot you shared. The splash and gameplay scenes are showing on my end like this:

The screen shot is from a private repo. It's only Flutter with a single fragment shader- and that's the "good case" (i.e. Flutter Stable). The bad case is the logs.

gameplay scenes are showing on my end like this:

Yes, so when I run Turi, it runs for the first part, but when I get to the jumping phase; the graphics get corrupted.

I probably should not have mixed windows + web in the same bug report. The gits of it is:

  • Turi runs but gets corrupted on Windows with Flutter Beta
  • Personal planet shader does not run on Windows or Web with Flutter Beat - does on Stable.

@github-actions github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jan 19, 2024
@jtmcdole
Copy link
Author

3.19.0-0.1.pre - planet shader works on windows, not on web.
3.19.0-0.2.pre - planet shader works on windows, not on web.

@parlough
Copy link
Member

parlough commented Jan 19, 2024

\cc @jonahwilliams For any potential insights.

@huycozy
Copy link
Member

huycozy commented Jan 22, 2024

Turi runs but gets corrupted on Windows with Flutter Beta

@jtmcdole Do you mean these spots in these red circles? If they are not, could you please share a demo for the issue?

Demo screenshot

image

Please split this into separate issues for tracking them better. Thank you!

@huycozy huycozy added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jan 22, 2024
@jtmcdole
Copy link
Author

@jtmcdole Do you mean these spots in these red circles? If they are not, could you please share a demo for the issue?

No; though I do see those. What I see is a black splotch that covers the middle of the screen.

@github-actions github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jan 22, 2024
@huycozy
Copy link
Member

huycozy commented Jan 23, 2024

What I see is a black splotch that covers the middle of the screen.

I just ran the project on Windows 11 machine but can't see this. Could you share a demo screenshot?

For the team to investigate this issue easier, could you narrow down and provide a completed and minimal reproducible code sample ?

@huycozy huycozy added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jan 23, 2024
@jtmcdole
Copy link
Author

I re-upgraded to the beta channel and the only glitches I'm getting now are the green dots mentioned before.

@github-actions github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jan 25, 2024
@jtmcdole
Copy link
Author

I do still get shader errors when running a single fragment shader in chrome:

This app is linked to the debug service: ws://127.0.0.1:54308/iOQc166Qknk=/ws
js_primitives.dart:30 ══╡ EXCEPTION CAUGHT BY FLUTTER FRAMEWORK ╞═════════════════════════════════════════════════════════
js_primitives.dart:30 The following FormatException was thrown:
js_primitives.dart:30 Invalid Shader Data
js_primitives.dart:30 
js_primitives.dart:30 When the exception was thrown, this was the stack:
js_primitives.dart:30 dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 297:3  throw_
js_primitives.dart:30 lib/_engine/engine/shader_data.dart 24:7                                     fromBytes
js_primitives.dart:30 lib/_engine/engine/canvaskit/painting.dart 305:46                            fromBytes
js_primitives.dart:30 lib/_engine/engine/canvaskit/renderer.dart 464:32                            <fn>
js_primitives.dart:30 dart-sdk/lib/async/zone.dart 1661:54                                         runUnary
js_primitives.dart:30 dart-sdk/lib/async/future_impl.dart 162:18                                   handleValue
js_primitives.dart:30 dart-sdk/lib/async/future_impl.dart 838:44                                   handleValueCallback
js_primitives.dart:30 dart-sdk/lib/async/future_impl.dart 867:13                                   _propagateToListeners
js_primitives.dart:30 dart-sdk/lib/async/future_impl.dart 643:5                                    [_completeWithValue]
js_primitives.dart:30 dart-sdk/lib/async/future_impl.dart 713:7                                    callback
js_primitives.dart:30 dart-sdk/lib/async/schedule_microtask.dart 40:11                             _microtaskLoop
js_primitives.dart:30 dart-sdk/lib/async/schedule_microtask.dart 49:5                              _startMicrotaskLoop
js_primitives.dart:30 dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 181:7           <fn>
js_primitives.dart:30 ════════════════════════════════════════════════════════════════════════════════════════════════════

@huycozy
Copy link
Member

huycozy commented Jan 25, 2024

I re-upgraded to the beta channel and the only glitches I'm getting now are the green dots mentioned before.

I'm not sure if this is an issue as it's a complex project that needs to dig dive. It would be better if there is a minimal sample code to reproduce it.

I will label this issue for the error on Web platform: Invalid Shader Data. If you also agree this issue should only centralize on issue on Web, please update the corresponding title. Thanks!

flutter doctor -v (stable, beta and master)
[!] Flutter (Channel stable, 3.16.8, on Microsoft Windows [Version 10.0.22000.2538], locale en-US)
    • Flutter version 3.16.8 on channel stable at C:\WORKING\SDK\flutter
    ! Warning: `flutter` on your path resolves to C:\Aliases\flutter.bat, which is not inside your current Flutter SDK checkout at C:\WORKING\SDK\flutter. Consider adding
      C:\WORKING\SDK\flutter\bin to the front of your path.
    ! The dart binary is not on your path. Consider adding C:\WORKING\SDK\flutter\bin to your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 67457e669f (5 days ago), 2024-01-16 16:22:29 -0800
    • Engine revision 6e2ea58a5c
    • Dart version 3.2.5
    • DevTools version 2.28.5
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[√] Windows Version (Installed version of Windows is version 10 or higher)

[X] Android toolchain - develop for Android devices
    X 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/windows#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
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.6.5)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.6.33829.357
    • Windows 10 SDK version 10.0.22000.0

[!] 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/windows#android-setup for detailed instructions).

[√] VS Code (version 1.85.2)
    • VS Code at C:\Users\huynq\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.80.0

[√] Connected device (2 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.22000.2538]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 120.0.6099.217

[√] Network resources
    • All expected network resources are available.

! Doctor found issues in 3 categories.
[!] Flutter (Channel master, 3.19.0-9.0.pre.50, on Microsoft Windows [Version 10.0.22000.2538], locale en-US)
    • Flutter version 3.19.0-9.0.pre.50 on channel master at C:\WORKING\SDK\flutter_master
    ! Warning: `flutter` on your path resolves to C:\Aliases\flutter.bat, which is not inside your current Flutter SDK checkout at C:\WORKING\SDK\flutter_master. Consider
      adding C:\WORKING\SDK\flutter_master\bin to the front of your path.
    ! The dart binary is not on your path. Consider adding C:\WORKING\SDK\flutter_master\bin to your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5dea6b994e (13 hours ago), 2024-01-21 12:01:23 -0500
    • Engine revision a7b207d5a1
    • Dart version 3.4.0 (build 3.4.0-52.0.dev)
    • DevTools version 2.31.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.

[√] Windows Version (Installed version of Windows is version 10 or higher)

[X] Android toolchain - develop for Android devices
    X 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/windows#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
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.6.5)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.6.33829.357
    • Windows 10 SDK version 10.0.22000.0

[!] 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/windows#android-setup for detailed instructions).

[√] VS Code (version 1.85.2)
    • VS Code at C:\Users\huynq\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.80.0

[√] Connected device (2 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.22000.2538]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 120.0.6099.217

[√] Network resources
    • All expected network resources are available.

! Doctor found issues in 3 categories.
[!] Flutter (Channel beta, 3.19.0-0.2.pre, on Microsoft Windows [Version 10.0.22000.2538], locale en-US)
    • Flutter version 3.19.0-0.2.pre on channel beta at C:\WORKING\SDK\flutter
    ! Warning: `flutter` on your path resolves to C:\Aliases\flutter.bat, which is not inside your current Flutter SDK checkout at C:\WORKING\SDK\flutter. Consider adding
      C:\WORKING\SDK\flutter\bin to the front of your path.
    ! The dart binary is not on your path. Consider adding C:\WORKING\SDK\flutter\bin to your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision c1df7d07ac (4 days ago), 2024-01-17 15:42:07 -0800
    • Engine revision 4f18bb4dcb
    • Dart version 3.3.0 (build 3.3.0-279.0.dev)
    • DevTools version 2.31.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.

[√] Windows Version (Installed version of Windows is version 10 or higher)

[X] Android toolchain - develop for Android devices
    X 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/windows#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
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.6.5)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.6.33829.357
    • Windows 10 SDK version 10.0.22000.0

[!] 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/windows#android-setup for detailed instructions).

[√] VS Code (version 1.85.2)
    • VS Code at C:\Users\huynq\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.80.0

[√] Connected device (2 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.22000.2538]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 120.0.6099.217

[√] Network resources
    • All expected network resources are available.

! Doctor found issues in 3 categories.

@huycozy huycozy added c: crash Stack traces logged to the console engine flutter/engine repository. See also e: labels. platform-web Web applications specifically has reproducible steps The issue has been confirmed reproducible and is ready to work on team-web Owned by Web platform team found in release: 3.19 Found to occur in 3.19 and removed in triage Presently being triaged by the triage team labels Jan 25, 2024
@yjbanov yjbanov added P1 High-priority issues at the top of the work list triaged-web Triaged by Web platform team labels Jan 25, 2024
jason-simmons added a commit to jason-simmons/flutter_engine that referenced this issue Jan 30, 2024
auto-submit bot pushed a commit to flutter/engine that referenced this issue Feb 15, 2024
This PR changes the ShaderData construction on canvaskit to consider array uniforms. 

flutter/flutter#141296

flutter/flutter#141838

[C++, Objective-C, Java style guides]: https://github.com/flutter/engine/blob/main/CONTRIBUTING.md#style
sealesj pushed a commit to sealesj/engine that referenced this issue Feb 15, 2024
This PR changes the ShaderData construction on canvaskit to consider array uniforms. 

flutter/flutter#141296

flutter/flutter#141838

[C++, Objective-C, Java style guides]: https://github.com/flutter/engine/blob/main/CONTRIBUTING.md#style
@yjbanov yjbanov added P2 Important issues not at the top of the work list and removed P1 High-priority issues at the top of the work list labels Feb 22, 2024
@bleroux
Copy link
Contributor

bleroux commented Feb 28, 2024

Closing as fixed because flutter/engine#49754 has landed

@bleroux bleroux closed this as completed Feb 28, 2024
@bleroux bleroux added the r: fixed Issue is closed as already fixed in a newer version label Feb 28, 2024
@renancaraujo
Copy link
Contributor

Hello there,
Will this cherrypicked into the stable channel?
As of right now, no fragment shaders work on the web on the stable channel.

Copy link

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 14, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
c: crash Stack traces logged to the console engine flutter/engine repository. See also e: labels. found in release: 3.19 Found to occur in 3.19 has reproducible steps The issue has been confirmed reproducible and is ready to work on P2 Important issues not at the top of the work list platform-web Web applications specifically r: fixed Issue is closed as already fixed in a newer version team-web Owned by Web platform team triaged-web Triaged by Web platform team
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants