Skip to main content
Glama

🍝 Renderoni

アルデンテに仕上げた3D Webゲーム。
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トークン)を介してシーンを検査し、型指定されたアクションをディスパッチし、Node.js上で10ms未満でヘッドレスにゲーム状態を検証します。


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風三人称ホラー

三人称チェイスカメラ、ゴシック様式の大邸宅の廊下、懐中電灯、鍵パズル、アニメーション鉄格子を備えたレトロPSX風サバイバルホラー。

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