raea (Render Anything Engine)는 AI가 생성한 React 및 TypeScript 코드를 로컬 GPU 환경에서 영상, 모션 그래픽, 3D 콘텐츠, 그리고 게임으로 렌더링할 수 있게 해주는 오픈소스 엔진입니다. 이 엔진은 AI 에이전트와의 상호작용을 염두에 두고 설계되었으며, Rust와 Bevy 엔진을 기반으로 구축되었습니다.

핵심 방법론 및 기술적 사양

1. Composition Engine:

사용자는 React 컴포넌트를 통해 프레임 단위의 렌더링을 정의합니다. useCurrentFrame 훅을 통해 현재 재생 중인 프레임 정보를 가져오고, interpolate 함수를 사용하여 시간에 따른 속성 변화(예: 투명도, 위치)를 수학적으로 계산합니다.

• Interpolation Formula:

$f(t) = start + (end - start) \times \frac{t - t_{start}}{t_{end} - t_{start}}$
(여기서 $t$는 현재 프레임, $[t_{start}, t_{end}]$는 보간 범위)

2. Backend Architecture:
   • Renderer: GPU 가속을 위해 wgpu를 활용하며, Bevy 0.20 게임 엔진을 프레임워크로 사용하여 3D 모델, 조명, 텍스처 및 Gaussian splats 등을 처리합니다.
   • Runtime: JavaScript 엔진(macOS의 경우 JavaScriptCore, 기타 플랫폼은 QuickJS)을 통해 React 코드를 실행하며, 이를 Bevy의 ECS(Entity Component System)로 매핑하여 렌더링합니다.
   • IO & Encoding: VideoToolbox(macOS) 및 소프트웨어 코덱을 통해 하드웨어 가속 인코딩을 지원하며, AV1 등 다양한 영상 포맷을 생성합니다.

3. Agent-Centric Design:

raea는 단순히 시각적 결과물을 만드는 데 그치지 않고, AI 에이전트가 결과물을 '검사'할 수 있는 구조를 갖추고 있습니다.

• raea check: 텍스트 잘림, 낮은 대비, 안전 영역 위반, loudness 문제 등을 자동으로 감지하여 시각적 퀄리티를 보장합니다.
• raea skills: Claude Code 등 AI 에이전트가 사용할 수 있는 도구 세트를 제공하여, 에이전트가 스스로 코드를 작성, 렌더링, 오류 수정의 루프(Self-correction loop)를 수행할 수 있게 합니다.

4. System Composition:
   • core/: 커널 언어(K), 애니메이션 로직, 셰이프 및 폰트 처리를 담당합니다.
   • systems/: 레이아웃 엔진, ONNX Runtime 기반의 ML 추론, 오디오 믹싱, 3D 물리 및 충돌 감지 시스템을 포함합니다.
   • sdk/: React/TypeScript 기반의 개발자 도구와 craft guides를 제공하여 사용자가 복잡한 그래픽 로직을 선언적으로 작성할 수 있도록 돕습니다.

특징 요약

• 플랫폼: macOS(Apple Silicon), Linux(x86_64), Windows 지원.
• 라이선스: FSL-1.1-ALv2(Functional Source License)를 채택하여 경쟁 제품을 제외한 자유로운 활용 및 수정이 가능하며, 2년 후 Apache-2.0으로 전환됩니다.
• 데이터 주도형: 모든 렌더링 요소는 쿼리 가능한 데이터로 유지되어, 에이전트가 렌더링 프레임을 분석하고 즉각적인 피드백을 반영하는 'Closed-loop' 시스템 구축에 최적화되어 있습니다.