Skip to main content
Glama
deenesjakoruzh
elemarin

Renderoni

by elemarin
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Hybrid

🍝 Renderoni

3D-Webspiele, al dente serviert.
Eine voll ausgestattete, agenten-native 3D-Engine für Three.js und Rapier.
Deterministische WebAssembly-Physik, deklarative Voreinstellungen und integriertes Model Context Protocol (MCP) für KI-Paarprogrammierung.

CI Deploy Pages License: MIT TypeScript MCP

⚡ Das Problem & Die Lösung

Das Erstellen von 3D-Spielen mit Three.js und Rapier WebAssembly bedeutet normalerweise, tausende Zeilen Boilerplate-Code zu schreiben: feste Zeitschritt-Schleifen, Transformationsinterpolation, Charakter-Controller, räumliches Audio, Partikelsysteme und UI-Projektionen.

Gleichzeitig haben KI-Code-Agenten (Claude, Gemini, Cursor) Schwierigkeiten mit 3D-Engines, da Spielschleifen nicht-deterministische Blackboxen sind, die teure Bildschirmfotos erfordern.

Renderoni bietet Ihnen beides:

  • Für Menschen: Eine deklarative, voll ausgestattete 3D-Engine. Ein einziger createRenderoni()-Aufruf startet Physik, Rendering, Kamerasteuerung, räumliches Audio, Animationszustandsmaschinen und Partikelsysteme mit typisierten Voreinstellungen.

  • Für KI-Agenten & Headless-CI: Ein deterministischer Simulationskern mit einem integrierten Model Context Protocol (MCP)-Server. Agenten inspizieren Szenen mittels leichtem semantischen Markdown (<500 Bytes / ~120 Tokens), senden typisierte Aktionen und überprüfen den Spielzustand headless in Node.js in unter 10ms.

Related MCP server: maige-3d-mcp

🎮 Live-Demos

Probieren Sie den interaktiven Spielplatz live in Ihrem Browser aus: elemarin.github.io/renderoni (oder führen Sie lokal npm run dev aus).

Demo

Funktion

Steuerung

🪙 Quickstart Demo

Live interaktive Browser-Implementierung des README-Schnellstarts: Heldenfigur, rotierender Goldmünzen-Sensor, Audio-Klingel und Partikelburst-VFX.

WASD / Pfeiltasten (Held bewegen), Leertaste (Springen), 🪙 Münze neu spawnen-Button

✈️ Flight Simulator

Aerodynamische Flugphysik mit Auftrieb, Widerstand, Start- und Landebahn, einziehbarem Fahrwerk und Ringkurs.

W/S (Nicken), A/D (Gieren), Q/E (Rollen), Umschalt/Strg (Schub), Z/X (Max/Min), G (Fahrwerk), C (Cockpit/Verfolgungsansicht), R (Zurücksetzen)

🧱 Vast Voxel Sandbox

Multi-Biom-prozedurale Welt (~2.000+ Blöcke) mit Ozeanwasser, Sandstränden, sanften Hügeln, schneebedeckten Gipfeln und Bäumen.

WASD (Gehen & Automatischer Schritt), Umschalt (Sprinten), Leertaste (Springen), 1-6 (Schnellzugriffsleiste), Links/Rechts Klick (Zerstören/Platzieren)

🔦 PSX 3rd-Person Horror

Retro-PSX-Survival-Horror mit Third-Person-Verfolgungskamera, gotischem Herrenhaus-Flur, Taschenlampe, Schlüsselrätsel und animiertem Eisentor.

WASD (Detektiv bewegen), Maus (Kamera umkreisen), E (Schlüssel aufnehmen & Tor entriegeln)

📦 Installation

npm install renderoni three @dimforge/rapier3d-compat

Tree-shakable subpath exports:

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';

🚀 Quickstart

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)

🤖 KI-Agenten-Integration (MCP-Server)

Verbinden Sie Claude Desktop, Antigravity, Cursor oder einen anderen MCP-Client direkt mit Ihrer Simulation:

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

Integrierte MCP-Tools:

  • describe: Gibt aktive Entitäten, Kollider, Tags und Engine-Schemata zurück.

  • observe: Gibt extrem dichte Tier-0-Markdown-Zusammenfassungen (<500B / ~120 Tokens) mit Positionen, Geschwindigkeiten und Spielzustand zurück.

  • act: Injiziert deterministische semantische Spielaktionen (game.act({ name, payload })).

  • step: Erhöht die Simulation um $N$ feste Ticks und gibt Zustands-Hashes zurück.

  • check: Wertet maschinelle AST-Assertionen aus.

🧪 Headless-Testing mit Vitest

Führen Sie vollständige Spielintegrationstests headless in Node.js in unter 10ms mit benutzerdefinierten Vitest-Matchern aus:

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();
});

🏛️ Architektur

┌────────────────────────────────────────────────────────────────────────┐
│                              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) │
└────────────────────────────────────────────────────────────────────────┘

📜 Lizenz

MIT © Esteban Leandro Marín

This server cannot be deployed

One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

Maintenance

ActivityMaintained
ResponsivenessResponsive

Resources

Related MCP Connectors

Related MCP Servers