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

親愛なる読者の皆さまへ。ご存じの通り価格高騰などの悪影響でサーバー運営がとても苦しい状態です。回線や台数を整理し見直せる部分は全て見直しましたが、やはりまだ危険水域です。このままだと1ページを10分割ぐらいして無理矢理PVを増やさざるを得なくなってしまいます。そこで、GIGAZINEの物理的なサーバーたちを、たった1円でも良いので親愛なる読者の皆さまに支援してもらえればとっても助かります！今すぐ寄付は上のボタンから！ ・ これまでGIGAZINEを支援してくれたメンバーのリスト

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.