CSS用の物理ベースのライティングシステム「Ambient CSS」

Ambient CSSはCSSを用いて物理ベースの照明システムをウェブサイトやアプリケーションに実装するためのフレームワークであり、最大の特徴は光源を定義するだけですべての影・ハイライト・表面のグラデーションが自動的に生成される点にあります。

Ambient CSS — a physics-based lighting system for CSS
https://ambientcss.com/

kikkupico/ambientcss: A physics-based lighting system for CSS. Define a light source, and every shadow, highlight and surface gradient follows from it — calibrated against Blender raytraces.
https://github.com/kikkupico/ambientcss

従来のCSSにおける影の表現はHTML要素ごとに独立した装飾となっており、複数の要素が同じページに存在しても物理的な照明環境を共有してはいませんでした。Ambient CSSは物理的な照明原理に基づき、光の方向・キーライトやフィルライトの強度・色相・高度といった「照明環境」を設定するとすべての影・エッジハイライト・表面グラデーションが照明環境に従って生成されます。つまり、コンテナの光ベクトルを変更するだけでコンテナ中のすべての子要素が統一的かつ一貫性を持って更新することができるということです。

Ambient CSSのエンジンは、UIサーフェスを2つのライトシステム(キーライト・フィルライト)を持つ物理的な素材としてモデル化します。各要素は共有CSSカスタムプロパティを読み取り、以下の5層のコンポジットボックスシャドウを生成します。

・ドロップシャドウ：物理的な高さに応じてスケーリングされた方向性のある影および半影
・フィレットハイライト：光源に面した鏡面的な内側のエッジハイライト
・フィレットシャドウ：反対側のエッジにある柔らかな内側の影
・面取りハイライト：光が当たるファセットに沿った幅広で面取りされた内側のグロー
・面取りシャドウ：影のエッジにある暗い面取りシャドウ

各要素は以下の5つのコアな素材の特性を組み合わせています。

・構造：照明計算を可能にする(ambient)
・表面：背景照明グラデーション(flat・concave・convex)
・エッジ：面取りおよび丸められたエッジカット(chamfer・fillet・groove)
・素材：鏡面反射および半透明性(matte・shiny・glass)
・深度：ドロップシャドウの高さ(elevation 0～3)

照明の挙動は物理的に計算されおり、Blender(ambient3d)で構築されたレイトレース3D参照モデルに基づいて調整されています。

Ambient CSSをピュアなCSSとして導入する方法は以下の通りです。

・1. 「npm install @ambientcss/css」を実行してパッケージをインストールする
・2. 「<link rel="stylesheet" href="node_modules/@ambientcss/css/dist/ambient.css" />」をHTMLに追加する
・3. 親要素に「.amb-light-tl」のようなライト環境を設定する

導入したHTMLは以下のようになります。

<link rel="stylesheet" href="node_modules/@ambientcss/css/dist/ambient.css" />

<!-- 親要素にライト環境を設定 -->
<div class="amb-light-tl">
  <button class="ambient amb-surface amb-chamfer amb-elevation-1 amb-rounded">
    Click me
  </button>
</div>

Reactコンポーネントとして導入する場合は以下の手順となります。

・1. 「npm install @ambientcss/components @ambientcss/css」を実行してパッケージをインストールする
・2. 必要なCSSファイルをインポートする

import { AmbientProvider, AmbientButton, AmbientKnob, AmbientPanel } from "@ambientcss/components";
import "@ambientcss/css/ambient.css";
import "@ambientcss/components/styles.css";

function App() {
  return (
    <AmbientProvider theme={{ lightX: -1, lightY: -1, keyLight: 0.9, fillLight: 0.7 }}>
      <AmbientPanel>
        <AmbientButton>Press</AmbientButton>
        <AmbientKnob label="Gain" defaultValue={50} />
      </AmbientPanel>
    </AmbientProvider>
  );
}

各コンポーネントは「プリセット」として提供されており、運動学・値・ARIAを管理するメカニズムと、ペイントを管理するパーツのセットの組み合わせとなっています。プリセットを変更して描画するとメカニズムは描かれたものをそのまま反映する仕組みです。

<AmbientRotary
  value={gain} onChange={setGain}
  travel={240} input="drag"
  parts={{ base: <KnobBody flush />, actuator: <MyPointer /> }}
/>

インストール可能なパッケージ・モジュールは以下の通り。

ライトの方向・環境を設定するには親要素に以下のいずれかを設定します。親要素への設定はすべての子孫要素に反映されます。

・.amb-light-tl
・.amb-light-tr
・.amb-light-bl
・.amb-light-br
・.amb-light-top
・.amb-light-bottom
・.amb-light-left
・.amb-light-right

カスタムCSS変数を使用すれば、より細やかなライト操作が可能です。

.my-scene {
  --amb-light-x: -0.7;             /* 水平 (-1.0：左～1.0：右) */
  --amb-light-y: -0.8;             /* 垂直 (-1.0：上～1.0：下) */
  --amb-key-light-intensity: 0.9;  /* プライマリ指向性ライト (0.0～1.0) */
  --amb-fill-light-intensity: 0.6; /* アンビエントフィルライト (0.0～1.0) */
  --amb-light-hue: 234;            /* ライトの色相 (0～360) */
  --amb-light-saturation: 15%;     /* ライトの彩度 */
}

要素のサーフェス・グラデーションを設定するには親要素に以下のいずれかを設定します。

・.amb-surface
・.amb-surface-concave
・.amb-surface-concave-h
・.amb-surface-convex

サーフェスはシーンのライト下での素材であり固定色ではないので、1つのクラスですべての色相とシェードをカバーできます。

.my-panel {
  --amb-albedo: crimson; /* 完全な照明下での色 */
  --amb-shade: 1;        /* 反射率に乗算される値 */
}

他にも様々な設定が可能ですので、興味のある方は公式GitHubのドキュメントで確認してください。

Ambient CSSはCSSで物理ベースの照明システムを実装するための包括的なソリューションを提供し、物理的な照明原理に基づいたリアルな視覚効果を生成します。ピュアCSSとReactコンポーネントの両方で利用でき、高度なUIデザインを簡単に実現できるので、気になる方は是非公式サイトを訪問しデモをチェックしてみてください。