色、ムズ〜〜〜〜

本記事は、先日開催されたKyoto.js 19のために用意したLT資料に加筆したものです。

kyotojs.connpass.com


こんにちは、天城です。 最近はWebGLで動画編集アプリを開発しており、Webでの色の扱いについて日々苦しんでおります。 この記事では、僕が最近知った色関連の小ネタを共有します。

目次

話題1: mix-blend-modeにaddがない

www.youtube.com

そもそもBlendingって何?

  • Webにおける色の合成は Compositing and Blending というSpecで定義されている
  • BlendingとCompositingは別概念である
    • Blending: 2つの色を混ぜること (multiply, darker… etc)
    • Compositing: 前景色と背景色を合成すること (source-over, xor… etc)

Webでは基本的にsource-over compositingしか使われない

  • source-over: 前景色が背景色の上に表示される
    • DOM要素が、z-index順に塗り重ねられていくイメージ
  • source-overにおけるBlendingとCompositingは、以下のように計算される:
  • alpha 50%の要素を2つ重ねたとき、出力のalphaは

  αo = αs + αb \, x \, (1 - αs) \\
      = 0.5 + 0.5 \, x \, (1 - 0.5) \\
      = 0.5 + 0.25 \\
      = 0.75

となり、0.75になる

Canvasではsource-over以外のCompositingが使える

  • Canvasでは globalCompositingOperation で Compositing を指定できる
  • Canvasでは、globalCompositingOperationを lighter にすることで加算合成ができた
    • 全然 “lighter” では無いが……
      • 実際Specにも「Porter-Duffにおける plus のことだよ」と書いてある
      • つまり、plus-lighter というネーミングは、この lighterplus を併記したもの……?

PDF Reference

  • Adobe製品(Photoshop, AE etc)で使われてるBlending Functionは、PDF Referenceで定義されている
  • 他社の画像/映像/デザイン系アプリも、基本的にAdobeのBlending Functionsを真似ているっぽい
  • Adobe公式のPDFのドキュメントだが……

一方その頃WebGLは……

話題2: Display P3

CSS Color 4でDisplay P3が使えるようになった

CSS Color Module Level 4

なにそれ?

Display P3

つまり?

  • 色域 (= 色空間 = Color Space) の一つ
  • Appleが策定した
  • Display P3はDCI-P3という規格から派生した
  • DCI-P3との違い
    • white pointが D65 (≒ 6500K) (DCI-P3だと~6300 K)
    • ガンマが2.2 (DCI-P3だと2.6)

つまり???????????????

  • 表示できる色が増える
    • Display P3での rgb(1, 0, 0) は、sRGBの rgb(1, 0, 0) よりも赤い
    • 256色より1677万色(厳密には16777216色)のほうが良いよね、というのとは違う話

CSS Color 4

https://www.w3.org/TR/css-color-4/

  • Candidate Recommendation Draft 状態 (勧告準備?)
  • Color 3が勧告されたのは2011年
    • 昔だね

In particular, it allows specifying colors in other color spaces than sRGB; previously, the more saturated colors outside the sRGB gamut could not be used in CSS even if the display device supported them.

  • sRGB 以外の色域も扱えるようにしようね、というのが主なテーマっぽい

CSS Color 4 で導入された記法

color() 関数

色空間を指定して色を定義できる

linear-gradient(to right in hsl) とか

詳しくはChromeの開発ブログとかtakanoripさんの記事に全部書いてある

余談: CSS Color 5ではICCプロファイルを読めるようになるらしい……?

media queryでディスプレイのカラープロファイルを判定する

デモ: https://codepen.io/fand/pen/poxYYrR

  • sRGBのディスプレイで表示:

  • MacBook Proのディスプレイで表示:

  • 「sRGBの場合のみ表示する」ということはできない……?

    • (color-gamut: srgb) and (not(color-gamut)) だとダメだった
    • 誰か教えて!

CanvasでDisplay P3を使うには

let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d", { colorSpace: "display-p3" });

  • 右の赤のほうが赤い
    • ディスプレイの輝度を下げるとわかりやすいです
  • ImageDataの色を取得するときも色域を指定できる
    • imageData = context.getImageData(0, 0, 1, 1, { colorSpace: "display-p3" });

WebGLでDisplay P3を使うには

const canvas = document.querySelector('#canvas');
const context = canvas.getContext("webgl");
context.drawingBufferColorSpace = "display-p3";

// これは動かないので注意
canvas.getContext("webgl", { colorSpace: "display-p3" });

demo: https://codesandbox.io/s/webgl-display-p3-test-xs8zcp

  • ディスプレイがDisplay P3に対応しているとき、WebGLからDisplay P3空間の色を出力できる

  • テクスチャとして使う画像のカラープロファイルは考慮されないので注意

