Add Display P3 color space support for offscreen surfaces
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)
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.
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!
@wcandillon, did you have a chance to review the demo repo I prepared? Were you able to reproduce the issue on your side?
@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.