DEV Community

Krishna Sarkar
Krishna Sarkar

Posted on AI-assisted

Kingsrune: Trinity Chess — Shipping a 3-in-1 3D & 2D WebGL Chess Game with Playgama MCP

Made with AI. Brought to you by #PlaygamaMCP. Fine-tuned by me. Kingsrune: Trinity Chess → https://playgama.ai/play/wob5ok5llhbiuk

playgama #PlaygamaMCP #webdev #gamedev


Play Kingsrune: Trinity Chess Live

👉 Play Now in Your Browser: https://playgama.ai/play/wob5ok5llhbiuk

Kingsrune: Trinity Chess is a self-contained HTML5 & Three.js chess experience where you can switch in real time mid-turn between three distinct visual worlds without losing a single ply of your match:

  1. Vanguard Clash 3D (Action Mode): Armored warriors, warlocks, and royal commanders clash across an arcane rune arena with custom combat animations and crystalline shatter physics.
  2. Grandmaster Classic 3D: A studio-lit Staunton tournament set with procedural marble, walnut, and brushed brass materials.
  3. Tactical 2D Pro: A crisp tournament-grade top-down 2D board built for rapid blitz and bullet play.

Key Engineering Highlights

1. Two-Phase 3D Raycast Picking

In a 3D chess view, wide invisible hit cylinders make touch input forgiving on mobile screens, but a front-rank piece's cylinder (such as the King on e1) can occlude clicks aimed at the upper body of a second-rank Pawn (e2). We solved this with a two-phase picker: broad-phase cylinder intersection followed by narrow-phase raycasting against each candidate's visible mesh (p.root), falling back to the nearest cylinder hit for finger taps.

2. GPU Memory & 60 FPS Frame Pacing

As Dheeraj Akula noted on DEV and Aguier highlighted in Shipping 3D Browser Games Without a Game Engine, mobile GPU budget and bundle size are critical for instant-play web games. When switching away from a 3D mode, Kingsrune immediately disposes transient shadow maps and post-processing EffectComposer/UnrealBloomPass render targets while enforcing a strict 60 Hz frame accumulator so 120 Hz/144 Hz screens never over-render.

3. Non-Blocking AI Web Worker with Main-Thread Rescue

The 4-tier AI (Novice, Knight, Master, Grandmaster) runs iterative-deepening negamax with alpha-beta pruning, transposition tables, and quiescence search inside an inline Blob Web Worker, paired with a watchdog timer that seamlessly falls back to a bounded main-thread search if a restricted WebView blocks Worker.

Try a match and let me know which visual mode you prefer: https://playgama.ai/play/wob5ok5llhbiuk

Top comments (0)

⌂ 换网址