{"id":16897,"date":"2017-01-11T15:22:09","date_gmt":"2017-01-11T20:22:09","guid":{"rendered":"http:\/\/mjtsai.com\/blog\/?p=16897"},"modified":"2017-01-11T15:22:09","modified_gmt":"2017-01-11T20:22:09","slug":"bringing-wide-color-to-instagram","status":"publish","type":"post","link":"https:\/\/mjtsai.com\/blog\/2017\/01\/11\/bringing-wide-color-to-instagram\/","title":{"rendered":"Bringing Wide Color to Instagram"},"content":{"rendered":"<p><a href=\"https:\/\/engineering.instagram.com\/bringing-wide-color-to-instagram-5a5481802d7d\">Mike Krieger<\/a> (via <a href=\"https:\/\/twitter.com\/chockenberry\/status\/818571244144447488\">Craig Hockenberry<\/a>):<\/p>\n<blockquote cite=\"https:\/\/engineering.instagram.com\/bringing-wide-color-to-instagram-5a5481802d7d\"><p>In other places&#8202;&mdash;&#8202;like when initializing a CGContext for other drawing operations&#8202;&mdash;&#8202;it&rsquo;s common to use <code>CGColorSpaceCreateDeviceRGB<\/code> when creating a <code>CGColorSpaceRef<\/code>. This will create an sRGB colorspace on most devices, and we&rsquo;ll lose our wide color information. Most of the initial work for wide color on Instagram was tracking down everywhere that this color space was hard-coded.<\/p><p>Instead, we can see if our screen supports wide colors (using <code>UIScreen.mainScreen.traitCollection.displayGamut<\/code>), and if so, use <code>CGColorSpaceCreateWithName(kCGColorSpaceDisplayP3)<\/code>. Again, we found that creating a wrapper that returns the appropriate colorspace for that device was helpful.<\/p><p>[&#8230;]<\/p><p>Instagram uses OpenGL for most of its image editing and filtering. OpenGL isn&rsquo;t color managed; it operates on a range (say, 0.0 to 1.0), and it&rsquo;s up to the output surface to determine what colors that actually maps to.<\/p><p>The good news is that this meant we had to make very few changes to make our GL pipeline wide-color compatible. The biggest change was to ensure that when we extracted pixel buffers from our GL surface, we were using the appropriate colorspace before converting from a <code>CVPixelBufferRef<\/code> to a <code>CGImageRef<\/code>.<\/p><\/blockquote>\n<p>I can see the Instagram logo in their canary image even though my Mac doesn&rsquo;t have a P3 display.<\/p>","protected":false},"excerpt":{"rendered":"<p>Mike Krieger (via Craig Hockenberry): In other places&#8202;&mdash;&#8202;like when initializing a CGContext for other drawing operations&#8202;&mdash;&#8202;it&rsquo;s common to use CGColorSpaceCreateDeviceRGB when creating a CGColorSpaceRef. This will create an sRGB colorspace on most devices, and we&rsquo;ll lose our wide color information. Most of the initial work for wide color on Instagram was tracking down everywhere that [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"apple_news_api_created_at":"","apple_news_api_id":"","apple_news_api_modified_at":"","apple_news_api_revision":"","apple_news_api_share_url":"","apple_news_coverimage":0,"apple_news_coverimage_caption":"","apple_news_is_hidden":false,"apple_news_is_paid":false,"apple_news_is_preview":false,"apple_news_is_sponsored":false,"apple_news_maturity_rating":"","apple_news_metadata":"\"\"","apple_news_pullquote":"","apple_news_pullquote_position":"","apple_news_slug":"","apple_news_sections":"\"\"","apple_news_suppress_video_url":false,"apple_news_use_image_component":false,"footnotes":""},"categories":[4],"tags":[566,1286,31,1380,26,440],"class_list":["post-16897","post","type-post","status-publish","format-standard","hentry","category-programming-category","tag-color","tag-instagram","tag-ios","tag-ios-10","tag-iosapp","tag-opengl"],"apple_news_notices":[],"_links":{"self":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/16897","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/comments?post=16897"}],"version-history":[{"count":1,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/16897\/revisions"}],"predecessor-version":[{"id":16898,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/16897\/revisions\/16898"}],"wp:attachment":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/media?parent=16897"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/categories?post=16897"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/tags?post=16897"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}