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

Add Display P3 wide gamut colors profile to Flutter (a.k.a. enable 25% more colors in Flutter) #55092

Closed
tomasbaran opened this issue Apr 18, 2020 · 62 comments
Labels
a: fidelity Matching the OEM platforms better c: proposal A detailed proposal for a change to Flutter customer: crowd Affects or could affect many people, though not necessarily a specific customer. engine flutter/engine repository. See also e: labels. P2 Important issues not at the top of the work list platform-android Android applications specifically platform-ios iOS applications specifically

Comments

@tomasbaran
Copy link

Use case

25% more colors

First off, my app is full of imagery. iPhones (since iPhone 7), iPads, Macs and Android devices have been using Display P3 wide gamut for some years now. It's kinda last century to give users the old sRGB colors, when their phones support the wider P3 gamut that provides 25% larger color space. Important especially for images.

Color discrepancy btw iOS and Android

Second, I'm not sure it's related to the same issue but there is a discrepancy between colors on Android and iOS when running from the same Flutter codebase. More here: #39113

Flutter shall achieve the same quality as the native code

Third, when writing a native iOS app, you can choose which Color Profile you want to write the app in (sRGB/P3). So, when choosing to write a Flutter app (instead of a native one), you are limited and won't achieve the same results. We want to achieve the same in Flutter as in native!

Proposal

Please, add an option to choose which color Profile we want to write Flutter apps, so they truly are beautiful as they are meant be. It is one of the Flutter pillars, right?

More info by Apple, Google

@tomasbaran
Copy link
Author

@brianosman I guess, you know more about this topic. Can you shed some light on it? Thanks, Brian.

@VladyslavBondarenko VladyslavBondarenko added engine flutter/engine repository. See also e: labels. c: proposal A detailed proposal for a change to Flutter labels Apr 20, 2020
@fredlee12345678
Copy link

@tomasbaran @brianegan do you have plan on adding Display P3 to Flutter?

@tomasbaran
Copy link
Author

@fredlee12345678 I hope @brianegan will be able to tell us more about this topic or even better I hope he or someone else will be able to implement this feature.

I just need that feature in my apps but since I'm just starting with app development—I'm not qualified for implementing it in Flutter.

@tomasbaran
Copy link
Author