スクリーンショット撮るときの注意

  • macOSスクリーンショットを撮ると、出力画像のカラープロファイルは撮影したディスプレイのカラープロファイルになる
    • Finderで画像ファイルを右クリック→ Get Info でカラープロファイルをチェックできる
    • sRGBのディスプレイで撮影したスクリーンショットの場合
    • Display P3のディスプレイで撮影したスクリーンショットの場合
  • WebGLでsRGB出力した画面のスクショを他のアプリと比較して「おかしいな〜〜〜〜〜〜〜」と悩んでいた
    • 1行目のスクショと2行目のスクショで色味が違うのがわかりますか?
    • ディスプレイのカラープロファイルをsRGBに変更すると正しい色味になった (3行目)
  • なんかいい方法を教えてくれ……
    • ColorSync Utilityで解決したりもできるらしい?????

2022ベストバイ: キッズカメラ、Nothing Phone、ズームレンズ

1位: 中国製の激安キッズカメラ

  • 最高
  • 子供が何を見ているのか、がわかる

例:

  • 画質はメチャクチャ悪い
    • 色はガビガビだしレンズは歪んでいる
    • Amazonの商品ページには4000万画素と書かれており、実際画像の解像度自体は高いんだけど、画質が悪いので単にファイルサイズがデカいだけになっている
    • しかし、画質の悪さがより一層、思い出デバイスとしての説得力を強めている
    • 子供の眼には、このカメラと同じように、抽象的で不確かな世界が見えているんじゃないか、と思わされる
  • 操作がちょっとムズい
    • 撮影可能になるまでに、電源ボタン長押しで電源オン→撮影モードを選択してシャッターボタンで決定、をする必要がある
    • とはいえ、3歳の娘でも普通に操作はできています
  • インカメラも搭載されており、娘は最近よく自撮りをしている

2位: Nothing Phone

jp.nothing.tech

  • 最高
    • 存在するだけで「良い……」と思えるものがポケットに入ってるの、良くないですか?
    • iPhone 14もPixel 7も普通すぎて面白くないので、もっと新鋭のメーカーを応援したいという気持ちもある
  • 同ブランドの Nothing Ear (1) も愛用しています
    • 値段と性能はそこそこ、見た目は最高 というラインの製品を出してくれるブランドなのでこの先も期待しています
  • 通知に合わせて背面LEDが光る「グリフインターフェイス」が売りの一つだが、僕は買った当日にオフにしました
    • スマホが勝手に光るの邪魔でしか無いので……
  • とはいいつつ、結構困っている
    • ディスプレイの明るさ調整がショボい、画面回転ボタンが邪魔(無効化できない)、既にバッテリーがヘタってきたなど
    • 久々のミドルレンジ機なので洗礼を受けているだけかもしれない
    • 本当に困ったらiPhoneに戻るかもしれない……

3位: SIGMA fp用のズームレンズ (SIGMA 28-70mm F2.8 DG DN)

www.sigma-global.com

  • 最高
    • 全部写ります
  • テーブルの対面に座っている家族の表情を寄りで撮れる
  • 娘の運動会に向けて購入したものの、ずっと付けっぱなしに
    • もうずっとこれで行きます
    • 動画用カメラとか買わない限りは……

例:


以下、他に買って良かったもの。

MOFT X

  • iPadを使う回数が3倍に増えました
  • iPadをテーブルの奥に立てて電子書籍を表示し、昼ごはんを食べながら読む、というのが習慣になりつつある
    • 行儀は悪い

DESCENTE GORE-TEXブルゾン DLMUJK32

https://ecs-cdn01.magaseek.com/descente/images/goods/DSNDSN/item/50477534705T.jpg store.descente.co.jp

  • 最高
  • 去年DESCENTE BLANCのジャケットを買ったものの、細身すぎて他の服と合わせづらく困っていた
  • 新風館BEAMSをチラ見したら理想的なシルエットの物が売ってたのでその場で買ってしまった
  • 見た目がスッキリしている割にゆったりしているので、重ね着しやすくて助かっている
  • 去年買ったやつはRAGTAGで売りました……

SLAM DUNK新装再編版

  • 最高
  • まだ THE FIRST SLAM DUNK 観てない人は今すぐ観てください、お願いです
  • 新装再編版は安い(約13000円で全巻セットが手に入る)
  • しかし、紙と印刷が微妙
    • 紙が薄く、印刷も結構かすれている
    • その上、20巻にまとめた結果、1巻あたりのページ数がとても多くなっているので、非常にページがめくりにくい
    • どっちか迷ってるなら完全版を買ったほうが良いだろう

年末に記事を書き始めたものの、そもそも2022年のことを思い出すのが難しくて、書くのに時間がかかってしまった。 人の記事を見ると、みんなガジェットとか家具とか沢山買ってて、なんというか、人間としての活動を沢山できてて偉いな……という気持ちになる。

今年は俺も消費を楽しめる人間になります……