Skip to main content
Glama

🍝 Renderoni

3D 웹 게임, 알 덴테로 제공합니다.
Three.js와 Rapier를 위한 배터리 포함, 에이전트 네이티브 3D 엔진입니다.
결정론적 WebAssembly 물리, 선언적 프리셋, AI 페어 프로그래밍을 위한 내장 Model Context Protocol (MCP).

CI Deploy Pages License: MIT TypeScript MCP


⚡ 문제와 해결책

Three.js와 Rapier WebAssembly로 3D 게임을 만드는 것은 보통 수천 줄의 상용구 코드를 작성하는 것을 의미합니다: 고정 시간 간격 루프, 변환 보간, 캐릭터 컨트롤러, 공간 음향, 파티클 시스템, UI 프로젝션 등.

동시에, AI 코딩 에이전트(Claude, Gemini, Cursor)는 게임 루프가 비결정론적 블랙박스여서 값비싼 비전 스크린샷이 필요하기 때문에 3D 엔진을 다루는 데 어려움을 겪습니다.

Renderoni는 여러분께 다음을 제공합니다:

  • 인간을 위한: 선언적이고 배터리 포함된 3D 엔진입니다. 단 한 번의 createRenderoni() 호출로 물리, 렌더링, 카메라 컨트롤, 공간 음향, 애니메이션 상태 머신, 타입이 지정된 프리셋을 갖춘 파티클 시스템이 가동됩니다.

  • AI 에이전트 및 헤드리스 CI를 위한: 결정론적 시뮬레이션 커널과 내장 Model Context Protocol (MCP) 서버. 에이전트는 가벼운 시맨틱 Markdown(<500바이트 / ~120토큰)을 통해 장면을 검사하고, 타입이 지정된 액션을 전달하며, 10ms 미만으로 Node.js에서 헤드리스로 게임 상태를 검증합니다.


Related MCP server: maige-3d-mcp

🎮 라이브 데모

브라우저에서 바로 대화형 플레이그라운드를 체험해보세요: elemarin.github.io/renderoni (또는 로컬에서 npm run dev 실행).

데모

설명

조작 방법

🪙 퀵스타트 데모

README 퀵스타트의 라이브 대화형 브라우저 구현: 영웅 캐릭터, 회전하는 금화 센서, 오디오 차임, 파티클 폭발 VFX.

WASD / 방향키 (영웅 이동), Space (점프), 🪙 코인 리스폰 버튼

✈️ 비행 시뮬레이터

양력, 항력, 활주로 이착륙, 접이식 랜딩 기어, 링 코스를 갖춘 공기역학 비행 물리.

W/S (피치), A/D (요), Q/E (롤), Shift/Ctrl (스로틀), Z/X (최대/차단), G (기어), C (조종석/추적 시점), R (리셋)

🧱 광활한 복셀 샌드박스

바다, 모래 해변, 구릉, 눈 덮인 봉우리, 나무가 있는 다중 생물군계 절차적 세계 (~2,000개 이상 블록).

WASD (걷기 및 자동 오르기), Shift (달리기), Space (점프), 1-6 (단축바), 왼쪽/오른쪽 클릭 (부수기/설치하기)

🔦 PSX 3인칭 호러

고딕 양식의 저택 복도, 손전등, 열쇠 퍼즐, 애니메이션 철문이 있는 레트로 PSX 서바이벌 호러 (3인칭 추적 카메라).

WASD (형사 걷기), 마우스 (카메라 회전), E (열쇠 줍기 및 문 열기)


📦 설치

npm install renderoni three @dimforge/rapier3d-compat

트리 쉐이크 가능한 하위 경로 내보내기:

import { createRenderoni } from 'renderoni';
import { body, kccPlayer, sensor, light } from 'renderoni/presets';
import { audio } from 'renderoni/audio';
import { animation } from 'renderoni/animation';
import { vfx } from 'renderoni/vfx';
import { ui } from 'renderoni/ui';
import { createMCPServer } from 'renderoni/mcp';
import 'renderoni/testing/matchers';

🚀 퀵스타트

import { createRenderoni } from 'renderoni';
import { body, kccPlayer, sensor, light } from 'renderoni/presets';
import { audio } from 'renderoni/audio';
import { vfx } from 'renderoni/vfx';

// 1. Initialize engine (runs headlessly in CI or interactively in browser)
const game = await createRenderoni({
  mode: 'interactive', // or 'headless'
  seed: 42,
  subsystems: [
    audio({ volume: 0.8 }),
    vfx({ particles: true }),
  ],
});

