Ambient CSS v3 – Blender와 CSS의 만남

• 하나의 광원만 정의하면 그림자·하이라이트·표면 그라데이션이 함께 반응하는 물리 기반 CSS 조명 시스템임
• Blender 레이 트레이싱을 기준으로 조명 결과를 보정하고 CSS box-shadow로 렌더링함
• 광원의 방향과 고도, 반사 횟수, 두께를 조절하면 장면 전체의 조명이 실시간으로 바뀜
• 오목·평면·볼록 형태와 Matte, Shiny, Glass, Brushed, Spun, Blasted 등 다양한 표면 재질을 지원함
• 모서리와 재질 색상을 세부 조정할 수 있지만, 제공되는 컴포넌트는 React 전용임

하나의 광원으로 제어하는 CSS 조명

• Ambient CSS는 광원 하나를 기준으로 장면의 그림자·하이라이트·표면 그라데이션을 일관되게 계산함
• 조명 결과는 Blender 레이 트레이싱에 맞춰 보정되며 CSS box-shadow로 렌더링됨
• 원을 가리키는 방식으로 광원 방향을 지정하면 모든 장면의 조명이 실시간으로 다시 계산됨

조명 높이와 표면 형태

• 광원 고도(Elevation)는 0, 1, 2, 3, bounce 단계로 제공됨
• 두께(Thickness)는 t0 · sheet, t1 · button, t2 · knob로 구분됨
• 표면 형태는 Concave, Flat, Convex를 지원함

재질과 색상

• 재질은 Matte, Shiny, Glass, Brushed, Spun, Blasted로 구성됨
• --amb-albedo로 각 마감의 색상을 바꿀 수 있으며, Glass는 재질 색상 대신 광원의 색조를 사용함
  • Matte·Shiny·Brushed: Default, Oxide, Steel, Brass
  • Glass: Default, Violet, Amber, Teal
  • Spun: Default, Oxide, Steel, Black
  • Blasted: Default, Crimson, Navy, Olive

모서리 처리와 React 컴포넌트

• 모서리는 Chamfer, Chamfer 2x, Fillet, Fillet 2x, Channel, Inset 방식으로 처리할 수 있음
• 컴포넌트 기능은 React에서만 제공됨