But looking at Apple instructions (https://developer.apple.com/videos/play/wwdc2017/821/) it may not be that difficult to implement:

Captura de pantalla 2020-05-13 a las 11 30 04

@brianegan
Copy link
Contributor

Hey all -- I seem to have been tagged on this one, but I think I'm the wrong person ^^

@fredlee12345678
Copy link

It seems none follow this issue?

@kf6gpe kf6gpe added the P3 Issues that we currently consider unimportant label Dec 10, 2020
@xster xster added platform-android Android applications specifically platform-ios iOS applications specifically a: fidelity Matching the OEM platforms better P2 Important issues not at the top of the work list and removed P3 Issues that we currently consider unimportant labels Aug 5, 2021
@darshankawar darshankawar added the customer: crowd Affects or could affect many people, though not necessarily a specific customer. label Jan 20, 2022
@enqvida
Copy link

enqvida commented Mar 5, 2022

Wider colors profile should be one of the top priorities. We are in 2022, on devices with screens that are made for rich color presentations. Yet, no matter how great is the design of the app it still looks as soulless as windows 95.

@hiroshihorie
Copy link

hiroshihorie commented Mar 6, 2022

I agree with @enqvida , I thought "building beautiful UI" was a priority for Flutter.... but colors look ugly with Apple devices.

@Fnalsk
Copy link

Fnalsk commented Mar 6, 2022

I'd also like to add that in general, I feel that optimizing Flutter for usage with mobile devices should take priority over things like windows support. I can't speak for everyone, but I'd imagine that most people using Flutter currently are using it to develop cross platform mobile apps, without particularly caring about desktop. Even if someone wanted to build a desktop app, it would have to have a completely different UI from the corresponding mobile app to deliver a good user experience.

With respect to that this issue in particular being a P4 priority feels very inappropriate. Especially since it's almost 2 years old at this point.

@ndugger
Copy link

ndugger commented Apr 6, 2022

I am personally more invested in flutter from a desktop perspective, but being stuck in legacy color space when P3 support for web is right around the corner is definitely silly. +1 to prioritizing this higher.

I only just noticed this when I tried to introduce a box shadow and noticed that it's just as choppy if not more choppy than its web counterpart; really makes subtle lighting and shadow effects difficult to implement well.

@spkersten
Copy link
Contributor

It appears that on macOS Flutter uses Display P3 (even when it shouldn't). See #96733 (comment)

@Krispy145
Copy link

I really need display P3 for iOS soon. Are there any developments with this issue?

@kristapus
Copy link

I can't stand the way colors look on Flutter apps compared to others, when Flutter will make a use of P3 color gamut? Can't wait!

@StefanReinDexcom
Copy link

StefanReinDexcom commented May 30, 2022

Here is some information I could gather:

Chromium

Example for P3 (works on a Chrome on a Mac):
https://webkit.org/blog-files/color-gamut/

Chromium has already an implementation for the P3 Color Space:
https://github.com/chromium/chromium/blob/main/ui/gfx/color_space.cc

Also worth a look:
https://github.com/chromium/chromium/blob/main/ui/gfx/color_space.cc#L696
https://github.com/chromium/chromium/blob/main/ui/gfx/color_space.cc#L915

Skia

Skia reads and writes the Color Space in the header.

SkImageInfo:
https://github.com/google/skia/blob/main/src/core/SkImageInfo.cpp

contains the SkColorSpace:

https://github.com/google/skia/blob/main/src/core/SkColorSpace.cpp
https://github.com/google/skia/blob/main/src/core/SkICC.cpp

Flutter

Unsure where Flutter finally draws, but these here look suspicious to me:

https://github.com/flutter/engine/blob/main/shell/platform/darwin/ios/ios_surface_software.mm#L62
https://github.com/flutter/engine/blob/main/shell/common/rasterizer.cc#L286
https://github.com/flutter/engine/blob/main/flow/layers/offscreen_surface.cc#L19

If we would have somewhere an attribute we can pass through from Flutter, we could exchange the calls here:

SkColorSpace::MakeSRGB()

with this here (or something configurable actually):

SkColorSpace::MakeRGB(SkNamedTransferFn::kLinear, SkNamedGamut::kDisplayP3)

Edit:

What about the following:

  1. sRGB as default Color Profile, as it already is right now.
  2. Check for every image if it has an attached Color Profile which is known to Skia and if there is no override (see point 4.), use that.
  3. Let the developer set a Color Profile for the apps User Interface (e.g. P3 for all the rendered Widgets).
  4. Allow the developer also to override the Color Profile for the whole rendered screen (in case he does not want to have different profiles attached on images and them being also differently rendered).

If I got all this wrong, please let us know what needs to be done or how to approach this.

Thanks,
Stefan

@serena7889
Copy link

Our development team has transitioned to flutter because of the speed it allows us to develop for all the platforms we're trying to reach, but with design being such an important part of out product, not being able to use DisplayP3 colors (particularly on iOS) might be a deal breaker for us.

I'd like to request the priority of this gets increased due to how drastic the difference between Flutter apps (with sRGB) and native apps (with DisplayP3). Until this is sorted, for us and many other teams, Flutter is not a viable alternative.

@StefanReinDexcom
Copy link

StefanReinDexcom commented Jul 7, 2022

@serena7889 I've seen that you forked the Flutter Engine.

Could you get it working? I would be open to invest my time into this and help.
Please let me know, because chances are people will try in parallel, like me (I originally would start in a couple of weeks and try myself).
I've followed you and put my email into my bio on GitHub - don't know how I otherwise could email you about this.

My naive approach would be first that I change all the occurrences I mentioned above with SkNamedGamut::kDisplayP3 and then compile the code and see what happens.

Thanks,
Stefan

@armandojimenez
Copy link

Any plans for this?

@Elysium-Planitia
Copy link

Elysium-Planitia commented Jul 18, 2022

This limitation means Flutter isn't suitable for anything related to exact color (not only images, but also design assets that need to be rendered correctly). Until it's fixed Flutter isn't an option for those cases.

@StefanReinDexcom
Copy link

StefanReinDexcom commented Jan 5, 2023

@knopp Skia does support P3. It works on Chrome, which uses Skia. Chromium has an implementation for this.

Somewhere up I even showed the LOC where to start from my point of view.

**Edit: Sorry, my bad!

@knopp
Copy link
Member

knopp commented Jan 5, 2023

I never questioned whether Skia supports P3, my question was about support separate buffer for color attachment and alpha channel, which would allow doing wide-gamut with 40bits per pixel instead of 64.

@gaaclarke
Copy link
Member

Thanks @knopp, that's a good assessment. I was considering the memory requirements and opt-in in my design doc. I was more fishing for the reporters' expectations. I think there are some misconceptions about what adding Display P3 will do =)

@gaaclarke
Copy link
Member

gaaclarke commented Jan 17, 2023

I've written up a design doc that proposes how to implement this feature in the engine: https://docs.google.com/document/d/17C7UAaLSX2hHOq-hYENeJ1HwMhPCL-e0pb9Pn8rXUok/edit

TLDR: Expand the bitrate for render buffers and Display P3 textures to 64bits / pixel iOS and keep the color encoding in linear space. Add support for Display P3 images and smoother gradients, avoid any Dart API changes.

@Lospi
Copy link

Lospi commented Jan 26, 2023

Flutter Roadmap for 2023 confirmed the interest in implementing wide color gamut support!

Relatedly, we are investigating implementing wide color gamut support (probably starting with iOS), as it is a highly requested feature.

@leighajarett
Copy link
Contributor

Hi all! We added a new flag for wide gamut support on master. It would be great to get some testers! You can enable it with this flag. Make sure you're using Impeller and that you're running the app on a real device, not a simulator. Please send me a message on discord (@leighajarett) if you're giving it a try :)

@jabedamin
Copy link

Hi all! We added a new flag for wide gamut support on master. It would be great to get some testers! You can enable it with this flag. Make sure you're using Impeller and that you're running the app on a real device, not a simulator. Please send me a message on discord (@leighajarett) if you're giving it a try :)

Great news! I'd like to test it, what version of flutter is it available from?

@jmagman
Copy link
Member

jmagman commented Mar 14, 2023

flutter/engine#39111 behind the FLTEnableWideGamut Info.plist value on iOS only is available in Flutter 3.8.0-12.0.pre, so not quite yet in the beta channel. You'll need to try it on the master channel for now.

@jabedamin
Copy link

flutter/engine#39111 behind the FLTEnableWideGamut Info.plist value is available in Flutter 3.8.0-12.0.pre, so not quite yet in the beta channel. You'll need to try it on the master channel for now.

Thanks, that's useful. Of course is only an iOS setting, does this release also have support for android devices?

@jmagman
Copy link
Member

jmagman commented Mar 16, 2023

does this release also have support for android devices?

No, we started with iOS. From https://docs.google.com/document/d/17C7UAaLSX2hHOq-hYENeJ1HwMhPCL-e0pb9Pn8rXUok/edit#heading=h.t6z7bji7vfnm

I propose we should prioritize iOS since it represents our largest user base with access to wide gamut displays. Other platforms can be considered later. However, I did do some research above to convince the team that we aren't painting ourselves into the proverbial corner with respect to Android.

@jmagman
Copy link
Member

jmagman commented Mar 30, 2023

flutter/engine#39111 behind the FLTEnableWideGamut Info.plist value on iOS only is available in Flutter 3.8.0-12.0.pre

This is now in the beta channel.

SputNikPlop added a commit to muxable/rtchat that referenced this issue May 8, 2023
This was on my old computer it should be rolling around soon flutter/flutter#55092 some more animations and stuff can be added as well after flutter/flutter#48534
@textzenith
Copy link

textzenith commented May 10, 2023

However, I did do some research above to convince the team that we aren't painting ourselves into the proverbial corner with respect to Android.

I should hope so, I'm actually using Flutter because it's much better on Android than React Native (which is completely unusable). Other developers seem to love the other platforms because they focus on iOS, but as for me I see Flutter's usability on Android as a trump card. Don't drop the ball on Android!

SputNikPlop added a commit to muxable/rtchat that referenced this issue May 12, 2023
This was on my old computer it should be rolling around soon flutter/flutter#55092 some more animations and stuff can be added as well after flutter/flutter#48534
@fiercepark
Copy link

flutter/engine#39111 behind the FLTEnableWideGamut Info.plist value on iOS only is available in Flutter 3.8.0-12.0.pre

This is now in the beta channel.

21684140849_ pic copy
We have a great p3 colour space in flutter 3.10, a great milestone, but Color(0xff${hex}) is currently displayed incorrectly.

@gaaclarke
Copy link
Member

@fiercepark can you file an issue if you've identified a bug, please.

@jabedamin
Copy link

@jmagman We've upgraded an app to Flutter 3.10.1. And enabled FLTEnableWideGamut in info.plist as recommended in the flutter announcement (also tried with FLTEnableImpeller flag although that should be default in this flutter version - still no luck). On running the app the colours don't appear any differently? Is there something else I need to do in order to enable the feature? Or a certain Flutter method that replaces Color.fromRGB0(0, 209, 169,1)?

@gaaclarke
Copy link
Member

@jabedamin wide gamut colors are only displayed if you have wide gamut images or are using gradients. Please file an issue with a screenshot if you expect wide gamut colors and aren't seeing it.

@jabedamin
Copy link

@gaaclarke I see, I was hoping flutter objects would also support wide gamut colours in addition to images. For example Button color or Container(color: Colors.blueAccent), is that not supported? If not, any plans to support in the future? It's these colours that are sometimes more visibly dull than images.

@gaaclarke
Copy link
Member

@jabedamin we're never going to change the existing code to mean something different. We might add new colors in the future, something like Container(color: Color.displayP3(0.0, 0.0, 1.0, 1.0)).

@jabedamin
Copy link

@gaaclarke yes that would help hugely. I suspect many others are interested in this too, in order for Flutter UIs to level up to native apps on Swift.

This might be my lack of understanding on how the code behind the scenes renders colours in Flutter. I was thinking more in the sense of displaying colours based on available colour spaces on any given device. So when designing an app, if the designer uses for example RGB(0, 209, 169) on an object - this RGB code would not not change, but it would be displayed differently depending on the device and supported colour space.

@jtkeyva
Copy link

jtkeyva commented May 28, 2023

@gaaclarke and @jabedamin yeah this almost feels like a "gotcha" moment that was too good to be true. of course i appreciate the p3 support for images, i fought for it! i assumed from the title "Add Display P3 wide gamut colors profile to Flutter (a.k.a. enable 25% more colors in Flutter)" it would be 25% more colors across the entire app ui. seems a shame to have vibrant images and still a flat dull UI if it's capable.

the end user is the customer and the customer likes the bright shiny silky smooth end product. what can we do to push up the priority on this?
thanks

@gaaclarke
Copy link
Member

Okay, here's what we are going to do. This issue is very broad and I believe that the majority of what it represents has now been fulfilled on main. Namely:

  1. iOS Display P3 support
  2. Display wide gamut images correctly
  3. Take advantage of higher bits/pixel for gradients

All of that is on main and on by default now. So, I'm going to close this issue and open more specific issues that represent any remaining potential work that's been discussed here so people can discuss them / upvote them:

  1. Add support for Android -- [Impeller] Implement Wide Gamut colors for Vulkan #127852
  2. Add support for the Framework -- Implement wide gamut color support in the Framework #127855

If there is anything else I missed, please file an issue (including if you have found a bug in wide gamut image support).

@jtkeyva
Copy link

jtkeyva commented May 31, 2023

thank you!

for those who aren't following this closely, is it ok to post this in reddit r/flutterdev to inform people? just as i thought it was a huge win, i don't think the community there knows that it's only for wide gamut images.

is it ok to notify them ell them where to go to and discuss / upvote it if they find it important to them to include in the framework?

i don't want to get dinged for "farming" upvotes like someone warned about

@github-actions
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 Jun 14, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
a: fidelity Matching the OEM platforms better c: proposal A detailed proposal for a change to Flutter customer: crowd Affects or could affect many people, though not necessarily a specific customer. engine flutter/engine repository. See also e: labels. P2 Important issues not at the top of the work list platform-android Android applications specifically platform-ios iOS applications specifically
Projects
None yet
Development

No branches or pull requests