// 2. Add Environment & Lighting
game.add(light({ type: 'directional', position: [20, 40, 20] }));
game.add(body({ shape: 'box', type: 'fixed', size: [100, 1, 100], position: [0, 0, 0] }));

// 3. Add Collectible Item
const coin = game.add(sensor({
  id: 'golden_coin',
  shape: 'sphere',
  radius: 0.6,
  position: [4, 1.2, 0],
}));

// 4. Add Player Character
const player = game.add(kccPlayer({
  id: 'hero',
  position: [0, 1.5, 0],
  moveSpeed: 6.5,
}));

// 5. Handle Gameplay Events
game.events.on('sensor.enter', ({ sensor, target }) => {
  if (sensor.id === 'golden_coin' && target.id === 'hero') {
    game.audio.play('coin_pickup');
    game.vfx.spawnParticles({ count: 16, position: [4, 1.2, 0] });
    coin.destroy();
  }
});

// 6. Run headlessly (CI/Tests) or start interactive render loop (Browser)
game.step(60);   // Step 60 fixed ticks in ~1ms (Headless CI)
// game.start(); // Start 60fps presentation loop (Browser)

🤖 AI 에이전트 통합 (MCP 서버)

Claude Desktop, Antigravity, Cursor 또는 모든 MCP 클라이언트를 시뮬레이션에 직접 연결하세요:

{
  "mcpServers": {
    "renderoni": {
      "command": "npx",
      "args": ["renderoni", "mcp"]
    }
  }
}

내장 MCP 도구:

  • describe: 활성 엔티티, 충돌체, 태그 및 엔진 스키마를 반환합니다.

  • observe: 위치, 속도 및 게임 상태를 포함하는 초고밀도 Tier 0 Markdown 요약(<500B / ~120토큰) 을 반환합니다.

  • act: 결정론적 시맨틱 게임플레이 액션(game.act({ name, payload }))을 주입합니다.

  • step: 시뮬레이션을 $N$ 고정 틱만큼 진행하고 상태 해시를 반환합니다.

  • check: 기계 AST 어설션을 평가합니다.


🧪 Vitest를 사용한 헤드리스 테스팅

사용자 정의 Vitest 매처를 사용하여 Node.js에서 10ms 미만으로 헤드리스 상태에서 전체 게임 통합 테스트를 실행하세요:

import { expect, test } from 'vitest';
import { createRenderoni } from 'renderoni';
import { kccPlayer, sensor } from 'renderoni/presets';
import 'renderoni/testing/matchers';

test('player collects coin and verifies state hash', async () => {
  const game = await createRenderoni({ mode: 'headless', seed: 42 });
  const hero = game.add(kccPlayer({ id: 'hero', position: [0, 1, 0] }));
  const coin = game.add(sensor({ id: 'coin', position: [3, 1, 0] }));

  hero.actions.move({ x: 1, z: 0 });
  game.step(60);

  expect(game).toHaveTick(60);
  expect(hero.position[0]).toBeGreaterThan(1.5);
  expect(game).toHavePassedDiagnostics();
});

🏛️ 아키텍처

┌────────────────────────────────────────────────────────────────────────┐
│                              L3 APPLICATION                            │
│           Game Rules, Custom Assets, Levels, Shaders, UI Layouts       │
├────────────────────────────────────────────────────────────────────────┤
│                           L2 TOOLING & AGENTS                          │
│     Built-in MCP Server (stdio/SSE), Vitest Matchers, Live Inspector   │
├────────────────────────────────────────────────────────────────────────┤
│                         L1 BATTERIES & SUBSYSTEMS                      │
│   Spatial Audio • Skeletal Animation • UI Projections • VFX Emitters   │
│   Declarative Presets: body, sensor, light, kccPlayer, dynamicPlayer   │
├────────────────────────────────────────────────────────────────────────┤
│                          L0 DETERMINISTIC KERNEL                       │
│   Integer Tick Clock • Seeded PRNG • Dual-Buffer Transform Pipeline    │
│   Quantized State Hashing (XXH3) • Resource Ownership Tracking         │
├────────────────────────────────────────────────────────────────────────┤
│                             NATIVE ENGINES                             │
│       Three.js (WebGL / WebGPU)   │   @dimforge/rapier3d-compat (WASM) │
└────────────────────────────────────────────────────────────────────────┘

📜 라이선스

MIT © Esteban Leandro Marín

Related MCP Connectors

Related MCP Servers