react-native-skia icon indicating copy to clipboard operation
react-native-skia copied to clipboard

Add Display P3 color space support for offscreen surfaces

Open Hello1nside opened this issue 4 months ago • 4 comments

Description

Add support for Display P3 color space in offscreen surfaces to match the onscreen rendering capabilities introduced in v2.0.1.

Problem

Currently, onscreen Canvas supports Display P3 color space on iOS (since v2.0.1, PR #3153), but offscreen surfaces created with MakeOffscreen() are limited to sRGB. This creates a significant color mismatch between what users see in the app and what gets saved/exported.

For photo/video editing apps, this discrepancy is critical - users edit with vibrant P3 colors on screen but receive duller sRGB colors in saved files.

Proposed Solution

Add optional configuration parameter to MakeOffscreen() to specify color space:

const surface = Skia.Surface.MakeOffscreen(width, height, {
  colorType: ColorType.RGBA_F16, // or RGBA_8888
  colorSpace: 'display-p3' // or 'srgb' for backwards compatibility
});

Related

Discussion: #3149 PR attempt: #3165 (not merged) Onscreen P3: #3153 (working since v2.0.1)

Environment

React Native Skia: ^2.0.1 Platform: iOS (P3 displays)

Hello1nside avatar Sep 06 '25 08:09 Hello1nside

Thank you for bringing this up. I would like to go ahead and merge/release https://github.com/Shopify/react-native-skia/pull/3165. I'd like to make sure this cover your use-case, can you give me a end to end example on what you are trying to achieve with it? to be on the safe side.

wcandillon avatar Sep 06 '25 08:09 wcandillon

Hi William, Thank you for considering #3165! I've created a comprehensive end-to-end example that demonstrates the P3 color space issue and showcases what we're trying to achieve.

Demo Repository: https://github.com/Hello1nside/rn-skia-p3-issue

The repository includes:

  • Complete working example with three different rendering methods
  • Screenshots showing the color differences
  • Technical implementation details
  • Testing results and expected behavior

All the details about the use case, current problems, and what we're trying to achieve are documented in the README. The demo shows that the issue affects both onscreen and offscreen Skia rendering, not just offscreen surfaces as originally reported.

This should provide a clear end-to-end example of what we're trying to achieve with P3 color space support. Let me know if you need any additional information!

Hello1nside avatar Sep 06 '25 16:09 Hello1nside

@wcandillon, did you have a chance to review the demo repo I prepared? Were you able to reproduce the issue on your side?

Hello1nside avatar Sep 13 '25 14:09 Hello1nside

@Hello1nside Thank you for capturing the problem space so nicely with the rn-skia-p3-issue. While I want to make progress on this issue, currently we are invested in other higher priority issues. I could absolutely get to it but not in the upcoming weeks.

Maybe with my guidance and the help of AI, you would be able to contribute all the needed features to this PR: https://github.com/Shopify/react-native-skia/pull/3165/These are the instructions to have a development setup on your laptop: https://github.com/Shopify/react-native-skia/blob/main/packages/skia/CONTRIBUTING.md What are your thoughts on this? Let me know.

wcandillon avatar Sep 17 '25 13:09 wcandillon